Posting terbaru animasi untuk Blogger dengan Gambar Kecil - Mata-Mata Sederhana

Posting terbaru animasi adalah cara yang fantastis untuk menyajikan pembaruan tajuk utama kepada pembaca Anda. Pengaruh pengguliran yang lancar menarik pembaca dan menghasilkan lebih banyak klik ke situs Anda. Gadget ini menampilkan posting terbaru Anda dan menyertakan thumbnail kecil, tetapi memiliki bonus tambahan menggunakan efek animasi yang bergerak dengan lancar melalui posting. Ada banyak tutorial hebat yang membahas tentang cara menambahkan posting Animasi Terbaru untuk blogger dengan thumbnail dan Simple Spy, tetapi sebagian besar tutorial yang saya temukan tidak benar-benar cocok untuk pemula.



Baca selengkapnya: 
1. Widget Posting Terbaru untuk Teks Teks CSS Hover Effect dengan jQuery

Demo Langsung

Cara Memasang Posting Terbaru Animasi untuk blogger dengan thumbnail dan Simple Spy

Sekarang, mari kita mulai menambahkannya ... 


Langkah 1. Masuk ke Akun Blogger Anda. Buka Dashboard Blogger Anda. Klik tab Layout dari panel kiri dan klik pada Tambahkan tautan Gadget .

Langkah 2. Setelah mengklik tautan Tambahkan Gadget Kotak pop-up akan terbuka sekarang

dengan banyak daftar gadget, Pilih HTML / JavaScript dari opsi gadget dengan mengklik tanda tambah biru untuk gadget itu.

Langkah 3. Pilih 'HTML / Javascript' dan tambahkan salah satu kode yang diberikan di bawah ini. 


Langkah 4. Sekarang Klik Simpan 'JavaScript' Anda selesai.

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



<style type = "text / css "media =" screen ">
<! -

#spylist {
overflow: hidden; 
margin-top: 5px; 
padding: 0px 0px; 
tinggi: 350px; 
}
#spylist ul {
width: 220px; 
overflow: disembunyikan; 
daftar-gaya-jenis: tidak ada; 
padding: 0px 0px; 
margin: 0px 0px; 
}
#spylist li {
width: 208px; 
padding: 5px 5px; 
margin: 0px 0px 5px 0px; 
daftar-gaya-jenis: tidak ada; 
mengapung: tidak ada; 
tinggi: 70px; 
overflow: disembunyikan;
latar belakang: #fff url (http://1.bp.blogspot.com/-yp42zoYRFkg/UZDjUlgLHCI/AAAAAAAAAAYM/SGHerEtqkgc/s1600/24work-blogspot-com.jpg) repeat-x; 
perbatasan: 1px solid #ddd; 
} 
#spylist li a { 
text-decoration: none; 
warna: # 4B545B; 
ukuran font: 11px; 
tinggi: 18px; 
overflow: disembunyikan; 
margin: 0px 0px; 
pengisi: 0px 0px 2px 0px; 
} 
#spylist li img { 
float: left; 
margin-right: 5px; 
latar belakang: #EFEFEF; 
perbatasan: 0; 
} 
.spydate { 
overflow: hidden; 
ukuran font: 10px; 
warna: # 0284C2; 
padding: 2px 0px; 
margin: 1px 0px 0px 0px; 
tinggi: 15px;
font-family: Tahoma, Arial, verdana, sans-serif; 
} 
.spycomment { 
overflow: hidden; 
font-family: Tahoma, Arial, verdana, sans-serif; 
ukuran font: 10px; 
warna: # 262B2F; 
padding: 0px 0px; 
margin: 0px 0px; 
} 

->

</style> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"> <img src = "https: // bitly. com / 24workpng1 "alt =" Kiat dan Trik Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; atas: 0px; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Tips Terbaru Untuk Blogger"> <img src = "https: // bitly.com/24workpng1 "alt =" Kiat Terbaru Untuk Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"> <img src = " https://bitly.com/24workpng1 "alt =" Blogger Trik "border =" 0 "style =" position: fix; bawah: 10%; 

