20 Agustus 2010

Pin It

Membuat Recent Post With Thumbnails

Assalamu'alaikum wr.wb sobat !!! Apa kabarmu disaat-saat sedang menjalani ibadah puasa di Bulan Ramadhan ini ? Semoga puasanya berjalan lancar dan tentunya amal dan ibadah kita di terima oleh Allah SWT, AMIN ya Robbal A'laminn...

Apa Itu Recent Post With Thumbnails ?
Recent post merupakan suatu info dimana didalamnya memuat tentang sekilas tentang artikel yang baru dibuat di blog kita (update last post). Tujuan utama dari recent post yaitu untuk memberitahu kepada pengunjung tentang postingan yang baru kita posting !.

Dalam postingan saya kali ini, saya ingin memposting tentang 2 buah variasi atau bentuk dari recent post with thumbnail
1. Recent Post with Thumbnail (Original)
2. Recent Post with Thumbnail and a Simple Spy


1. How To Make Recent Post With Thumbnails (Original) ?
Ok, maksud dari tutor membuat Recent Post With Thumbnails Original yaitu dalam pembuatan Recent Post dengan Thumbnailsnya hanya sekedar info dari postingan dan gambar tanpa effect spy (bergerak dengan berganti-ganti)

Ok, Sebagai preview :
Membuat Recent Post With Thumbnails - khamardos blog
Bagaimana ? Menarik ?
Ok langsung saja bagaimana cara membuatnya !

Ok, Jika Tidak mau pikir panjang, ayo dan simak pembuatannya di bawah ini !!!
1. Login pada Blogger
2. Masuk ke bagian Rancangan,

Cara Pertama :
- Klik Add Widget (lalu muncul add widget box)
- Pada Box tersebut, terdapat fasilitas searching widget (di pojok kanan atas) lalu  silahkan ketik "recent post" untuk mencari widget recent post.
- Setelah itu muncul hasil pencarian dari "recent post", klik widget tersebut untuk menambah. lalu muncul box configure gadget

- Lalu isilah data-data yang tersedia pada configure gadget tersebut.
Membuat Recent Post With Thumbnails - khamardos blog

- Lalu Klik Save/Simpan (dan lihat hasilnya)


Cara Kedua (Dengan Kode Javascript)
- Klik Add Widget, lalu pilih HTML/JavaScript

- Copy dan Paste kode dibawah, ke isian box html/javascript tersebut : 
<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 250px; height: 450px; text-align: left;">

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;


float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>


<script style="" src="http://khamardos.googlecode.com/files/recentpostswiththumbnailsv3.js"></script>


<script style="">


var numposts = 10;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>


<script src="http://blogkamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Note : - Kode berwarna merah = Jumlah recent post yang akan muncul
         - Kode berwarna kuning = Ganti dengan alamat blog kamu (ex : khamardos.blogspot.com)

 - Lalu Klik Save/Simpan (dan lihat hasilnya)


2. How To Make Recent Post With Thumbnails and a Simpe Spy ?
kelebihan dari Recent Post With Thumbnails and a simple spy yaitu pada widget recent post thumbnails ini disertai dengan effect berganti-ganti.

Cara Membuatnya yaitu :
1. Login pada Blogger
2. Masuk ke bagian Rancangan, Klik Add Widget, lalu pilih HTML/JavaScript
3. Copy kode dibawah, lalu paste ke isian box html/javascript tersebut :
<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(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.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] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
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://khamardos.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='http://khamardos.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>
Note :           : Ukuran Lebar sidebar blogmu (bisa dibuat dengan kode 100%)
                    : Warna atau gambar Background
                    : Lebar dan Tinggi Gambar Thumbnails
                    : Jumlah Racent Post yang akan muncul
                    : Alamat Blog Sobat

4. Lalu Klik Save/Simpan (dan lihat hasilnya)


Selamat Berkreasi Sobat
Semoga Tutor ini Bermanfaat

Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

15 comments:

Klik Untuk Lihat Komentar

Iskaruji on 20 Agustus 2010 23.05 mengatakan...

Info yang sangat berguna...ijin pake scriptnya sekalian menyebarkan jika diperlukan nantinya. Tentunya dengan "perike-blogger-an" yang adil dan beradab. Tapi kalo pake sendiri, moga diikhlaskan untuk modif dikit...

Happy blogging..!

deasy on 21 Agustus 2010 11.26 mengatakan...

mantaap nich! Makasih dah di share...belajar banyak disini..

hudayazik on 21 Agustus 2010 13.24 mengatakan...

hohoho !!!
lengkap banget sobat !!!
keren !!!!

Azik on 21 Agustus 2010 22.35 mengatakan...

sob, kalau untuk website (bukan blog) bisa gak....
because aku sekarang mo coba website...
nama website ku yang baru :
http://zikirku.co.cc
mohon bantuannya sob..

ureh on 21 Agustus 2010 23.18 mengatakan...

haha..emang mantab nih blog, tutornya lengkap dah :D
BTW; link beres gan ::D

Muhammad Taqi on 22 Agustus 2010 14.33 mengatakan...

gak ada creditsnya yah :)

salam kenal :)

Mufi_ed on 22 Agustus 2010 15.27 mengatakan...

@ hudayazik
Sama2 sob !!!

@ deasy
Ok sob !! semoga bermanfaat

@ Iskaruji
Ok sob !!!
Silahkan !!!

Mufi_ed on 22 Agustus 2010 15.28 mengatakan...

@ Muhammad Taqi
Maksud creadit ? sumbernya sob !!!
Oelalaahhh ... Klupaan !! Ok Sob !! Thnks !!!!

@ ureh
Ok sob !!
segera di link back !!!! Thnks yach !!!

@ Azik
sukses atas launching nya yach !!!

Rizky2009 on 22 Agustus 2010 21.53 mengatakan...

saat ini blog q g tak pasang RPdulu sob, lagian blog q tampilan homenya dah ada 9 jd sama saja kan dengan RP

www.obat-kanker.org on 8 November 2010 07.33 mengatakan...

Wah..info yang satu ini yang sedang sy tunggu...makasid deh ah..

Anonim mengatakan...

Don't wash your dirty linen in public


dsquared t-shirts

- shakwandee5ha

Anonim mengatakan...

Good Afternoon

Looking forward to your next post

Anonim mengatakan...

Nobody puts Baby in a corner.


abercrombie jackets

obat kanker paru-paru on 28 Maret 2011 11.27 mengatakan...

mantap juga nih pembelajaran nya, aku pelajari dulu gan , makasih gan buat infonya

Anonim mengatakan...

top [url=http://www.c-online-casino.co.uk/]online casinos[/url] coincide the latest [url=http://www.casinolasvegass.com/]free casino bonus[/url] free no consign perk at the best [url=http://www.baywatchcasino.com/]bay take note of casino
[/url].

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied