Zski48™

Posting terbaru Dengan animasi adalah cara yang fantastis untuk menyajikan berita update untuk efek readers.untuk blog Anda bergulir halus menarik pembaca dan menghasilkan lebih banyak klik ke situs ini. Dengan memekai gadget ini blog anda akan menampilkan tulisan terbaru Anda dan termasuk thumbnail kecil , tetapi memiliki bonus tambahan menggunakan efek animasi yang bergerak dengan lancar melalui posts.Sudah banyak tutorial yang besar membahas tentang cara menambahkan animasi Recent posts untuk blogger dengan thumbnail dan Simple Spy, tetapi sebagian besar tutorial saya telah menemukan tidak benar-benar cocok untuk pemula .

Cara Memasang Animated Recent posts untuk blogger dengan thumbnail dan Simple Spy

Sekarang mari kita mulai menambahkannya ...


1 . Login ke akun Blogger anda .

2. Pada tab Layout dari klik Add Gadget.

3. Setelah klik Add Gadget akan muncul kotak pop - up terbuka sekarang Pilih HTML / JavaScript

4. Pilih ' HTML / Javascript ' dan tambahkan kode yang diberikan di bawah ini.


<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; height:350px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6SXmG56YrrvFA1gPNnIy8m5kUuRGcStOHxwIf5ch2GYMPzQDMp2cAWvUQkZutwCZ8XrrV5cjDjRbcR-vDFE7_Em35O2eD5GJZO4ziyTkv3sjJLiDuNizbGTb_Youac7EJiRpQUwihaTn6/s1600/24work-blogspot-com.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 70; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://bdlab.blogspot.com/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src='http://dl.dropboxusercontent.com/s/3frdg2yvzmdwsto/animated-recent-posts-ycode-1.js' type='text/javascript'></script> </div>

Contoh ke dua :

Copy kode bawah ini untuk tampilan contoh gamabar kedua


<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; height: 385px; } #workwidget ul { width: 295px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px; } #workwidget 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/AVvXsEi6SXmG56YrrvFA1gPNnIy8m5kUuRGcStOHxwIf5ch2GYMPzQDMp2cAWvUQkZutwCZ8XrrV5cjDjRbcR-vDFE7_Em35O2eD5GJZO4ziyTkv3sjJLiDuNizbGTb_Youac7EJiRpQUwihaTn6/s1600/24work-blogspot-com.jpg) repeat-x; border: 1px solid #ddd; } #workwidget li a { text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px; } #workwidget img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; } #workwidget 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); } #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; 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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKkRx0babzMu9xsYsww8yYZ2yAw_YRmWvtCzWyGuAuXIHWo8UalDx4oKJfIXsGuddbelFUoCgQFdzQ6NX18ruoj07xx5iBPP0pHWfYd3_58Gnw5bRIUHSTX1hPxXjEJcXlWrJxAYdIbp1/s1600/noimage.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 = "#666"; icon2 = " "; numposts = 10; home_page = "http://bdlab.blogspot.com/"; limitspy=4; intervalspy=4000; </script> <div id="workwidget"> <script src='http://dl.dropboxusercontent.com/s/qegice7y4oneszj/animated-recent-posts-ycode-2.js' type='text/javascript'></script> </div>

Catatan :

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

Warna Biru ganti dengan URL blog Kamu

Lalu Simpan/save Selesai Deh dan liaht hasilnya.