3 Widget Popular Post dengan Satu Gambar - Berbicara widget terkenal post ini memang tidak ada habisnya, para pendesain blog menyulap widget terkenal post menjadi lebih unik dan menarik. Salah satu Widget Entry Popular Post yang unik dan menarik perhatian yakni Widget Popular Post dengan Satu Gambar.
Widget ini menampilkan satu gambar atau thumbnail besar artikel terkenal kau disertai dengan judul postingan, tampilan popular post ini sangat menarik, kemungkinan yang terjadi artikel tersebut dapat menjadi sentra perhatian para pengunjung setia Blog kau untuk membuka halaman artikel tersebut.
Terkait :
1. Login ke akun Blogger memakai email dan kata sandi kamu
2. Setelah berhasil masuk kedashbord blog, kau pilih Layout/Tata letak
3. Kemudian klik tambah gadget
4. Langkah selanjutnya, kau pilih Entry Popular
5. Klik tombol simpan
Setelah widget berhasil di buat, langkah berikunya yaitu menambahkan instruksi ke dalam template kamu.
Widget Popular Post dengan Satu Gambar 1
1. Masih keadaan login di akun Blogger
2. Silahkan kau pilih Tempalte, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body>, copy script di bawah ini dan pastekan diatasnya.
4. Tahap berikutnya, kau cari kode ]]></b:skin>, kemudian kau salin instruksi di bawah ini dan pastekan diatasnya.
5. Simpan Template
Hasil dari instruksi diatas
Widget Popular Post dengan Satu Gambar 2
1. Login ke akun Blogger
2. Silahkan kau pilih Tempalte, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body>, copy script di bawah ini dan pastekan diatasnya.
4. langkah berikutnya, kau cari kode ]]></b:skin>, kemudian kau salin instruksi di bawah ini dan pastekan diatasnya.
5. Simpan Template
Hasil dari instruksi diatas
Widget Popular Post dengan Satu Gambar 3
1. Login ke akun Blogger
2. Silahkan kau pilih Tempalte, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body>, copy script di bawah ini dan pastekan diatasnya.
4. Berikutnya, kau cari kode ]]></b:skin>, kemudian kau salin instruksi di bawah ini dan pastekan diatasnya.
Hasil dari instruksi diatas
Silahkan kau pilih salah satu terkenal post yang kau sukai, untuk dipasangkan di blog atau web kamu. Demikian tutorial cara menciptakan widget popular post dengan satu gambar, sekian dari saya Happy Blogging.
Sumber http://www.websiteedukasi.com/
Widget ini menampilkan satu gambar atau thumbnail besar artikel terkenal kau disertai dengan judul postingan, tampilan popular post ini sangat menarik, kemungkinan yang terjadi artikel tersebut dapat menjadi sentra perhatian para pengunjung setia Blog kau untuk membuka halaman artikel tersebut.
Terkait :
- 2 Cara Membuat Popular Post Gambar Keren dan Elegan
- 4 Cara Membuat Popular Post Keren di Blog
- Membuat Style Widget Popular Posts Thumbnail dengan CSS
- Popular Post Efek Hover Border Dan Background Color
- Modifikasi Widget Popular Post Menjadi Lebih keren
- Popular Posts Slide Down Thumbnail Valid HTML5
- Cara Membuat Rotating Images pada Widget Popular Post
- 5 Widget Popular Post Keren Warna Warni
- Cara menciptakan Popular Post Thumbnail Bentuk Gallery
- Cara Modifikasi Popular Post untuk Template Gallery
- Cara Membuat Popular Post Simple, Ringan dan Keren
Untuk kau yang tertarik ingin memasang widget Popular Post ini, kau dapat mengikuti panduannya di bawah ini step by step. Langsung saja ke topik inti yakni tutorial pemasangan ke-2 Widget Popular Post dengan Satu Gambar ini.
Langkah Pemasangan 1
1. Login ke akun Blogger memakai email dan kata sandi kamu
2. Setelah berhasil masuk kedashbord blog, kau pilih Layout/Tata letak
3. Kemudian klik tambah gadget
4. Langkah selanjutnya, kau pilih Entry Popular
5. Klik tombol simpan
Setelah widget berhasil di buat, langkah berikunya yaitu menambahkan instruksi ke dalam template kamu.
Langkah Pemasangan 1 (pemasangan kode)
Widget Popular Post dengan Satu Gambar 1
1. Masih keadaan login di akun Blogger
2. Silahkan kau pilih Tempalte, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body>, copy script di bawah ini dan pastekan diatasnya.
<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>
4. Tahap berikutnya, kau cari kode ]]></b:skin>, kemudian kau salin instruksi di bawah ini dan pastekan diatasnya.
/* Popular Post One Image1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.2em;font-weight:700; background-color: rgba(32, 32, 32, 0.77);width: 173px;height: 50px;padding: 10px 24px;color:#fff}
5. Simpan Template
Hasil dari instruksi diatas
Widget Popular Post dengan Satu Gambar 2
1. Login ke akun Blogger
2. Silahkan kau pilih Tempalte, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body>, copy script di bawah ini dan pastekan diatasnya.
<script type='text/javascript'>
//<![CDATA[
var newidth=295;var neweight=170;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>
4. langkah berikutnya, kau cari kode ]]></b:skin>, kemudian kau salin instruksi di bawah ini dan pastekan diatasnya.
/* Popular Post One Image2 */
.PopularPosts .widget-content ul{padding:0;margin-top:-10px;width:100%}
.PopularPosts .item-thumbnail{margin:0;border:4px double #ddd;}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;font-weight:400;font-size:14px;}
.PopularPosts .item-title a:hover{color:#FCA13A}
.PopularPosts .item-snippet{font-size:14px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px solid #ddd}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:170px;margin-bottom:10px;font:13px Arial;width:100%;}
.PopularPosts img{padding:0;height: 130px;width: 100%;}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0;list-style-type: none;}
5. Simpan Template
Hasil dari instruksi diatas
Widget Popular Post dengan Satu Gambar 3
1. Login ke akun Blogger
2. Silahkan kau pilih Tempalte, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body>, copy script di bawah ini dan pastekan diatasnya.
<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>
4. Berikutnya, kau cari kode ]]></b:skin>, kemudian kau salin instruksi di bawah ini dan pastekan diatasnya.
/* Popular Post One Image3 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}
Hasil dari instruksi diatas
Silahkan kau pilih salah satu terkenal post yang kau sukai, untuk dipasangkan di blog atau web kamu. Demikian tutorial cara menciptakan widget popular post dengan satu gambar, sekian dari saya Happy Blogging.
Sumber http://www.websiteedukasi.com/
