Cara Membuat Popular Post menjadi Thumbnail Tanpa Judul dan Ringkasan


Popular Post (Widget) adalah suatu fitur yang disediakan blogger kepada para pengelola situs blog untuk menampilkan postingan/artikel yang paling sering dicari pengunjung di situs blog. Walaupun tak sepenting Widget Recent Post, Popular Post juga merupakan sebuah navigasi blog yang dapat dikatakan wajib dimiliki oleh sebuah situs blog.

Alasan kenapa widget Popular Post wajib dipasang di sebuah situs blog adalah akan membuat pengunjung mengetahui artikel/postingan yang paling digemari di situs blog anda. Dengan begitu, artikel top (popular) tersebut tidak hanya mendapatkan pengunjung dari search engine saja, karena selain pengunjung di search engine, pengunjung tambahan dapat didapat dari pengunjung yang tertarik terhadap navigasi Popular Post itu sendiri. Dengan begitu, Pageview yang anda dapatkan akan bertambah.


Cara Membuat Popular Post menjadi Thumbnail Tanpa Judul dan Ringkasan


Ini adalah tampilan widget popular post sederhana yang merupakan widget bawaan dari blogger yang belum menerima kostuminasi apapun. Singkatnya, widget ini adalah bentuk awal widget dari popular post. 

Ikuti langkah-langkah berikut ini :

1. Login ke Dashboard situs blog anda

2. Pilih menu Tata Letak/LayoutTambahkan Gadget → Pilih Entri Populer

3. Pilih opsi (banyaknya post yang akan ditampilkan, perhitungan popular post dengan batasan waktu) sesuai kebutuhan anda


4. Klik Simpan

5. Sekarang Masuk ke menu Tema / DesainEdit HTML. 

JANGAN Klik pada kotak centang Expand Widget Templates. Biarkan saja tidak dicentang, dan cari  PopularPosts1 (Lakukan dengan cara Ctrl + F untuk menemukannya di template anda) dan anda akan mendapatkan beberapa baris kode seperti ini :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>.....</b:widget>

4. Ubah Baris kode tersebut dengan kode berikut ini :

          <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
            <b:widget-settings>
              <b:widget-setting name='numItemsToShow'>1</b:widget-setting>
              <b:widget-setting name='showThumbnails'>true</b:widget-setting>
              <b:widget-setting name='showSnippets'>false</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 == &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' expr:title='data:post.title'><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 expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' 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 class='clear'/>
          <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 expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div class='clear'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
          </b:widget>

Tambahkan CSS

5. Tempelkan kode berikut ini untuk menganti CSS Post Populer yang ada di template anda :

 /* Popular Post */
.PopularPosts .item-title{display:none}
.PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent;float:left;list-style:none;margin:8px;padding:0;border:0;overflow:hidden}
.popular-posts .item-thumbnail{position:relative;overflow:hidden;margin:0;}
.popular-posts .item-thumbnail img{padding:0;height:73px;width:73px;}

6. Klik Simpan

7. Lihat blog anda.

Tampilan Widget Post Popular anda kini hanya menampilkan gambar saja tanpa judul dan ringkasan.

Widget Popular Post menjadi Thumbnail Tanpa Judul dan Ringkasan ini sangat cocok untuk blog dengan niche aplikasi, resep dan fotografi karena mengutamakan tampilan gambar pada situs blog

Nah, Mudah bukan?

Share this

Related Posts

Previous
Next Post »