kiri: 0%; "/> </a> <bahasa skrip = 'JavaScript'> imgr = new Array ();
imgr [0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
showRandomImg = true; 
boxwidth = 255; 
cellspacing = 6; 
borderColor = "# 232c35"; 
bgTD = "# 000000"; 
thumbwidth = 70; 
thumbheight = 70;

acolor = "# 666"; 
aBold = true; 
icon = ""; 
text = "komentar"; 
showPostDate = true; 
summaryPost = 40; 
summaryFontsize = 10; 
summaryColor = "# 666"; 
icon2 = ""; 
numposts = 10; 



home_page = " http://bdlab.blogspot.com/ "; 



limitpy = 4 
intervalspy = 4000 
</script> 
<div id = "spylist"> 
<script src = 'http: //24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent -posts-ycode-1.js 'type =' text / javascript '> </script> 

</div>

Dan sekarang klik Simpan 


Catatan: Jika template Anda sudah memiliki jquery tidak dimasukkan lagi, cukup salin setelah itu 
Html dari atas beberapa hal dapat diganti:

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

1. alamat beranda 

home_page = "http: // bdlab .blogspot.com / "; 


2. Gaya 

dari gaya di atas / css, Anda dapat mengubah: 


width: 220px; 

lebar: 208px: 


sesuaikan basis pada template 

dan 

latar belakang Anda: #fff url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_ng2C8YsmDhweCy2rDhar8FJSGZwr_0S2YTLR9OWnFy9W6fiob0-ogeFhiJU0C6V4eAF-sDmi2vZvZ8UOvXZVv-glMrjDE-cy7r30cfuvfzG1aNUGoryMxYzc2WY1tAkSDO8DLgr6gxJ/s1600/24work-blogspot-com.jpg) repeat-x ; 


Kustomisasi warna latar belakang 


3. ukuran gambar 

thumbwidth = 70; 

thumbheight = 70; 


Sesuai dengan kebutuhan Anda 


4. Berapa banyak pos yang akan Anda tunjukkan 

numposts = 10; 


Berdasarkan apa yang Anda perlu tunjukkan

Bergulir Bergaya Widget Posting Terbaru Untuk Blogger

Demo Langsung

1. Buka Dasbor Blogger >> Tata Letak >> Tambah gadget >> Tambah Kotak HTML / Javascript. 

2. Rekatkan kode berikut dalam Kotak HTML / Javascript.

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


<style type = "text / css" media = "screen">
#workwidget {
overflow: hidden; 
margin-top: 5px; 
padding: 0px 0px; 
tinggi: 385px; 
}

#workwidget ul {
width: 295px; 
overflow: disembunyikan; 
daftar-gaya-jenis: tidak ada; 
padding: 0px 0px; 
margin: 0px 0px; 
} #

workwidget li {
width: 282px; 
padding: 5px 5px; 
margin: 0px 0px 5px 0px; 
daftar-gaya-jenis: tidak ada; 
mengapung: tidak ada; 
tinggi: 80px; 
overflow: disembunyikan;
latar belakang: #fff url (http://1.bp.blogspot.com/-yp42zoYRFkg/UZDjUlgLHCI/AAAAAAAAAAYM/SGHerEtqkgc/s1600/24work-blogspot-com.jpg) repeat-x; 
perbatasan: 1px solid #ddd; 
} # 

workwidget li a { 
text-decoration: none; 
warna: # 4B545B; 
ukuran font: 15px; 
tinggi: 18px; 
overflow: disembunyikan; 
margin: 0px 0px; 
pengisi: 0px 0px 2px 0px; 
} 

#workwidget img { 
float: left; 
margin-top: 10px; 
margin-right: 15px; 
latar belakang: #EFEFEF; 
perbatasan: 0; 
} # 

workwidget img { 
-webkit-transisi: semua kemudahan 0,5s; 
-moz-transisi: semua kemudahan 0,5s; 
transisi: semua kemudahan 0,5s; 
padding: 4px;
latar belakang: #eee; 
latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, dari (#eee), color-stop (0,5, #ddd), color-stop (0,5, # c0c0c0), hingga (#aaa)); 
latar belakang: -moz-linear-gradient (atas, #eee, #ddd 50%, # c0c0c0 50%, #aaa); 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
batas-jari-jari: 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); 
} 

#workwidget 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; 
ukuran font: 10px; 
warna: # 0284C2; 
padding: 2px 0px; 
margin: 1px 0px 0px 0px; 
tinggi: 15px; 
font-family: Tahoma, Arial, verdana, sans-serif; 
} 

