Membuat Popular Post Gambar Efek Rounded

486 views

Cara Membuat Widget Popular Post Gambar Rounded – Membuat widget popular post bergambar dengan efek rounded atau sudut pada gambar. Mungkin sebagian dari anda pernah menemukan suatu blog dengan widget popular post bergambar yang sudutnya melengkung dan ketika cursor diarahkan maka gambar akan berputar dan membentuk lingkaran? Nah Blogger Gubug akan memberikan tutorial blog memberikan efek rounded pada widget artikel popular.

popular post gambar efek rounded

Cara Membuat Popular Post Gambar dengan Efek Rounded

1. Login ke akun blogger
2. Masuk menu Templates > Edit HTML > centang Expand Templates Widget
3. Cari kode ]]></b:skin> copy kode berikut tepat diatasnya

#PopularPosts1{max-width:300px;}
#PopularPosts1 dd{float:center;margin:0;margin-top:8px;background:none;display:block;}
#PopularPosts1 img{border-radius:30px 0 30px 0;-moz-border-radius:30px 0 30px 0;-webkit-border-radius:30px 0 30px 0;-o-border-radius:30px 0 30px 0;float:left;width:85px;height:85px;opacity:0.5;filter:alpha(opacity=70);background:none;border:2px solid #000ddd;border-bottom:2px solid #444;border-right:2px solid #333;padding:3px;margin:1px;transition:all 0.5s;
-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
#PopularPosts1 img:hover{cursor:move;-moz-transform:scale(1.1) rotate(-0deg);-webkit-transform:scale(1.1) rotate(-0deg);-o-transform:scale(1.1) rotate(-0deg);-ms-transform:scale(1.1) rotate(-0deg);transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:2.2;border:2px solid #ccc;border-right:2px solid #000ddd;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);border-bottom:2px solid #0274be;box-shadow:1px 1px 5px #0274be}
#PopularPosts1 ul{padding:0;overflow:none;margin:0}

4. Kemudian cari kode widget popular post, kurang lebih seperti berikut

<b:widget id=’PopularPosts1′ locked=’false’ title=’Populer’ type=’PopularPosts’>
<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 == &quot;false&quot;’>
          <b:if cond=’data:showSnippets == &quot;false&quot;’>
            <!– (1) No snippet/thumbnail –>
            <a expr:href=’data:post.href’><data:post.title/></a>
          <b:else/>
            <!– (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 == &quot;false&quot;’>
            <!– (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’ target=’_blank’>
                    <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’ target=’_blank’>
                    <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>
  </div>
</b:includable>
</b:widget>

5. Hapus dan ganti dengan kode dibawah ini

<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’>
<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’>
<dd>
<b:if cond=’data:showThumbnails == &quot;false&quot;’>
<b:if cond=’data:showSnippets == &quot;false&quot;’>
<!– (1) No snippet/thumbnail –>
<a expr:href=’data:post.href’><data:post.title/></a>
<b:else/>
<!– (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 == &quot;false&quot;’>
<!– (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’ target=’_blank’>
<img alt=’popular post’ 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 –>
<b:if cond=’data:post.thumbnail’>
<a expr:href=’data:post.href’ expr:title=’data:post.title’ rel=’bookmark’><img expr:alt=’data:post.title’ expr:src=’data:post.thumbnail’/></a>
<b:else/>
<a expr:href=’data:post.href’ expr:title=’data:post.title’ rel=’bookmark’><img alt=’no image’ src=’http://1.bp.blogspot.com/-LURPGoux60I/TlZ1QtKs5RI/AAAAAAAAaSY/wtdCWh3uyLw/s1600/no-image.png’/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class=’clear’/>
</div>
</b:includable>
</b:widget>

5. Simpan templates

Silahkan sesuaikan tulisan berwarna biru dengan keinginan anda, jangan lupa untuk pengaturan tata letak widget popular post, beri centang tumbnail gambar dan cuplikan agar widget artikel popular yang tampil hanya gambar. Ok selamat mencoba membuat widget Popular Post Gambar Rounded  😉

Hosting Unlimited Indonesia