3 Widget Popular Post dengan Satu Gambar
3 Widget Popular Post dengan Satu Gambar - Berbicara widget populer post ini memang tidak ada habisnya, para pendesain blog menyulap widget populer 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 populer kamu disertai dengan judul postingan, tampilan popular post ini sangat menarik, kemungkinan yang terjadi artikel tersebut bisa menjadi pusat perhatian para pengunjung setia Blog kamu untuk membuka halaman artikel tersebut.
Terkait :
1. Login ke akun Blogger menggunakan email dan kata sandi kamu
2. Setelah berhasil masuk kedashbord blog, kamu pilih Layout/Tata letak
3. Kemudian klik tambah gadget
4. Langkah selanjutnya, kamu pilih Entry Popular
5. Klik tombol simpan
Setelah widget berhasil di buat, langkah berikunya adalah menambahkan kode ke dalam template kamu.
Widget Popular Post dengan Satu Gambar 1
1. Masih keadaan login di akun Blogger
2. Silahkan kamu pilih Tempalte, lalu klik Edit HTML
3. Kemudian kamu cari kode </body>, copy script di bawah ini dan pastekan diatasnya.
4. Tahap berikutnya, kamu cari kode ]]></b:skin>, lalu kamu salin kode di bawah ini dan pastekan diatasnya.
5. Simpan Template
Hasil dari kode diatas
Widget Popular Post dengan Satu Gambar 2
1. Login ke akun Blogger
2. Silahkan kamu pilih Tempalte, lalu klik Edit HTML
3. Kemudian kamu cari kode </body>, copy script di bawah ini dan pastekan diatasnya.
4. langkah berikutnya, kamu cari kode ]]></b:skin>, lalu kamu salin kode di bawah ini dan pastekan diatasnya.
5. Simpan Template
Hasil dari kode diatas
Widget Popular Post dengan Satu Gambar 3
1. Login ke akun Blogger
2. Silahkan kamu pilih Tempalte, lalu klik Edit HTML
3. Kemudian kamu cari kode </body>, copy script di bawah ini dan pastekan diatasnya.
4. Berikutnya, kamu cari kode ]]></b:skin>, lalu kamu salin kode di bawah ini dan pastekan diatasnya.
Hasil dari kode diatas
Silahkan kamu pilih salah satu populer post yang kamu sukai, untuk dipasangkan di blog atau web kamu. Demikian tutorial cara membuat widget popular post dengan satu gambar, sekian dari saya Happy Blogging.
Widget ini menampilkan satu gambar atau thumbnail besar artikel populer kamu disertai dengan judul postingan, tampilan popular post ini sangat menarik, kemungkinan yang terjadi artikel tersebut bisa menjadi pusat perhatian para pengunjung setia Blog kamu 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 membuat Popular Post Thumbnail Bentuk Gallery
- Cara Modifikasi Popular Post untuk Template Gallery
- Cara Membuat Popular Post Simple, Ringan dan Keren
Untuk kamu yang tertarik ingin memasang widget Popular Post ini, kamu bisa 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 menggunakan email dan kata sandi kamu
2. Setelah berhasil masuk kedashbord blog, kamu pilih Layout/Tata letak
3. Kemudian klik tambah gadget
4. Langkah selanjutnya, kamu pilih Entry Popular
5. Klik tombol simpan
Setelah widget berhasil di buat, langkah berikunya adalah menambahkan kode 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 kamu pilih Tempalte, lalu klik Edit HTML
3. Kemudian kamu cari kode </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, kamu cari kode ]]></b:skin>, lalu kamu salin kode 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 kode diatas
Widget Popular Post dengan Satu Gambar 2
1. Login ke akun Blogger
2. Silahkan kamu pilih Tempalte, lalu klik Edit HTML
3. Kemudian kamu cari kode </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, kamu cari kode ]]></b:skin>, lalu kamu salin kode 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 kode diatas
Widget Popular Post dengan Satu Gambar 3
1. Login ke akun Blogger
2. Silahkan kamu pilih Tempalte, lalu klik Edit HTML
3. Kemudian kamu cari kode </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, kamu cari kode ]]></b:skin>, lalu kamu salin kode 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 kode diatas
Silahkan kamu pilih salah satu populer post yang kamu sukai, untuk dipasangkan di blog atau web kamu. Demikian tutorial cara membuat widget popular post dengan satu gambar, sekian dari saya Happy Blogging.
0 Response to "3 Widget Popular Post dengan Satu Gambar"
Post a Comment