為 Blogger Blog 建立 Breaking News 指示器

---

為 Blogger Blog 建立 Breaking News 指示器

提示 :
1. 本Breaking News(功能)的效果樣式

(電腦版樣式)

(手機版樣式)

(手機版樣式)

2. 進行安裝此小工具之前請您務必先將你的 Blogger Blog 主題作備份。(備份的方法)

安裝此小工具的方法 :

Step 1. 登入您的 Blogger Blog；

Step 2. 點選Blogger控制台版面的「主題」項目，並再點選主題的 " 編輯 HTML "；

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

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

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

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

 /*========================== CSS Breaking News by msdesignbd==========================*/
#breakingnews {margin-right:15px;height:30px;line-height:30px;overflow:hidden;width:100%;float:left;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#EE8F04;}
#adbreakingnews {float:left;margin-left:5px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
#breakingnews .breakhead {position:absolute;display:block;float:left;font-size:11px;font-weight:700;text-transform:uppercase;padding: 2px 6px;} 

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

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

Step 9. 使用電腦鍵盤在此搜尋欄框內輸入 </body>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 </body> 內容段；

Step 10. 將如下的程式碼拷貝張貼到 </body> 的上方 

<script type='text/javascript'>
//<![CDATA[
// Breaking News by msdesignbd.com
$(document).ready(function(){var e="",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Step 11. 將如下的程式碼貼付到你的 Blogger Blog 想要顯示此 Breaking News 的位置。本 D01小站，是將如下的程式碼貼付在 </header> 之下方

<div id='breakingnews'><span class='breakhead'><i class='fa fa-refresh fa-spin'/> Latest</span>
<div id='adbreakingnews'>Loading...</div></div>
<div style='clear: both;'/>

提 示 : 
您也可以在你的 Blogger Blog 中，將此些程式碼貼進入 > 版面配置 > HTML/Javascript 小工具欄位內，並將之儲存 > 再將此 HTML/Javascript 小工具移動佈置到你所希望的版面配置位置  > 並將之儲存。

應用說明 :
您可以自行編定此小工具的外觀效果 

1. 程式碼 : width:100%
改變此 100 數字，可以變更此小工具所顯示的文字領域寬窄。(最大值為 100%)

2. 程式碼 : color:#666
改變此 666 數字，可以變更此小工具所顯示文字的顏色 (例如: 紅色 FF0000)

3. 程式碼 : margin-left:5px
改變此 5px 之 5 數字，可以變更此小工具所顯示文字距離畫面左方邊的距離。數字大，距離則寬。

4. 程式碼 : Latest
此小工具所顯示的文字串之前方帶有一 Latest + 雙箭頭旋轉圖示。您可以改變此 Latest (最新) 文字為你所希望顯示的文字。

提 醒 : 本 D01小站 的效果樣式為將此Latest文字改為 . (點)

5. 程式碼 : Loading...
此小工具初作用時會顯示此 Loading… 的文字串，您可以改變此文字內容為你所希望顯示的文字樣。


以上 / The End.

備 註 : 
如果您對以上的內容有不明白的地方，歡迎您利用留言告知，小編將更詳細為您解說。

---