Penulis: Moch Adnan dipublikasikan: 24 Agustus 2014
Anda ingin memiliki tampilan Recent posts yang berbeda dari sebelumnya? Maksud saya sebuah Recent posts yang bisa bergerak menurun bergantian memperlihatkan judul serta cuplikan gambar dari artikel yang bersangkutan, dan menggantikan widget Recent posts lama anda yang hanya diam mematung seperti yang ada dalam blog ini   :D cukup ikuti (terus membaca) artikel ini, saya akan coba memberikan step demi step cara pembuatannya .
Widget Recent Posts Bergerak
Seperti yang sudah kita tahu, dengan menyisipkan kode marquee kedalam sebuah kode akan menghasilkan perintah bergerak pada sebuah objek, demikianlah yang akan saya coba terapkan kedalam widget Recent posts bergerak ini.

  • Masuk kedalam dasbor blog
  • Pilih Tata letak
  • Pilih add a gadget ( menambahkan gadget baru)
  • Pilih HTML/JavaScript

# Copy kode berikut ini, dan simpan kedalam widget HTML/JavaScript tadi

<script src="https://googledrive.com/host/0B9D8rrkPwqxPYmJsODUwT1BuOHM" type="text/javascript"></script> <style media="screen" type="text/css"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:830px; } #spylist ul{ width:335px; overflow:hidden; list-style-type: none; padding: 5px 5px; margin:0px 0px; } #spylist li { width:335px; padding: 0px 0px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#b4b6af url(http://cerita-ngeblog.blogspot.com/images/rcpost.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:10px; height:328px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:show; 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/AVvXsEj4FS7xfBmlfG76AV5A_dmxbXDl5WZMIgkmxzN7_jTU1PiJTqfmh5DfmHEiRcrcPVJfv843Uuyqr_Q5Ny9ZuMMx8Djr6pBzJ6moESKDXRVQ6NXqCQNxvy3bGdv5z5PPso9SnMnXjqSYZoVL/s1600/Recent-posts-bergerak.gif"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjofifPot3mrNYjEbzFZHHPquGM-mLdUwfOO4xXUqU2E5E5Ca9tYwCLV8xvx1W7nrP6ZWtwhSbLdpzh25fWpax-l41Cm_b-Tqegbo-Z-IGHHnqYFkcMKwz_xqO0F-E5TOwmVOup3CvdLhL8/s1600/emaill+pemberitahuan1.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWwXEiyCoyv8t08BWHN_JWeVPFoeUiKFkQr2YlYOgKVxjrzBlY_Y4sdXSSQsDDugHQQUqsNvwm61H-TPr0DYmlwwuAaT5GP7mT-4A4bdonc5fRGKIjAicqSsT6lBjzC7KcU3-uCiP8u5q0/s1600/Font+keren.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdI7YpRVTEgNIwmYswipEc2xyTstSIFVq34HZFc8armKjOiDpazWoet-JtRVe360Pk9dQOasZit5vLTug3h9Gh3S9lcG1EFJd-g5spFf9oO2zj7j66750eOe6r58BNbl4Ia9Sm9CRSWea-/s1600/Nex+FI.jpg"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LS40zOkq2oMq_j5PeMYAsLJ-mgOOPoQCnrz4lJ0QcOaCLx-nfooXEf7VyVuLwoAL0832v0E4cgi_LmUAjHiKVMV16C5JzKEQRmn083BbKm1UYSIILbvlcetTBOVsszy3rTuX-HrhEQVu/s1600/facebooknya.png"; showRandomImg = true; boxwidth = 255; cellspacing = 9; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 70; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comment"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 25; home_page = "http://www.mochadnan.com/"; limitspy=9 intervalspy=4000 </script> <div id="spylist"> <script src="https://googledrive.com/host/0B9D8rrkPwqxPSHE2Y0MxVVNGZ1U" type="text/javascript"></script> </div>


  • Klik Simpan dan selesai
Semoga bermanfaat !!!