BT | 在特定帖子的上栏出现设有链接按钮的提示条栏

欢迎光临喵子屋!Blogger们可点击订阅以守住更多更新!谢谢!

订阅

整体效果如下：

* 本帖子也有实时设定给你查看效果哦 ，希望你们能顺利看到。

缺点：No Exit Button to close ：“X”。

开发更多效果与补充/修补后的大神可以在以下分享哦。

 此篇的这款只是在特定某个网页/帖子。

0、使用例子：

使用的目的可很广，可用在很多方面，全看您的想法，比如：

你有很多帖子，你新建了一个新帖子是关于宣传某样东西的，你可以在此帖子HTML内加入代码，设置为那样商品的链接，这样，您的浏览者点进你那张帖子，就会出现这个。

其他例子/传送门使用法（参考）：


商品链接 - 分享折扣、推荐的商店、商品的页面。
目录链接 - 教程目录、首页、同系列的帖子。
说明链接 - 正说明的东西的网站链接。
推荐网站 - 推荐的网站、平台链接。
指明帖子 - 关系到某个帖子。
个人主页 - 关于、个人资料、FB、IG等。
搬家通告 - 新网站链接。
订阅关注 - 直接关注按钮。



 1、设定步骤：

 1.1 加入CSS，它的外观代码。

Blogger使用者的教程可查看这里(1-5):

  Blogger > 主题背景 > 修改HTML

  Ctrl+F搜寻“

]]></b:skin>

”字眼。

  Highlight以下框框内所有的代码、Ctrl+C复制。

/*----POST Banner----*/ .at-banner { z-index: 999999; position: fixed; top: 0; right: 0; left: 0; background: rgba(255, 77, 154, 0.74); width: 100%; border-bottom: 1px solid #EEEEEE; padding: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translateY(-150%); transform: translateY(-150%); color: #FFFFFF; font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-animation: at-banner-slide-in 0.8s ease forwards; animation: at-banner-slide-in 0.8s ease forwards; } .at-banner__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 90%; margin: 0 auto; padding: 10px 40px; -webkit-box-sizing: border-box; box-sizing: border-box; } .at-banner__title { font-size: 18px; } .at-banner__text { margin: 0 20px 0 0; } .at-banner__button { display: inline-block; background: #FFFFFF; height: 40px; border: 0; border-radius: 2px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 0 20px; color: #974DF3; font-size: 12px; font-weight: 700; line-height: 40px; text-decoration: none; white-space: nowrap; } .at-banner__button:hover {background: #fff;} @-webkit-keyframes at-banner-slide-in { 0% { -webkit-transform: translateY(-150%); transform: translateY(-150%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes at-banner-slide-in { 0% { -webkit-transform: translateY(-150%); transform: translateY(-150%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } }

 框框内的所有代码Ctrl+V Paste粘贴到刚刚找到的字眼——“]]></b:skin>”的下面。

 按下橙色按钮——保存。

 1.2 加入HTML，它内容呈现的代码。

Blogger使用者的教程可查看这里(6-9):

  Blogger > 博文 > 新博文

  切换到[HTML]模式（点击HTML按钮格）。

 把以下框框内的内容Highlight，并Ctrl+C复制到新博文的编写空白处。

<div class="at-banner"> <div class="at-banner__content"> <div class="at-banner__text"> 内容<b>粗字内容</b></div> <a class="at-banner__button" href="链接">按钮内容</a> <br /> <br /></div>

 更改代码中的“内容”字眼到您想要写的内容，和链接地址取代“链接”字眼等就可发布了。其他内容可切换回普通模式继续写入。



- 完成(๑′ᴗ‵๑) -

同样的，若有人需要，才增添代码的说明。