Cara Membuat Header Widget Breaking News Keren+Responsive di blog

  • Whatsapp
News

Pada postingan kali ini saya akan Share cara membuat widget Breaking News Keren dan resposive yang berjalan sesuai dengan label artikel. Dengan adanya label Headline header blog Breaking News seperti ini, Maka akan membuat blog kita seperti blog portal keren.

Headline seperti ini biasanya dipasang dibawah header menu pada blog, caranya sangat mudah. selain mudah header ini sangat keren dan responsive, headline ini biasanya diterapkan pada blog-blog portal berita. Anda bisa melihat gambar di atas untuk demonya.

Langsung saja, bagaimana caranya memasang Headline di bawah Header blog?.

Berikut caranya:

Seperti biasa, masuk ke akun blogger anda (Draft Blogger), Kemudian pilih Tema => Edit HTML Lalu Letakkan Kode dibawah ini di atas Kode ]]></b:skin> ,  agar lebih mudah mencarinya caranya dengan menekan Tombol Ctrl+F.

/* CSS Breaking News */
#breakingnews {margin:0 0 20px;height:25px;line-height:25px;overflow:hidden;border:0;}
#breakingnews .breakhead {
background: #222;
position:absolute;
font-size: 12px;
text-transform: uppercase;
color: #fff;
padding: 2px 10px;
display: inline-block;
line-height: 22px;
-webkit-transition: background-color .3s;
-moz-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;}
#adbreakingnews li a {font-weight:400;color:#111;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#4db2ec;}
#adbreakingnews {float:left;margin-left:130px;margin-top:0;font-size: 15px}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}


Jika sudah, selanjutnya meletakan Kode di bawah ini di atas Kode </body>

<script>//<![CDATA[
// Breaking News
$(document).ready(function(){var e=”https://www.fathnan.id/”,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>


Jika sudah, sekarang Langkah Terakhir, Tugas anda adalah mencari Kode: <div id=’wrapper’>, Agar lebih mudah dengan meneka Tombol Ctrl+F. Lalu Letakan Kode dibawah ini dibawah Kode <div id=’wrapper’>.

<div id=’breakingnews’><span class=’breakhead’>Terhangat</span>
<div id=’adbreakingnews’>Loading…</div>
</div>


Untuk warna pada Kolom  Widget Breaking News, anda bisa mengaturnya sesuai dengan selera. Done! sekarang blog anda sudah ada Widget Breaking News yang keren.

Pos terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *