Widget Breaking News yakni sebuah widget pelengkap yg digunakan buat menampilkan banyak sekali postingan terbaru di pada blog.
Fungsinya memang seolah-olah beserta widget Recent Post, yg membedakan merupakan tampilannya saja.
Sesuai bersama namanya widget breaking news ini mempunyai tampilan layaknya kalimat-kalimat gosip yang sering kali kita jumpai di televisi.
Dengan menggunakan widget ini di blog kamu, tentunya akan mempermudah pengunjung pada menemukan setiap postingan terbaru didalam blog kamu.
Didalam pembahasan kali ini admin akan memperlihatkan kau sebuah cara buat membuat widget breaking news sederhana serta yang niscaya 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 aku bahas kali ini.
Yang membuat widget ini tidak sama yakni tampilannya yg berbentuk slider dengan disertai tumbnail.
Untuk lebih jelasnya, silahkan ikuti panduan membuat 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:#9994. 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.
Baca Juga
Oke aku rasa itu saja yang sanggup aku sampikan, kurang lebihnya mohon maaf. Akhir kata aku ucapkan terimakasih serta hingga jumpa.
