Modifikasi BuzzBoost FeedBurner Menjadi News Ticker Untuk Blog

Karena adanya permintaan, kalian ini saya akan update postingan lama saya tentang modifikasi headline news FeedBurner, yang kini saya modifikasi buzzboost FeedBurner ini menjadi new ticker untuk blog. Cara ini tentunya sangat untu pengindekan untuk blog kalian.

Saya banyak merubah tampilannya untuk new ticker buzzboost FeedBurner, terutama memperbaiki CSS dan menambahkan fungsi berhenti ketika link di-hover. Dengan pause on hover maka link menjadi readable dan mudah ketika saat di klik oleh pengunjung. Tentunya cara ini akan lebih efisien untuk meningkatkan kualitas blog kalian.

Jika kalian ingin mencobanya untuk tampilan blog kalian, kalian bisa melihat artikel ini. Dan untuk tampilan demonya kalian bisa melihatnya pada widget JSFiddle di bawah ini.

Jika kalian ingin mencobanya di blog kalian silahkan simpan CSS berikut ini.

@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 kalian ingin menampilkannya di blog. Biasanya news ticker ini di simpan antara 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/blogcozone?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 blogcozone silahkan ganti dengan feedburner blog Anda seperti pada gambar di bawah ini.