Skip to main content

Jenis dan Fungsi Kode Untuk Mengatur Tampilan Widget Blog

mengatur tampilan widget blogJika sobat melihat template Face Off Magajah, tampak ada beberapa widget yang muncul dan menghilang. Template tersebut menggunakan kode untuk mengatur tampilan widget blog supaya bisa muncul dan menghilang baik itu pada main post, label post maupun pada single post. Berikut ini beberapa jenis kode dan fungsinya untuk mengatur tampilan widget blog muncul dan menghilang.

1. <b:if cond='data:blog.url == data:blog.homepageUrl'>
Kode ini berfungsi untuk menampilkan widget blog hanya pada main post saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.
Untuk contoh penggunaan kode ini, klik disini. Header pada contoh blog tersebut akan menghilang dan berganti header lain ketika sobat mengklik label post atau membaca postingan secara keseluruhan (single post)

2. <b:if cond='data:blog.url != data:blog.homepageUrl'>
Kode ini berfungsi untuk menampilkan widget blog pada label post dan single post (membaca postingan secara keseluruhan).
Untuk contoh klik disini pada tampilan label post dan disini untuk tampilan single post

3. <b:if cond='data:blog.pageType != &quot;item&quot;'>
Kode ini berfungsi untuk menampilkan widget blog pada main post dan label post dan akan menghilang ketika membaca postingan secara keseluruhan (single post).
Untuk contoh penggunaan kode ini bisa diliat disini untuk tampilan main post dan disini untuk tampilan label post.

4. <b:if cond='data:blog.pageType == &quot;item&quot;'>
Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja alias ketika sobat membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau label post.
Penggunaan kode ini dapat sobat liat pada blog ini dibagian Footer. Kolom footer di blog ini baru muncul apabila sobat membaca seluruh postingan.

5. <b:if cond='data:blog.pageType == &quot;index&quot;'>
Fungsi kode ini sama dengan fungsi kode pada nomer 3.

Perbedaan fungsi kode nomer 1 dan nomer 5 (= nomer 3) pernah saya posting dipostingan ini.

Penerapan kode2 diatas bisa dilakukan dengan 2 cara.
1. Langsung pada widget tersebut.
Cara ini langsung pada widget masing2 yang hendak diatur tampilannya. Misalkan sobat mau menambahkan widget HTML/Javascript dibagian sidebar. Jika sudah, jangan lupa untuk centang Expand Widget Templates.

Kode widget HTML/Javascript aslinya akan tampak seperti ini.

<b:widget id='HTML30' locked='false' title='Link Sobat' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

* Perhatikan yang saya kasih warna merah

Kemudian, sobat ingin menambahkan kode nomer 4. Sobat harus mengedit kodenya menjadi seperti berikut ini.

<b:widget id='HTML30' locked='false' title='Link Sobat' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='title'><data:title/></h2>

<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

* Perhatikan yang saya kasih warna merah.

Kelebihan cara ini adalah tampilan widget tersebut akan tetep muncul di layout (page element) sehingga memudahkan ketika kita mau menambahkan widget yang lain dibagian sidebar tersebut tetapi cara ini terbilang susah untuk widget selain HTML/Javascript seperti Profil karena kode tambahan tersebut gak tau (saya belum tau) harus diletakkan/disisipkan dimana.

2. Semua widget/kelompok
Untuk lebih jelasnya, perhatikan contoh berikut ini. Saya misalkan pada bagian Sidebar.

Kode2 widget pada sidebar tanpa klik Expand Widget Templates akan tampak seperti ini (saya menggunakan kode nomer 4 sebagai contoh) :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML81' locked='false' title='' type='HTML'/>
<b:widget id='HTML33' locked='false' title='Search This Blog' type='HTML'/>
<b:widget id='HTML63' locked='false' title='My Service' type='HTML'/>
</b:section>
</div>
</b:if>

* Perhatikan warna merah. Komposisi cara 2 ini harus dimulai dengan kode diatas dan diakhiri dengan kode </b:if>.

