Menambahkan Breaking News Feed Pada Blog - Hari ini Katou akan memberikan tutorial Menambahkan Breaking News Feed Pada Blog.
Tutorial ini Katou dapat dari blog Twisted Shape milik Mbak Arlina.
Nanti, jika sudah berhasil di terapkan maka hasilnya akan seperti ini.
PS : Sebelum menambahkan, Sobat harus sudah menambahkan FontAwesome di template Sobat.Login Blogger.com -> Template -> Edit HTML.
Taruh code di bawah ini tepat di atas code ]]></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 #F78297;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}
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://megumi-katou.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>
Jika sudah, simpan code di bawah ini dimana saja asalkan, masih dalam tag body
(Diantara tag pembuka <body> dan tag penutup </body>)
Kalau Katou menaruh di bawah code <div id='post-wrapper'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div> Kalau Sobat ingin menampilkan breaking news ini hanya pada halaman utama saja, gunakan code 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> Yang terakhir, simpan template.
Terima Kasih dan Selamat ber-kreasi.
Ketentuan Berkomentar
- Komentar yang tidak sesuai topik lebih baik disampaikan di halaman Off topic.
- Komentar yang menyertakan link hidup tidak akan ditampilkan / dihapus.
- Format link yang diterima :
- http://megumi-katou.blogspot.com ganti menjadi Megumi Katou.
- http://megumi-katou.blogspot.com/p/sitemap.html ganti menjadi megumi[-]katou[dot]blogspot[dot]com/p/sitemap[dot]html.
- blogger.com ganti menjadi blogger atau blogger[dot]com.
- Gunakan Name/URL untuk Kunjungan Balik.
- 26 maret 2015
EmoticonEmoticon