Membuat Slide Recent Post

Recent post atau postingan terakhir sangat penting bagi para blogger, disamping menunjukkan artikel-artikel terbaru, recent post juga dapat mempermudah pengunjung untuk lebih banyak membaca artikel anda yang lainya, sama halnya dengan artikel terkait atau related post dan popular post atau posting polpuler (akan di bahas dalam posting berikutnya), recent post juga bisa dengan tampilan thumbnail (gambar), nah kali ini simpel life akan memberi tutorial tentang cara membuat recent post dengan efek slide show, recent post ini menampilkan artikel dalam bentuk animasi (bergerak). Langsung saja yang ingin tau caranya


 Berikut langkah - langkahnya  :

1. Masuk Blogger
2. Pilih Rancangan
3. Pilih Elemen Halaman
4. Tambah Gadget
5. Pilih menu HTML/Script


<center> <script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" 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://lh3.googleusercontent.com/-9407gMGSNm4/TY2F3Ydsu1I/AAAAAAAABqo/uijW48xcpv0/s1600/teknikbuatblogblogspot-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:#A9A9F5; 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> <script language='javascript'> imgr = new Array(); imgr[0] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif"; imgr[1] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif"; imgr[2] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif"; imgr[3] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif"; imgr[4] = "https://lh4.googleusercontent.com/-m7-1WePVI_E/TY1-2d3xStI/AAAAAAAABqk/NgEgk4qPmP8/s1600/no_image+.gif"; 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 = 20; home_page = "http://simpellife.blogspot.com/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script> </div><a href="http://simpellife.blogspot.com/2011/12/membuat-slide-recent-post.html"> <font size="1">get this widget</font></a></center> 

Sesuaikan dengan template kamu dengan merubah kode-kode berikut :

width:208px;

rubah kode di atas untuk merubah lebar widget angkanya saja

numposts = 20;
home_page = "http://simpellife.blogspot.com/";

Ganti Numpost dengan Jumlah Post Yang anda ingin tampilkan dan ganti home page dengan alamat URL blog anda. Kode - di atas hanya bagian penting untuk penyesuaian, untuk optimasi lainnya kamu bisa merubah kode CSS sesuai dengan keinginan kamu.

Posted In: Simpel Life, Updated at: 4:56 AM

Artikel Terkait

Followers