Widget - Cara Menambahkan WidgetBreaking News Feed Di Blog
– bagi anda yang sudah memiliki Blog dengan pengunjung yang cukup banyak pasti
memiliki Pengunjung setia yang selalu rutin mengunjungi Blog sobat untuk mencari
Artikel atau informasi terbaru pada blog sobat. maka sangat penting adanya
sobat mengetahui Cara Menambahkan Widget Breaking News Feed Di Blog. Dengan
memasang Widget Breaking News di blog sobat maka Pengunjung akan lebih
termudah kan untuk mencari artikel terbaru di blog sobat.
Bagi
anda yang khawatir akan kecepatan blog yang berkurang sangat banyak apabila
menambah Widget baru di blog sobat, ini adalah solusinya. Karena cara yang saya
ajarkan ini sudah sangat ringan dengan menggabungkan CSS, HTML dan Javascript.
Baiklah, langsung saja kita cari tahu cara membuatnya berikut ini.
1.
Pertama Buka Blog sobat > Template > Edit Html >
2.
Tambahkan Kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>
CSS
/* CSS Breaking News */
#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;}}
Kemudian tambahkan kode
di bawah ini sebelum Tag Penutup
</body>
Javascript
<script type='text/javascript'>
//<![CDATA[
// Breaking News$(document).ready(function(){var e="http://azmidzgn.blogspot.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>
Ganti
http://azmidzgn.blogspot.com dengan alamat blog Sobat
Kemudian
simpan kode di bawah ini di mana saja bebas, terapkan di dalam Tag body (di
antara tag pembuka <body> dan tag Penutup </body>)
HTML
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>
Jika
ingin menampilkan breking news ini hanya pada halaman utama saja, silahkan
bungkus Markup di atas dengan tag kondisional khusus halaman utama
HTML
<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>
3
terakhir simpan Template dan Lihat Hasilnya.
Demikianlah
informasi mengenai Cara Menambahkan Widget Breaking News Feed Di Blog. Semoga
bermanfaat dan menambah ilmu pengetahuan Tips Blogger sobat. selamat Mencoba.
EmoticonEmoticon