Kamis, 26 April 2012

Filled Under:

Cara Membuat Popular Post Berjejer (Grid)

Contoh Popular Post 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.
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...




5 komentar:

  1. bang kalo ada text nya sekalian bisa gk?? saya pernah lihat ada yang bisa cuma saya gk tau caranya???

    BalasHapus
  2. mau tanya, kalo tau boleh dijawab
    gmana ya. caranya buat gambar di postingan itu tertata grid

    BalasHapus
  3. setelah ikuti langkah nmor 5 agan ckup carik kode


    setelah itu ikuti langkah selanjutnya

    BalasHapus
  4. Artikelnya bagus Sob. Boleh dicb deh.

    BalasHapus
  5. maksih gan

    yuk buat kalian yang suka nonton streaming bola gak ribet gratis
    Berita update
    Streaming Tv Online bola

    BalasHapus