Thursday, February 23, 2017

Modifikasi Breaking News Widget Arlina Design

Pada kesempatan kali ini blog Iumari akan berbagi tutorial terbaru tentang Cara Modifikasi Breaking News Widget Arlina Design.

Modifikasi Breaking News Widget Arlina Design

Lalu apa sih kegunaan widget Breaking News itu?


Breaking News yang anda pasang di blog akan berfungsi untuk menampilkan beberapa konten terbaru anda di blog. Widget Breaking News yang akan saya bagikan sangatlah ringan. Jadi, anda tidak perlu khawatir blog anda akan berat. Jika anda tertarik untuk Memasang Widget Headline Breaking News di Blog, silakan ikuti tutorial :

Bagaimana bentuk dari widget Breaking News itu?


Kebetulan di blog ini sudah saya pasang widget Breaking News seperti pada gambar di bawah ini atau anda bisa cek halaman depan blog ini

Modifikasi Breaking News Widget Arlina Design

Widget ini salah satu kebanggaan dari blog Arlina Design di artikelnya Cara Menambahkan Breaking News Feed di Blog, jika anda menyukai Breaking News yang simpel dan ringan, tidak ada salahnya jika anda menambahkan widget Breaking News berikut ini.

Cara Modifikasi Breaking News Widget Arlina Design


1. Seperti biasa login dulu ke blogger > Template > Edit HTML > Salin dan tambahkan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* CSS Breaking News */
#breakingnews{position:relative;font-family:'Roboto Condensed',sans-serif;margin:20px 20px 0 20px;height:50px;line-height:26px;overflow:hidden;padding:4px 0;border-top:2px solid #ecf0f1;border-bottom:2px solid #ecf0f1}
#breakingnews:after{content:'\f0c9';font-family:fontawesome;color:#bdc3c7;position:absolute;right:18px;font-size:1.2rem;font-weight:normal;top:12px;text-align:center}
#breakingnews .breakhead{background:#e74c3c;color:#fff;display:inline-block;float:left;font-size:17px;font-weight:700;padding:6px 12px}
#adbreakingnews{float:left;margin-left:12px;margin-top:6px;line-height:28px}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
#adbreakingnews li a {font-weight:400;color:#000;margin-top:10px;}
#adbreakingnews li a:hover {color:#e74c3c;}
#adbreakingnews li a:before{content:'\f079';font-family:fontawesome;display:inline-block;float:left;margin:0 8px 0 0;line-height:29px;}

2. Setelah itu salin dan tambahkan kode di bawah ini tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://www.iumari.com",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>

Jangan lupa untuk mengganti url blog ini dengan blog anda

3. Kemudian salin kode di bawah ini dan tambahkan bebas dimanapun diantara area <body> dan </body> dalam template. Seperti contoh di blog ini saya tambahkan di dalam konten dengan id content-wrapper

<div id='breakingnews'><span class='breakhead'>Breaking News</span>
<div id='adbreakingnews'>Loading...</div></div>

4. Simpan template.

Nah itulah tutorial Cara Modifikasi Breaking News Widget Arlina Design yang bisa Iumari berikan kali ini, terima kasih sudah berkunjung dan salam blogger Indonesia.

Artikel Terkait

Saat ini saya mengelola blog yang beralamat di Iumari, salam kenal dan sehat selalu.