News Tricker jQuery widget

News tricker atau headline news dan sejenisnya memilki fungsi yang sama seperti recent post, hanya saja style/tampilannya berbeda. Ada news ticker dalam bentuk show hide ada juga dalam bentuk marquee (teks berjalan). namun kali ini kita akan membuat news tricker jQuery dengan gaya yang berbeda, lihat demo di bawah ini

• Demo News Tricker

.>Fitur News tricker jQueri ini:

-  jQuery / JavaScript Widget.
-  Tombol Scrolling di Recent Post News Ticker.
-  Stylish/Tampilan dengan Kustomisasi.

.>Bagaimana menambahkan Recent Posts Ticker jQuery ke blog / website Anda ?

1. Masuk ke akun blogger anda
2. Pilih Tata Letak dan tambahkan Gadget
3. Pilih Gadget HTML/javascript
4. Copy kode di bawah ini dan pastekan di dalamnya kemudian simpan

 <style type="text/css"> 
/* news tricker jQuery by defri defandaky.blogspot.com */
.ticker-controls{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}  
.ticker-wrapper.has-js{margin:20px 0px 20px 0px;padding:0px 20px;width:750px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#ccc;font-size:0.75em;}  
.ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#ccc;}  
.ticker-title{padding-top:9px;color:#222;font-weight:bold;background-color:#ccc;text-transform:uppercase;}  
.ticker-content{margin:0px;padding-top:9px;position:absolute;color:#1F527B;font-weight:bold;background-color:#ccc;overflow:hidden;white-space:nowrap;line-height:1.2em;}  .ticker-content:focus{:one;}  
.ticker-content a{text-decoration:none;color:#80000;}  
.ticker-content a:hover{text-decoration:underline;color:#80000;}  
.ticker-swipe{padding-top:9px;position:absolute;top:0px;background-color:#ccc;display:block;width:800px;height:23px;}  
.ticker-swipe span{margin-left:1px;background-color:#ccc;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block;}  
.ticker-controls{padding:8px 0px 0px 0px;list-style-type:none;float:left;}  
.ticker-controls li{padding:0px;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block;}  
.ticker-controls li.jnt-play-pause{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCNy7La9MhVPUdZgTP57zSlSYKShwMV00ttZuODg-bXGW8NQifWwwDiK-oqtLFOLlJ_xog2IqG5rTXLA7Xn_AoBXjadN34rl2gr_L6olNucRDXnl4kjENcqAhdoimZYm_jK2PyoMSjPoe/s1600/controls.png');background-position:32px 16px;}  
.ticker-controls li.jnt-play-pause.over{background-position:32px 32px;}  
.ticker-controls li.jnt-play-pause.down{background-position:32px 0px;}  
.ticker-controls li.jnt-play-pause.paused{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQ1XhHjYHzTaa-ecjGhgez46xLO846yRMW-Y2FOijUtK2y4_IlbK29K7DUOtcqePkQtFH3FYuDyFP5ewOoAW48qCw9pxM6LsgskUo5ZSdg0sNMY2JqPZ0-mVdqcoeYNG_wJ0si63o-7AS/s1600/Ticker-controls.png');background-position:48px 16px;}  
.ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px;}
.ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0px;}
.ticker-controls li.jnt-prev{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQ1XhHjYHzTaa-ecjGhgez46xLO846yRMW-Y2FOijUtK2y4_IlbK29K7DUOtcqePkQtFH3FYuDyFP5ewOoAW48qCw9pxM6LsgskUo5ZSdg0sNMY2JqPZ0-mVdqcoeYNG_wJ0si63o-7AS/s1600/Ticker-controls.png');background-position:0px 16px;}  
.ticker-controls li.jnt-prev.over{background-position:0px 32px;}  
.ticker-controls li.jnt-prev.down{background-position:0px 0px;}  
.ticker-controls li.jnt-next{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQ1XhHjYHzTaa-ecjGhgez46xLO846yRMW-Y2FOijUtK2y4_IlbK29K7DUOtcqePkQtFH3FYuDyFP5ewOoAW48qCw9pxM6LsgskUo5ZSdg0sNMY2JqPZ0-mVdqcoeYNG_wJ0si63o-7AS/s1600/Ticker-controls.png');background-position:16px 16px;}  .ticker-controls li.jnt-next.over{background-position:16px 32px;}  
.ticker-controls li.jnt-next.down{background-position:16px 0px;}  
.js-hidden{display:none;}  .no-js-news{padding:10px 0px 0px 45px;color:#F8F0DB;}  
.left .ticker-swipe{/*left: 80*/left:80px;:/;}  
.left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker{float:left;}  
.left .ticker-controls{padding-left:6px;}  
.right .ticker-swipe{/*right: 80*/right:80px;:/;}  
.right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker{float:right;}  
.right .ticker-controls{padding-right:6px;}  
</style>  
<script type="text/javascript">      
$(function () {          
$('#js-news').ticker({              
speed: 0.10,  // kecepatan scroll            
fadeInSpeed: 600,  // kecepatan nampak            
controls: true,  // pengaturan             
titleText: 'News:'    // judul tricker      
});      
});  
</script>  
<script src="https://dl.dropbox.com/s/sldtlkhnpu1vd4m/NBT-news-Ticker.js" type="text/javascript"></script>  
<script src="http://defandaky.blogspot.com/feeds/posts/summary?max-results=10&alt=json-in-script&callback=newbloggertips_recentpostticker"></script> 

Tips: Letekkan gadget di mana anda inginkan, namun untuk rekomendasi silahkan letakkan di bawah navigasi/header widget. jika di template anda belum mempunyai widget di bawah navigasi/header silahkan mencari refrensi cara membuat/menambahkan widget di bawah header. jangan lupa ganti tulisan yang saya beri warna merah.

Semoga sukses....