Modifikasi BuzzBoost FeedBurner Menjadi News Ticker Untuk Blog

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.


Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser