widget random post animasi thumbnail per label

Pada hari ini taukahbahwa.blogspot.com akan menyajikan berita tentang widget random post animasi thumbnail per label. Semoga dengan posting widget random post animasi thumbnail per label akan menambah wacana bagi anda pembaca setia taukahbahwa.blogspot.com

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• 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 animasi thumbnail per label
By : Arieadie | Blog Design
Update : Selasa 29 Oktober 2013
******************************************/
#BDRSimage-slide {
height:112px;
overflow:hidden;
padding:0px;
background-color:#666666;
width: 300px;
border:solid #666666 1px;
box-shadow:0 0 5px #999;
}#BDRSimage-slide:hover {
height:325px;
overflow:hidden;
padding:0px;
background-color:#CCCCCC;
width: 300px;
border:solid #666666 1px;
box-shadow:none;
}#BDRSimage-slide ul{
list-style-type:none;
margin:0;
padding:0;
}#BDRSimage-slide li{
list-style:none;
height:80px;
padding:10px;
border:dashed #666 1px;
margin:5px;
background-color: #FFFFFF;
}#BDRSimage-slide a{
color:#990000;
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}#BDRSimage-slide .news-title{
margin-bottom:5px;
font-size:12px;
color: #990000;
}#BDRSimage-slide .news-text{
font-size:10px;
color:#282828;
text-align:left;
font-family: Verdana;
font-style: italic;
font-weight: normal;
padding-bottom:10px;
}#BDRSimage-slide img{
float:left;
margin-right:10px;
margin-top:10px;
width:60px;
height:60px;
border-radius:50%;
box-shadow:0 0 2px #990000;}/* End CSS */

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 versi1.7.2 pada script tulisan kode warna biru dibawah kode tulisan warna BIRUtersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Install Program Tag HTML

Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;

• Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
• Silahkan klik "Add Gadget "( Tambahkan gadget )
• Pilih " HTML / JavaScript "
• Copy Code HTML dibawah ini, paste pada gadget anda. 

<!-- script start --> <script type="text/javascript" src="http://yourjavascript.com/331279280411/animate.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rivaiscript();
interval = setInterval(rivaiscript, pause);
});
</script>
<div >
<ul id="BDRSimage-slide">
<script style="text/javascript">
var numposts = 10;
var numchars = 150;
</script>
<script
src="URL BLOG ANDA /feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=randompost"></script>
</ul>
</div> <!-- script end -->

Keterangan Gambar

• Code warna merah ganti dengan nama label blog anda, ( penulisan huruf sangat sensitif )
• Code warna Biru ganti dengan URL blog anda..
• Code warna Hijau silahkan anda eit sesuai dengan selera anda.
• Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda. Ukuran lebar dari wiget ini 300px. 

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

Homepage|http://taukahbahwa.blogspot.com