 |
| cara memasang widget breaking news |
Semaikn penasaran jadinya,apakah efek saya yang pemula atau mungkin ada code yang tidak mereka tulis di tutorial mereka.
Namanya blogger newbie,rasa penasaran tetap ada sebelum menemukan tutorial yang bisa di ikuti dan berhasil di praktekan.
Tetapi sampai beberapa hari,ternyata belum bisa ketemu juga tutorial cara memasang breaking news yang berhasil,sehingga saya putuskan mengintip code dan css blog yang ada breakinnewsnya,ide muncul setelah berhari hari googling satu tutorial tersebut.
Tetapi ide intip code html blog yang ada breaking newsnya tidak sia sia,ternyata sukses juga memasang breaking news di blog,berikut Demonya
Berikut ini code dan penerapannya di template blog,barang kali ada yang ingin menggunakannya.
Css:
<style>
@media screen and (max-width:1066px) {
.wrapper {width:100%}
#breakingnews {width:33%}
}
#breakingnews {margin-right:10px;height:35px;line-height:35px;overflow:hidden;width:34.4%;float:left;border-right: 1px solid #ECECEC;}
#adbreakingnews li a {color:#666;transition:all 0.5s ease-in-out;}
#adbreakingnews {float:left;margin-left:110px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0;line-height:35px;border-right:none;}
#breakingnews .breakhead {position: absolute; display: block; float: left; font-size: 14px; font-weight:600; background:$(main.color); color: white; padding:0 10px;}
</style>
Silahkan pasang css tersebut sebelum ]]></b:skin> atau sebelum</head>Js:
<script type='text/javascript'>
//<![CDATA[
// Breaking News===============================
$(document).ready(function(){var e="",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>
Silahkan pasang js tersebut sebelum </body>HTML
<div id='breakingnews'><span class='breakhead'><i class='fa fa-refresh fa-spin'/> Breaking</span> <div id='adbreakingnews'>Loading...</div></div>Silahkan pasang html tersebut sesudah <div id='wrapper'>
