Cara simple membuat populer post hanya gambarnya saja (Grid Thumbs populer post)

By:

Cara membuat populer post hanya memunculkan gambarnya saja atau tanpa keterangan snipetnya, tampilannya grid thumbs atau sejajar cukup bagus di pasang diwidget blogger sobat sekalian.


Langsung saja sob,
1. Masuk blogger
2. Pilih   Layout



3. Pilih Gadget


 3. PilihPopular Post


5. Pilihan Di Popular Post cukup Image Thumbsnya dan hilangkan pada Snipetnya



5. Masuk ke Template - Edit HTML - proses


5. Berikan tanda pada Expand Widget Templates 














6. (tekan  F3) Cari  PopularPosts1



7. hapus  dari: <b:widget id='PopularPosts1' locked='false' title='' type='PopularPosts'> sampai </b:widget>

 
8. ganti dengan kode dibawah ini

<b:widget id='PopularPosts1' locked='false' title='' 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'>
              
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png'/>
       </b:if>
                  </a>
                </div>         
             </div>
            <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>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>






9. Ganti CSS, cari kode /skin letakan kode dibawah tepat diatasnya

#popular-posts { float:right;background:#; margin: 0 auto ;}
.popular-posts { float:right;background:#; margin: 0 auto ;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
.popular-posts .item-thumbnail{float:left;    -moz-box-shadow: 10px 10px 15px #595959;
    -webkit-box-shadow: 10px 10px 15px #595959;
    box-shadow: 10px 10px 15px #595959;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
}

.popular-posts .item-thumbnail:hover{float:left;    -moz-box-shadow: 10px 10px 15px #595959;
    -webkit-box-shadow: 10px 10px 15px #595959;
    box-shadow: 10px 10px 15px #595959;

    -webkit-transform:scale(0.985);
    -moz-transform: scale(0.985) ;
    -o-transform: scale(0.985) ;


}




10. Baru save dan finis

Location: Kramat Jati, Jakarta Capital Region, Indonesia [edit]

3 comments

25 Januari 2013 23.39

Terimakasih ya sob infonya :D
salam manis dari 717cinema.com

jangan luopa berkunjung kembalikk,,
THANKS

22 Februari 2013 15.14

@717cinema.com sama sama sob

1 Maret 2014 16.28

Mantap sob tutorialnya jadi tambah ilmu buat newbe kaya ane nih ? Nanti ane coba kalo lg ke warnet , krg mah pake hp jadul euy ? Hehe owh iya trik ini bisa di bikin SLIDE SHOW gk sob ?


Pasang INTERNET FASNET PLUS TV KABEL FIRSTMEDIA
Pasang FIRSTMEDIA internet speed hingga 100mbps + CHannel TV HD hingga 50HD hub 087777313417 only SMS