Cara Membuat Breaking News di Blogger - Tutorial kali ini akan membahas tetang pembuatan breaking news diblog. Biasanya breaking news ini ditempatkan di template yang notabennya Blog Berita.
Bagi sobat yang ingin memasang nya di template silahkan ikuti langkah dibawah ini.
Langkah Membuat Breaking News di Blogger
1. Masuk ke Blogger > Klik Template > Klik Edit HTML
2. Tempatkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* 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;}}3. Tambahkan kode JavaScript dibawah ini tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://minandzgn.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://minandzgn.blogspot.com dengan alamat blog sobat.
4. Selanjutnya simpan kode di bawah ini di mana saja bebas, terapkan di dalam tag body (Diantara tag pembuka <body> dan tag penutup </body>)
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>5. Jika ingin menampilkan breaking news ini hanya pada halaman utama saja, silakan bungkus markup di atas dengan tag kondisional khusus halaman utama
<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>6. SAVE dan lihat hasilnya.
Sekian untuk Tutorial Membuat Breaking News di Blogger. Terimakasih
0 comments: