快好知 kuaihz

知更鸟Begin主题右侧滚动条按钮美化(更新) —— WordPress美化

近日去仙踪小站博客闲逛,发现他们的右侧滚动条按钮比知更鸟Begin主题自带的要好看,心里痒痒,于是折腾美化成功,效果见下图:

 

代码部署

把下面的代码复制,粘贴到:后台→外观→主题选项→定制风格→自定义样式

[reply]

/*右侧滚动条美化*/

#scroll{width:32px;float:rightright;position:fixed;rightright:10px;bottombottom:50px;z-index:9999;}#scroll li a{font-size:16px;color:#fff;width:32px;height:32px;line-height:28px;text-align:center;vertical-align:middle;margin-top:4px;display:block;cursor:pointer;border:1px solid #ddd;border-radius:15px;box-shadow:0 1px 1px rgba(0,0,0,0.04);}#scroll li a:hover{background:#2f889a;color:#fff;border:1px solid #2f889a;transition:all .2s ease-in 0s;}.scroll-h{background-color:#ff5e5c !important;}.scroll-c{background-color:#24a5db !important;}.scroll-b{background-color:#ff9531 !important;}#gb2big5{background-color:#aec534 !important;}.qr{background-color:#4a4a4a !important;}.qqonline a{background:#39c!important;}@media screen and (min-width:900px){#scroll li a:hover{background:#2f889a;color:#fff;border:1px solid #2f889a;transition:all 0.2s ease-in 0s;}}.qr-img{position:fixed;background:#fff;bottombottom:50px;rightright:50px;max-width:300px;z-index:9999;display:none;border-radius:4px;padding:10px 10px 2px 10px;animation:fade-in;animation-duration:0.5s;-webkit-animation:fade-in 0.5s;border:1px solid #ddd;box-shadow:0 1px 1px rgba(0,0,0,0.05);}#output img{position:absolute;top:72px;rightright:72px;width:25px;height:25px;}.qr .fa-qrcode{font-size:20px !important;line-height:32px !important;}.qr-img .arrow{position:absolute;font-size:26px;bottombottom:2px;}.arrow-y{color:#fff;rightright:-8px;}.arrow-z{color:#c6c6c6;rightright:-9px;}#output td{border:none;}#output td{padding:0;}.page-template-template-blog #scroll li a.scroll-c,.page-template-template-code #scroll li a.scroll-c,.page-template-template-links #scroll li a.scroll-c,.page-template-template-archives #scroll li a.scroll-c,.page-template-template-cms #scroll li a.scroll-c,.page-template-template-hot #scroll li a.scroll-c,.page-template-template-tag #scroll li a.scroll-c,.page-template-template-tougao #scroll li a.scroll-c,.page-template-template-contact #scroll li a.scroll-c,.page-template-template-message #scroll li a.scroll-c,.page-template-template-baidu #scroll li a.scroll-c{display:none;}

[/reply]

效果图:

注意:

主题更新后添加了搜索栏目图标,需添加一下css,搜索图标才能上色。

#scroll li a {

    background: #2f9a3c;

}

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:美化  美化词条  知更鸟  知更鸟词条  右侧  右侧词条  WordPress  WordPress词条  滚动  滚动词条  
优化

 修改已收录文章的建议

 【12360网站】修改已收录文章的建议  我们自己站内已经收录的文章能不能作二次修改,主要是害怕丧失此页面的收录,甚至影响到首页的排名。其实这个行为对于网站优...(展开)