Widget recent post menakjubkan dengan memberi
effect berputar/spinner kesan yang ditimbulkan akan lebih menarik untuk blog kita. Poting terbaru yang telah di kunjungi dan biasanya menjadi posting yang menarik bagi pengjung yang lain, hal itu disebut recent post. anda sebaiknya menggunakan widget/gadget ini untuk apa? sudah di jelaskan sekilas diatas untuk memberi kesan jika ada posting anda yang terakhir di kunjungi, hal tersebut akan membuat visitor lain tertarik dengan postingan anda di recent post.
Recent Post dengan Spinner Effect
Masuk ke
blogspot anda
Pertama Masukan JQuery ke Edit Template
Masuk ke Template >> Edit HTML
Cari Kode </head> (Gunakan CTRL+F agar lebih cepat)
Masukan script berikut tepat diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
Simpan template anda dan reload/refresh browser anda
Langkah selanjutnya,
Masuk ke
Tata Letak >> Pilih Widget HTML/Javascript >> Copy-Paste Code Berikut
Kode Script
<style type="text/css" media="screen">
#bloggiks-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 460px;
}
#bloggiks-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#bloggiks-widget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8sLdNQC41CtkqO5lAHTjRIOMO8jgQA39AScjOraO31Jm9_RD-nE1sPoeyPSy8QIztsiLp02WEonCSf-XrsgU2QrjBqdUmfux2fowFt4ZjA8TAFH4bDmiv97s68pldbc2cUKDK6PfXc-c/s1600/bloggiks.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#bloggiks-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#bloggiks-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#bloggiks-widget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#bloggiks-widget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}
.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}
<!-- =================================================
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrL0A4UmjwZZ3XqWosrziWMlbzft6v-b0DgSmaHf-HxJEZZEK8uPWDRS17o8I9xfYUQTyNe0WtRtuO2_C98U8gviM9upHqIq8OBjqIJzlQ6JKFxM5QLcz_CJpx-TOBz-dQsqem5_6wJxg/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrL0A4UmjwZZ3XqWosrziWMlbzft6v-b0DgSmaHf-HxJEZZEK8uPWDRS17o8I9xfYUQTyNe0WtRtuO2_C98U8gviM9upHqIq8OBjqIJzlQ6JKFxM5QLcz_CJpx-TOBz-dQsqem5_6wJxg/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrL0A4UmjwZZ3XqWosrziWMlbzft6v-b0DgSmaHf-HxJEZZEK8uPWDRS17o8I9xfYUQTyNe0WtRtuO2_C98U8gviM9upHqIq8OBjqIJzlQ6JKFxM5QLcz_CJpx-TOBz-dQsqem5_6wJxg/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrL0A4UmjwZZ3XqWosrziWMlbzft6v-b0DgSmaHf-HxJEZZEK8uPWDRS17o8I9xfYUQTyNe0WtRtuO2_C98U8gviM9upHqIq8OBjqIJzlQ6JKFxM5QLcz_CJpx-TOBz-dQsqem5_6wJxg/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrL0A4UmjwZZ3XqWosrziWMlbzft6v-b0DgSmaHf-HxJEZZEK8uPWDRS17o8I9xfYUQTyNe0WtRtuO2_C98U8gviM9upHqIq8OBjqIJzlQ6JKFxM5QLcz_CJpx-TOBz-dQsqem5_6wJxg/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#000";
icon2 = " ";
numposts = 10;
home_page = "
http://www.mulaiblogmu.blogspot.com/";
limitspy=5;
intervalspy=4000;
</script>
<div id="bloggiks-widget">
<script src='http://widgetbloggiks.googlecode.com/svn/trunk/recent.js' type='text/javascript'></script><br />
</div>
Simpan Widget
Note:
1. Ganti url
warna pink dengan url blog anda
2. Script
warna hijau di gunakan untuk merubah ukuran panjang recent post
3. Script
warna biru digunakan untuk memberi scroll pada recent post | jika anda ingin menggunakan scroll ganti overflow: hidden; dengan overflow: auto;
4. limitspy=5; digunakan untuk
menampilkan jumlah postingan di homepage anda.
Nah, Terlihat lebih elegan untuk blog anda. anda dapat menyesuaikan warna dengan warna yang anda inginkan, dan sesuikan juga dengan warna blog anda gar lebih serasi. Selamat Mencoba
Baca artikel sebelumnya =>
Memunculkan Menu Earning/Penghasilah Blogspot