Umumnya cara yang ini sering dipakai untuk kode nomer 1, 3, dan 5 karena tampilan sidebar masih akan nampak pada layout (Page ELement). Jika sobat menggunakan cara ini untuk kode nomer 2 dan 4, maka tampilan sidebar sobat tidak akan muncul di Page Element seperti pada template Face Off Magajah. Tapi cara ini mempunyai kelebihan karena widget yang bisa diatur tampilannya tidak terbatas pada widget HTML/Javascript saja yang sudah umum. Untuk widget2 lainpun seperti Label, Profil, termasuk juga header dan main-wrap (widget postingan) dll bisa langsung diterapkan tanpa perlu pusing2 harus ditaruh dimana kode2 diatas didalam widget tersebut.

Popular posts from this blog

Jaman Sekolah Dulu vs TimNas Senior

Melihat TimNas Senior sekarang, jadi teringat ketika jaman masih sekolah dulu. Cukup sederhana tapi ada benarnya dan saia merasakan itu. Semua itu gak lepas dari gimana cara mengajar guru, memberikan pemahaman akan pelajaran kepada anak muridnya.

Ketika kita suka dan senang dengan cara mengajar guru, suka dengan cara memberi pemahaman pelajaran, kita akan lebih semangat dalam belajar. Dan untuk pelajaran yang susahpun apabila cara guru menerangkan dan memberi pemahamanan secara tepat, pelajaran itu gak kan terasa sulit dan susah.


Kekalahan 4-0 dari Qatar tadi malam membuat peluang TimNas untuk melangkah ke babak berikutnya kualifikasi Piala Dunia Brasil 2014 tertutup. Mungkin hal ini sudah diprediksi sebelumnya tapi yang jadi masalah selama saia mengikuti perkembangan dari pertandingan pertama, semangat dan jiwa petarung pemain TimNas tidak ada !! Ada apa ini?? Siapakah yang patut disalahkan?? Pemain?? Dalam hal ini adalah pelatih. Kenapa??

Seperti yang sudah saya tulis diatas, sebuah a…

Jangan pernah takut dibenci orang lain

Perkataan,perbuatan,penampilan,tingkah laku kita,dll entah itu secara sadar ato tidak sadar bisa membuat orang lain benci,marah,tidak suka atau apalah itu yg sejenis, haiah..kaya homo ae..upss... Cara ngungkapinnya juga bisa secara langsung, "Aku benci kamu.." atau mungkin cukup dalam hati aja,kaya judul lagu???

Keadaan tersebut sadar atau tidak kita sadari sering kali terjadi disekitar kita,baik itu ma temen sendiri atau mungkin ma orang lain yg gak kita kenal sekalipun. Jika hal tersebut terjadi pada diri sobat?? Gimana dan bagaimana perasaan sobat?? Stay cool kah?? marah2 kah?? Balik benci ma orang itu kah?? atau kah..kah..yg lain?? halah..opooo..kuii..

Jangan pernah takut dibenci orang lain

Setiap orang punya karakter sendiri2 yang mencerminkan dirinya,baik itu dari segi penampilan,sikap,tingkah laku dll. Kasarannya, INILAH AKU.. Urusan orang suka atau gak suka ma apa yg ada dalam diri kita,emang aku pikirin,haiah..

Cara orang menilai orang lain beda2. Kalopun ada orang yang…

Axorys : Responsive Blogger Template - 8 Pilihan Style

Beberapa hari lalu, rilis Axorys Blogger template tapi itu adalah Versi Gratis. Dan sekarang, saya merilis Versi Premium. Secara umum, fiturnya sama dengan yang versi gratis tapi saya tambahkan beberapa fitur baru.

Fitur Axorys Blogger Template Versi Premium8 predefined styles : Axorys Blogger templtae premium versi tersedia dalam 8 varian styles. Anda bisa pilih yang sesuai.

List of styles :
Big Header
Big Header Small ThumbnailBig Header Big ThumbnailBig Header Masonry StyleBig Header Default Style (support jump-link)Shrink Header
Shrink Header Small ThumbnailShrink Header Big ThumbnailShrink Header Masonry StyleShrink Header Default Style (support jump-link)Fully responsive Blogger template : Semua styles Axorys Blogger template sudah responsive.
Template Designer : hampir semua variable mendukung Template Designer. Anda bisa mengganti gambar latar, warna latar, warna link, tipe font, ukuran font, warna font, dll dengan mudah.
Featured posts : Penambahan featured posts untuk postingan yan…