Memberi Efek Marquee Pada Popular Posts Widget Blogger

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Pagi ini saya akan share trik mempercantik blog yaitu Memberi Efek Marquee Pada Popular Posts Widget Blogger. Seperti telah kita ketahui, blogger menyediakan fasilitas popular posts. Kita bisa memunculkan popular posts dengan menyertakan thumbnail maupun tanpa thumbnail pada blog kita. Tentunya popular posts ini berdasarkan konten yang paling banyak diklik pengunjung blog.

Memberi Efek Marquee Pada Popular Posts Widget Blogger sangatlah mudah, namun tentunya Anda harus mengaktifkan dulu widget popular posts pada blog Anda. Dashboard >> Layout >> Add a Gadget >> Kemudian pilih Popular Posts.

Kemudian masuk ke Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates karena kita akan sedikit mengobok-obok kode HTML. Namun alangkah baiknya back up dulu template Anda untuk berjaga-jaga kemungkinan kesalahan pada edit HTML. Setelah itu silahkan cari HTML widget popular posts. Untuk memudahkan kita cari title dari widget tersebut dengan CTRL + F pada keyboard kemudian masukan titlenya ke kotak pencarian. Secara default, Anda akan menemukan kode HTML yang cukup panjang 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>

Kemudian kita akan menambahkan kode <marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> di atas kode <div class='widget-content popular-posts'> dan menambahkan kode </marquee> di bawah kode </div>

Perhatikan pada height='350px', itu menuntukan tinggi widget yang akan tampil pada blog kita, silahkan Anda atur sesuai keinginan dan scrollamount='2' untuk mengatur kecepatan scroll-nya.

Sehingga penampakan kodenya akan menjadi 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>
<marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
  <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>
...........................
...........................

              <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>
</marquee>
</b:includable>
</b:widget>

Setelah itu silahkan lakukan preview untuk melihat apakah perubahannya sudah betul atau tidak, kemudian simpan template Anda, selesai.

Untuk demo, silahkan lihat pada Popular Posts Widget blog ini. Demikian sharing Memberi Efek Marquee Pada Popular Posts Widget Blogger kali ini mudah-mudahan bermanfaat.