Cara Menciptakan 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

Baca Juga: Cara Cek Link Rusak (Broken Link) Pada Blog Beserta Tutorial Mengatasinya

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.

Baca Juga

• Cara Membuat Widget
• Cara Membuat Widget Di Iphone
• Cara Membuat Widget Di Wordpress
• Cara Membuat Widget Instagram Di Blog
• Cara Membuat Widget Wordpress
• Cara Membuat Widget Wa
• Cara Membuat Widget Melayang Di Blog
• Cara Membuat Widget Postingan Terbaru
• Cara Membuat Widget Blog
• Cara Membuat Widget Di Oppo A3s

Oke saya rasa itu saja yang mampu saya sampikan, kurang lebihnya mohon maaf. Akhir kata saya ucapkan terimakasih serta sampai jumpa.