Cara Gampang Menciptakan Widget Breaking News (Sekilas Info) Responsive Di Blog

Cara Praktis Membuat Widget Breaking News (Sekilas Info) Responsive di Blog Hai sahabat semua, kali ini akan menawarkan sebuah trik Cara Praktis Membuat Widget Breaking News (Sekilas Info) di Blog. kenapa harus menggunakan breaking news atau dalam bahasa indonesianya disebut sekilas info? tidak lain yakni agar blog kita terkesan profesional bukan asalasalan.

Oh ya sahabat , widget ini hanya sanggup dipakai oleh blog yang non AMP, untuk yang AMP, admin belum menemukan caranya, kenapa hanya sanggup dipakai oleh blog non AMP? alasannya yakni nanti di dalam widget ini terdapat javascript yang harus disusupkan. Bisa saja di widget ini di pasang pada blog AMP, akan tetapi jadinya nanti blog sahabat akan mendapat pemberitahuan bahwa blog ini tidak valid AMP

Pada dasarnya menciptakan widget breaking news di blog ini sama saja dengan menciptakan widget yang lain ibarat widget recent post, terpopuler, banyak dikunjungi atau trending topic atau apalah namanya, tapi pada pada dasarnya sama saja. cuma bedanya pada aba-aba CSS dan javescriptnya.

Fungsi dari pada widget breaking news tidak lain yakni untuk menampilkan postingan yang terbaru dengan gaya pengaruh slide dan dilengkapi dengan thumbnail atau gambar. Seakanakan sang penulis menawarkan sebuah informasi kepada para pembaca blog tolong-menolong ada informasi terbaru yang perlu diketahui juga kirakira begitulah.

Oke sobat, kita pribadi saja ke inti pembahasan, bagi yang ingin melihat demonstrasi nya sanggup klik demo di bawah ini

DEMO

Cara Memasang Widget Breaking News

Pertama, masuk lah sahabat ke blog sobat
Kedua, klik tema dan menuju ke edit HTML
Ketiga, letakkan aba-aba CSS ini di atas ></b:skin> atau </style>

/* CSS Breaking News*/ .tickerwrap{display:block;textalign:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);borderleft:5px solid #3cc091} .tickerwrap&gt;span{display:inlineblock;background:#fefefe;padding:0;font:700 13px 'roboto',sansserif} .tickerwrap&gt;span&gt;a{color:#222;textdecoration:none} #ticker{height:45px;overflow:hidden;background:#fefefe;textalign:left} #ticker ul{padding:0;margin:0;liststyle:none} #ticker ul li{height:45px;whitespace:nowrap} #ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px} #ticker ul li h3{margin:0;font:700 16px 'roboto',sansserif} #ticker ul li h3 a{color:#333;textdecoration:none;lineheight:25px!important} #ticker ul li .tickermeta{font:400 13px 'roboto',sansserif;lineheight:20px!important;color:#999}<span style="fontfamily: &quot;times new roman&quot;;"><span style="whitespace: normal;"> </span></span>

Kelima, Setelah sahabat selesai memasang spesies tersebut kini langkah selanjutnya yakni salin aba-aba javascript di bawah ini dan letakkan di atas </body>

<script type='text/javascript'> //<!CDATA // Breaking News ticker by https://www.arlinadzgn.com function getauthor(t){for(var e=0;e<t.length;e++)var i=te.name.$t;return i}function getmeta(t){var e=;e1="Jan",e2="Feb",e3="Mar",e4="Apr",e5="May",e6="Jun",e7="Jul",e8="Aug",e9="Sep",e10="Oct",e11="Nov",e12="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=eparseInt(a,10)+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticketwrapperinner'>";if(i){for(var n=0;n<i.length;n++){for(var r=in,s=0;s<r.link.length;s++)if("alternate"==r.links.rel){var l=r.links.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="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(){var e=t(this).data("state"),i=e.options;e.isPaused2>e.itemCounta.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.startPausedi.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.isPauseds.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("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating2>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.animating2>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 ae?ae.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://"+$(".tickerwrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")0.appendChild(t)}); //> </script>

Keenam, Setelah selesai semuanya, yang terakhir yakni letakkan aba-aba HTML di bawah ini di antara tak pembuka <body> dan tak epilog </body>, di manapun saja anda ingin menampilkan widget breaking news, saran aku yakni pasang di bawah sajian navigasi

 <div class='tickerwrap' datadomain='ataeh.blogspot.com'> <div id='ticker'> </div> </div>

Ganti ataeh.blogspot.com dengan Url blog/web sahabat Code by Arlina Design

Bagaimana mudahkan sahabat mungkin cukup sekian dulu dari perihal uraian Cara Praktis Membuat Widget Breaking News (Sekilas Info) Responsive di Blog ini. Apabila ada pertanyaan silahkan sahabat tanyakan melalui komentar di bawah