.spycomment { 
overflow: hidden; 
font-family: Tahoma, Arial, verdana, sans-serif; 
ukuran font: 10px; 
warna: # 262B2F; 
padding: 0px 0px;
margin: 0px 0px; 
} 


</style> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"> <img src = "https: // bitly .com / 24workpng1 "alt =" Kiat dan Trik Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; atas: 0px; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Tips Terbaru Untuk Blogger"> <img src = "https: // bitly.com/24workpng1 "alt =" Kiat Terbaru Untuk Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; " /> </a> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_ blank" title = " Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bawah: 10%; 
kiri: 0%; "/> </a> <bahasa skrip = 'JavaScript'> imgr = new Array ();
imgr [0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
showRandomImg = true; 
boxwidth = 255; 
cellspacing = 6; 
borderColor = "# 232c35"; 
bgTD = "# 000000"; 
thumbwidth = 50; 
thumbheight = 50;

acolor = "# 666"; 
aBold = true; 
icon = ""; 
text = "komentar"; 
showPostDate = true; 
summaryPost = 40; 
summaryFontsize = 10; 
summaryColor = "# 666"; 
icon2 = ""; 
numposts = 10 ; 
home_page = " http://bdlab.blogspot.com /"; 
limitpy = 4 ; 
intervalspy = 4000 ; 
</script> 

<div id = "workwidget"> 
<script src = 'http: //24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-2 .js 'type =' text / javascript '> </script> 
</div>

Dan sekarang klik Simpan 





Catatan: Jika template Anda sudah memiliki jquery tidak dimasukkan lagi, cukup salin setelah itu 
Html dari atas beberapa hal dapat diganti:

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

Sekarang Ganti http://bdlab.blogspot.com dengan Url blog Anda. 


Anda Juga Dapat MENYESUAIKAN KODE Menurut Kebutuhan Anda 

numposts = 10 ; Total jumlah posting yang ingin Anda gulir dengan widget 
inipy = 4 ; Jumlah posting yang muncul di widget 
intervalspy = 4000 ; Kecepatan gulir widget, jika Anda menurunkan kecepatan nilai widget akan meningkat.

Tambahkan Widget Posting Terbaru Animasi Geser Widget Posting Terbaru untuk Blogger

Demo Langsung

Pergi ke blogger> Buka tab tata letak 

Sekarang Tambahkan widget HTML / JavaScript baru 

Sekarang tempel kode yang diberikan di bawah ini:

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


<style type = "text / css">
#rp_plus_img {height: 377px;}
#rp_plus_img li {height: 60px; padding: 5px; list-style: none; 
warna latar: #ffffff; 
perbatasan: solid 1px # 000000;}
#rp_plus_img a {color: # 00000;}
#rp_plus_img .news-title {display: blok; font-weight: bold; margin-bottom: 4px; font-size: 11px; 
text-align: justify; 
-moz-border-radius: 5px;}
#rp_plus_img img {float: left; margin-right: 14px; padding: 4px; border: solid 1px # 00000; lebar: 55px; tinggi: 55px;}
</style> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"> <img src = "https: // bitly. com / 24workpng1 "alt =" Kiat dan Trik Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; atas: 0px; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Tips Terbaru Untuk Blogger"> <img src = "https: // bitly.com/24workpng1 "alt =" Kiat Terbaru Untuk Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"> <img src = "https: //bitly.com/24workpng1 "alt =" Blogger Trik "border =" 0 "style =" position: fix; bawah: 10%; kiri: 0%; "/> </a> <script type =" text / javascript "src =" http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated- latest-posts-ycode-3.js "> </script>
<script type = "text / javascript"> 
var speed = 1500; 
var pause = 3500; 
$ (dokumen) .ready (function () { 
rpnewsticker (); 
interval = setInterval (rpnewsticker, pause); 
}); 
</script> 
<ul id = "rp_plus_img"> 
<script style = "text / javascript"> 
var numposts = 5 ; 
var numchars = 0; 
</script> 
<script src = " http://bdlab.blogspot.com / feeds / posts / default? orderby = diterbitkan & alt = json-in-script & callback = rpthumbnt"> </script> </ul>

