Creating a special ticker Popular Posts Blogger Widget Plugins

Tak perlu harus pakai javascript atau kode html yang njelimet tetapi sebuah ticker spesial dapat kita buat pada widget popular posts blogger plugin. Ticker yang memanfaatkan efek marquee ini berfungsi untuk membuat seluruh popular post berputar ke arah atas dimulai dari popular post pertama hingga yang terakhir dan selalu berulang seperti itu. Dengan efek yang seperti ini tentu saja kita tak perlu sebuah box yang besar atau tinggi. Dengan box ticker berukuran 200px atau mungkin lebih sedikit maka berapapun jumlah popullar post semuanya akan dapat ditampilkan satu semi satu secara sempurna. Dengan bantuan sedikit script yang menyatu dengan tag marquee, pergerakan memutar popular post dapat dihentikan dengan mengarahkan cursor ke dalam box popular posts blogger plugin. Agar lebih jelas, silahkan lihat di demo berikut:

D E M O

Cara membuat Ticker Widget Popular Posts Blogger Plugins

Untuk membuat special ticker Popular Posts Blogger Widget Plugins ini widget Popular Posts harus diaktifkan terlebih dahulu lewat Add a Gadget.

1. Login ke Blogger.
2. Dasbor/Dasboard.
3. Rancangan/Design atau Layout (Tata Letak) untuk New Blogger Interface.
4. Page Element (Elemen Laman).
5. Klik Add a Gadget.
6. Pilih widget/gadget Popular Posts/Entri Populer
7. Klik SAVE.
8. Anda bisa cek dulu hasil penambahan widget popular posts dengan membuka halaman blog, kemudian lanjutkan kembali untuk membuat ticker popular posts dengan :
9. Pilih dan klik fitur Rancangan/Design.
10. Klik Edit HTML.
11. Lakukan Backup Template. Buka tutorialnya di sini.
12. Klik Expand Widget Template/Expand Widget Templates.
13. Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
14. Cari kode <b:if cond='data:title'><h2><data:title/></h2></b:if>.
    Sampeyan bisa gunakan Ctrl + F untuk memudahkan mencari kode. Panduan menggunakan Ctrl + F untuk mencari kode html template bisa di baca di sini.
15. Di sekitar kode di atas kode lengkapnya 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 == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (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 == "false"'>
            <!-- (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 style='clear:both;'/>

              <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>

16. Rubah/hapus kode di atas dan ganti dengan kode baru berikut 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 style='height:225px;width:98%;border:1px solid #666;border-top-width:15px;border-bottom-width:15px;border-radius:5px;box-shadow:0 0 8px #000;margin:10px auto;padding-top:10px;'>
<marquee direction='up' 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 == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (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 == "false"'>
            <!-- (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 style='clear:both;'/>

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

17. SAVE Templates/Simpan Template

Kode CSS

.popular-posts ul{
      margin:0;
      padding:0 5px 0 5px;
}
.popular-posts li{
      margin:0;
      padding:0;
}
.popular-posts .item-thumbnail a img{
      width:70px !important;
      height:70px !important;
      border:1px solid #eee;
      padding:4px;
      background:#aaa;
      border-radius:5px;
      box-shadow:2px 2px 2px #000;
      margin:0 6px 5px 0;
}

Catatan/keterangan:

1. perhatikan Kode CSS yang seperti ini:
   

   .popular-posts .item-thumbnail a img
         width:70px !important;
         height:70px !important; 
         ...
         ...
   }

   Jika kolom widget terlalu sempit image pada widget popular posts bisa diperkecil dengan merubah nilai 70px menjadi 40px atau 50px.
2. Demo dan kode menggunakan "New Blogger Template"

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Kemis KLIWON, January, 12, 2012

» Happy Blogging - gubhugreyot «