Cara Membuat Breaking News di Blogger
Breaking news - Pernahkah sobat melihat contoh widget breaking news ? Pasti sudah dong, widget breaking news selalu dipasang dibagian atas, baik dibawah header maupun diatas header.
Breaking news juga berguna untuk memberitahu para visitor berita apa terupdate melalui feed blog sobbat. Nahh untuk itu, mari simak berikut ini..
Tahap Pertama :
1. Login ke Blogger
2. Lihat Tab Tema > Edit HTML
3. Masukkan Kode CSS dibawah ini, Tepat diatas kode ]]></b:skin> atau </style>
/* CSS Breaking News */
#chayabreakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
#chayabreakingnews .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;}
#adchayabreakingnews li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adchayabreakingnews li a:hover {color:#359bed;}
#adchayabreakingnews {float:left;margin-left:75px;margin-top:6px;}
#adchayabreakingnews ul,#adchayabreakingnews li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#chayabreakingnews {margin:20px 0 0 0;margin-right:0;}
#chayabreakingnews .breakhead {padding:6.5px 14px;}
#adchayabreakingnews {margin-left:50px;}}
Lalu, Tambahkan Javascript dibawah ini, Tepat diatas Tag </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://wwwchayaeducation.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(){$("#adchayabreakingnews li:first").slideUp(function(){$(this).appendTo($("#adchayabreakingnews 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>",$("#adchayabreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adchayabreakingnews").html("<span>No result!</span>")},error:function(){$("#adchayabreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>Ganti http://www.chayaeducation.com dengan link blog sobat
Kemudian, Letakkan kode dibawah ini Tepat dibawah kode <body ATAU diatas </body>
<div id='chayabreakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adchayabreakingnews'>Loading...</div></div>
Jika sobat Hanya ingin menampilkannya hanya dihalaman Utama saja, sobat bisa gunakan kode dibawah ini.
<b:if cond='data:blog.pageType == "index"'>
<div id='chayabreakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adchayabreakingnews'>Loading...</div></div>
</b:if>
Nahh sobat, Mungkin itu saja yang bisa admin berikan pada hari ini, semoga bisa bermanfaat unyuk sobat semua+_+
Komentar
Posting Komentar