Cara Membuat Headline News Ticker Keren di Blog

Cara Membuat Headline News Ticker Keren - Headline News dikenal sebagai buletin berita, yang dimana berita tersebut baru siarkan. Berita-berita terhangat menjadi daya tarik pembaca untuk mengetahui informasi ter update yang disuguhkan.

Berbicara Headline News, pentingkah widget ini di pasang di Blog? jawabnya tentu saja sangat penting. Alasannya, kita bisa menginformasikan kepada pengunjung bahwa kita baru saja artikel membuat artikel.

Headline News, mirip-mirip seperti recent post yakni memajang artikel terbaru kita. Tetapi bedanya pada Headline News Ticker ini memiliki effect slider yang mana judul artikel bergerak secara bergantian dari bawah ke atas. Pergerakan slide akan berhenti jika kamu menempatkan kursor diatas judul postingan.

Demo

Baca : 2 Cara Membuat Recent Post Simpel dan keren tanpa Thumbnail

Widget ini dilengkapi dengan gambar, judul, nama admin Blog dan tanggal pembulikasikan artikel. Perpaduan warna biru dan putih ke abu-abuan membuat tampilan Headline News Ticker ini menjadi sangat menarik. Headline News biasanya di tempatkan di bawah atau diatas menu navigasi blog, karena penempatan ini sangat epektif membuat artikel baru kita cepat di temukan pembaca.

Cara Memasang Headline News Ticker

1. Login ke aun Blogger
2. Pilih Template, lalu klik Edit HTML
3. Setelah editor template terbuka, kamu cari kode ]]></b:skin>, jika sudah ditemukan copy kode dibawah ini dan pastekan tepat diatasnya.

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

4. Selanjutnya, kamu cari kode </body>, lalu copy kode dibawah ini dan pastekan diatasnya.

<script type='text/javascript'>
//<![CDATA[
// Breaking Newsticker by http://www.aak-share.com
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),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function aaksharenewsticker(t){var e=document.querySelector("#newsticker"),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 src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="newstickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#newsticker").vnewsticker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vnewsticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vnewsticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vnewsticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vnewsticker.pause")):(t(this).removeClass("paused"),i.trigger("vnewsticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vnewsticker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vnewsticker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".newsticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=aaksharenewsticker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

5. Kalau kamu ingin memasang widget ticker ini di bawah navigasi, maka kamu cari kode <div id='main-wrapper'> atau yang hampir mirip (karena setiap template berbeda-beda), bila sudah ditemukan copas kode dibawah ini dan terapkan diatasnya.

<div class='newsticker-wrap' data-domain='aak-share.com'>
<div id='newsticker'>
</div>
</div>

Note :

• Kode HTML diatas, kamu bisa tempatkan dimana saja yang kamu suka
• data-domain='aak-share.com' kode yang saya beri warna merah ganti dengan alamat web/blog kamu (tanpa menggunakan http://)

6. Simpan template

Demikian saya sampaikan Cara Membuat widget Headline News Ticker Keren di Blog, apa pendapat kamu tentang widget ini? Kamu bisa menyampaikannya melalui kotak komentar.

Share this post