Cara membuat witget tata letak baru di blogger
Blog kak Ryan - Template blogger adalah sebuah dokumen yang kompleks, didalamnya terdiri dari bagian css dan komponen struktur pembentuk desain sebuah halaman. Sudah banyak template blog yang tersedia di internet sekarang ini, baik yang gratis maupun yang berbayar. Semuanya mempunyai kelebihan tersendiri.
Dari sekian banyak template tersebut terkadang ada sesuatu tampilan yang menurut kita tidak sesuai dengan keinginan kita. Sehingga kita ingin sekali memodifikasinya agar sesuai dengan keinginan. Tapi semua itu hanya bisa dilakukan jika kamu memahami bahasa pemrograman HTML, JavaScript, Dan Css.
Tapi bagaimana jika kita hanya ingin membuat sebuah witget saja, sementara box witget yang ada pada template kita sudah penuh. Atau mungkin teman-teman ingin menambahkan sebuah kolom baru pada tata letak yang bisa diisi dengan witget apapun.
Menurut pengalaman apa yang saya lihat pasti sahabat koding bakalan menyalin kode witget lain yang didapat dari template orang 😅, cara tersbut ternyata salah sobat. Jika ada witget dengan class, id serta nama yang sama dengan bawaan template sudah pasti template kamu akan error ketika disimpan.
Agar tidak error kamu bisa menggunakan kode section pembuat witget baru dibawah ini. Kode ini adalag kode mentahnya, kode ini akan menciptakan sebuah box baru pada tata letak tema sehingga kita bisa mengisinya dengan witget apapun.
<b:section class='NamaKelas' id='NamaID' maxwidgets='1' showaddelement='yes'/>Perlu kamu ketahui nama class dan id section itu akan dijadikan sebagai nama kelas dan id pada elemen witget yang kamu tambahkan nanti. Gunakan nama property ini untuk mendesain witget yang kamu tambahkan nantinya melalui css.
- maxwitgets menentukan berapa banyak witget yang boleh kita tambahkan pada elemen tersebut, Isi saja dengan angka sesuai keinginan kamu.
Dimana saya bisa meletakan kode ini?
Bebas dimana saja, kamu bisa meletakanya pada bagian footer, wrapper dan sidebar blog kamu. Tapi kamu harus memahami terlebih dahulu dimana letaknya bagian tersebut, jangan sampai salah tempat hehehe. Pengalaman saya saat pertamakali memasang witget ini malah muncul pada bagian halaman header hehehe.
Gan kenapa witgetnya bisa dihapus?
ini adalah bawaan defaul blogger yang bisa menghapus dan menambahkan witget pada section. Agar witget yang telah kamu tambahkan bisa dihapus, kamu harus mengedit sedikit kode pada witger yang telah kamu buat. Silakan masuk ke editor template atau unduh templatenya dan edit dengan editor teks Favorit kamu. Silakan cari dimana letaknya witget yang kamu buat, bisa mencarinya dengan cara di scroll perlahan bisa juga menggunakan pencarian teks.
Tetapi akan lebih cepat jika menggunakan pencariam teks, silakan cari witget yang sudah kamu buat tadi. Gunakan kata kunci yang sama dengan class section kamu, agar bisa menemukan dimana posisi kode tersebut ditulis. Setelah kamu menemukanya, coba perhatikan kode dibawah ini.
<b:section class='iklan-atas' id='iklan-atas' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Iklan bawah judul' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><!--<script type="text/javascript" src="//uprimp.com/bnr.php?section=Iklan&pub=439176&format=300x250&ga=g"></script>
<noscript><a href="https://yllix.com/publishers/4391" target="_blank"><img src="//ylx-aff.advertica-cdn.com/pub/300x250.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" /></a></noscript>--></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType in {"item"}'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='kode-iklan-atas'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>Kamu lihat itu, temukan teks seperti diatas yaitu "locket='false'", kemudian ganti valuenya false mendi true. setelah itu silakan simpan templatenya atau unggah jika di edit secara offline. Cobalah lihat witget yang kamu tambahkan tadi sudah tidak bisa dihapus lagi, wow keren kan.
Bagaimana jika saya hanya ingin menampilkan witget pada halaman tertentu
Bisa bos kita bisa menggunakan meta tag condition yang sudah disediakan oleh blogger. Untuk menggunakanya sobat tinggal tambahkan kondisi tersebut dibawah kode <b:includable id='main'> lalu kode penutup kondisinya diletakan sesudah <b:includable name='quickedit'> , agar lebih jelasnya silakan perhatikan penempatan dibawah ini.
<b:section class='iklan-atas' id='iklan-atas' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Iklan bawah judul' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><!--<script type="text/javascript" src="//uprimp.com/bnr.php?section=Iklan&pub=439176&format=300x250&ga=g"></script>
<noscript><a href="https://yllix.com/publishers/4391" target="_blank"><img src="//ylx-aff.advertica-cdn.com/pub/300x250.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" /></a></noscript>--></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- TEMPATKAN KODE KONDISUMU DISINI -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='kode-iklan-atas'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
<!-- NAH DISINI TEMPATKAN KODE PENUTUP KONDISI biasa nya /b:if -->
</b:includable>
</b:widget>
</b:section>Sampai disini dulu pelajaran kita kali ini, semoga bisa kamu ingat dengan mudah. Jangan lupa mampir lagi di artikel berikutnya, masih seputar tentang template blogger. Semoga setelah menpelajari semua bagian dan fungsi penyusun template blogger dan dengan kemampuan yang kamu miliki kamu bisa membuat tema blogger sendiri.