Home » » Cara Membuat Scroll Bok Di Widget "Archive"

Cara Membuat Scroll Bok Di Widget "Archive"

Written By amieng cirata on Senin, 08 April 2013 | 03.44

Setelah kemarin bagi-bagi tips Cara membuat scroll tanpa pakai box di "archive", sekarang DCC akan share cara membuat scroll plus boxnya di widget "archive".

Contohnya seperti gambar di bawah ini :
Cara Membuat Scroll Bok Di Widget "Archive"

Kegunaannya :
  • Meringankan loading blog
  • Penghematan tempat
  • Tampilannya terlihat rapih

Cara membuatnya :
  1. Login ke blogger
  2. Masuk ke dasbor
  3. Klik "template"
  4. Klik "edit HTML"
  5. Klik "expand template widget"
  6. Cari kode ini :
  7. <div class='widget-content'>
    atau kode ini :
    <div id='ArchiveList'>

    ket: biasanya 2 kode di atas letaknya berurutan tanpa ada pemisah.

  8. Kalau sudah ketemu salah satu 2 kode di atas, copaslah kode di bawah ini lalu simpan di antara 2 kode di atas.
  9. <div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: none;'>

    Lihat contoh di bawah ini :
    <div class='widget-content'>
    <div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: none;'>
    <div id='ArchiveList'>

  10. Yang terakhir masukan kode ini </div> dan simpan di atas kode :
  11. <b:include name='quickedit'/>
    </div>

    Seperti inilah hasil semuanya :
    <h2><data:title/></h2>
      </b:if>
    <div class='widget-content'>
    <div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: none;'>
    <div id='ArchiveList'>
    <divexpr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
        <b:if cond='data:style == &quot;HIERARCHY&quot;'>
         <b:include data='data' name='interval'/>
        </b:if>
        <b:if cond='data:style == &quot;FLAT&quot;'>
          <b:include data='data' name='flat'/>
        </b:if>
        <b:if cond='data:style == &quot;MENU&quot;'>
          <b:include data='data' name='menu'/>
        </b:if>
      </div>
      </div>
    </div>
    <b:include name='quickedit'/>
    </div>
    keterangan :
    - kode yang di kasih warna merah adalah kode yang anda tambahkan ke script tersebut
    - kode yang di kasih warna biru adalah kode yang anda cari
    - kode yang di kasih warna kuning adalah kode untuk mengukur ukuran tinggi widget

  12. Selesai.... Klik "simpan template".

Jangan Lewatkan :
Share this article :
Comments
0 Comments

0 komentar:

Posting Komentar

 

Support : Copyright © 2013. DUNIA CORAT-CORET - All Rights Reserved
powered by Blogger