Cara Membuat Breaking News Responsive Pada Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Breaking News adalah berita pembukaan yang mana didalam Website atau Blog digunakan untuk menampilkan untuk membuka berita utama atau berita terbaru dari artikel yang diposting pada Website atau Blog, widget ini responsive ,sangat indah dan juga profesional. Widget ini dapat menjadikan tampilan Website atau Blog anda terlihat profesional, widget ini sangat ringan digunakan sehingga tidak mengganggu loading Website atau Blog anda.
Widget ini sangat berguna kepada pengunjung dalam mengetahui artikel terbaru yang ada pada Website atau Blog dan walaupun tersedia susunan artikel selanjutnya, karena pengguna baru yang melawat ke Website atau Blog ini dari Google hanya boleh melihat pemberitahuan apa yang mereka perlukan dan mereka tak akan kembali ke laman utama untuk pemberitahuan lebih lanjut. Jadi, pada masa sekarang widget ini akan menjadi sangat berguna kepada pengunjung. Ia akan menunjukkan jumlah judul artikel yang anda tulis dalam Website atau Blog anda. Saya sangat merekomendasikan widget ini untuk anda.

Widget ini sama dengan menyambut pengunjung yang menyuguhkan judul artikel yang diposting pada Website atau Blog, ia tampil dalam gaya animasi muncul dari bawah ke atas dalam satu kemasan kotak persegi panjang atau horizontal box. Widget ini tidak menggunakan jQuery karena dibangkitkan hanya dengan menggunakan CSS JavaScript yang ringan bagi Website atau Blog anda, dengan tambahan ikon dari Font Awesome yang membuat widget ini cantik dan indah yang sedang trend dizaman modern masa kini. Banyak Website atau Blog profesional yang popular menggunakan widget ini walau dalam gayanya sendiri dan anda pun boleh mereka atau mendesain widget ini sesuai dengan gaya anda.
Sebelum anda menerima tutorial dari saya, alangkah baiknya jika anda melihat hasil berikut supaya anda yakin dalam menerapkan widget ini kedalam Website atau Blog anda.

Result

1. Login ke Blogger>Template>Edit HTML
2. Letakkan CSS berikut diatas / sebelum tag ]]></b:skin> atau tag </style>⇩

/* Responsive Breaking News By rahmatarifish.blogspot.com */
#ra-breakingnews {margin:0px 0 0 0;margin-left:0px;margin-right:0px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #006600;}
#ra-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #006600;color:#fff;display:block;float:left;font-family:Open Sans;font-size:16px;font-weight:420;text-transform:uppercase;padding:6.5px 22px;}
#breaking-raish-news li a {font-family:Open Sans;font-weight:420;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-raish-news li a:hover {color:#009900;}
#breaking-raish-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-raish-news ul,#breaking-raish-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#ra-breakingnews {margin:0px 0 0 0;margin-right:0;}
#ra-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-raish-news {margin-left:50px;}}

3. Letakkan JavaScript berikut diatas / sebelum tag </body>⇩

<script type='text/javascript'>
//<![CDATA[
// Responsive Breaking News By rahmatarifish.blogspot.com
$(document).ready(function(){var e="url blog anda",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-raish-news li:first").slideUp(function(){$(this).appendTo($("#breaking-raish-news 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+'">'+r+"</a></li>"}s+="</ul>",$("#breaking-raish-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-raish-news").html("<span>No result!</span>")},error:function(){$("#breaking-raish-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

4. Letakkan HTML berikut dibawah /selepas tag </header>⇩

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='ra-breakingnews'><span class='head-breaking'><i class='fa fa-bolt'/></span>
<div id='breaking-raish-news'>Loading...</div></div>
</b:if>
</b:if>

5. Tukar tulisan "url blog anda" yang berwarna biru dengan url blog anda.

6. Save Template.

7. Alhamdulillaah, tutorial sudah siap.