博客園樣式

番茄西紅柿發布于2019-04-23 13:40 / 3508人閱讀

摘要：美化博客側邊欄公告博客園側邊欄樣式插入時鐘插入訪客來源插入總訪客數插入通訊組件網易音樂將生成后的代碼進博客園后臺設置博客側邊欄公告支持代碼支持代碼輸入框中下面的是筆者博客的樣式，不做解釋。

博客園側邊欄樣式

插入時鐘：
http://www.blogclock.cn/
插入訪客來源：
http://s11.flagcounter.com/more/Fe64/
插入總訪客數：
http://www.amazingcounters.com/
插入QQ通訊組件：
https://connect.qq.com/intro/wpa

網易音樂：

https://www.cnblogs.com/hujunzheng/p/4702282.html

將生成后的代碼copy進博客園后臺設置—博客側邊欄公告（支持HTML代碼）（支持JS代碼）輸入框中

下面的是筆者博客的樣式，不做解釋。

如果讀者想設置自己的樣式可參考大神的樣式設置，很詳細也很炫酷：博客園自定義頁面風格設計后續篇(頁面設計模式及代碼高亮鼠標點擊效果升級)

公告欄贊賞


<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="支持一下">

云服務器 GPU云服務器博客園博客園webrtc wcf博客園 android博客園

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2192.html

設置博客園標題樣式

摘要：博客園設置博客設置，點擊頁面上的權限申請，然后填寫申請的理由，耐心等幾分鐘，再刷新一下，頁面就會顯示支持代碼，博客園也會在用戶郵箱給你發送是否開通權限的郵件。1.向博客園申請js權限　我們需要進入博客園自定義博客模板的頁面，向博客園管理團隊申請頁面運行js的權限。【博客園】->【設置】->【博客設置】，點擊頁面上的js權限申請，然后填寫申請的理由，耐心等幾分鐘，再刷新一下，頁面就會顯示支持...

番茄西紅柿 2019-04-23 13:30 評論0 收藏0
博客園自定義樣式

摘要：個人比較喜歡用來編寫博客，但是博客園自帶的編輯器真的不是很友好啊。。。。。還好，博客園比較人性化的有頁面樣式的自定制功能。碎碎念：已經很長時間沒有更新過博客了，分析一下，一個是太懶了。。。所以很久沒整理一下了。還有就是嫌棄博客園默認的博客界面真的太丑了，作為顏控的我真的無法忍受啊。個人比較喜歡用makedown來編寫博客，但是博客園自帶的編輯器真的不是很友好啊。。。。。還...

ASCH 2019-08-29 14:16 評論0 收藏0
博客園代碼黑色主題高亮設置

摘要：之前做了博客園自定義樣式的相關設置，博客園界面變得順眼一點了。但是代碼塊還是看著比較變扭，習慣黑色主體編輯器的我，顏控的我，不能忍啊。碎碎念：貌似現在喜歡寫博客之前先叨叨一下。。。。之前做了《博客園自定義樣式》的相關設置，博客園界面變得順眼一點了。但是代碼塊還是看著比較變扭，習慣黑色主體編輯器的我，顏控的我，不能忍啊。所以還是改改改。小提示：具體的操作實現參考GitHub：h...

Blackjun 2019-08-29 14:20 評論0 收藏0
個人博客園樣式、背景及細節美化過程

摘要：踩坑注意導入后要勾選禁用默認否則會造成各種顯示問題我的文件可以右鍵查看網頁源代碼獲取，使用時基于主題，懶得折騰的可以直接下載。主頁美化：主要參考嘻哈燒餅的美化，在TA的基礎上增加了對主頁背景、色調以及側邊欄的調整原帖地址：https://www.cnblogs.com/seanshao/p/5716543.html 修改博客園背景的代碼如下（在原帖使用的css文件中修改）： body ...

番茄西紅柿 2019-04-23 13:10 評論0 收藏0
前端小白也能快速學會的博客園博客美化全攻略

摘要：前端小白也能快速學會的博客園博客美化全攻略呦，博客園的自我修養是什么第一條，別只顧收藏和偷師呀，記得點推薦或關注本人喔美化方法論簡介一般而言，需要選一個默認的，然后在該基礎上調整。或者也可進博客園園子頁面，發狀態博客園團隊，申請開通權限。前端小白也能快速學會的博客園博客美化全攻略 A呦V，博客園er的自我修養是什么？第一條，別只顧收藏和偷師呀，記得點推薦或關注本人喔~ 美化方法論簡...

StonePanda 2019-08-23 15:09 評論0 收藏0