Widget Recent Posts with Thumbnail Tanpa edit HTML Blogspot

Related Post

Recent Posts dengan Thumbnail  memang sangat menarik dan membuat pengunjung terus-terusan membaca tanpa henti terbawa alur Recent posts tersebut. Solusi ini juga untuk menampilkan posting terbaru Anda dalam berbagai gaya. Tentu saja, Blogger memiliki Recent Posts dengan gadget Thumbnail, tapi Recent Posts yang satu ini memberikan Anda fleksibilitas lebih dan pilihan untuk memilih tampilannya sesuai dengan yang anda harapkan. Dan tentu tidak menyertakan link penyedia dibawahnya seperti Linkwithin(situs recent posts with thumbnail otomatis).



Tanpa berlama-lama mari kita praktekan saja.
(Menggunakan blogger versi english ya...)


Masuk ke Desain>Page Elements, cari Add a gadget yang berada tepat dibawah kolom Blog Post, (jika tidak ada yang dibwah Blog Post cari saja yang lain, tapi nanti geser dan simpan tepat dibawah Kolom Blog Post ya) .Klik dan cari HTML/JavaScript dan tambahkan kode dibawah ini kedalamnya (copy paste aja) Setelah itu simpan.

<script language="JavaScript">
imgr = new Array();


imgr[0] = "http://YOURIMAGEURL.jpg";
imgr[1] = "http://YOURIMAGEURL.jpg";
imgr[2] = "http://YOURIMAGEURL.jpg";
imgr[3] = "http://YOURIMAGEURL.jpg";
imgr[4] = "http://YOURIMAGEURL.jpg";

showRandomImg = true;

tablewidth = 278;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 100;
imgheight = 80;

fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 75;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page = "YOUR-BLOG-URL";

</script>
<script src="http://fractalblognetwork.com/blogumus/vertical_title_desc_no_comments.js" type="text/javascript"></script>

Kemudian Save, View blog anda. Pilih salah satu posting, Lihat hasilnya dibawah posting anda sudah ada recent post nya, tapi mungkin masih tidak sesuai dengan keinginan anda.

Supaya keinginan anda terwujud, kita edit saja kode diatas tadi(kembali ke langkah awal ya).
Perhatikan Kode berwarna merah diatas. Anda dapat menambahkan gambar Anda sendiri dengan cara mengganti url ini 'http://YOURIMAGEURL.jpg' dengan url gambar milik anda(misalnya gambar logo blog anda,ambil url nya. contoh: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-aM0qbnEV_y9agOnyjPloL463pKAjFiNwdWmIdIEohtBRYv8BmwRKjdSA3ttiOdD23dlLqeNuFJvz9JQY7JhG9Y_UnpX9mJXc7xlOnADD2vqR8_ZwxEyYuuO4DQmimkDsqnZNYtISZdo/s1600/galatema+logo.jpg) ini dimaksudkan untuk menambahkan secara otomatis pada thumbnail recent postnya untuk postingan yang tidak memiliki gambar. Jadi tampilan Thumbnailnya tetap terlihat bagus. Anda dapat menambahkan [1] [2] dll (semuanya di isi dengan url yang sama juga tidak masalah), sesuai kebutuhan Anda. 

Selanjutnya, perhatikan kode dibawah ini sesuai dengan yang terdapat dalam kode diatas.
imgwidth = 100;
imgheight = 80; 
Ini untuk menyesuaikan ukuran gambar thumbnail yang ingin ada pasang. Anda tinggal merubah angkanya saja, semakin besar angka semakin besar juga gambar thumbnailnya. widht untuk lebar gambar dan height untuk tinggi gambar. 

fntsize = 11;
acolor = "#666";
Ini untuk judul Postingan. Anda dapat menyesuaikan ukuran huruf, ganti angka 11 dengan yg lebih besar jika anda ingin huruf jadi besar. Ganti kode warna "#666" sesuai selera,misalnya "#444" untuk abu-abu atau "#000000" untuk hitam.

summaryPost = 75;
summaryFontsize = 11;
summaryColor = "#666";
Sama halnya seperti bahasan diatas, namun ini untuk kode summary post, atau deskripsi post atau isi dari post. Jika anda menginginkan bagian ini hilang ganti angka 75 dengan 0. Karena angka 75 merupakan jumlah dari huruf yang akan tampil pada summary post itu sendiri. 
 
"http://fractalblognetwork.com/blogumus/vertical_title_desc_no_comments.js" type="text/javascript"
Nah url inilah yang bermain pada kode widget ini.
Url ini bisa anda ganti sesuai dengan tampilan yang anda sukai. Dan dibawah ini url untuk beberapa macam tampilan yang berbeda, anda dapat mengcopynya langsung, dan mengganti url diatas.

- Recent posts dalam posisi horisontal dengan hanya menampilkan thumbnail saja:
http://fractalblognetwork.com/blogumus/horizontal_only_thumbnail.js 

- Recent posts dalam posisi vertical dengan hanya menampilkan thumbnail saja:
http://fractalblognetwork.com/blogumus/Vertical_With_Only_Thumbnails.js 

- Recent posts dalam posisi horisontal dengan thumbnail,judul,deskripsi dan komentar:
http://fractalblognetwork.com/blogumus/horizontal_with_title_desc_comments.js 

- Recent posts dalam posisi vertikal dengan thumbnail,judul,deskripsi dan komentar:
http://fractalblognetwork.com/blogumus/vertical_title_desc_comments.js 

- Recent posts dalam posisi horisontal dengan thumbnail,judul,deskripsi dan tanpa komentar:
http://fractalblognetwork.com/blogumus/horizontal_title_desc_with_no%20comments.js  

- Recent posts dalam posisi vertikal dengan thumbnail,judul,deskripsi dan tanpa komentar:
http://fractalblognetwork.com/blogumus/vertical_title_desc_no_comments.js 

- Recent posts dalam posisi horisontal dengan thumbnail,judul,deskripsi dari setiap label tertentu:
http://fractalblognetwork.com/blogumus/horizontal_with_any_lable.js  

- Recent posts dalam posisi vertikal dengan thumbnail,judul,deskripsi dari setiap label tertentu:
http://fractalblognetwork.com/blogumus/vertical_with_any_label.js 

- Recent posts dalam posisi horisontal dengan thumbnail, judul, deskripsi di antara thumbnail bukan di bawah thumbnail:
http://fractalblognetwork.com/blogumus/horizontal_recent_posts_with%20title_description_in%20between_pictures.js 


Tambahan: Dalam kasus posting terbaru dengan thumbnail dari setiap label tertentu / tag / kategori, masukkan baris ini dalam kode di atas setelah:

'home_page = "YOUR-BLOG-URL";'

label = "tagname";



Akhir kata,
Selamat mencoba dan berkreasi, semoga tanpa hambatan yang berarti. Karena saya sendiri sudah mencoba dan berhasil. Sangat mudah sekali. Bila menemui kesulitan silahkan bertanya, InsyaAllah saya menjawab semampunya dan sesempatnya.


Regards!