Membuat Tulisan Terbaru Dengan Thumbnail Sesuai Label atau Kategori di Blogger

Terkadang kita ingin memiliki postingan kita terorganisir sehingga pembaca dapat menemukan topik yang menarik lebih mudah, dan saat itulah bukannya menempatkan sebuah widget dengan posting terbaru, kita bisa menyatukan entri terbaru diurutkan berdasarkan kategori, sehingga kita akan dapat untuk menampilkan posting terbaru untuk setiap label yang kita inginkan dan juga menampilkan thumbnail untuk kategori tertentu.

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

Tangga

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

... Kemudian centang kotak centang Expand Widget Template:

. Langkah 2 Mencari potongan kode ini:

]]> </ B: skin>

dan di atasnya, paste satu ini:

/ * Posting terbaru oleh 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, 0,4);
-Moz-box-shadow: 0 1px 1px RGBA (0, 0, 0, 0,4);
box-shadow: 0 1px 1px RGBA (0, 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 mencari tag ini (CTRL + F)

</ Head>

... Dan tambahkan script berikut di atasnya:

<script type='text/javascript'>
/ / <! [CDATA [
Fungsi labelthumbs (json) {document.write ('<ul class="label_with_thumbs">'); 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 commenttext = entry.link [k] judul,... 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 tanggal mundur = entry.published $ t, var cdyear = postdate.substring (0,4); var cdmonth = postdate.substring (5,7); var cdday = postdate.substring (8,10); var monthnames = new class = "clearfix"> '), jika (showpostthumbnails == true)
document.write ('<a href="'+posturl+'" sasaran ="_top"> <img class="label_thumb" src="'+thumburl+'"/> </ a>'); document.write (' <strong> <a href="'+posturl+'" sasaran ="_top"> '+ Post Title +' </ a> </ strong> <br> '), jika ("konten" dalam entri) {var postcontent = entri . konten $ t;.}
lain
if ("Ringkasan" dalam entri) {var postcontent = $ t entry.summary;.}
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 Komentar', jika (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"> Lebih »</ a>'; flag = 1;;}
document.write (towrite); document.write ('</ li>'), jika (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 kami telah menambahkan Css untuk gaya widget dan script untuk membuatnya bekerja. Sekarang yang harus kita lakukan adalah menambahkan kode widget ke sidebar blog di Html / Javascript gadget:

. Langkah 4 Pergi ke Layout - klik Tambah Gadget

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

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

Catatan: Dimana ia mengatakan Nama-of-the-label adalah nama label yang ingin ditampilkan, dan jika label Anda adalah kasus sensitif, seperti dalam contoh saya, maka Anda harus mengetik seperti itu.

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

var numposts ← Jumlah tulisan yang ditampilkan
var showpostthumbnails ← Tampilkan / sembunyikan thumbnail
var displaymore ← Menampilkan atau menyembunyikan membaca link lebih
var displayseparator ← Tampilkan / sembunyikan pemisah
var showcommentnum ← Tampilkan / sembunyikan jumlah komentar
var showpostdate ← Tampilkan / sembunyikan tulisan tanggal
var showpostsummary ← Tampilkan atau tidak tulisan ringkasan
var NUMCHARS ← 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, maka hanya ulangi langkah 5 untuk setiap kategori tambahan yang ingin Anda tambahkan.

Klik preview untuk menampilkan editan anda. Semoga berhasil dan selamat menikmati!

Pesan Mini : Gunakanlah waktumu untuk belajar dan untuk bersenang-senang.