 |
| Breaking News On Blog |
Cara Buat Breaking News Feed di Blog Lebih Lengkap - Berita, siapa yang tidak tau dan mau tau ? Semua orang butuh dengan berita ntarh itu berita media baca ataupun teknologi, berita tidak hanya ada di koran saja karena di blog pun kita bisa menampilkan berita.
Sebelum memulai pastikan di template sobat sudah ada style font awesome jika tidak ada silahkan tambahkan kode di bawah ini tepat sebelum </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>Lanjut salin kode di bawah ini taruh sebelum </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;}}Next Copy kode di bawah niki taruh tepat sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://cyber.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 kode http://cyber.blogspot.com dengan alamat blog sobat.Selanjutnya simpan kode di bawah niki terserah di mana atur dengan kreatifitas sobat, yang penting di antara <body> dan penutup </body>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>Tips jika sobat mau breaking news ini di tampilkan di halaman utama saja silahkan tambahkan markup terntentu seperti di bawah ini :
<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>Nice, simpan template dan cek hasilnya. Sekian Cara Buat Breaking News Feed di Blog Lebih Lengkap, semoga bermanfaat.
Post a Comment