Dan sekarang klik Simpan 




Catatan: Jika template Anda sudah memiliki jquery tidak dimasukkan lagi, cukup salin setelah itu 
Html dari atas beberapa hal dapat diganti:

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

Sekarang Ganti http://bdlab.blogspot.com dengan Url blog Anda. 


numposts = 5 ; Total jumlah posting yang ingin Anda gulir dengan widget ini

Widget Posting Terkini Blogger Animasi Bergaya

Demo Langsung

Pergi ke blogger> Buka tab tata letak 

Sekarang Tambahkan widget HTML / JavaScript baru 

Sekarang tempel kode yang diberikan di bawah ini:

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


<style type = "text / css" media = "screen">
#workwidget {
overflow: hidden; 
margin-top: 5px; 
padding: 0px 0px; 
tinggi: 385px; 
}

#workwidget ul {
width: 295px; 
overflow: disembunyikan; 
daftar-gaya-jenis: tidak ada; 
padding: 0px 0px; 
margin: 0px 0px; 
} #

workwidget li { 
width: 230px; 
latar belakang: # 1ed2f2; 
daftar-gaya-jenis: tidak ada; 
margin: 0 0 5px 0px; 
padding: 5px 5px 1px 10px! penting;
-webkit-transisi: semua kemudahan 0.2s; -moz-transisi: semua kenyamanan 0.2s; -o-transisi: semua kenyamanan 0.2s; perbatasan: 0 tidak ada! penting; -webkit-batas-atas-kiri-jari-jari: 40px; -webkit-border-bottom-right-radius: 40px; -moz-border-radius-topleft: 40px; -moz-border-radius-bottomright: 40px; batas-kiri-radius: 40px; border-bottom-kanan -radius: 40px; 
} # 

workwidget li a { 
text-decoration: none; 
warna: # 4B545B; 
ukuran font: 15px; 
tinggi: 18px; 
overflow: disembunyikan; 
margin: 0px 0px; 
pengisi: 0px 0px 2px 0px; 
} 

#workwidget img { 
float: left; 
margin-top: 10px; 
margin-right: 15px; 
latar belakang: #EFEFEF; 
perbatasan: 0; 
} 

#workwidget img {
-webkit-transisi: semua kemudahan 0,5s; 
-moz-transisi: semua kemudahan 0,5s; 
transisi: semua kemudahan 0,5s; 
padding: 4px; 
latar belakang: #eee; 
latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, dari (#eee), color-stop (0,5, #ddd), color-stop (0,5, # c0c0c0), hingga (#aaa)); 
latar belakang: -moz-linear-gradient (atas, #eee, #ddd 50%, # c0c0c0 50%, #aaa); 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
batas-jari-jari: 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); 
} 


#workwidget li: hover { 
background: # 84f6f5; 

} 

#workwidget 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; 
ukuran font: 10px; 
warna: # 0284C2; 
padding: 2px 0px; 
margin: 1px 0px 0px 0px; 
tinggi: 15px; 
font-family: Tahoma, Arial, verdana, sans-serif; 
}

.spycomment { 
overflow: hidden; 
font-family: Tahoma, Arial, verdana, sans-serif; 
ukuran font: 10px; 
warna: # 262B2F; 
padding: 0px 0px; 
margin: 0px 0px; 
}


