Cara Membuat Kotak Pada Label, Arsip, dan Widget di Blog


Kali ini Saya akan membahas Cara Membuat Kotak Pada Label, Arsip, dan Widget di Blog.
Bagi kalian yang bingung ketika membuat widget, tetapi tidak ada kotaknya pada widget artikel populer atau widget artikel terbaru di sidebar blog Anda bisa mengikuti caranya di bawah ini.


Cara Membuat Kotak Pada Label, Arsip, dan Widget di Blog


Tanpa berlama-lama, berikut caranya:
  • 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 di Edit HTML:

  • Pilih Template → Edit HTML → Expand Widget Template
  • Lalu cari nama widget yang hendak Anda berikan kotak. 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 berikan kotak.

Cara di Edit HTML yang ke dua :

  • Pada Edit HTML template blogspot, silahkan anda cari widget yang hendak Anda berikan kotak.
  • 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 atau Categories, ikuti langkah selanjutnya
  • Perhatikan saja tulisan yang berwarna merah di bawah ini, kode itulah yang harus disisipkan ke dalam 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 seperti di bawah ini

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

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

Itulah Cara Membuat Kotak Pada Label, Arsip, dan Widget di Blog. Semoga apa yang Saya sampaikan dapat bermanfaat untuk kalian.

2 Komentar untuk "Cara Membuat Kotak Pada Label, Arsip, dan Widget di Blog"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Tekan close (x) 2 kali untuk menutup, jangan lupa Berlangganan

Masukkan Email aktif untuk update artikel via email :

Delivered by FeedBurner

×