Cara Memasang Template Yang Berbeda di Setiap Bagian Blog

Sekarang berdasarkan artikel disini. Saya mengerti cara membuat template lain bekerja dalam suatu posting blog.  Sayangnya, untuk melakukan hal ini anda harus sabar dan mengerti sedikit coding namun anda pasti bisa. Dalam hal ini kita hanya mengambil CSS. CSS utama berupa tulisan berwarna biru di dalam <skin>. Dimulai di <b:skin><![CDATA[/*, diakhiri di ]]></b:skin>.



Untuk contoh bandingkan saat kursor menyentuh gambar di blog post yang ini dengan blog post yang lain.



(Perumpamaan) Misalnya anda ingin gambar lingkaran di template anda berubah memanjang ketika membuka posting blog.

Misalnya, CSS template default berupa ini

headerst

panjang 5 cm

Sedangkan CSS template lain yang akan digunakan seperti berikut

kepalamanusia

panjang 10 cm

Lalu anda inspect element di header. Tag CSSnya berupa headerst. Maka kita ubah kepalamanusia menjadi headerst. Maka lingkaran tersebut akan memanjang.

Jadi CSSnya:

headerst

panjang 10 cm



Cara meletakkan CSS baru

1. Di Edit HTML klik kiri di script untuk meletakkan kursor lalu pencet CTRL+F

2. Cari kode </head>

3. Diatas kode tersebut paste kode berikut

<!-- dynamic header background  by Rivado Shido-->    KONDISI<style>ISI CSS</style></b:if>

Jika anda masih benar-benar pemula dalam programming blog, silahkan komentar kemauan anda, maka saya akan bantu.

Cara Menyembunyikan Suatu Widget Dalam Halaman Tertentu

Selamat malam semua. Kali ini saya akan memberikan tutorial tentang cara menyembunyikan suatu widget dari suatu halaman. Hal ini sungguh berguna jika anda ingin membuat halaman berisi film (mungkin supaya fokus, hehehe). 

Berikut caranya:

1. Cari tag elemen widget tersebut .Baca disini

2. Dasbor > Template > Edit HTML

3. Tuju ke kode widget anda

Kode akan terlihat seperti ini

Atau anggap saja seperti ini sebagai contoh

01	<b:widget id='WidgetID' locked='false' title='Widget title'type='HTML'>

02	<b:includable id='main'>

03	<b:if cond='data:title != &quot;&quot;'>

04	<h2 class='title'><data:title/></h2>

05

</b:if>

06	<div class='widget-content'>

07	<data:content/>

08

</div>

09	<b:include name='quickedit'/>

10	</b:includable>

11	</b:widget>

4. Masukkan kode kondisi dibawah <b:includable id='main'>. Masukkan kode

<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>

diatas </b:includable>

Maka akan seperti ini contohnya

<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'>
MASUKAN KODE KONDISI
<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:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>
</b:includable>
</b:widget>

5. Simpan / Save template

Komentar jika ada kesalahan

Disunting dari http://www.bloggersentral.com/2010/02/display-widget-on-specific-pages-in.html

Cara-Cara Mengetahui ID/Class dari Suatu Widget

ID/Class diperlukan saat penyusunan CSS (ID berupa #, sedangkan class berupa .). Cara mengetahuinya lebih gampang.

Berikut caranya:

1. Buka Tab Layout

2. Pilih Widget

3. Pilih edit

4. Akan muncul pop up

5. Periksa alamat link tersebut, sorot sampai ketemu kode widgetid

Kode tersebut akan digunakan dalam pencarian di edit html

Kumpulan Kode Kondisi Untuk HTML

ilustrasi ngaco

Apa sih itu kode kondisi? Mungkin istilah ini asing bagi anda. Karena istilah ini buatan saya sendiri, hehehe. Maklum masih bocah 13 tahunan.



Kode kondisi (condition) adalah penanda untuk membuat suatu konten berbeda dengan konten lain. Misalnya anda biasa berjalan kaki, namun ketika kondisinya anda ingin pergi ke mal yang jauh anda harus menggunakan mobil. Dalam HTML khususnya blogger akan berupa

<b:if cond='apa yang terjadi'></b:if>

Terjemahannya: "b:if" berarti "jika" , cond itu condition (kondisi). Jadi jika terjadi kondisi sesuatu=maka akan terjadi. Kode Kondisi selalu ditutup dengan </b:if>.



Berikut kumpulan kondisi dari http://www.bloggersentral.com/2010/08/targeting-specific-pages-with.html.



<b:if cond='data:blog.pageType == "index"'>

Mencakup seluruh isi blog (index).



<b:if cond='data:blog.pageType == "item"'>

Item itu menyangkut halaman tempat blog diposkan / blog posts

<b:if cond='data:blog.pageType == "static_page"'>

Halaman statis yaitu page yang dibuat di blog (mungkin)



<b:if cond='data:blog.pageType == "archive"'>

Halaman khusus arsip/archive

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Halaman Beranda / Homepage



<b:if cond='data:blog.url == "PUT_URL_HERE"'>

Halaman tertentu dalam suatu blog ganti PUT_URL_HERE dengan halaman tersebut



<b:if cond='data:blog.url == data:post.url'>

Posting blog dan page blog



<b:if cond='data:blog.searchLabel'>

Halaman khusus label



<b:if cond='data:post.isFirstPost'>

Artikel pertama dalam suatu blog



Cara membuat nya

1	<b:if cond='data:blog.pageType == "item"'>

2	Apa yang akan terjadi bila kondisi aktif?

3

</b:if>

Bila kondisi item itu terjadi maka apa yang akan terjadi?



Membuat 2 kondisi sekaligus

1	<b:if cond='data:blog.pageType == "item"'>

2	Apa yang akan terjadi bila kondisi aktif?

3

<b:else/>

4	Apa yang terjadi ketika kondisi tidak aktif

5

</b:if>

Kondisi pengecualian, dengan penambahan tanda seru disamping sama dengan

1	<b:if cond='data:blog.pageType != "item"'>

2	Isi kondisi

3

</b:if>

Artinya kondisi hanya akan terjadi di semua tempat selain item (blog post)



Kondisi sering digunakan untuk menghilangkan widget pada halaman tertentu (akan diposkan), membuat perubahan pada header, dll. Ajukan pertanyaan di komentar.