Memberi Efek Marquee Pada Popular Posts Widget Blogger

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Bola Hero Gawai

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.


Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×