摘要:美化博客側(cè)邊欄公告博客園側(cè)邊欄樣式插入時鐘插入訪客來源插入總訪客數(shù)插入通訊組件網(wǎng)易音樂將生成后的代碼進博客園后臺設(shè)置博客側(cè)邊欄公告支持代碼支持代碼輸入框中下面的是筆者博客的樣式,不做解釋。
插入時鐘:
http://www.blogclock.cn/
插入訪客來源:
http://s11.flagcounter.com/more/Fe64/
插入總訪客數(shù):
http://www.amazingcounters.com/
插入QQ通訊組件:
https://connect.qq.com/intro/wpa
網(wǎng)易音樂:
https://www.cnblogs.com/hujunzheng/p/4702282.html
將生成后的代碼copy進博客園后臺設(shè)置—博客側(cè)邊欄公告(支持HTML代碼)(支持JS代碼)輸入框中
下面的是筆者博客的樣式,不做解釋。
如果讀者想設(shè)置自己的樣式可參考大神的樣式設(shè)置,很詳細也很炫酷:博客園自定義頁面風格設(shè)計 后續(xù)篇(頁面設(shè)計模式及代碼高亮 鼠標點擊效果升級)
公告欄贊賞
<meta charset="UTF-8"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script> <script> $(function(){ $(".pay_item").click(function(){ $(this).addClass(checked).siblings(.pay_item).removeClass(checked); var dataid=$(this).attr(data-id); $(".shang_payimg img").attr("src","https://www.cnblogs.com/images/cnblogs_com/tynam/1353054/t_"+dataid+".jpg"); $("#shang_pay_txt").text(dataid=="alipay"?"支付寶":"微信"); }); }); function dashangToggle(){ $(".hide_box").fadeToggle(); $(".shang_box").fadeToggle(); } script> <style> .content{width:80%;margin:10px auto;} .hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;} .shang_box{width:430px;height:430px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;} .shang_box img{border:none;border-width:0;} .dashang{display:block;margin:2px auto;color:rgba(255, 255, 255, 1);text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;} .dashang:hover{opacity:0.8;padding:2px;font-size:17px;} .dashangText{display:block;ne-height:25px;color:rgba(255, 255, 255, 1);text-align:center;text-decoration:none;border-radius:13px;font-weight:2px;font-size:9px;transition: all 0.3s;padding-bottom:15px;} .dashangText:hover{opacity:0.8;ont-size:14px;} .shang_close{float:right;display:inline-block;} .shang_logo{display:block;text-align:center;margin:20px auto;} .shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background:#fff;font-family: Microsoft YaHei;margin-top: 7px;margin-right:2px;} .shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;} .shang_payimg{width:140px;border:6px solid rgba(163, 82, 225, 1) ;margin:0 auto;border-radius:3px;height:140px;} .shang_payimg img{display:block;text-align:center;width:140px;height:140px; } .pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;} .radiobox{width: 16px;height: 16px;background: url(https://www.cnblogs.com/images/cnblogs_com/tynam/1353083/o_radio2.jpg);display: block;float: left;margin-top: 5px;margin-right: 14px;} .checked .radiobox{background:url(https://www.cnblogs.com/images/cnblogs_com/tynam/1353083/o_radio1.jpg);} .shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;} .shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;} .shang_info{clear:both;} .shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;} style> <p><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="支持一下">
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/2192.html
摘要:博客園設(shè)置博客設(shè)置,點擊頁面上的權(quán)限申請,然后填寫申請的理由,耐心等幾分鐘,再刷新一下,頁面就會顯示支持代碼,博客園也會在用戶郵箱給你發(fā)送是否開通權(quán)限的郵件。1.向博客園申請js權(quán)限 我們需要進入博客園自定義博客模板的頁面,向博客園管理團隊申請頁面運行js的權(quán)限。【博客園】->【設(shè)置】->【博客設(shè)置】,點擊頁面上的js權(quán)限申請,然后填寫申請的理由,耐心等幾分鐘,再刷新一下,頁面就會顯示支持...
摘要:之前做了博客園自定義樣式的相關(guān)設(shè)置,博客園界面變得順眼一點了。但是代碼塊還是看著比較變扭,習慣黑色主體編輯器的我,顏控的我,不能忍啊。 碎碎念: 貌似現(xiàn)在喜歡寫博客之前先叨叨一下。。。。之前做了《博客園自定義樣式》的相關(guān)設(shè)置,博客園界面變得順眼一點了。 但是代碼塊還是看著比較變扭,習慣黑色主體編輯器的我,顏控的我,不能忍啊。所以還是改改改。 小提示:具體的操作實現(xiàn)參考GitHub:h...
摘要:踩坑注意導入后要勾選禁用默認否則會造成各種顯示問題我的文件可以右鍵查看網(wǎng)頁源代碼獲取,使用時基于主題,懶得折騰的可以直接下載。主頁美化: 主要參考嘻哈燒餅的美化,在TA的基礎(chǔ)上增加了對主頁背景、色調(diào)以及側(cè)邊欄的調(diào)整 原帖地址:https://www.cnblogs.com/seanshao/p/5716543.html 修改博客園背景的代碼如下(在原帖使用的css文件中修改): body ...
摘要:前端小白也能快速學會的博客園博客美化全攻略呦,博客園的自我修養(yǎng)是什么第一條,別只顧收藏和偷師呀,記得點推薦或關(guān)注本人喔美化方法論簡介一般而言,需要選一個默認的,然后在該基礎(chǔ)上調(diào)整?;蛘咭部蛇M博客園園子頁面,發(fā)狀態(tài)博客園團隊,申請開通權(quán)限。 前端小白也能快速學會的博客園博客美化全攻略 A呦V,博客園er的自我修養(yǎng)是什么?第一條,別只顧收藏和偷師呀,記得點推薦或關(guān)注本人喔~ 美化方法論簡...
閱讀 739·2023-04-25 19:43
閱讀 3983·2021-11-30 14:52
閱讀 3811·2021-11-30 14:52
閱讀 3872·2021-11-29 11:00
閱讀 3806·2021-11-29 11:00
閱讀 3905·2021-11-29 11:00
閱讀 3584·2021-11-29 11:00
閱讀 6192·2021-11-29 11:00