</style> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"> <img src = "https: // bitly. com / 24workpng1 "alt =" Kiat dan Trik Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; atas: 0px; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Tips Terbaru Untuk Blogger"> <img src = "https: // bitly.com/24workpng1 "alt =" Kiat Terbaru Untuk Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"> <img src = " https://bitly.com/24workpng1 "alt =" Blogger Trik "border =" 0 "style =" position: fix; bawah: 10%; 
kiri: 0%; "/> </a> <bahasa skrip = 'JavaScript'> imgr = new Array ();
imgr [0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
imgr [4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png"; 
showRandomImg = true; 
boxwidth = 255; 
cellspacing = 6; 
borderColor = "# 232c35"; 
bgTD = "# 000000"; 
thumbwidth = 50; 
thumbheight = 50;

acolor = "# 666"; 
aBold = true; 
icon = ""; 
text = "komentar"; 
showPostDate = true; 
summaryPost = 40; 
summaryFontsize = 10; 
summaryColor = "# 666"; 
icon2 = ""; 
numposts = 10 ; 
home_page = " http://bdlab.blogspot.com/ "; 
limitpy = 4; 
intervalspy = 4000; 
</script> 

<div id = "workwidget"> 
<script src = 'http: //24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-2 .js 'type =' text / javascript '> </script> 
</div>

Dan sekarang klik Simpan 





Catatan: Jika template Anda sudah memiliki jquery tidak dimasukkan lagi, cukup salin setelah itu 
Html dari atas beberapa hal dapat diganti:

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

Sekarang Ganti http://bdlab.blogspot.com dengan Url blog Anda. 





Pengaturan:

Ubah http://bdlab.blogspot.com ke alamat Blog Anda 
Ubah numposts = 10 untuk Tampilkan jumlah posting terbaru dengan thumbnail

Menggulir Gadget Posting Terakhir Untuk Blogger

Demo Langsung

Menambahkan Widget ke Blogger



Buka Blogger >> Tata Letak >> Tambah Gadget >> Pilih Gadget HTML / JavaScript. 

Salin kode berikut dan rekatkan di dalam widget HTML / JavaScript

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


<style> img.recent_thumb {padding: 1px; lebar: 55px; tinggi: 55px; batas: 0; float: kanan; margin: 0 0 5px 10px;}. recent_posts_with_thumbs {float: kiri; lebar: 100%; tinggi min: tinggi : 70px; margin: 5px 0px 5px 0px; padding: 0; ukuran font: 12px;} ul.recent_posts_with_thumbs li {padding-bottom: 5px; padding-top: 5px; min-height: 65px;}. -decoration: none;}. latest_posts_with_thumbs strong {font-size: 10px;} </style> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_ blank" title = " Kiat dan Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Kiat dan Trik Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0% ; top: 0px; " /> </a> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_ blank" title = "Kiat Terbaru Untuk Blogger"> <img src = "https://bitly.com/24workpng1" alt = "Kiat Terbaru Untuk Blogger" border = "0" style = "posisi: fixed; bottom : 10%; benar: 0%; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"> <img src = "https: // bitly. com / 24workpng1 "alt =" Blogger Trik "border =" 0 "style =" posisi: tetap; bawah: 10%; kiri: 0%; " /> </a> <script style = 'text / javascript' src = "http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb-recentposts-ycode.js" > </script> com / 24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fix; bawah: 10%; kanan: 0%; "/> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"> <img src =" https://bitly.com/24workpng1 "alt =" Blogger Trik "border =" 0 "style =" position: fix; bawah: 10%; kiri: 0%; "/> </a> <script style = 'text / javascript' src =" http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb- latestposts-ycode.js "> </script> com / 24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fix; bawah: 10%; kanan: 0%; "/> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"> <img src =" https://bitly.com/24workpng1 "alt =" Blogger Trik "border =" 0 "style =" position: fix; bawah: 10%; kiri: 0%; "/> </a> <script style = 'text / javascript' src =" http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb- latestposts-ycode.js "> </script> dofollow "target =" _ blank "title =" Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bawah: 10%; kiri: 0%; "/> </a> <script style = 'text / javascript' src =" http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb- latestposts-ycode.js "> </script> dofollow "target =" _ blank "title =" Trik Blogger "> <img src =" https://bitly.com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bawah: 10%; kiri: 0%; "/> </a> <script style = 'text / javascript' src =" http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb- latestposts-ycode.js "> </script>
<script style = 'text / javascript' src = 'http: //24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb-jquery-ticker-nocode.js'> </ script > 
<script style = 'text / javascript'> 
var numposts = 7 ; 
var showpostthumbnails = true ; 
var displaymore = false; 
var displayseparator = false; 
var showcommentnum = false; 
var showpostdate = false; 
var showpostsummary = true; 
var numchars = 100; 
$ (document) .ready (function () {$ ('# sai'). vTicker ({ 
speed: 500, 
pause: 3000, 
showItems: 3, 
animasi: 'fade', 
mousePause: false, 
tinggi: 0, 
arah: 'naik' 
});});

<div id = "sai"> 
<script src = ' http://bdlab.blogspot.com / feeds / posts / default? orderby = dipublikasikan & alt = json-in-script & callback = showrecentpostswiththumbs'> </script> 
</div>

Dan sekarang klik Simpan 





Catatan: Jika template Anda sudah memiliki jquery tidak dimasukkan lagi, cukup salin setelah itu 
Html dari atas beberapa hal dapat diganti:

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

Sekarang Ganti http://bdlab.blogspot.com dengan Url blog Anda. 



Kustomisasi Opsional


Untuk mengubah jumlah posting temukan kode ini var numposts = 7 ; 
Jika Anda tidak ingin menampilkan thumbnail postingan maka ubah nilai ini var showpostthumbnails = true; ke false.

Widget Posting Terbaru dan Fleksibel dengan Thumbnail untuk Blogger

Demo Langsung

Ikuti petunjuk langkah demi langkah untuk menambahkan widget ini di Blogger: 
Masuk ke Blogger 
Buka Layout> Tambahkan Gadget 
Pilih HTML / JavaScript 
Tempel kode yang diberikan di bawah ini di bidang dan Simpan.

<style type = "text / css"> 
/ * <! [CDATA [* / 
img.label_thumb {-webkit-transisi: semua .5s mudah; -moz-transisi: semua .5s mudah; transisi: semua .5s mudah; float: left; padding: 0; border: 3px solid #cccccc; -webkit-border-radius: 100px; -moz-border-radius: 100px; batas-radius: 100px; latar belakang: #fff; margin-kanan: 10px; tinggi: 70px; lebar: 
70px } img.label_thumb: 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 (0, 0,0,0,3), inset 0 0 20px rgba (0,0,0,0.1); - moz-box-shadow: 0 0 20px rgba (0,0,0,0,3), inset 0 0 20px rgba (0 , 0,0,0.1); kotak-bayangan: 0 0 20px rgba (0,0,0,0,3), inset 0 0 20px rgba (0,0,0,0.1); latar belakang: # f7f6f6}
.label_with_thumbs {float: left; width: 100%; min-height: 70px; margin: 0 10px 2px 0; menambahkan: 0} ul.label_with_thumbs li {background: # f5f5f5; daftar-gaya-tipe: tidak ada; bantalan: 8px 0; min-height: 65px; margin-bottom: 5px} 
.label_with_thumbs a {color: # 3395BF; ukuran font: 12pt; garis besar: 0; teks-dekorasi: tidak ada} 
.l__with_thumbs a: hover, .label_with_thumbs a: focus {color: # F4A557}. kredit,. kredit a {font-size: 12px! important; text-align: kiri; text-shadow: 0 1px 0 #fff; color: # 888}
#mdjumplink {font-weight: 800; latar belakang: # f7f8f9; latar belakang: -webkit-linear-gradient (atas, # f7f8f9 0, # e9e9e9 100%); latar belakang: -moz-linear-gradient (atas, # f7f8f9 0, # e9e9e9 100%); latar belakang: -o-linear-gradient (atas, # f7f8f9 0, # e9e9e9 100%); latar belakang: -ms-linear-gradient (atas, # f7f8f9 0, # e9e9e9 100%); latar belakang: linear-gradient (atas, # f7f8f9 0, # e9e9e9 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# f7f8f9', endColorstr = '# e9e9e9', GradientType = 0p: perbatasan 1px: perbatasan 1px: perbatasan 1px: perbatasan ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; batas-radius: 4px; bantalan: 6px 12px; margin: 0; -webkit-box-shadow: 0 1px 0 # f9f9f9 inset, 1px 1px 1px rgba (223.223.223.0.4); - moz-box-shadow: 0 1px 0 # inset f9f9f9, 1px 1px 1px rgba (223.222.223.0.4); box-shadow: 0 1px 0 # f9f9f9 inset, 1px 1p22, 223 , 0.4); warna: # 888! Penting; text-shadow: 0 1px 0 #fff; tinggi-garis: 1.2; kursor: penunjuk; ukuran font: 13px; font-weight: bold; dekorasi teks: tidak ada! Penting}
#mdjumplink: hover {background: # f1f1f1; latar belakang: -webkit-linear-gradient (atas, # f1f1f1 0, # e0e0e0 100%); latar belakang: -moz-linear-gradient (atas, # f1f1f1 0, # e0e0e0 100% ); latar belakang: -o-linear-gradient (atas, # f1f1f1 0, # e0e0e0 100%); latar belakang: -ms-linear-gradient (atas, # f1f1f1 0, # e0e0e0 100%); latar belakang: linear-gradien ( atas, # f1f1f1 0, # e0e0e0 100%); filter: PROGID: DXImageTransform.Microsoft.gradient (startColorstr = '# f1f1f1', endColorstr = '# e0e0e0', GradientType = 0); text-decoration: none! important} 
# mdjumplink a {color: # 888! important; text-decoration: none; display: block; margin: 2px} 
#mdjumplink a: hover {color: # 888! important; text-decoration: none} 
#mdcomments {padding: 6px 12px ; latar belakang: # 3395BF; warna: #FFFFFF! penting; ukuran font: 13px; font-berat: 800} 
#mdcomments: hover {background: # F4A557; dekorasi teks: tidak ada}
/ *]]> * /
</style> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"> <img src = "https: // bitly. com / 24workpng1 "alt =" Kiat dan Trik Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; atas: 0px; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Tips Terbaru Untuk Blogger"> <img src = "https: // bitly.com/24workpng1 "alt =" Kiat Terbaru Untuk Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"> <img src = "https: //bitly.com/24workpng1 "alt =" Blogger Trik "border =" 0 "style =" position: fix; bawah: 10%; kiri: 0%; "/> </a> <script type =" text / javascript "src =" http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated- latest-posts-ycode-5.js "> </script>
<script type = 'text / javascript'> 
// <! [CDATA [ 
var numposts = 5 ; 
var showpostthumbnails = true ; 
var displaymore = true ; 
var displayseparator = true; 
var showcommentnum = false ; 
var showpostdate = false; 
var showpostsummary = false; 
var numchars = 80; 
//]]> 
</script> 
<script src = ' http://bdlab.blogspot.com / feeds / posts / default? orderby = dipublikasikan & alt = json-in-script & callback = labelthumbs'> </script>

Kustomisasi: 
var numposts = 5 ; (Jumlah Posting yang akan ditampilkan) 
var showpostthumbnails = true ; (Posting Gambar) 
var displaymore = true ; (Tombol Lainnya) 
var showcommentnum = false ; (Tidak Ada Komentar) 
var showpostdate = false; (Tanggal Posting) 
var showpostsummary = false; (Posting Summry) 
var numchars = 80; (Karakter dalam ringkasan posting) 
Benar adalah untuk item Tampilan dan Salah untuk tidak ditampilkan. Ubah sesuai dengan kebutuhan Anda. 

Ubah http://bdlab.blogspot.com dengan Situs / URL Blog Anda.

Tooltips Widget Posting Terbaru Untuk Blogger Dengan Gambar Kecil

Demo Langsung

Ikuti langkah-langkah yang sangat sederhana ini untuk menambahkan "Tooltips Widget Posting Terbaru Untuk Blogger Dengan Gambar Kecil" di blog Anda. 

Langkah 1: Buka Blogger> Desain> Elemen Halaman 
Langkah 2: Klik tautan " Tambahkan Gadget " 
Langkah 3: Dari jendela sembulan, pilih HTML / JavaScript.
Langkah 4: Salin dan tempel kode berikut di bawah ini

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


<style type = "text / css">
# post-gallery {
width: 304px; 
margin: 0px otomatis; 
font: normal 11px Arial, Sans-Serif; 
warna: ## 000000
; 
padding: 8px; 
warna latar: # 1BA1E2
; 
-webkit-box-shadow: 0px 10px 30px rgba (0, 0, 0, 0,4); 
-moz-box-shadow: 0px 10px 30px rgba (0, 0, 0, 0.4); 
box-shadow: 0px 10px 30px rgba (0, 0, 0, 0.4); 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
batas-jari-jari: 4px; 
}
# post-galeri h2 {
font: 20px Arial, Sans-Serif;

text-shadow: 0px 3px 2px hitam; 
text-transform: huruf besar; 
margin: 2px 2px 2px; 
padding: 7px 14px; 
warna latar: # 000000; 
perataan teks: tengah; 
} 
# post-gallery .rp-item { 
float: left; 
display: inline; 
posisi: relatif; 
margin: 2px; 
padding: 0px 0px; 
latar belakang: #fff url ('http://2.bp.blogspot.com/-tSc2YP0efDM/UZMmX6KYHTI/AAAAAAAAAAI/abgAdbNEHH4/s1600/24work.blogspot.com.loading.gif') tanpa pengulangan 50% 50%; 
lebar: 72px; 
tinggi: 72px; 
} 
# post-galeri .rp-item img { 
width: 72px; 
tinggi: 72px; 
perbatasan: tidak ada! penting; 
margin: 0px 0px! penting; 
padding: 0px 0px! penting;
latar belakang: transparan! penting; 
display: tidak ada; 
} 
# post-galeri .rp-item .rp-child { 
position: relative; 
atas: 10%! penting; 
kiri: 10%! penting; 
z-index: 1000; 
lebar: 200px; 
background-color: putih; 
border-top: 5px solid # 1BA1E2; 
-webkit-box-shadow: 5px 5px 10px rgba (0, 0, 0, 0,7); 
-moz-box-shadow: 5px 5px 10px rgba (0, 0, 0, 0,7); 
box-shadow: 5px 5px 10px rgba (0, 0, 0, 0,7); 
padding: 10px 15px; 
overflow: disembunyikan; 
pembungkus kata: break-word; 
display: tidak ada; 
opacity: 0,9; 
} 
# post-galeri .rp-item .rp-child h4 { 
ukuran font: 12px; 
margin: 0px 0px 5px; 
warna: # 1BA1E2;
} 
# post-gallery .rp-item: hover .hidden {display: block;} 
</style> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_ blank" title = "Tip dan Trik Blogger"> <img src = "https://bitly.com/24workpng1" alt = "Tip dan Trik Blogger" border = "0" style = "posisi: tetap; bawah: 10%; kanan: 0%; atas: 0px; " /> </a> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Tips Terbaru Untuk Blogger"> <img src = "https: // bitly.com/24workpng1 "alt =" Kiat Terbaru Untuk Blogger "border =" 0 "style =" posisi: tetap; bawah: 10%; kanan: 0%; " /> </a> <a href = "http://24work.blogspot.com/" rel = "dofollow" target = "_ blank" title = "Trik Blogger"> <img src = "https://bitly.com/24workpng1" alt = "Trik Blogger" border = "0" style = "posisi: tetap; bawah: 10%; kiri: 0%; " /> </a> <script type = "text / javascript">


