Jumat, 06 April 2012

Cara Membuat Tampilan Populer Post Lebih Menarik (Grid)

Cara Membuat Tampilan Populer Post Lebih Menarik (Grid) - Siang sobat, sudah lama nie tidak posting tentang tutorial blog. Kali ini saya akan sedikit berbagi ilmu tentang bagaimana cara membuat tampilan populer post kalian lebih menarik. Jadi dengan tampilan ini maka populer post kalian akan lebih tampak menarik dan akan menghemat tempat karena yang tampil hanya gambar saja. Contohnya saja diblog saya ini.
Contoh Populer Post Grid

Bagaimana sobat tertarik membuat populer post kalian lebih menarik.


Cara Membuat Tampilan Popular Post Lebih Menarik (Grid) :

1. Jika sobat belum punya Widget Popular post silahkan tambah Widget dulu
2. Jika sudah punya Silahkan Edit Widget, Kemudian Hilangkan tanda centang pada Snippet
3. Kemuadian pergi ke Dasboard => Template => Edit HTMLJangan beri tanda centang pada Expand Widget.
4. Cari kode ]]></b:skin>  (Untuk pencarian dengan cara cepat tekan Ctrl+F )
5. Tambahkan Kode di bawah ini diatas kode ]]></b:skin>

.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}


6. Kemudian cari kata PopularPosts1 , Sobat akan diarahkan pada kode seperti di bawah 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'>
      <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>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

7. Ganti kode diatas dengan kode di bawah 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'>
      <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/>
            <!-- (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'>
              
                <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' src='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </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>

8 . Save.
Nb : jika ingin mengembalikan seperti semula. Kalian cukup hapus widget populer post terus pasang kembali dengan yang baru.
Gimana sobat mudah bukan........... selamat mencoba!! good luck...
Baca Juga Artikel Di Bawah Ini!!

7 komentar:

  1. Thanks gan buat tutorialnya, ane coba dulu mudah2an sukses

    mampir-mampir gan
    http://triosinaga.blogspot.com

    BalasHapus
  2. gan, ane gak berhasil nih, hasilnya masih kaya bawaan, gak sama kaya contoh diatas. kira-kira ane salah step dimana ya?

    BalasHapus
    Balasan
    1. coba ikuti langkah mulai dari awal.

      Hapus

Related Posts Plugin for WordPress, Blogger...