Ditulis oleh: Ditulis pada: 11/22/2017
Ini adalah update postingan lama saya tentang modifikasi headline news FeedBurner, yang kini saya modifikasi buzzboost FeedBurner ini menjadi new ticker untuk blog.Saya merubah tampilannya untuk new ticker buzzboost FeedBurner, memperbaiki CSS dan menambahkan fungsi pause ketika link di-hover. Dengan pause on hover maka link menjadi readable dan mudah ketika 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 kode 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 adalah untuk mengatur kecepatan pergantian link, dan kode bloggue/NdCO silahkan ganti dengan feedburner blog Anda seperti pada gambar di bawah ini.