widget random post slider news

Dalam hari ini taukahbahwa.blogspot.com akan membahas posting tentang widget random post slider news. Semoga dengan artikel widget random post slider news akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

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 : Arieadie | 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.4pada 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.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com