Cara Menampilkan Posting Berdasarkan Label Dengan Thumbnail - Sebelumnya saya sudah bahas bagaimana Cara Menampilkan Posting Berdasarkan Label tapi ini mah hanya judul posting doank yang munculnya, nah sekarang saya akan memodifikasi Tampilannya di tambah Thumbnail dan sedikit deskripsi Posting kaya di Blazer Blog, jika sobat tertarik silahkan perhatikan baik-baik.Sebelum memulai nya perlu sobat ketahui Gambar yang disamping itu hanya DEMO yah nanti jadi nya kaya gambar disamping.Cari kode sidebar content, setelah ketemu letakan kode dibawah ini tepat dibawah kode sidebar content
/* Idblogmaker2 Content */.Idblogmaker2 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjOK4KeC5jPpKUhiUoFxfYbSuShUr717ZQagfSKvRlccadKhNx4X8yEd-4nUMGqvutdguqCgnqYhcm1AbaJbW8AY1De9h2Q2gSNqdMot9dznupLEVrZrQ2WBndGO0eVmedtUeheAroCWdE/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker2 {font:normal 12px Arial; color:#555;line-height: 1.4em;} .Idblogmaker2 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker2 li {margin:0;padding:0 auto;text-indent:0px;line-height:1.4em;} .Idblogmaker2 .widget {background:url() repeat-x bottom left;margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker2 a:link, .Idblogmaker2 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker2 a:hover {color:#000;text-decoration:underline;} .Idblogmaker2 .widget-content {margin:0 auto;padding:6px 10px;} /* IDB Featured Categories */ img.label_thumb{float:left;padding:0 auto;border:none;background:none;margin:0 10px 5px 0;height:72px;width:72px;} img.label_thumb:hover{background:none;}.label_with_thumbs {float:left;margin:0;padding:0} ul.label_with_thumbs li {margin:0 0 5px;clear:both;}.label_with_thumbs a {} .label_with_thumbs strong {} /* Idblogmaker3 Content */ .Idblogmaker3 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjOK4KeC5jPpKUhiUoFxfYbSuShUr717ZQagfSKvRlccadKhNx4X8yEd-4nUMGqvutdguqCgnqYhcm1AbaJbW8AY1De9h2Q2gSNqdMot9dznupLEVrZrQ2WBndGO0eVmedtUeheAroCWdE/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker3 {font:normal 12px Arial; color:#555;line-height: 1.3em;} .Idblogmaker3 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker3 li {margin:0;padding:2px 0;text-indent:0px;line-height:1.4em;} .Idblogmaker3 .widget {margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker3 .widget-content {margin:0 auto;padding:6px 10px;}.Idblogmaker3 a:link, .Idblogmaker3 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker3 a:hover {color:#000;text-decoration:underline;}
Pilih Add Gadget HTML Java Script, copy kode dibawah ini.
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Icon?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Perhatikan baik-baik kode yang berwarna Merah adalah Jumlah Post yang ingin ditampilkan.
Perhatikan lagi baik-baik kode yang berwarna biru adalah Nama Label nya, ganti sesuai Label kamu.
Jika label sobat ada dua kata contoh nama label nya TUTORIAL BLOG sobat tinggal nambahin %20sehingga kode nya jadi seperti ini TUTORIAL%20BLOG.
Nah sekian penjelasan dari saya jika ada hal yang kurang paham silahkan tinggalkan pesan di Kotak Komentar.
Posting Komentar