Cara Menciptakan Widget Breaking News Slider Sederhana Di Blog

gyZlkvVzBWNGdyaldxVEkvQUFBQUFBQUFBMGcvTVNELTlhWXd Cara Membuat Widget Breaking News Slider Sederhana Di Blog

Widget Breaking News yaitu sebuah widget tambahan yg dipakai buat menampilkan aneka macam postingan terbaru di pada blog.

Fungsinya memang seakan-akan beserta widget Recent Post, yg membedakan merupakan tampilannya saja.

Sesuai bersama namanya widget breaking news ini memiliki tampilan layaknya kalimat-kalimat info yang sering kali kita jumpai di televisi.

Dengan memakai widget ini di blog kamu, tentunya akan mempermudah pengunjung pada menemukan setiap postingan terbaru didalam blog kamu.

Didalam pembahasan kali ini admin akan menunjukkan kau sebuah cara buat menciptakan widget breaking news sederhana serta yang pasti tak akan memperberat loading blog anda.

Jika biasanya widget breaking news ditampilkan dengan catatan berjalan, maka hal ini cukup berbeda beserta widget breaking news yang akan saya bahas kali ini.

Yang menciptakan widget ini tidak sama yaitu tampilannya yg berbentuk slider dengan disertai tumbnail.

Untuk lebih jelasnya, silahkan ikuti panduan menciptakan widget breaking news slider berikut:

1. Login ke blogger
2. Pilih Tema>Edit HTML
3. Masukan instruksi berikut, sebelum instruksi ]]></b:skin> atau </style>

/* CSS News Ticker */.ticker-wrapdisplay: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>spandisplay:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif.ticker-wrap>span>acolor:#222;text-decoration:none#tickerheight:45px;overflow:hidden;background:#fefefe;text-align:justify#ticker ulpadding:0;margin:0;list-style:none#ticker ul liheight:45px;white-space:nowrap#ticker ul li imgfloat:left;width:35px;height:35px;margin:5px 7px 5px 5px#ticker ul li h3margin:0;font:700 16px 'roboto',sans-serif#ticker ul li h3 acolor:#333;text-decoration:none;line-height:25px!Important#ticker ul li .tickermetafont:400 13px 'roboto',sans-serif;line-height:20px!Important;color:#999

4. Tambahkan juga instruksi dibawah ini, sebelum </body>

<script type='text/javascript'>//<![CDATA[// Breaking News tickerfunction getauthor(t)for(var e=0;e<t.length;e++)var i=t[e].name.$t;return ifunction 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 rfunction 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;breaktryvar 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="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"a+="</ul>",e.innerHTML=a$("#ticker").vticker()!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("vticker.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("vticker.afterTick"))else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l),nextUsePause:function()2>e.itemCountanimate: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.paddingvar e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())),r.children("ul").children("li").each(function()t(this).height(s.itemHeight)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),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("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume")),next:function(e)var a=t(this).data("state");if(a)2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e),prev:function(e)var a=t(this).data("state");if(a)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.vticker=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.vticker"):a.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. Masih di lokasi yg sama, tambahkan pula instruksi berikut, diantara instruksi <body> serta </body>

<div class='ticker-wrap' data-domain='flash-reset.blogspot.com'><div id='ticker'></div></div>

catatan:
ubah instruksi yang telah diberi tanda, dengan URL blog anda6. Simpan Tema serta selesai

Untuk melihat hasilnya, silahkan cek situs blog kamu. Jika tampilan breaking news slider telah timbul itu tandanya anda telah berhasil menerapkan cara-cara di atas beserta benar . Selebihnya, silahkan kembangkan sendiri ya.