Cara Membuat Widget Label, Archive, dan lain-lain dengan Scroll

Kali ini saya akan membahas cara sederhana untuk membuat widget anda menjadi scroll.

Tanpa berlama-lama, berikut caranya:

 Cara yang tidak perlu edit HTML :

• Tata Letak → Tambah Gadget → pilih HTML/JavaScript
• Setelah itu letakkan kode seperti di bawah ini ↓

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
Masukan Kode Widget Anda Disini
</div>

• Cara di atas untuk script yang terlihat

Cara yang perlu mengEdit HTML:

• Pilih Template → Edit HTML → Expand Widget Template
• Lalu cari nama widget yang hendak anda jadikan scroll. Misalnya Archive blog
• Tambahkan script di bawah ini di atas ]]></b:skin>

#BlogArchive .widget-content{
height:200px;
width:auto;
overflow:auto;
}

• Usahakan yang berwarna merah harus sama dengan nama widget yang hendak anda jadikan scroll.

Cara Edit HTML yang ke dua :

• Pada Edit HTML template blogspot, silahkan anda cari widget yang hendak anda berikan scroll
• Lalu pada bagian bawah dari kode widget tersebut cari kode div class='widget-content' agar mudah tekan (ctrl+f).
• Tambahkan kode style='overflow:auto; height:230px' disamping kode div class='widget-content' Sehingga menjadi

<div class='widget-content' style='overflow:auto; height:230px'>

• Jangan disimpan dulu
• Jika yang Anda ingin edit adalah Label / Categories, ikuti langkah selanjutnya
• Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat

<b:widget id='Label1' locked='false' title='Kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:230px;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>

</div> </b:includable>
</b:widget>

• Setiap template mempunyai karakter yang berbeda, mungkin di blog sobat kodenya seperti di bawah ini ↓

<div class='widget-content'>

• Kalau yang Saya punya adalah seperti di bawah ini ↓

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

• Yang penting letak kode tambahan yang disisipkan harus benar meletakkannya.
• Untuk kode height:230px adalah tinggi label scroll, silahkan sobat ganti sesuai keinginan sobat.
• Simpan dan lihat hasilnya.

Selamat Mencoba !