Widget Recent Post Blogger dengan Thumbnail cantik
Hallo, berjumpa kembali di blog AUTOGOBLOOG , pada kali ini akan membawakan mengenai blogging indonesia Widget Recent Post Blogger dengan Thumbnail cantik simak selengkapnya
Recent Post adalah sebuah Widget Postingan Terbaru di sebuah Blog buat mempermudahkan pengunjung mendapatkan artikel terbaru. Bukan sekadar menggunakan teks saja tetapi supaya menarik perhatian bisa menambahkan gambar. Ada banyak tutorialnya tetapi terkadang saya kebinggungan saat harus edit HTML ke dalam.
Sebelumnya saya telah berbagi artikel tentang Cara membuat Widget Postingan terbaru di Blogger menggunakan Gambar. Kalian bisa lihat di adaptasi Desktop samping kanan Blog ini. Tampilan Thumbnail ataupun gambarnya kotak dan bisa melihat ke daftar postingan sebelumnya sonder harus membuka yang baru.
Untuk adaptasi yang baru ini tampilannya sedikit unik dan cantik. Gambar thumbailnya terlihat di sebelah kanan dan tampil bulat. Untuk kalian yang inggin memasangnya di Blogger cukup mudah dan tidak perlu masuk ke HTML Blogger. Silahkan ikuti carannya dibawah ini dan perhatikan intruksi yang saya berikan.
Widget Recent Post Blogger dengan Thumbnail cantik
Langkah 1 : Silahkan masuk ke Dasboard Blogger dan disini saya menggunakan Template VioMagz Versi 2.2, seleksi -- kasih berat sebelah Tata Letak lalu klik Tambahkan Gadget buat memajukan di samping kanan.
Langkah 2 : Pilih dan klik tanda + (HTML/JavaScript)
Langkah 3 : Tuliskan pada Julul "Postingan Terbaru". Pada konten silahkan muatan Script yang telah saya sipkan dibawah.
<script type="text/javascript" src="//cloud.github.com/downloads/jhwilson/Create-a-Blogger-archive-page/Make-Blogger-Archive-Page.js"></script>
<style type="text/css">
img.recent-post-thumbnailfloat:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff
ul.recent-posts-wrap background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;
ul.recent-posts-wrap li:nth-child(1n+0) background: #FCD092; width: 94%
ul.recent-posts-wrap li:nth-child(2n+0) background: #FFE0B4; width: 94%
ul.recent-posts-wrap li:nth-child(3n+0) background: #FFF59E; width: 94%;
ul.recent-posts-wrap li:nth-child(4n+0) background: #E1EFA0; width: 94%;
ul.recent-posts-wrap li:nth-child(5n+0) background: #B1DAEF; width: 94%;
ul.recent-posts-wrap li padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;
.recent-posts-wrap a text-decoration:none;
.recent-posts-wrap a:hover color: #222;
.post-date color:#e0c0c6; font-size: 11px;
.recent-post-title a font-size: 14px;font-weight: bold;color: #444;
.recent-post-title padding: 6px 0px;
.recent-posts-details acolor: #222;
.recent-posts-details padding: 5px 0px 5px;
</style>
<script type="text/javascript">
function showrpwiththumbs(t)document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++)var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++) "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")document.write("</ul>")
</script>
<script type="text/javascript">
var posts_number = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = false;
var post_summary = true;
var summary_chars = 50;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
Keterangan : Untuk tulisan warna merah di atas silahkan anda ganti sesuai keingginan. Jumlah Post, Tampilkan Thumbail, Tanggal ataupun Waktu Postingan, Kata ataupun kalimat dalam postingan. Untuk angka silahkan ganti sesukanya dan buat False itu tidak aktif dan buat mengaktifkannya silahkan ganti True.
Langkah 4 : Jangan lupa Save ataupun Simpan Setelan.
Langkah 5 : Selesai dan berikut ini adalah contoh tampilannya.
Bagaimana cukup mudah bukan membuat Recent Post dengan menambahkan Thumbnail yang cantik dan unik. Silahkan anda praktekkan dan apabila mengalami kesulitan boleh anda tanyakan di kolom Komentar. Anda juga bisa belajar tentang Blog mulai awal sampai menguasai di Channel Youtube saya "Timon Adiyoso", Jangan lupa Subscribe ya hehehe.
Oke penjelasan mengenai Widget Recent Post Blogger dengan Thumbnail cantik semoga tulisan ini berfaedah terima kasih
Tulisan ini diposting pada kategori blogging indonesia, blogging the fifth nail, blogging tutorial,
Belum ada Komentar untuk "Widget Recent Post Blogger dengan Thumbnail cantik"
Posting Komentar