Cara Memasang Widget Breaking News Di Blog

Cara Memasang Widget Breaking News Di Blog
Sekian Lama Tidak Update, kali ini cybertips ingin membagikan tutorial yaitu Cara Memasang Widget Breaking News Dengan Thumbnail Di Blog widget ini dibuat dengan tampilan yang sangat sederhana sehingga kalian tidak perlu khawatir dengan kecepatan blog karena widget ini lumayan ringan untuk dipasang di blog kalian. adapun fungsi dari widget ini yaitu untuk menampilkan link dari artikel baru dengan thumbnail serta efek slide yang halus pastinya. tanpa harus membuang-buang waktu, silahkan ikuti step by step nya sebagai berikut :
  • 1. Seperti Biasa Kalian Login Terdahulu Di Blogger > Klik Template > Edit Html. dan tempelkan kode CSS dibawah ini sebelum tag penutup </head>
  • CSS
    
      <style>
    /* CSS News Ticker */
    .ticker-wrap{display: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>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
    .ticker-wrap>span>a{color:#222;text-decoration:none}
    #ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
    #ticker ul{padding:0;margin:0;list-style:none}
    #ticker ul li{height:45px;white-space: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',sans-serif}
    #ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
    #ticker ul li .tickermeta{font-size:13px;line-height:20px!important;color:#999}
    </style>
    
    NOTE: Edit Kembali Warna,font dan lain sebagainya.
  • 2. Kemudian Tambahkan Kode Dibawah Ini Sebelum tag penutup
  • </body>
    Jquery
    
        <script>
    //<![CDATA[
    // Breaking News ticker by https://www.cybertips.my.id
    function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function 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 r}function 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;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.anim
  • 3. Tambahkan Markup Di Bawah Ini Bebas Diantara Tag Pembuka <body> atau di tag penutup lt;/body>

      <div class='ticker-wrap' data-domain='www.Edit Disini.oke'>
<div id='ticker'>
</div>
</div>
NOTE: Silahkan Edit Di Bagian Domain

Demikian Tutorial Cara Memasang Widget Breaking News Di Blog Semoga Bermanfaat.

Berkomentar Lah Dengan Sopan, Bijak Dan BerEtika, Karena Setiap Komentar Menjadi Tanggung Jawab Komentator

Post a Comment (0)
Previous Post Next Post