Widget Breaking News yaitu sebuah widget suplemen 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 isu 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 menawarkan 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 yaitu 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 arahan berikut, sebelum arahan ]]></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 arahan 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 arahan berikut, diantara arahan <body> serta </body>
<div class='ticker-wrap' data-domain='flash-reset.blogspot.com'><div id='ticker'></div></div>catatan:
ubah arahan 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.
