Membuat Breakingnews Tricker Responsive Pada Blogger

Pernah berkunjung ke situs situs dengan niche berita harian, pasti pernah lihat kan breakingnews anmiasi bergerak bergantian memperlihatkan judul artikel terbaru pada seitus tersebut, nah itu yang dinamakan dengan Breaking News Tricker. Bila anda sedang mencoba membuat niche serupa, seputar berita-berita harian yang katanya bakal ramai pengunjung jika terus diupdate, tidak ada salahnya apabila memasang breakingnews tricker agar situs tampak profesional dan menarik

Pada dasarnya, headline breakingnews digunakan sebagai media alternatif untuk mewakili widget posting terbaru. Widget ini juga dapat menarik perhatian pengunjung untuk membaca artikel terbaru pada blog. Nah pada kesempatan kali ini saya akan membagikan cara membuat brekingnews tricker ala Minima Colored Premium karya Arlina Fitriyani. Mau lihat templatenya langsung? Silahkan dilihat, jika minat kontak saja Mbak Arlina untuk membelinya.

LIHAT DEMO

Membuat Breakingnews Tricker Responsive Pada Blogger

1. Login Blogger, Dashbor > Template > Edit HTML

2. Letakan kode dibawah ini tepat diatas </head> , namun jika sudah ada pada template silahkan dilewati.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

3. Setelah itu letakan kode dibawah ini diatas ]]></b:skin>

/* CSS Breaking News */#breakingnews {margin:15px 0 0 0;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:'Roboto Condensed';font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}#adbreakingnews li a {font-family:'Open Sans';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}/* CSS Homepage Responsive */@media only screen and (max-width:768px){.img-thumbnail {margin:0 10px 0 0;}}@media only screen and (max-width:640px){#content-wrapper {padding:0;}h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:18px;margin:20px 0;clear:both;padding:20px 0 0 0;}.post {padding:15px;}.post-body {margin-bottom:10px;}.post-vinfo {margin-left:0;}.img-thumbnail {width:100%;height:auto;margin:0;}.img-thumbnail img {width:100%;height:auto;}#breakingnews {margin:20px 0 0 0;margin-right:0;}#breakingnews .breakhead {padding:6.5px 14px;}#adbreakingnews {margin-left:50px;}.post .label-info {left:15px;top:15px;}}@media only screen and (max-width:480px){h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:16px;}.post-body, .comment-info {display:none!important;visibility:hidden;width:0;height:0;}#breakingnews {display:none;}}

4. Cari kode </body> , letakan kode dibawah ini tepat diatasnya.

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="URL BLOG ANDA",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>

5. Nah langkah terakhir adalah meletakan Breakingnews itu sendiri, mau dimana? Diatas header, diatas postingan, diatas footer, dibawah footer, dibawah menu navigasi, atau lainnya. Nah, sekarang saya akan memberi contoh meletakannya diatas header.

6. Cari kode yang mirip seperti dibawah ini, gunakan Ctrl+F > Ketik Header untuk mencarinya.

*Setelah anda temukan, letakan kode dibawah ini tepat diatasnya.

<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'></i></span>
<div id='adbreakingnews'>Loading...</div></div>

Demikian cara membuat breakingnews ala minimacolored Premium milik Mbak Arlina Fitriyani, dengan menggunakan feature ini saya harap Pageview blog anda semakin bertamah. Semoga bermanfaat