Membuat Recent Post Slide Dengan Thumbnails


Nah, kemarin kan ane dah pasang Recent Post Slide KerenSekarang ane mau postingin Recent Post Slide dengan Thumbnails nih. Nah untuk lihat demonya, sobat bisa lihat pada sidebar kanan, atau lihat pada gambar disamping. Ni akan menampilkan semua postingan secara slide satu persatu disertai dengan tumbnails atau gambar kecil. 

Gimana....

Cara pemasanganya masih sama dengan postingn Recent Post Slide Keren hanya scriptnya saja yang membedakan.


Untuk lebih lanjutnya ikuti saja step-step pemasanganya.

Ni scriptnya :
view plainprint?
  1. <script src='http://syamsjs.googlecode.com/files/recentpostslide.js' type='text/javascript'/>  
  2. <style media='screen' type='text/css'>  
  3. #spylist {  
  4. overflow:hidden;  
  5. margin-top:5px;  
  6. padding:0px 0px;  
  7. height:350px;  
  8. }  
  9. #spylist ul{  
  10. width:220px;  
  11. overflow:hidden;  
  12. list-style-type: none;  
  13. padding: 0px 0px;  
  14. margin:0px 0px;  
  15. }  
  16. #spylist li {  
  17. width:208px;  
  18. padding: 5px 5px;  
  19. margin:0px 0px 5px 0px;  
  20. list-style-type:none;  
  21. float:none;  
  22. height:70px;  
  23. overflow: hidden;  
  24. background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;  
  25. border:1px solid #ddd;  
  26. }  
  27.   
  28. #spylist li a {  
  29. text-decoration:none;  
  30. color:#4B545B;  
  31. font-size:11px;  
  32. height:18px;  
  33. overflow:hidden;  
  34. margin:0px 0px;  
  35. padding:0px 0px 2px 0px;  
  36. }  
  37. #spylist li img {  
  38. float:left;  
  39. margin-right:5px;  
  40. background:#EFEFEF;  
  41. border:0;  
  42. }  
  43. .spydate{  
  44. overflow:hidden;  
  45. font-size:10px;  
  46. color:#0284C2;  
  47. padding:2px 0px;  
  48. margin:1px 0px 0px 0px;  
  49. height:15px;  
  50. font-family:Tahoma,Arial,verdana, sans-serif;  
  51. }  
  52.   
  53. .spycomment{  
  54. overflow:hidden;  
  55. font-family:Tahoma,Arial,verdana, sans-serif;  
  56. font-size:10px;  
  57. color:#262B2F;  
  58. padding:0px 0px;  
  59. margin:0px 0px;  
  60. }  
  61. </style>  
  62.   
  63. <script language='javascript'>  
  64.   
  65. imgr = new Array();  
  66.   
  67. imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgve1cb1SylpaIRMn6YjElaJfh2WVjnJ0YaexvxMclLmGvUxJ9SEQt8y_8mUuagBQBu9xPdMIX-fnMde0AaQ3BXwVcQCqb0FDiFWO-LHPDqdeMj6v6VaAfSao_PIq0yPqoPtPKWuCWHYJ-y/s128/othersite.png";  
  68.   
  69. imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYan_Z5UdMZwiPbsQWaLv8QzQA_28JMdlMse3q5spOj24yJ9tYcUQr7h7IdMDuPSUuzL-B_zRArGftG19NH1o-qRcjlAuxTGATEA0yPgppPfPLOplyLVs1kMjUkbBjGaNyvQ5waKwdKW86/s128/Terminal-syams.gif";  
  70.   
  71. imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizlSChzyJWbt_NOkiYQLR3y4ek0lB-E7chPSsnVHXl_GXvIuQ97u3-DLbZLrrrqzKZDFWy343RreoiN6PUgwdYSFNF4PczZVIbK90A96PUUdMRxHKr5HnrPmUpI_-gXmCXUeRSa_PeD_S9/s128/othersite60.png";  
  72.   
  73. imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFuna6IPPJn3_AUPYI67Vb9B0nGNsoo0eipbVLIUXA1hcsyBgmYSrJyeP1Gd6Au8suwAYIpcIBteLITftFlCv-m39OjGjH6fJ5XiAk7SBRUI9NIkn61hOXdEpKjvo1ugaOLtkymr96hR15/s128/ayoayo.gif";  
  74.   
  75. imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMTQm1eYuCziwKM090NCZcNsjBsINIC-iLtp74QH_f1izZoGuL35CWlr4zPJ3RKgrLYLGo3t3T0G7DG1cBELkCfm19i3pl3FzOo0z_nVuA_3JVMFxylLXZBmI1Z1f0ggC0mgdjdk3Pk9Kz/s128/imgload.jpg";  
  76. showRandomImg = true;  
  77.   
  78. boxwidth = 255;  
  79.   
  80. cellspacing = 6;  
  81.   
  82. borderColor = "#232c35";  
  83.   
  84. bgTD = "#000000";  
  85.   
  86. thumbwidth = 70;  
  87.   
  88. thumbheight = 70;  
  89.   
  90. fntsize = 12;  
  91.   
  92. acolor = "#666";  
  93.   
  94. aBold = true;  
  95.   
  96. icon = " ";  
  97.   
  98. text = "comments";  
  99.   
  100. showPostDate = true;  
  101.   
  102. summaryPost = 40;  
  103.   
  104. summaryFontsize = 10;  
  105.   
  106. summaryColor = "#666";  
  107.   
  108. icon2 = " ";  
  109.   
  110. numposts = 10;  
  111.   
  112. home_page = "http://url-blog-soabat.com/";  
  113.   
  114. limitspy=4  
  115. intervalspy=4000  
  116.   
  117. </script>  
  118.   
  119. <div id='spylist'>  
  120. <script src='http://syamsjs.googlecode.com/files/recentpostslide2.js' type='text/javascript'/>  
  121. </div>  

Untuk Pemasanganya, Terserah sobat. Mau di pasang pada Add Gadget atau Edit Html. 
Ni stepnya untuk Add Gadget :
  1. Login ke akun blog sobat.
  2. Pilih Rancangan, Add Gadget.
  3. Pilih Html/JavaScript.
  4. Copy Pastekan Script diatas kedalam add gadged
  5. Klik simpan dan simpan template.

Untuk stepn pemasangan pada Edit html :
  1. login ke akun blog sobat.
  2. Pilih Rancangan, edit Html.
  3. Copy Pastekan Kedalam Html Sobat, dengan ketentuhan harus di dalam tag <body>.
  4. Simpan template sobat dan lihat blog

Penulis : ALSYA ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Membuat Recent Post Slide Dengan Thumbnails ini dipublish oleh ALSYA pada hari . Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Membuat Recent Post Slide Dengan Thumbnails
 

0 komentar:

Post a Comment

Subscribe to: Post Comments (Atom)