Beranda Tips Cara Membuat Header Widget Breaking News di Blog

Cara Membuat Header Widget Breaking News di Blog

News

Cara Membuat Header Widget Breaking News di Blog – 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 blog kita akan terlihat seperti blog-blog portal yang keren.

Headline seperti ini biasanya dipasang di bawah 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.

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 di bawah ini tepat 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, langkah Terakhir, tugas anda adalah mencari Kode: <div id=’wrapper’>, agar lebih mudah dengan meneka tombol Ctrl+F. Lalu Letakan Kode di bawah ini tepat setelah 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here