Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Membuat Popular Post untuk Template Gallery Blogger

Membuat Popular Post untuk Template Gallery Blogger-Secara default kita dapat memasang widget popular post melalui dashboard blogspot Anda. Hanya saja terkadang tampilan default terkesan membosankan dan biasa saja yang pada akhirnya ingin melakukan modifikasi agar terlihat lebih bagus dan keren.

Sebelumnya saya juga pernah sharing tentang artikel popular post Cara Mempercantik Tampilan Blog Dengan Widget Popular Posts bedanya kali ini adalah tampilan akan terlihat lebih ke seperti Gallery toko online. Script ini saya dapat dari blognya maskolis.com yang merupakan blog tempat saya belajar mengenal blog hingga terbangunlah blog ini.

Widget popular post yang saya bagikan kali ini sangat cocok buat blog yang menampilkan gambar, blog game, film dll. Untuk tampilannya akan terlihat seperti pada gambar dibawah ini:

 photo SnapCrab_NoName_2016-8-10_14-44-5_No-00_zpsoooc9yag.png

Modifikasi Popular Post Blogger

  • Pertama login ke akun blogger soba
  • Pada halaman dashboard pilih Template lalu Edit HTML
  • Cari kode ]]></b:skin> :, lalu letakkan kode di bawah ini tepat diatas kode ]]></b:skin> :
.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
  • Selanjutnya jangan lupa klik simpan
  • Sekarang ke Layout→Add a Gadget→Popular Post
  • Lalu lakukan settingan seperti berikut:

 photo SnapCrab_Blogger Gudang Cheat Dan Trik Game - Configure Popular Posts - Google Chrome_2016-8-10_14-50-33_No-00_zps1tdgaz2t.png

  • Sekarang kembali lagi ke Template>>Edit HTML lalu cari kode yang mirip seperti 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'>
      <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>
  • Setelah ketemu, ganti dengan kode berikut:
<b:widget id='PopularPosts1' locked='false' title='Most Product View' 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-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>
            <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>

Bagaimana cukup mudah bukan? Nah untuk Anda yang ingin mengoptimalkan pengunjung blog, sekarang ini pengguna gadget sangat popular, maka dari itu manfaatkan blog Anda untuk dapat di akses melalui smarphone Android dengan membuat aplikasi blogger, silahkan kunjungi halaman CARA MEMBUAT APLIKASI ANDROID UNTUK BLOG/WEBSITE

Nah jika Anda adalah blogger baru dan ingin belajar lebih dalam tentang blogger, silahkan ikuti Panduan lengkap membuat blog dan optimasi SEO, dengan mengikuti panduan saya buat, Anda akan dengan mudah memahami dari langkah demi langkah.

Baca Juga Cara Membuat toko online dengan mudah

Add a Comment

Your email address will not be published. Required fields are marked *

Read previous post:
Cara Setting Plugin Related Post Inside WordPress

Cara Setting Plugin Related Post Inside WordPress-Setelah sebelumnya saya berbagi...

Close