Helo Kawan Semua, kali Ini Saya Akan Membagikan
Tutorial Cara Memasang Breaking News Di Blogger V2,tampilannya hampir mirip dengan
Versi 1 tapi kali ini sedikit berbeda.Jika ingin lihat demo nya silahkan Klik di bawah ini :
Kalo sudah melihat dan tertarik silahkan ikuti tutorial berikut :
1.Login ke blogger kalian.
2.Lalu ke Template -> Tema -> Edit HTML.
3.Cari kode
"</b:skin>" lalu letakan kode CSS di bawah ini tepat di bawah
"</b:skin>".
.bsd-ticker{display:block;text-align:center;padding:3px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);}
.bsd-ticker>span{display:inline-block;background:#415471;padding:;font:700 12px 'roboto',sans-serif}
.bsd-ticker>span>a{color:#222;text-decoration:none}
#ticker{height:46px;overflow:hidden;background:#ffffff;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:46px;white-space:nowrap}
#ticker ul li img{float:left;width:46px;height:36px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#666;text-decoration:none;line-height:26px!important}
#ticker ul li .authorticker{font:400 12px 'roboto',sans-serif;line-height:21px!important;color:#666}
.breakk{float:left;position:relative;padding:16px;color:white;margin-right:5px;background:#555;font-family: arial;font-size:12px;
-webkit-animation: fade-in-br 1s linear infinite alternate;
-moz-animation: fade-in-br 1s linear infinite alternate;
animation: fade-in-br 1s linear infinite alternate;
}
.breakk:after{
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -4px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #555;
}
@-moz-keyframes fade-in-br {
0% {
opacity: 0;
}
65% {
opacity: 1;
}
}
@-webkit-keyframes fade-in-br {
0% {
opacity: 0;
}
65% {
opacity: 1;
}
}
@keyframes fade-in-br {
0% {
opacity: 0;
}
65% {
opacity: 1;
}
}
NOTE : Setting sendiri jika merasa kurang pas.
4.Pasang Javascript dibawah ini di tempat yang kamu inginkan.
<script>
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 bloggersstandticker(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 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="authorticker"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").bsdticker()}!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("bsdticker.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("bsdticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("bsdticker.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("bsdticker.pause")):(t(this).removeClass("paused"),i.trigger("bsdticker.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.bsdticker=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.bsdticker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="https://yoshinoku.blogspot.com"+$(".bsd-ticker").data("domain")+"/feeds/posts/summary?alt=json&callback=bloggersstandticker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
</script>
<div class='bsd-ticker' data-domain=''><span class="breakk">TERBARU</span>
<div id='ticker'>
</div>
</div>
NOTE :
Ganti tulisan yang berwarna :
Biru dengan link blog sobat.
Merah dengan kata yang sobat inginkan.
5.Save Template.
Oke mungkin itu saja tutorial kali ini ,Jika ada Masalah/Error silahkan berkomentar.
