Modifikasi Buzzboost Feedburner Menjadi News Ticker Untuk Blog

Ini yaitu update postingan usang aku ihwal modifikasi headline news FeedBurner, yang sekarang aku modifikasi buzzboost FeedBurner ini menjadi new ticker untuk blog.

Saya merubah tampilannya untuk new ticker buzzboost FeedBurner, memperbaiki CSS dan menambahkan fungsi pause dikala link di-hover. Dengan pause on hover maka link menjadi readable dan gampang dikala akan diklik.

Untuk demonya silahkan lihat pada widget JSFiddle di bawah ini.


Jika ingin mencobanya di blog, silahkan simpan CSS berikut:

 @font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')}
 #buzzboost,#buzzboost:before{height:30px;line-height:30px}
 #buzzboost:before,.feedburnerFeedBlock a{font-family:Roboto,sans-serif;font-size:16px;font-weight:500}
 #buzzboost{background:#fff;display:block}
 #buzzboost:before{content:"Hot News";width:90px;float:left;background:#333;color:#fff;padding:0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
 #buzzboost:after{content:"";display:block;clear:both}
 .feedburnerFeedBlock li,.feedburnerFeedBlock ul{list-style:none;margin:0;padding:0}
 .feedburnerFeedBlock a{text-decoration:none;color:#333;margin-left:100px}
 .feedburnerFeedBlock #creditfooter,.feedburnerFeedBlock .fbsubscribelink,.feedburnerFeedBlock .feedItemAuthor{display:none}
 .feedburnerFeedBlock ul{position:relative}
 .feedburnerFeedBlock ul li{opacity:0;position:absolute;top:0;left:0;z-index:1;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;padding-right:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
 .feedburnerFeedBlock ul li:nth-child(1){opacity:1}

Kemudian silahkan simpan arahan HTML berikut di mana Anda ingin menampilkannya di blog. Biasanya news ticker di simpan di bawah atau di atas header blog.

 <div id="buzzboost">
   <script type="text/javascript">
 //<![CDATA[
 function slideWitchs(){x+=1,x>10&&(x=1),$("#buzzboost .feedburnerFeedBlock ul li:nth-child(n)").animate({opacity:0,"z-index":"1"}),$("#buzzboost .feedburnerFeedBlock ul li:nth-child("+x+")").animate({opacity:1,"z-index":"2"})}var x=2,timer=setInterval(slideWitchs,3000);$("#buzzboost").hover(function(){clearInterval(timer)},function(){timer=setInterval(slideWitchs,3000)});
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://feeds.feedburner.com/bloggue/NdCO?format=sigpro&nItems=10&displayTitle=false&displayExcerpts=false&displayDate=false&displayEnclosures=false\"></scr" + "ipt>");
 //]]>
   </script>
 </div>

Angka 3000 yaitu untuk mengatur kecepatan pergantian link, dan arahan bloggue/NdCO silahkan ganti dengan feedburner blog Anda menyerupai pada gambar di bawah ini.



Sumber https://www.kompiajaib.com/

Share this post