Animated Reccent Posts

Reccent Posts yang sudah saya share ada berbagai macam. Nah yang satu ini merukapan alternatif lainnya yang dapat Anda gunakan/pasang di Blog Anda. Memang Animated Reccent Posts ini merupakan cara yang lumayan lama, tapi namanya juga belajar dan sekedar share apa ruginya... ^^
Mari kita coba, dan simak dengan seksama...^^
Loggin ke Blogger

Klik Rancangan >> Pada halaman Edit Laman pilih "Tambah Gadget"(jika menggunakan widget baru) atau klik Edit pada salah satu Gadget yang ada, kemudian salin kode dibawah ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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/AVvXsEiogd66zVdZm7rtpXc8H8cayjj3iWawY3-cthTQo6MqTvXewl3r8VkahMtsQUxgy9glthyphenhyphent_fynfn7OBPjja2qtw4OJJbvVxcu4Fe4M7sExli4G7a7sz7GdUWZLdd1ifYBFp2o5apVEJqFT/s1600/bdlab-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> <script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/noimage.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/noimage.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/noimage.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/noimage.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/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://asal-suka.blogspot.com/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script> </div>

Saya sarankan salin terlebih dahulu ke notepad
Sebelum disimpan ada beberapa yang harus Anda edit terlebih dahulu:
Ubah yang berwarna merah!!!!
Wajib:

• home_page = “http://asal-suka.blogspot.com/”; (ganti dengan alamat Blog Anda)

Saran:

• width : 220px; 
• background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x; (background untuk Reccent Posts tersebut)
• thumbwidth = 70; (lebar gambar)
• thumbheight = 70; (tinggi gambar)
• showPostDate = true; (true=menampilkan tanggal; false=tidak menampilkan tanggal)
• numposts = 10; (jumlah reccent posts yang akan ditampilkan)

untuk kode-kode warna dapat dilihat disini.

Jika sudah selesai, salin kode ke gadget yang kita buka tadi, lalu disimpan.
Lihat hasilnya, jika tidak sesuai dengan keinginan Anda, Anda dapat mengeditnya sendiri.


Terima kasih sudah berkunjung...
Happy Blogging ^^...

Sumber www.abu-farhan.com

Read more →

Membuat Reccent Posts

Reccent Posts (posting terbaru) adalah satu hal yang menurut saya penting, khusunya bagi para pengunjung blog/web kita. Dengan ditampilkannya postingan terbaru dari blog kita, jadi pengunjung dapat mengetahui perkembangan posting-posting yang kita tulis.
Tidak usah panjang lebar lagi, langsung saya akan membagikan infonya... ^^...

Langkahnya seperti berikut:
1. Login ke Bloggerwww.blogger.com

2. Klik Rancangan, pilih lokasi, kemudian Tambah Gadget dan pilih HTML/Javascript.

3. Masukan judulnya dan bagian bawahnya diisi dengan kode berikut:

<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script style="text/javascript" src="https://sites.google.com/site/asalsuka01/home/recentposts2.js"></script>
<script style="text/javascript">
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = false;
var showpostsummary = true;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

4. Simpan dan lihat hasilnya...^^

Yang harus diubah adalah:

• var numposts = diisi dengan angka, berapa jumlah posting terbaru yang akan ditampilkan
• var showpostthumbnails = diisi "true"(jika mau menampilkan gambar) atau "false"(jika tidak menampilkan gambar)
• var displaymore = diisi "true"( jika mau menampilkan baca selengkapnya) atau "false"(jika tidak mau menampilkan baca selengkapnya)
• var displayseparator = diisi "true"(Jika mau menampilkan garis pemisah antar posting) atau "false"(Jika tidak mau menampilkan garis pemisah antar posting)
• var showcommentnum = diisi "true"(Jika mau menampilkan jumlah komentar tiap posting) atau "false"(Jika tidak mau menampilkan jumlah komentar tiap posting)
• var showpostdate = diisi "true"(Jika mau menampilkan tanggal posting) atau "false"(Jika tidak mau menampilkan tanggal posting)
• var showpostsummary = diisi "true"(jika mau menampilkan ringkasan singkat posting) atau "false"(jika tidak mau menampilkan ringkasan singkat posting)
• var numchars = diisi dengan angka, berapa banyak huruf yang akan ditampilkan (jika var showpostsummary= true)

Demikianlah hal yang perlu diperhatikan oleh anda..  Kreasikan gaya anda tersendiri... ^^..

Terima kasih sudah berkunjung...
Happy Blogging ^^....

Read more →