Cara Membuat Postingan Terbaru dengan Menampilkan Thumbnail pada Blogspot

AGRANIK.ID - Membahas tentang blogspot ini tidak akan ada habisnya. Berbagai macam tutorial, tips dan trik yang sering menjadi pembahasan. Salah satu diantaranya "cara membuat postingan terbaru di blogspot". Menampilkan postingan terbaru memiliki beberapa variasi tampilan sehingga blog lebih terlihat rapih enak dilihat oleh pengunjung blog. 

Pada umunya postingan terbaru pada blog diletakkan di samping atau sidebar selain Itu tentunya di halaman beranda atau home. Tampilan postingan terbaru ada bermacam variasi seperti : 

1. Postingan terbaru hanya menampilkan judul postingan
2. Menampilkan judul postingan yang disertai dengan kutipan deskripsi. 
3. Menampilkan Judul postingan, dan deskripsi berikut gambar thumbnail. 

Pada pembahasan ini akan membagikan tips cara menampilkan postingan terbaru dengan menampilkan gambar thumbnail. 

Berikut ini cara menampilkan postingan terbaru dengan thumbnail pada blogspot.

Seperti biasa untuk memulainya adalah dengan melakukan login terlebih dulu. Silahkan teman-teman login ke akun blogspot masing-masing. Login ke akun blogger.com dengan menggunakan akun google yang telah dibuat sebelumnya.

Selanjutnya silahkan pilih "Tata Letak" untuk memulai menambahkan dan menentukan letak widget postingan terbaru. Seperti pada gambar di bawah ini: 

Perhatikan gambar di atas, silahkan temen-temen pilih yang ditandai lingkaran berwarna hijau yang bertulis "tata letak". Maka akan muncul tampilan berikutnya seperti gambar dibawah ini.

Langkah berikutnya adalah cari lokasi untuk meletakan postingan terbaru, biasanya diletakkan di sidebar blog atau menu footer. Pada umumnya postingan terbaru diletakkan pada sidebar blog silahan cari sidebar lalu klik "tambahkan widget" seperti pada gambar di atas yang dilingkari warna kuning. selanjutnya akan muncul pilihan widget. Pilih "HTML JavaScript" seperti nampak pada poin nomor dua dengan tanda lingkar warna hijau pada gambar di atas. 

Isi Judul dengan nama "Postingan Terbaru" dan untuk "konten" isi dengan kode script dibawah ini. Dengan cara salin atau copy lalu paste kode tersebut. berikut ini kode nya: 

<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:10px 0;transition:all .3s linear;}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 10px 0 0;overflow:hidden;z-index:2;position:relative;width:90px;height:62px;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
ul.recent_posts_arlina li a{color:#2b427d;font-size:13px;font-weight:700;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#138be6}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=4,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

Lalu klik "simpan" untuk melihat tampilannya seperti gambar dibawah ini sama seperti yang ada pada sidebar agranik.id. 

Mudah bukan? Semoga bermanfaat jika ada pertanyaan silahkan tulis di kolom komentar dan jangan lupa bantu share. Terima kasih. 

Taufik Nurhasan Hidup itu seperti bersepeda. Kalau ingin menjaga keseimbangan, harus terus bergerak maju.facebook

Berbagi :