widget random post slider news

Widget slider perlabel yang saya sebut dengan widget random post slider news ini menampilkan artikel sistem random dengan action slider atau bergerak kebawah sehingga merupakan suatu tampilan widget random post yang mempunyai karakter new's. Postingan kali ini terinspirasi oleh beberapa teman yang menginginkan tampilan random post perlabel dengan sistem slider. Untuk melihat tampilan dari widget random post slider news ini silahkan klik DEMO, jangan lupa disimak cara pemasangannya dihalaman blog kesayangan anda melalui penjelasan tutorial dibawah ini, langsung saja menuju TKP;

Demo

Referensi Artikel

• Jquery widget tab random post
• Widget Tabber random post per kategori
  
• Jquery random post
  
• Random Post SEO Frienly
  
• Widget Random Post with Profil Admin
  

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Random Post Slider New's
By : Rivai Silaban | Blog Design
Update : Sabtu, 05 Oktober 2013
******************************************/
#bdrs-slisdepost {
height:297px;
overflow:hidden;
padding:5px;
width: 300px;
}
#bdrs-slisdepost ul{margin:0;padding:0}
#bdrs-slisdepost li{
height:80px;
padding:5px 0 10px 0;
border-top: dashed #999999 1px;
margin:5px 0 10px 0;
list-style-type: square;
}
#bdrs-slisdepost a{
color:#DF0000;
text-decoration: none;
text-shadow: 2px 1px 1px #B7B7B7;
letter-spacing: 0.1em;
}
#bdrs-slisdepost a:hover{
color:#990000;
text-decoration: none;
text-shadow: none;
}
#bdrs-slisdepost .news-title{
display:block;
font-weight:bold
!important;
margin-bottom:5px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
}
#bdrs-slisdepost .news-text{
display:block;
font-size:10px;
font-weight:normal
color:#282828;
text-align:left;
font-family: Georgia;
text-shadow: none;
color: #666666;
}
#bdrs-slisdepost img{
display:none;
}
/*** Blog Design CSS and ***/

Install Script

1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
2. Pada Edit HTML template anda silahkan cari kode </head>
3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
4. Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.

<!-- Rivai Silaban | BLOG DESIGN script widget start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/41502651103/slider-news.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script widget End -->

Install tag html

• Setelah anda sudah memasang CSSnya dan scriptnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save .
  

<!-- Rivai Silaban | BLOG DESIGN widget start -->
<script type="text/javascript">
var speed = 500; /* kecepatan */
var pause = 4500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="bdrs-slisdepost">
<script style="text/javascript">
var numposts = 10; /* jumlah yang ditampilkan */
var numchars =170;
</script>
<script
src="URL BLOG ANDA/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=randompost"></script>
</ul>
<!-- Rivai Silaban | BLOG DESIGN widget End -->

Keterangan Code

• Untuk kode CSSnya WIDTH [ 300px ] dan tinggi " height [ 297px ] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
• Untuk tulisan warna HIJAU merupakan jumlah postingan yang akan ditampilkan
• Tulisan kode warna MERAH ganti dengan URL blog anda.
• Kode tulisan warna BIRU ganti dengan nama label / kategori anda .
• Kode tulisan warna KUNING adalah ukuran kecepatan slider.
  

Kesimpulan

Widget random post slider news sangat cocok buat para bloger yang memiliki postingan artikel yang sudah terlalu banyak, sehingga widget random post slider news ini dapat menampilkan secara acak atau random artikel yang sudah lama tidak pernah muncul lagi.

Buat para teman teman bloger yang mengalami masalah dalam memasang widget flaying navigasi animasi ini, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.

Widget random post slider news
Sabtu 05 Oktober 2013
By : Owner Blog Design | Rivai Silaban

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 1:27 PM