Tampilkan Recent Posts Dengan Thumbnail Untuk Label Khusus Atau Kategori Di Blogger

Kadang-kadang kita ingin memiliki segalanya terorganisasi sehingga pembaca dapat menemukan topik yang menarik lebih mudah, dan saat itulah bukannya menempatkan widget dengan pesan-pesan terbaru, kita bisa menyatukan entri terbaru diurutkan berdasarkan kategori, sehingga kita akan dapat untuk menampilkan pesan-pesan terbaru untuk setiap label yang kita inginkan dan juga menampilkan thumbnail untuk kategori kami. 

Screenshot

Untuk menambahkan ini keren gadget / widget untuk kategori terbaru, cukup ikuti langkah-langkah selanjutnya: 

Tangga 

Langkah 1. Dari Anda Blogger Dashboard , pergi ke Template / Edit HTML 

... Kemudian centang Expand Template Widget kotak centang: 

Langkah 2 Cari potongan kode ini.: 

]]> </ B: skin> 

dan tepat di atasnya, menyisipkan satu ini: 

 / * Terbaru posting label
--------------------------------- * /
img.label_thumb {
float: left;
margin-right: 10px penting;
height: 65px; / * tinggi Thumbnail * /
width: 65px; / * lebar Thumbnail * /
border: 1px solid # fff;
-Webkit-border-radius: 10px;
-Moz-border-radius: 10px;
border-radius: 10px;
-Webkit-box-shadow: 0 1px 1px RGBA (0, 0, 0, .4);
-Moz-box-shadow: 0 1px 1px RGBA (0, 0, 0, .4);
box-shadow: 0 1px 1px RGBA (0, 0, 0, .4);
}

. Label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding: 8px 0;
min-height: 65px;
margin-bottom: 0px;
border-bottom: 1px dotted # 999999;
}

. Label_with_thumbs li {
list-style: none;
padding-left: 0px penting;
}

. Label_with_thumbs a {text-transform: uppercase;}
. Label_with_thumbs kuat {padding-left: 0px;}

Langkah 3. Sekarang cari tag ini (CTRL + F) 

 </ Head>

... Dan tambahkan script berikut di atasnya: 

 <script type='text/javascript'>
/ / <! [CDATA [
fungsi labelthumbs (json) {document.write ('class="label_with_thumbs"> <ul'); for (var i = 0; i <numposts; i + +) {var masuk = json.feed.entry [i]; var Post Title . = entry.title $ t; var posturl, jika (i == json.feed.entry.length) break; for (var k = 0; k <entry.link.length, k + +) {if (entry.link [ . k] rel == 'balasan' && entry.link [k] == Jenis 'text / html') {var title = CommentText entry.link [k];... var commenturl = entry.link [k] href; }
if (entry.link [k] rel == 'alternatif'.) {posturl = entry.link [k] href;. break;}} var ThumbUrl; try {ThumbUrl = entry.media $ thumbnail.url;} catch ( error)

var mengundurkan = entry.published $ t;. var cdyear = postdate.substring (0,4); var cdmonth = postdate.substring (5,7); var cdday = postdate.substring (8,10); monthnames var = new class = "clearfix"> '), jika (showpostthumbnails == true)
document.write ('target <a href="'+posturl+'" ="_top"> <img class="label_thumb" src="'+thumburl+'"/> </ a>'); document.write (' <strong> <a href="'+posturl+'" sasaran ="_top"> '+ Post Title +' </ a> </ strong> <br> '); if ("content" dalam entri) {var postcontent = entri .. isi $ t;}
lain
if ("Ringkasan" dalam entri) {var postcontent = entry.summary $ t;.}
var lain postcontent = ""; var
else {document.write (''); postcontent = postcontent.substring (0, NUMCHARS); var quoteEnd = postcontent.lastIndexOf ("
var towrite =''; var - '+ Cdyear, flag = 1;}
if (showcommentnum == true)
{If (flag == 1) {towrite = towrite + '|';}
if (CommentText == '1 Komentar ') CommentText = '1 Comment'; if (CommentText == '0 Komentar ') CommentText =' Tidak ada Komentar '; CommentText =' <a href = "'+ commenturl +'" target = " _top "> '+ CommentText +' </ a> '; towrite = towrite + CommentText, flag = 1;;}
if (displaymore == true)
{If (flag == 1) towrite = towrite + '|'; towrite = towrite + '<a href="'+posturl+'" class="url" sasaran ="_top"> More »</ a>'; flag = 1;;}
document.write (towrite); document.write ('</ li>'); if (displayseparator == true)
if (i! = (numposts-1))
document.write ('');} document.write ('</ ul>');}
/ /]]>
</ Script>

Catatan: untuk menambahkan pic Anda sendiri untuk posting tanpa thumbnail, ganti url gambar dengan warna biru dengan Anda sendiri 

Jadi kita telah menambahkan Css untuk gaya widget dan script untuk membuatnya bekerja. Sekarang yang harus kita lakukan adalah menambahkan kode widget ke sidebar blog di gadget Html / Javascript: 

Langkah 4 Pergi ke Layout -. Klik pada Tambah Gadget 

. Langkah 5 Pilih widget HTML / Javascript dan paste kode ini di dalam kotak kosong: 

 numposts <script type='text/javascript'> var = 3; var showpostthumbnails = true; var displaymore = false; var displayseparator = true; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; NUMCHARS var = 100; </ script>
<Script type = "text / javascript"

Catatan: Apabila dikatakan Nama-of-the-label adalah nama label yang ingin ditampilkan, dan jika label Anda adalah case sensitive, seperti dalam contoh saya, maka Anda harus mengetik seperti itu. 

Juga dalam kode terakhir, ada bagian yang kita dapat menyesuaikan, hanya mengubah benar dengan yang salahatau sebaliknya: 

 numposts var ← Jumlah posting untuk menampilkan
showpostthumbnails var ← Tampilkan / sembunyikan thumbnail
var displaymore ← Menampilkan atau menyembunyikan membaca link lebih
var displayseparator ← Tampilkan / sembunyikan pemisah
var showcommentnum ← Menampilkan / menyembunyikan jumlah komentar
var showpostdate ← Menampilkan / menyembunyikan tanggal posting
var showpostsummary ← Tampilkan atau tidak tulisan ringkasan
NUMCHARS var ← Jumlah posting karakter (di sini Anda harus mengubah nilai 100)

Ingat bahwa gadget menampilkan posting terbaru dari label tertentu, oleh karena itu, jika Anda ingin menampilkan posting terbaru dari label lain kemudian hanya ulangi langkah 5 untuk setiap kategori tambahan yang ingin Anda tambahkan. 

Itu saja :) Nikmati!