Jika sebelumnya saya telah memberikan tutorial Cara Memasang Breaking News Berjalan di Blog, kali ini saya akan memberikan Tutorial cara memasang breaking news yang lebih ringan dan lebih flat untuk kalian pasang di Blog, supaya blog kalian tidak terlalu berat, Breaking News ini sudah responsive dan juga keren, untuk demonya bisa kalian lihat dibawah
Demo nya adalah seperti gambar di bawah ini
Tanpa basa basi langsung saja kita mulai Tutorial singkat ini
Memasang Breaking News Flat Responsive di Blog
1.Buka Blogger
2.Masuk ke Blog yang anda ingin pasang, lalu pilih Template dan klik Edit HTML
3.Cari kode ]]></b:skin> dan letakan kode dibawah ini diatasnya
/* Breaking News */
#beakingnews{width:100%;margin:0 auto;line-height:55px;height:55px;background:#191919;overflow:hidden;border-bottom:5px solid #f39c12;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 20px;color:#fff;font-size:1.2rem;font-weight:700;text-transform:uppercase}
#recentpostbreaking{color:#fff;float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#fff;}#recentpostbreaking li a:hover{text-decoration:underline;}
#beakingnews .tulisbreaking .tulisyell{color:#ffc363}
#flippy {
text-align: center;
}
#flippy button {
background: #aa65c7;
color: #fff;
text-align: center;
margin: 0 auto;
border: none;
border-radius: 3px;
padding: 8px 16px;
margin: 10px auto;
font-size: 14px;
font-weight: bold;
box-shadow: 0px 3px 0px 0px #883da7;
vertical-align: middle;
cursor: pointer;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
transition: background 0.1s ease-in-out;
}
#flippy button:hover, #flippy button:focus {
background: #9e4fbf;
outline: none;
}
#flippanel {
padding: 1px;
text-align: left;
background: #f5f5f5;
border: 0px;
}
#flippanel {
padding: 24px;
display: none;
}<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var e="http://www.dionimouz.com",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentpostbreaking li:first").slideUp(function(){$(this).appendTo($("#recentpostbreaking ul")).slideDown()})}var n,r,i="",a=e.feed.entry;if(void 0!==a){i="<ul>";for(var o=0;o<a.length;o++){for(var l=0;l<a[o].link.length;l++)if("alternate"==a[o].link[l].rel){n=a[o].link[l].href;break}r=a[o].title.$t,i+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}i+="</ul>",$("#recentpostbreaking").html(i),setInterval(function(){t()},5e3)}else $("#recentpostbreaking").html("<span>No result!</span>")},error:function(){$("#recentpostbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>4.Silahkan Simpan Template
Penerapan Breaking News Flat Responsive di Blog
1.Untuk masalah penerapan Breaking News ini copy kode dibawah ini dan letakan di bagian sesuka anda
<div id='beakingnews'><span class='tulisbreaking'>Breaking <span class='tulisyell'>News</span></span>
<div id='recentpostbreaking'>Loading...</div>
</div>
<div class='clear'/>Lebih bagus kalau di taruh diatas / dibawah Navigasi Blog
Terserah anda mau ditaruh dimana yang penting terlihat bagus di mata pengunjung
Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.
