Modifikasi Popular Post untuk Template Gallery

Saya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

popular


Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :
  1. Login ke Blogger dengan akun Anda
  2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
  3. Lalu masukkan kode berikut ini diatas ]]></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)}
    Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
  4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
  5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

    popular

    Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
  6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
    <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. Setelah ketemu, ganti dengan kode berikut ini :
    <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>
  8. Terakhir, save templates lihat hasilnya.
Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat.


2 comments

IBU PUSPITA 29 May 2015 at 05:44

Saya ingin berbagi cerita kepada anda bahwa saya ini IBU PUSPITA seorang TKI dari malaysia dan secara tidak sengaja saya buka internet dan saya melihat komentar ibu hayati yg dari honkong tentan MBAH KABOIREN yg telah membantu dia menjadi sukses dan akhirnya juga saya mencoba menghubungi beliau dan alhamdulillah beliau mau membantu saya untuk memberikan nomor toto 6D dan alhamdulillah itu betul-betul terbukti tembus,kini saya sangat berterimakasih banyak kepada MBAH KABOIRENG dan jika anda ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085-260-482-111,saya juga tidak lupa mengucap syukur kepada ALLAH karna melalui MBAH KABOIRENG saya juga sudah bisa sesukses ini dan jangan mudah percaya kepada MBAH yg lain selain MBAH KABOIRENG karna saya juga pernah mengalami yg namanya dibohongin sama para normal yg lain,ini bukan rekayasa dari saya melainkan ini kisah nyata dari seorang TKI,jangan ada percaya klau ada yg memakai pesan ini klau bukan atas nama saya krna itu cuma bohan dan ini resmi saya yg menulis.Untuk yg punya rum erimakasih atas tumpangannya. KLIK _ GHOB _ 2D 3D _ 4D _ 6D _ DISINI












Saya ingin berbagi cerita kepada anda bahwa saya ini IBU PUSPITA seorang TKI dari malaysia dan secara tidak sengaja saya buka internet dan saya melihat komentar ibu hayati yg dari honkong tentan MBAH KABOIREN yg telah membantu dia menjadi sukses dan akhirnya juga saya mencoba menghubungi beliau dan alhamdulillah beliau mau membantu saya untuk memberikan nomor toto 6D dan alhamdulillah itu betul-betul terbukti tembus,kini saya sangat berterimakasih banyak kepada MBAH KABOIRENG dan jika anda ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085-260-482-111,saya juga tidak lupa mengucap syukur kepada ALLAH karna melalui MBAH KABOIRENG saya juga sudah bisa sesukses ini dan jangan mudah percaya kepada MBAH yg lain selain MBAH KABOIRENG karna saya juga pernah mengalami yg namanya dibohongin sama para normal yg lain,ini bukan rekayasa dari saya melainkan ini kisah nyata dari seorang TKI,janan ada percaya klau ada yg memakai pesan ini klau bukan atas nama saya krna itu cuma bohon dan ini resmi saya yg menulis.Untuk yg punya rum erimakasih atas tumpangannya. KLIK _ GHOB _ 2D 3D _ 4D _ 6D _ DISINI

Sunarti Sari 12 April 2017 at 14:31

Assalamualaikum,WR,WB...
Saya hanya sebagai perantara untuk menyampaikan tentang ritual gaib AKI DRAJAT, Saya sengaja menulis sedikit kesaksian untuk berbagi, barangkali ada teman-teman yang sedang kesulitan masalah ekonomi/keuangan ataupun punya masalah hutang piutang.Permasalahan akan di tuntas AKI DRAJAT dengan ilmu gaip yang kasat mata.!!
Pertama-tama Saya mengucapkan terima kasih banyak kepada AKI DRAJAT yang telah membantu kehidupan keluarga saya, Dulunya saya cuma kerja jadi tukang cuci keliling. penghasilan saya perhari paling tinggi 70ribu, Hanya pas pasan untuk mengecukupi kehidupan keluarga saya..Alhamdulillah sekarang sejak saya bergabung jadi member (AKI DRAJAT), Saya sudah berkali kali menang togel dan ini kemenangan saya yg Ke 3X nya kemarin di kasih angka ritual 4D,Syukur Alhamdulillah angka yg diberikan aki tembus lagi, Impian saya selama ini sudah jadi kenyataan kehidupan keluarga saya pun jauh lebih baik dari pada sebelumnya...
Buat bapak/ibu yang ingin mendapatkan REJEKI melalui jalan TOGEL..
JIKA ANDA BERMINAT SILAHKAN HUBUNGI BELIAU SEGERA
DI NO.HP : 0822-9777-2626 (AKI DRAJAT)
yang benar2 ingin di bantu
Insya Allah Anda Akan Berhasil Sukses Jika Anda Mau Mengambil Keputusan Untuk Mengikuti Ritual Gaib AKI DRAJAT..."

Info lebih lengkap klik =>> http://angkajitubocorantogel2d3d4d.blogspot.com
.
.
===>>AKI DRAJAT<===
NO.HP : 0822-9777-2626


==KLIK DISINI UNTUK BOCORAN ANGKA 2D,3D,4D,5D,6D HARI INI==

Post a Comment