var rpTitle = "Posting Terbaru", // Widget Judul numposts = 20, // Jumlah thumbnail / posting yang akan ditampilkan numchar = 200 , // Jumlah karakter dalam deskripsi tooltip rcFadeSpeed ​​= 600 , // Kecepatan efek. fadeIn () tooltip muncul pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5muvFd1UosHm7IqJWqr3QuTCnfkI2Hd0cpwGHTM5nc2_oMypVXx2lcPQ9PxOlBtHJbXTTUClrnUq0-EWOVFd37ikYO5V2MxIGHJ8LTZ4pwHY0KiUXiAuxpbAJu9_vRxZJwoKel9T1-JaU/s1600/noimage.png", // Gambar yang muncul jika posting tidak memiliki posting image blogURL = " http://bdlab.blogspot.com/ "; // Alamat Blog Anda </script> <script src = "http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-6.js" ketik = "teks / javascript">

Dan sekarang klik Simpan 





Catatan: Jika template Anda sudah memiliki jquery tidak dimasukkan lagi, cukup salin setelah itu 
Html dari atas beberapa hal dapat diganti:

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

Sekarang Ganti http://bdlab.blogspot.com dengan Url blog Anda. 



Kustomisasi numposts = 20, // Jumlah thumbnail / posting yang akan ditampilkan numchar = 200 , // Jumlah karakter dalam deskripsi tooltip rcFadeSpeed ​​= 600 , // Kecepatan efek. fadeIn () tooltip muncul

Banyak terima kasih kepada  abu-farhan  Dan Rahul untuk membuat kode ini dan saya baru saja diuji dan dimodifikasi untuk bekerja di blogger

Share This Article :