Cara Membuat Widget Breaking News di Blog

Banyak sekali widget-widget untuk blogger dengan berbagai macam fungsi dan desain yang keren.

Salah satunya yaitu widget breaking news atau widget news ticker.

Widget ini sebenarnya sama saja seperti widget recent post yang sudah pernah saya jelaskan sebelumnya.

Yaitu berfungsi untuk menampilkan postingan terbaru dengan dilengkapi gambar atau thumbnail dan juga efek slide yang halus.

Namun bedanya widget breaking news dan recent post ini terletak pada desainnya, widget breaking news ini didesain khusus menyerupai sebuah headline atau tulisan berjalan dibagian atas blogger.

Sehingga terlihat seperti sebuah berita terbaru yang harus dilihat atau dibaca oleh setiap pengunjung website Anda.

Nah, widget news ticker ini sangat cocok dipasang pada blog berita atau blog yang sering melakukan update konten artikel setiap hari.

Kalau kamu punya blog berita, otomotif, olahraga, teknologi, atau lainnya widget ini sangat mendukung untuk menambah jumlah view blog Anda.

Widget breaking news berjalan di blog ini memiliki desain yang sangat sederhana namun tetap terlihat keren dan Anda tidak perlu khawatir karena widget ini cukup ringan jadi tidak akan membuat loading blog menjadi lama atau berat.

Jika Anda tertarik untuk membuat widget breaking news di blog silahkan ikuti langkah-langkahnya di bawah ini.

Cara Memasang Widget Breaking News di Blog

DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Kemudian tambahkan kode css ini sebelum kode ]]></b:skin> atau </style>

/* CSS News Ticker */
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}

Untuk mengubah warna silahkan gunakan Tool Kode Warna.

4. Lalu tambahkan kode javascript ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News Ticker
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10);return e[parseInt(a,10)]+" "+n+" "+i}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img alt="'+r.title.$t+'" title="'+r.title.$t+'" src="'+r.media$thumbnail.url+'"/>'}catch(t){o=""}var c=r.title.$t;a+="<li>"+o+'<h3><a title="'+c+'" href="'+l+'">'+c+'</a></h3><div class="tickermeta"><span>'+getauthor(r.author)+"</span> - <span>"+getmeta(r.published.$t)+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}(function(){$(document).ready(function(){return $(window).scroll(function(){return 200<$(window).scrollTop()?$("#back-to-top").addClass("show"):$("#back-to-top").removeClass("show")}),$("#back-to-top").click(function(){return $("html,body").animate({scrollTop:"0"})})})}).call(this),function(c){var n={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},r={moveUp:function(t,e){r.animate(t,e,"up")},moveDown:function(t,e){r.animate(t,e,"down")},animate:function(t,e,i){var a=t.itemHeight,n=t.options,r=t.element,s=r.children("ul"),l="up"===i?"li:first":"li:last";r.trigger("vticker.beforeTick");var o=s.children(l).clone(!0);if(0<n.height&&(a=s.children("li:first").height()),a+=n.margin+2*n.padding,"down"===i&&s.css("top","-"+a+"px").prepend(o),e&&e.animate){if(t.animating)return;t.animating=!0,s.animate("up"===i?{top:"-="+a+"px"}:{top:0},n.speed,function(){c(s).children(l).remove(),c(s).css("top","0px"),t.animating=!1,r.trigger("vticker.afterTick")})}else s.children(l).remove(),s.css("top","0px"),r.trigger("vticker.afterTick");"up"===i&&o.appendTo(s)},nextUsePause:function(){var t=c(this).data("state"),e=t.options;t.isPaused||t.itemCount<2||s.next.call(this,{animate:e.animate})},startInterval:function(){var t=c(this).data("state"),e=this;t.intervalId=setInterval(function(){r.nextUsePause.call(e)},t.options.pause)},stopInterval:function(){var t=c(this).data("state");t&&(t.intervalId&&clearInterval(t.intervalId),t.intervalId=void 0)},restartInterval:function(){r.stopInterval.call(this),r.startInterval.call(this)}},s={init:function(t){s.stop.call(this);var e=jQuery.extend({},n);t=c.extend(e,t);var i={itemCount:(e=c(this)).children("ul").children("li").length,itemHeight:0,itemMargin:0,element:e,animating:!1,options:t,isPaused:!!t.startPaused,pausedByCode:!1};c(this).data("state",i),e.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:t.margin,padding:t.padding}),isNaN(t.height)||0===t.height?(e.children("ul").children("li").each(function(){var t=c(this);t.height()>i.itemHeight&&(i.itemHeight=t.height())}),e.children("ul").children("li").each(function(){c(this).height(i.itemHeight)}),e.height((i.itemHeight+(t.margin+2*t.padding))*t.showItems+t.margin)):e.height(t.height);var a=this;t.startPaused||r.startInterval.call(a),t.mousePause&&e.bind("mouseenter",function(){!0!==i.isPaused&&(i.pausedByCode=!0,r.stopInterval.call(a),s.pause.call(a,!0))}).bind("mouseleave",function(){!0===i.isPaused&&!i.pausedByCode||(i.pausedByCode=!1,s.pause.call(a,!1),r.startInterval.call(a))})},pause:function(t){var e=c(this).data("state");if(e){if(e.itemCount<2)return!1;e.isPaused=t,e=e.element,t?(c(this).addClass("paused"),e.trigger("vticker.pause")):(c(this).removeClass("paused"),e.trigger("vticker.resume"))}},next:function(t){var e=c(this).data("state");if(e){if(e.animating||e.itemCount<2)return!1;r.restartInterval.call(this),r.moveUp(e,t)}},prev:function(t){var e=c(this).data("state");if(e){if(e.animating||e.itemCount<2)return!1;r.restartInterval.call(this),r.moveDown(e,t)}},stop:function(){c(this).data("state")&&r.stopInterval.call(this)},remove:function(){var t=c(this).data("state");t&&(r.stopInterval.call(this),(t=t.element).unbind(),t.remove())}};c.fn.vTicker=function(t){return s[t]?s[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void c.error("Method "+t+" does not exist on jQuery.vTicker"):s.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="https://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

5. Terakhir letakan kode html ini dimana saja yang Anda inginkan untuk menampilkan widget breaking news, asalkan masih di bagian tag pembuka <body> dan tag penutup </body>. Saran saya memasangnya di bawah menu navigasi.

<div class='ticker-wrap' data-domain='caramanual.com'>
<div id='ticker'>
</div>
</div>

Catatan:
Ganti caramanual.com dengan domain blog atau website milik Anda.

Itulah artikel mengenai cara membuat widget breaking news di blog, semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini