Cara membuat Thumbnail Bagian Pertama di Populer Post Menjadi Besar - Tidak sedikit di blog ini share tentang bagaimana memodifikasi Populer Post yang berada di bagian widget ini menjadi keren dan juga menarik ketika di lihat oleh Para Pengujung
Selain membuat widget Populer Post ini menjadi warna-warni anda juga dapat mempercantik thumbnail di Popular Post ini menjadi tampilan Grid yang sangat menarik sekali,dan mungkin andapun akan tertarik dengan tampilan Post dengan Thumbnail yang Grid
Baca Juga : Membuat Thumbnail Popular Post menjadi Grid
Nah kali ini juga masih membahas tentang tampilan Popular Post dengan Thumbnail,namun bukan menjadi Grid,melain kan membuat Thumbnail Populer Post ini tampilan nya akan menjadi besar di bagian awal nya,hanya bagian awal nya saja tidak dengan yang lain nya
Maka dengan begitu tampilan Populer Post anda akan menjadi menarik,dan untuk contoh Popopuler post ini anda dapat melihat nya pada gambar di bagian atas atau juga anda dapat melihat contoh nya secara langsung di bagian samping blog ini
Dan mungkin sebagian dari andapun pernah melihat tampilan Populer Post ini di blog lain nya,dan jika anda tertarik dan ingin mencoba tampilan popular post ini,anda dapat mencoba nya sendiri dengan mengikuti langkah-langkah nya di bawah ini
Selain membuat widget Populer Post ini menjadi warna-warni anda juga dapat mempercantik thumbnail di Popular Post ini menjadi tampilan Grid yang sangat menarik sekali,dan mungkin andapun akan tertarik dengan tampilan Post dengan Thumbnail yang Grid
Baca Juga : Membuat Thumbnail Popular Post menjadi Grid
Nah kali ini juga masih membahas tentang tampilan Popular Post dengan Thumbnail,namun bukan menjadi Grid,melain kan membuat Thumbnail Populer Post ini tampilan nya akan menjadi besar di bagian awal nya,hanya bagian awal nya saja tidak dengan yang lain nya
Maka dengan begitu tampilan Populer Post anda akan menjadi menarik,dan untuk contoh Popopuler post ini anda dapat melihat nya pada gambar di bagian atas atau juga anda dapat melihat contoh nya secara langsung di bagian samping blog ini
Cara Membuat Thumbnail Populer Post Besar di Awal
Seperti yang telah kita ketahui,widget Populer Post ini adalah salah satu Widget Bawaan Blogger yang dimana widget ini sesuai dari nama nya yaitu Populer Post,yakni widget yang menampilkan salah satu artikel yang populer atau yang sering di baca oleh para pengujung blogDan mungkin sebagian dari andapun pernah melihat tampilan Populer Post ini di blog lain nya,dan jika anda tertarik dan ingin mencoba tampilan popular post ini,anda dapat mencoba nya sendiri dengan mengikuti langkah-langkah nya di bawah ini
- Silahkan anda masuk ke Dashboard Blogger anda dengan menggunakan Email ataupun pasword
- Setelah berada di bagian Dashboard silahkan klik template yang berada di samping kiri Dashboard kemudian klik edit html
- Setelah berada di bagian edit Html silahkan letakan CSS di bawah ini
/* Popular Post */
#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:200;font-size:14px;color:#444;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:#1F5CA8;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:#333; line-height:19px; padding:10px;font-size:12.6px; letter-spacing:.3px; 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;}
.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{border:1px solid #ddd;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,.PopularPosts li:first-child .item-title a{font-family: "Oswald";float:left; font-size:14px;padding-left:0px;background:#fff}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1em;}
.PopularPosts li a:before{display:none;}
- Kemudian langkah selanjut nya,silahkan cari Widget Populer Post yang telah anda pasang,lalu ganti dengan Widget Popular Post di bawah ini
<b:widget id='PopularPosts2' locked='false' title='Halaman Sering Tampil' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>gggggg
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
- Kemudian Save Template dan lihat Hasil nya
ads1
Previous
Posting Lebih BaruNext
Posting Lama
Posted by 09 Desember and have
0
komentar
, Published at
* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi