0 Cara membuat kolom scroll pada blog archive

Trik cara membuat scroll pada arsip blog, cara membuat scroll pada arsip blog (blog archive), cara membuat kolom blog archive dengan scroll. apapun itu judulnya pasti hasilnya tetap sama.

cara membuat kolom scroll pada blog archive ini tergolong cara untuk mempercantik blog, pada umumnya arsip blog itu puanjang buanget. hehehe namun bisa dipendekkan tanpa merubah subtansinya. ok dengan membuat efek scroll widget jadi ringkas dan keren. sobat blogger juga bisa membaca postingan saya kemarin Cara Membuat Scroll Pada Kolom Komentar sobat akan lihat hasilnya betapa menarik dan ringkas menggunakan efek scroll. lebay...... hahaha

Ini cara membuat kolom scroll pada blog archive, sobat ikuti tutorialnya. OK !!! cekidot......

Cara/tutorial 1

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F. 

6. Jika sudah ketemu Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:

<div class='widget-content'>

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">
<div id='ArchiveList'>

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

Keterangan :

• Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara : klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.
• Harap disesuaikan saja kodenya, karena tidak semua templates sama,
• 200px : Adalah Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height:
• Jika sudah klik Save templates dan lihat hasilnya. 

Cara/tutorial 2

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,
3. Cari kode berikut :


    <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

4. Lalu Terapkan Seperti di bawah ini.....

    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:200px;'>
    <div expr: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>
    </b:includable>

5. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
 200px adalah tingginya, dan kalian  bisa ubah seseuai ke inginann kalian..

Komentar →