Cara Menciptakan Headline News Ticker Keren Di Blog

Cara Membuat Headline News Ticker Keren - Headline News dikenal sebagai buletin berita, yang dimana informasi tersebut gres 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 sanggup menginformasikan kepada pengunjung bahwa kita gres saja artikel membuat artikel.

Headline News, mirip-mirip ibarat recent post adalah memajang artikel terbaru kita. Tetapi bedanya pada Headline News Ticker ini mempunyai effect slider yang mana judul artikel bergerak secara bergantian dari bawah ke atas. Pergerakan slide akan berhenti jikalau kau 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 menciptakan tampilan Headline News Ticker ini menjadi sangat menarik. Headline News biasanya di tempatkan di bawah atau diatas hidangan navigasi blog, sebab penempatan ini sangat epektif menciptakan artikel gres kita cepat di temukan pembaca.

Cara Memasang Headline News Ticker

1. Login ke aun Blogger
2. Pilih Template, kemudian klik Edit HTML
3. Setelah editor template terbuka, kau cari kode ]]></b:skin>, jikalau sudah ditemukan copy isyarat dibawah ini dan pastekan sempurna 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, kau cari isyarat </body>, kemudian copy isyarat 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 kau ingin memasang widget ticker ini di bawah navigasi, maka kau cari kode <div id='main-wrapper'> atau yang hampir ibarat (karena setiap template berbeda-beda), bila sudah ditemukan copas isyarat dibawah ini dan terapkan diatasnya.

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

Note :

• Kode HTML diatas, kau sanggup tempatkan dimana saja yang kau suka
• data-domain='aak-share.com' isyarat yang aku beri warna merah ganti dengan alamat web/blog kau (tanpa memakai http://)

6. Simpan template

Demikian aku sampaikan Cara Membuat widget Headline News Ticker Keren di Blog, apa pendapat kau wacana widget ini? Kamu sanggup menyampaikannya melalui kotak komentar.


Sumber http://www.websiteedukasi.com/