√ Cara Menciptakan Widget Breaking News Di Blog

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

Salah satunya yakni widget breaking news atau widget news ticker.

Widget ini bantu-membantu sama saja mirip widget recent post yang sudah pernah aku 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 ibarat sebuah headline atau goresan pena berjalan dibagian atas blogger.

Sehingga terlihat mirip sebuah info terbaru yang harus dilihat atau dibaca oleh setiap pengunjung website Anda.

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

Kalau kau 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 mempunyai desain yang sangat sederhana namun tetap terlihat keren dan Anda tidak perlu khawatir alasannya widget ini cukup ringan jadi tidak akan menciptakan loading blog menjadi usang atau berat.

Jika Anda tertarik untuk menciptakan 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 arahan css ini sebelum arahan ]]></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 arahan j4vascript ini sebelum arahan </body>

<script type='text/j4vascript'> //<![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="widget untuk blogger dengan banyak sekali macam fungsi dan desain yang keren √ Cara Membuat Widget Breaking News di Blog" title="√ Cara Membuat Widget Breaking News di Blog" src="'+r.media$thumbnail.url+'"/>'}catch(t){o=""}var c=r.title.$t;a+="<li>"+o+'<h3><a title="√ Cara Membuat Widget Breaking News di Blog" 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/j4vascript",document.getElementsByTagName("body")[0].appendChild(t)}); //]]> </script>

5. Terakhir letakan arahan html ini dimana saja yang Anda inginkan untuk menampilkan widget breaking news, asalkan masih di bab tag pembuka <body> dan tag epilog </body>. Saran aku memasangnya di bawah hidangan 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 menciptakan widget breaking news di blog, biar bermanfaat.
Sumber http://www.caramanual.com

Buat lebih berguna, kongsi:

1.2k Google Facebook Twitter