Cara Membuat Thumbnail Pertama Jadi Besar di Popular Post

Cara Membuat Thumbnail Pertama Menjadi Besar di Popular Post:

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  cantik 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



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 bahagian atas atau juga anda dapat melihat contoh nya secara langsung di bahagian 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,iaitu widget yang menampilkan salah satu artikel yang populer atau yang sering di baca oleh para pengujung blog


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

• 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

Nah itulah cara membuat Widget Popular Post di blog,semoga artikel ini bisa membantu sobat blogger semua,selamat mencoba dan salam blogger.