2018/4/19

設置有框格及背景色的留言版面


提 示:
1. 本功能效果樣式: 
(原樣式)
(自訂效果樣式)

1.1 請參考 D01小站 的內容樣

提 醒:
進行安裝此小工具之前請您先將你的Blogger Blog主題作安全備份。(備份的方法)

建立本功能的方法 :

Step 1. 登入您的 Blogger Blog ;

Step 2. 在 Blogger Blog 後控制台,點選「主題」項目 > 再點選主題的 " 編輯 HTML ";

Step 3. 將電腦滑鼠點擊所開啟的 HTML 頁面內(任何位置皆可);

Step 4. 按壓電腦鍵盤上的 CTL+ F 兩按鍵,此時 HTML 版面區域內的右上角將出現一個搜尋欄框;

Step 5. 使用電腦鍵盤在此搜尋欄框內輸入 ]]</b:skin>,再按電腦鍵盤上的 Enter 按鍵,之後,HTML 版區將顯現出黃色襯底的 ]]</b:skin> 內容段;

Step 6. 將如下的程式碼拷貝張貼到 ]]</b:skin> 的上方


.comment-block {
background:#EFEFEF; /* Background Color */
border: 1px solid #f57900; /* Border style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; 
}
.comments .comment-thread.inline-thread {
background-color: #FAFAFA; /* Background color behind the replies */
border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
}
.comment-content {
padding:2px 10px 10px 10px;
color:#333333; /* Font Color in Comments */
}
.datetime a {
font-style:italic;
font-size:10px;
margin-left: 2px;
}
.comments .comments-content .user a{
color:#1982D1; /* Author's name color */
font-size: 12px; /* Author's name size */
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block; 
margin:0 0 10px 10px;
padding:0 15px;
color:#3465A1;
text-align:center;
text-decoration:none;
background:#EEEEEE;
border:1px solid #ff00ff;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}
.comments .continue {
border-top: 0px solid #000;
}
.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}
.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
padding: 1px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}

應用設置:
將程式碼中以顏色標記的色碼代碼變更為你意向的顏色代碼,可將內容樣作變化

Step 7. 以上動作確認無誤後,點擊 HTML 版面區域左上方位的儲存主題 ;

Step 8. 完成。(請確認結果)


0 意見:

張貼留言