Kali ini Admin Bursa Info share Cara Membuat Recent Post Dengan Gambar atau Thumbnail berdasarkan Kategori Tertentu..Sebetulnya artikel ini sudah banyak di Google tapi semuanya hasilnya sama tidak bisa menampilkan angka
Akhirnya saya otak atik sendiri dan berhasil Bisa menampilkan angka pada recent post post dan jadikan Daftar Isi Berdasarkan Label Tertentu Dengan Gambar atau Thumbnail
Fungsi dari recent post dengan gambar atau thumbnail berdasarkan kategori tertentu ini bisa untuk mempercantik tampilan blog kita dan juga ikut meningkatkan jumlah pageview hlaman blog kita .. Selain itu juga bermanfaat untuk memudahkan para pengunjung blog kita untuk mencari artikel yang dibutuhkan di kategori yang di tuju
Sobat Blogger bhakan fungsi ini bisa dijadikan Membuat Daftar Isi berdasarkan Label atau Kategori Tertentu dengan Gambar tapi bisa juga di pasang di sidebar untuk di sidebar kami tidak terlalu rekomendasikan sebab bisa berakibat loading blog berat pada setiap halaman..Sobat bisa melihat contohnya di Blog ini
Jika sobat mau memasang recent post perlabel atau kategori dengan gambar atau thumbnail di blog sobat, silahkan ikuti petunjuknya berikut ini
Cara Memasang Recent Post By Label With Thumbnail Di Sidebar Blog
- Yang pertama,---- Masuk/Login ke Blogger.com .
- Pada Dashboard tampilan blogger baru, pilih dan klik Menu >> Tata Letak >> Tambah gadget >> HTML/JavaScript.
- Kemudian >> Masukkan semua Kode berikut ke dalam kotak HTML/JavaScript.
<style>
img.recent_thumb {padding:1px;width:100px;height:100px;border:0; float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: left;width:98%;min-height: 70px;margin: 5px 2px 5px 2px;padding: 0;font-size:12px; border-bottom:2px solid }ol.recent_posts_with_thumbs li { padding-bottom:5px; padding-top:5px; padding-right:5px; padding-left:10px; min-height:110px; border-bottom:solid 2px #816041; border-top:solid 2px #816041; border-left:solid 2px #816041; border-right:solid 2px #816041; }.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script src="https://b6661e7a8bc17ea950eca5c8641d86692d333b8f.googledrive.com/host/0B0QCzpqkTSlNeVZZZi0wNTdSbGs/recent-post-by-label-thumbnail.js"> </script>
<link href="https://googledrive.com/host/0B0QCzpqkTSlNeVZZZi0wNTdSbGs/style02.css" rel="stylesheet" type="text/css">
<script>
var numposts = 200;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100; </script>
<ol><script src="http://bursa-info.blogspot.com/feeds/posts/default/-/Serba%20Serbi?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"> </script></ol>
.recent_posts_with_thumbs {float: left;width:98%;min-height: 70px;margin: 5px 2px 5px 2px;padding: 0;font-size:12px; border-bottom:2px solid }ol.recent_posts_with_thumbs li { padding-bottom:5px; padding-top:5px; padding-right:5px; padding-left:10px; min-height:110px; border-bottom:solid 2px #816041; border-top:solid 2px #816041; border-left:solid 2px #816041; border-right:solid 2px #816041; }.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script src="https://b6661e7a8bc17ea950eca5c8641d86692d333b8f.googledrive.com/host/0B0QCzpqkTSlNeVZZZi0wNTdSbGs/recent-post-by-label-thumbnail.js"> </script>
<link href="https://googledrive.com/host/0B0QCzpqkTSlNeVZZZi0wNTdSbGs/style02.css" rel="stylesheet" type="text/css">
<script>
var numposts = 200;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100; </script>
<ol><script src="http://bursa-info.blogspot.com/feeds/posts/default/-/Serba%20Serbi?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"> </script></ol>
4. Setelah sobat memasukkan semua kode kedalam kotak HTML/javaScript,selanjutnya klik >> Simpan dan lihat hasilnya.
Cara Membuat Recent Post Berdasarkan Label Kategori Dengan Gambar Pada Postingan Dan Laman Blog
- Silahkan sobat pilih dan klik >> Buat Posting/Artikel Baru .
- Lalu sobat masukkan semua Kode di atas tadi, Ingat masukkan Kode pada Mode HTML dan bukan Compose
- Yang terakhir Publikasikan dan lihat hasilnya.
Keterangan:Oke cukup sampai di sini semoga bermanfaat Bila ada pertanyaan silahkan tinggalkan komentar , Salam Bursa Info
- var numposts = 10 adalah Jumlah artikel posting yang akan di tampilakan. Ganti nilainya sesuai dengan keinginan sobat.
- var numchars = 150 adalah Jumlah karakter atau cuplikan tulisan posting yang akan di tampilkan. Ganti nilainya sesuai dengan keinginan sobat.
- http://bursa-info.blogspot.com/ Ganti dengan alamat URL blog sobat.
- Serba%20Serbi yaitu label ganti label tersebut dengan label milik anda ,Perlu Di Ingat Bila Label ada Dua suku kata harus diberi %20 tidak boleh ada spasi seperti contoh milik saya ini Serba%20Serbi..
