Jumat, 16 Maret 2012
Jumat, Maret 16, 2012 46

Cara Membuat Popular Post Berjalan

Setelah minggu lalu Chiprut share soal Cara Membuat Recent Post Berjalan, kali ini Chiprut akan share soal Cara Membuat Popular Post Berjalan. Buat yang gak tau maksudnya kayak gimana, sobat bisa liyat di sidebar sebelah kanan blogku ini.. :)

Klo udah di liyat dan sobat tertarik untuk Membuat Popular Post Berjalan yang seperti itu, silahkan ikuti langkah-langkahnya berikut ini :

Pertama, pastinya harus Login dulu ke Blogger
Klo sobat belum mempunyai gadget popular post, maka silahkan ke Rancangan >> Tambah Gadget >> Pilih Entri Popular. yang seperti ini dan klik simpan.







Berikutnya silahkan ke halaman Edit HTML dan jangan lupa untuk klik 'Expand Template Widget'
Klik CTRL+F untuk mempermudah dan cari kode ini <div class='widget-content popular-posts'>
Setelah ketemu, masukkan kode ini tepat di bawah kode tersebut

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

Jangan lupa pula untuk menambahkan </marquee> sebelum </ul>
Dan secara keseluruhan akan nampak seperti ini :

<div class='widget-content popular-posts'>

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

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


   </marquee> </ul>

    <b:include name='quickedit'/></div>

  </div>

</b:includable>

</b:widget>

Kode yang berwarna hijau itu adalah kode yang kita cari tadi.
Sedangkan kode yang berwarna merah adalah kode yang kita tambahkan... :)

Oiyaa, sobat bisa merubah arah pergerakannya sesuka sobat lhooh. Sobat tinggal ganti aja directionnya menjadi "UP" atau "DOWN".
Dan untuk mengatur tinggi tampilan scroller-nya, sobat bisa merubah ukurannya di bagian 'height'.


Sampai disini dulu share dari Chiprut, semoga bisa bermanfaat buat sobat semua.
Thaaa-thaa... :)


| Salam Blogger \(^_^)/
Makasih Kunjungannya di Artikel Ini :
Judul: Cara Membuat Popular Post Berjalan
Ditulis oleh Chikita Nawaristika
Rating Blog: 5 dari 5

Jika mengutip harap berikan link yang menuju ke artikel Cara Membuat Popular Post Berjalan ini ya. Jika tidak, maka akan diproses secara DMCA Takedown yang tentu saja tidak baik bagi blog sobat maupun sobat sendiri. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya.

46 komentar :

  1. keren tutorialnya kawan..ringkas dan mudah dipahami :)

    BalasHapus
  2. @BlogS of Hariyanto : makasiih, semoga bermanfaat.. :)

    @LEMO HOMESTAY : haturnuhun.. :)

    @sweethy amore : iya, silahkan.. :)

    BalasHapus
  3. coba ah izin tested hehehe,..

    makasih mbak :P

    BalasHapus
  4. @duniasharing : iyah, silahkan, ..
    tapi klo kamu mau lihat berhasil nggaknya, tunggu sampai loadnya selesai, klo loadnya belom selesai pasti acakadul deh, hehe.. :)

    BalasHapus
  5. @Anak Rantau : hehe, makasiih..
    iyah, silahkan.. :)

    BalasHapus
  6. oh jadi bisa dibegitukan ya???

    semudah itukah chiproet? #pinter

    BalasHapus
  7. kka coba yah dek :D makasih :)

    BalasHapus
  8. @Pendelz : makasii kakak.. semoga bermanfaat.. :)

    @Om San San : iyah, udah tak liyat di blog om yang satunya..hehe..

    @Hzndi : hehehehehehe.. :)

    @Zero CodeXgigas : bisa dong.. :)

    @Rizal-Sharing : silahkan kak,..
    iyah..samasama.. :)

    BalasHapus
  9. udah ane coba kok susah ya gan? apa msh ada cara lain?

    BalasHapus
  10. maksudnya gmn tuh @_@
    di setiap kolom apa ?
    itu commentar nya juga di bawah kok -_-

    BalasHapus
  11. @DeeJayHan Share : ehehehe..
    ndak jadi han..
    ndak jadi nanya yang itu tadi, udah ketemu.. :)

    BalasHapus
  12. tutorialnya bermanfaat banget nih prut.. :D
    makasih yaa.. :)

    BalasHapus
  13. @ongisnade : iya, samasama..
    silahkan di coba yaa.. :)

    BalasHapus
  14. ga bisa bisaaa ~_______________~
    padahal udah masang marquee di samping ul ~____~

    BalasHapus
  15. @Ahmad Rizki : Expand Template Widget-nya udah dicentang apa belom? :O

    BalasHapus
  16. mantappppp,, saya udah pasangg .
    :D
    sekalian BW, kunjung balik ya gan .
    :D

    http://agitshare.blogspot.com/

    BalasHapus
  17. Kalau membuat yang seperti recent post punyamu gimana?

    BalasHapus
  18. @dyas sembilanoeloeh : itu di atas kan udah aku kasih linknya . :)

    BalasHapus
  19. simpel kelas padat...mantap
    http://om-blake.blogspot.com/

    BalasHapus
  20. baru tau nih perempuan ngeblog
    hehehe!!!

    BalasHapus
  21. @eko : kan banyak sob cewek yang nge-blog . :)

    BalasHapus
  22. wow keren blognya, manis lagi orangnya..:P thanks infonya, lagi dicoba nih..

    BalasHapus
  23. jarang2 nih ada cewe' nge-blog... meski baru join di blog thn 2011, tp ini blog inspiratif bgt deh... kalo sempat mampir ke blog q juga uyy...

    BalasHapus
  24. keren mbak visite back yach http://curhatz.blogspot.com/

    BalasHapus
  25. manatap mencerahkan kunjung balik http://mimbarazhar.blogspot.com

    BalasHapus
  26. info yang sangat bermanfaat
    thank's atas ilmunya pak

    BalasHapus
  27. Makasih bro akhirnya bisa juga, salam kenal yah bro

    BalasHapus
  28. makasih kak ! Join My Site ya !
    http://radhityayoga.blogspot.com

    BalasHapus
  29. Terima Kasih.., Tutorialnya bagus banget dan bermanfaat. Salam Kenal ya.
    Main-main ke blog saya ya di www.theyuannews.com dan www.yuanhadi.blogspot.com ^__^

    BalasHapus
  30. mampir sob
    http://zaunikon.blogspot.com/

    BalasHapus

Sobat Chiprut yang baik, silahkan berkomentar dengan baik juga yah.
<( ‾▿‾)-σ Gabole ada SPAM.
<( ‾▿‾)-σ Gabole ada LINK AKTIF.
<( ‾▿‾)-σ Gabole komen cuman mau share link aja, tapi gak baca . *itu jahat bingits*
<( ‾▿‾)-σ Klo komennya ngasal (*gak baca langsung komen) di balas sama komen ngasal juga yah, jangan marah . weekk