widget random post animasi thumbnail per label

Widget random post animasi thumbnail per label pada blogspot, cara membuat widget random post animasi thumbnail per label pada halaman blog sangat berguna untuk meningkatkan trafik pengunjung, dimana artikel yang telah kita posting jauh jauh hari sebelumnya akan muncul dengan tampilan yang memukau. Widget random post animasi thumbnail per label ini memiliki tampilan yang menarik, widget random post animasi thumbnail per label apat anda pasang pada siddebar halaman blog kesayangan anda. Untuk melihat tampilan widget random post animasi thumbnail per label silahkan klik emo dibawah, bila ingin memasang widget random post animasi thumbnail per label silahkan simak penjelasan dibawah

Demo

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 : Rivai Silaban | 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 versi 1.7.2 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.

<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.
  

Kesimpulan

Widget random post animasi thumbnail per label ini dapat anda manfaatkan untuk menampilkan salah satu kategory dengan tampilan sistem animasi pada halaman blog anda.

Bila anda mengalami kesulitan ataupun mendapati kode yang kurang sempurna, silahkan hubungi kami atau share bersama kami di form komentar dibawah. Pergunakan semua fasilitas di halaman blog ini untuk mempermudah anda.

Widget random post animasi thumbnail per label
Selasa, 29 Oktober 2013
Rivai Silaban | Blog Design

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 : 9:43 PM