Bagi anda yang ingin membuat widget breaking news seperi gambar di atas anda bisa menggunakan cara berikut ini. Mungkin anda bertanya-tanya apa guna breaking news di blog ? tentunya untuk menunjukkan artikel terbaru anda pada pengunjung blog. Apa tidak memberatkan kecepatan loadingnya ? tentunya tidak karena kali ini saya akan memebuatnya pada halaman awal saja jadi Breaking news ini tidak akan muncul ketika anda mengklik sebuah postingan, jadi kecepatannya tidak akan terpengaruh.
1. Klik Blogger > Template > Klik edit HTML
Tambahkan code di bawah ini tepat di atas ]]></b:skin> atau </style>
/* CSS Breaking News KUMPUL SEHARI */
#breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#359bed;}
#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 0;margin-right:0;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}} 2. Kemudian tambahkan javascript di bawah ini taruh di atas </body>
3. Taruh dimana saja tepat di antara code pembuka dan penutup <body> Taruh disini </body>
<b:if cond='data:blog.pageType == "index"'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>
</b:if> Penting : Code di atas di bungkung dengan tag kondisi yang berarti hanya bisa terlihat di halaman utama saja. Jika anda menghendaki penggunaannya di seluruh halaman blog silahkan hapus tag kondisinya lalu akan menjadi seperti di bawah ini codenya
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div> Untuk Demonya bisa dilihat di blog ini
