Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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:
  16. <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>
  17. Rubah/hapus kode di atas dan ganti dengan kode baru berikut ini:
  18. <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>
  19. 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 «

3 komentar:

  1. gubhugreyot

    azai fata: thank's!
    alviz stevan: simplest post code for tooltip sudah diperjelas. Silahkan buka kembali!
    ekoalkautsar : Simple Ticker Demo sdh diperbarui silahkan buka kembali!
    Ares Kharisna : Silahkan buka ZigZagLap Tooltip
    habib1307: Buka kembali demonya!
    DEMO: Page Navigation for Blogger using css3
    facebook: Sementara blom. Maaf maasih blom siap!

    Salam ....

    BalasHapus
  2. kalo buat popular post berdasrkan page view ada scriptnya enggak mas.?

    BalasHapus
    Balasan
    1. @d3t3ct1v3c0d3n3t... : Popular Posts atau Entri Populer kini hanya menggunakan widget yang telah disertakan blogger. Untuk mengaktifkan anda bisa mengikuti tutorial di atas. Widget Popular Posts Blogger bekerja berdasar page view. Sebelum ada widget ini memang pernah ada yang bekerja berdasarkan jumlah komentar.

      Hapus

 
GR | Edited by | gubhug reyot