Widget Recent Post Blogger dengan Thumbnail cantik

Widget Recent Post Blogger dengan Thumbnail cantik

Haiii bersua lagi di laman saya akan melakukan pembahasan "Widget Recent Post Blogger dengan Thumbnail cantik" secara tuntas, ayuk simak sedetilnya ...

Recent Post adalah sebentuk Widget Postingan Terbaru di sebentuk Blog buat mempermudahkan hadirin menemukan artikel terbaru. Bukan hanya menggunakan teks saja tetapi biar menarik perhatian bisa menambahkan gambar. Ada banyak tutorialnya tetapi terkadang saya kebinggungan saat harus edit HTML ke dalam.

Sebelumnya aku sudah berbagi artikel tentang Cara membuat Widget Postingan terbaru di Blogger menggunakan Gambar. Kalian bisa lihat di adaptasi Desktop samping daksina Blog ini. Tampilan Thumbnail alias gambarnya kotak dan bisa melihat ke daftar postingan sebelumnya tanpa harus membuka yang baru.

Untuk adaptasi yang baru ini tampilannya sedikit unik dan cantik. Gambar thumbailnya terlihat di sebelah daksina dan datang bulat. Untuk kalian yang inggin memasangnya di Blogger layak mudah dan tidak perlu bersarang ke HTML Blogger. Silahkan ikuti carannya dibawah ini dan perhatikan intruksi yang aku berikan.

Widget Recent Post Blogger dengan Thumbnail cantik

Langkah 1 : Silahkan bersarang ke Dasboard Blogger dan disini aku menggunakan Template VioMagz Versi 2.2, membeda-bedakan Tata Letak lalu klik Tambahkan Gadget buat menampilkan di samping kanan.

Langkah 2 : Pilih dan klik tanda + (HTML/JavaScript)

 

Langkah 3 :  Tuliskan pada Julul "Postingan Terbaru". Pada konten silahkan isi Script yang sudah aku 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" ambisi ="_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+'" ambisi ="_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 awak ganti sesuai keingginan. Jumlah Post, Tampilkan Thumbail, Tanggal alias Waktu Postingan, Kata alias 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 alias Simpan Setelan.

Langkah 5 : Selesai dan berikut ini adalah contoh tampilannya.

Bagaimana layak mudah bukan membuat Recent Post dengan menambahkan Thumbnail yang cantik dan unik. Silahkan awak praktekkan dan apabila mengalami kesulitan boleh awak tanyakan di kolom Komentar. Anda jua bisa belajar tentang Blog mulai awal sampai menguasai di Channel Youtube aku "Timon Adiyoso", Jangan lupa Subscribe ya hehehe.

Begitulah pembahasan "Widget Recent Post Blogger dengan Thumbnail cantik" terimakasih atas kunjungannya

postingan ini ke dalam kategori guest blogging tutorial, blogging tips,

postingan ini bersumber dari berbagai artikel yang ada di google searcing.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara menonaktifkan Iklan DISQUS di Blog dengan beberapa pilihan

Gambar
Apaka kabar kembali di situs saya akan melakukan pembahasan " Cara menonaktifkan Iklan DISQUS di Blog dengan beberapa pilihan " secara jelas, mari simak sedetilnya ... Disqus adalah widget anggapan sebuah blog yang layak popular saat ini. Dengan tampilan yang rapi dan responsive membuat kolom anggapan Disqus digunakan oleh banyak blog ataupun web besar. Sebut saja Jalan Tikus, Kompi Ajaib dan masih banyak kedudukan lainnya yang menganti kolom anggapan bawaan blogger dengan widget disqus supaya pengunjung tertarik buat melaksanakan komentar. Sebelumya mastimon.con pernah membuat artikel tentang Cara memperoleh uang dari Iklan Disqus . Setelah kaum saat abdi perhatikan ternyata advertensi tersebut tidak layak efektif penghasilannya dan yang lebih menggangu lagi adalah mempengaruhi penghasilan adsense saya. Terus melaksanakan perbaikan buat meningkatkan penghasilan bahwa abdi putuskan mencopot Iklan Disqus. Ada bebera...
Baca selengkapnya

Cara memperbaiki HTTPS Gembok tidak berwarna Hijau dengan mudah

Gambar
hi lagi di pada kesempatan ini saya akan menjelaskan " Cara memperbaiki HTTPS Gembok tidak berwarna Hijau dengan mudah " secara jelas, ayo simak selengkapnya ... HTTPS tidak berubah jadi hijau selepas melakukan penyettingan di flatform blogger. Hal ini terjadi pada beberapa sahabat ikhwan blogger yang selepas merubah dari url http ke https disertai logo gembok. Setelah selesai yang terjadi Gembok dan Https berwarna abuk abu, itu menandakan bahwa siap yang bermasalah pada template ataupun artikel yang sahabat ikhwan buat. Mencoba membantu mudah-mudahan gembok Https berubah jadi hijau karena pada artikel sebelumnya mastimon.com memberikan bimbingan Cara Setting HTTPS untuk Custom Domain Blogger . Pembaca setia mastimon jika mengalami masalah selalu melakukan inbox di massanger facebook dan chat WhatApps. Dengan Gembok HTTPS berwarna hijau menandakan bahwa situs anda aman 100%. Sebenarnya sudah banyak blog lain yang m...
Baca selengkapnya

Solusi artikel Blog berat terdeteksi oleh Google

Gambar
Apaka kabar bersua kembali di pada pertemuan ini kita akan menjelaskan " Solusi artikel Blog susah terdeteksi oleh Google " secara tuntas, ayuk simak selengkapnya ... Membuat esai dengan banyak bicara dan memegang kosakata yang banyak pernah memadai buat cepat terdeteksi bagi Search Engine Google. Lalu bagaimana jika pernah mempublish sebuah esai tetapi tak terdeteksi walaupun pernah di lakukan submit ke Console google. Permasalahan ini terjadi mulai awal bulan maret 2018 dimana banyak sekali yang mengeluhkan esai mereka yang tak kunjung muncul di beranda pencarian google. Dari 3 esai yang abdi posting, hanya 1 esai yang terdeteksi bagi google. Itupun tampil di beranda google setelah melalui waktu 24 jam. Sebelumnya hanya dengan waktu satu menit aja esai pernah berada di halaman perdana google dengan bicara kunci pendek. Ini menjadi persoalan buat para juru tulis blog yang mengakibatkan malas buat menulis. Bagaimana ...
Baca selengkapnya