Desember 20, 2013

Conditional Tags untuk Blogger

Conditional Tags untuk Blogger - Conditional Tags ini sangat berguna untuk optimasi blog sobat, dengan conditional tags untuk blogger ini sobat blogger dapat memanipulasi element di dalam sebuah halaman, hal ini dikarenakan platform blogger tidak seperti wordpress yang dapat membuat setiap halaman sesuai dengan keinginan kita, kita perlu conditional tags untuk memanipulasinya. Dengan conditional tags ini kita bisa membuat meta tag berbeda2 pada setiap halaman, contohnya ada di artikel saya yang berjudul "dinamis meta tag blogger terbaru".

Selain meta tag, conditional tags blogger ini mempunyai banyak fungsi dan manfaat, diataranya adalah untuk mempercepat loading blog, title yang seo friendly, dan sebagainya, kita juga dapat memanipulasi tampilan halaman static atau halaman tertentu sesuai dengan keinginan kita, apa artinya jika kita bisa memanipulasi?Sangat jelas, tujuan manipulasi ini adalah sebuah optimasi onpage. Dapat dipastikan banyak faktor untuk menjadi no 1. Salah satunya dengan conditional tags ini.

Conditional Tags untuk Blogger

Berikut beberapa hal yang bisa kita lakukan dengan conditional tags blogger ini :
  • Menampilkan atau Menyembunyikan element pada halaman tertentu.
  • Membuat meta tag dinamis.
  • Membuat title tag dinamis.
  • Mengatus posisi H1, H2, H3, pada halaman tertentu.
Hal - hal diatas tidak menjadi sebuah masalah jika sobat menggunakan wordpress sebagai platform blog sobat. Akan tetapi jika sobat menggunakan blogger sebagai platform, conditional tags adalah solusinya.

Berikut adalah beberapa conditional tags untuk blogger yang bisa sobat gunakan.

Daftar Conditional Tags  Blogger


Menampilkan element hanya pada halaman Homepage.
<b:if cond="data:blog.url == data:blog.homepageUrl">

....Element yang ingin ditampilkan pada halaman homepage... 

</b:if>

Menampilkan element hanya pada halaman Homepage, Labels and Archive.
<b:if cond=’data:blog.pageType == &quot;index&quot;’>

....Element yang ingin ditampilkan pada halaman yang di indeks...

</b:if>

Menampilkan element hanya pada halaman Itempages / Postingan.
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>

....Element yang ingin ditampilkan pada halaman post... 

</b:if>

Menampilkan element hanya pada halaman Staticpages.
 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

....Element yang ingin ditampilkan pada halaman static...

</b:if>

Menampilkan element pada URL atau halaman tertentu.
<b:if cond='data:blog.url == &quot;alamatURL&quot;'>

....Element yang ingin ditampilkan pada halaman yang di kunjungi mobile/smartphone... 

</b:if>

Menampilkan element pada halaman error404.
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

....Element yang ingin ditampilkan pada halaman error...

</b:if>

Menampilkan element hanya pada halaman Archivepage.
<b:if cond='data:blog.pageType == &quot;archive&quot;'>

....Element yang ingin ditampilkan pada halaman archive... 

</b:if>

Menampilkan element pada halaman label.
<b:if cond='data:blog.searchLabel'>

....Element yang ingin ditampilkan pada halaman label...

</b:if>

Menampilkan element pada halaman mobile/seluler.
<b:if cond='data:blog.isMobile'>

....Element yang ingin ditampilkan pada halaman yang di kunjungi mobile/smartphone...

</b:if>

Menampilkan element pada halaman pencarian.
<b:if cond="data:blog.pageName == """> 

....Element yang ingin ditampilkan pada halaman pencarian...

</b:if>

Menampilkan element pada deskripsi artikel.
<b:if cond="data:blog.metaDescription != """>

....Element yang ingin ditampilkan deskripsi artikel...

</b:if>

Menampilkan element pada kolom author.
<b:if cond="data:post.author == "Rian Kid"">

....Element yang ingin ditampilkan pada kolom author...

</b:if>

Menampilkan element pada postingan pertama.
<b:if cond="data:post.isFirstPost">

....Element yang ingin ditampilkan...

</b:if>

Menampilkan element ketika tanggal postingan di tampilkan.
<b:if cond="data:post.dateHeader">

...Element yang ingin ditampilkan....

</b:if>


Menampilkan element ketika thumbnail ditampilkan.
<b:if cond="data:post.thumbnailUrl">

...Element yang ingin ditampilkan....

</b:if>


Menampilkan element ketika potongan postingan di tampilkan.
<b:if cond="data:post.snippet">

...Element yang ingin ditampilkan....

</b:if>


Menampilkan element ketika gambar digunakan.
<b:if cond="data:useImage">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada pesan, biasanya terdapat pada pesan halaman tidak ditemukan maupun pesan label.
<b:if cond="data:navMessage">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada objek yang menunjukkan author.
<b:if cond="data:top.showAuthor">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada objek yang menunjukkan waktu.
<b:if cond="data:top.showTimestamp">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada objek yang tidak memiliki judul.
<b:if cond="data:title != """>

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada objek yang memiliki daftar urutan.
<b:if cond="data:display == "list"">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada objek yang memiliki penghitungan, misal pada widget label.
<b:if cond="data:showFreqNumbers">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada postingan atau halaman statik yang memiliki kotak komentar.
 
<b:if cond="data:post.embedCommentForm">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada postingan atau halaman statik yang memiliki komentar berjumlah satu.
<b:if cond="data:post.numComments == 1">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada postingan atau halaman statik yang memiliki komentar berjumlah lebih dari nol.
<b:if cond="data:post.numComments != 0">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada popup comment.
<b:if cond="data:showCmtPopup">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada komentar yang memiliki gambar profil.
<b:if cond="data:blog.enabledCommentProfileImages">

...Element yang ingin ditampilkan....

</b:if>


Kondisi pada threaded comment.
<b:if cond="data:post.showThreadedComments">

...Element yang ingin ditampilkan.....

</b:if>


Kondisi ketika komentar dihapus.
<b:if cond='data:comment.isDeleted'>

...Element yang ingin ditampilkan.....

</b:if>


Contoh Penerapan Conditional Tags Blogger


Berikut conditional tags dimana thumbnail ditampilkan hanya pada halaman Homepage.

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

<a class='thumbx' expr:href='data:post.url' expr:title='data:post.title'>

<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>

</a> 

</b:if>


Code diatas mengartikan bahwa class thumbx hanya ditampilkan pada halaman homepage, sobat dapata membalikan atau melawan kondisi tersebut dengan mengganti == dengan != seperti kode dibawah ini.

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

<a class='thumbx' expr:href='data:post.url' expr:title='data:post.title'>

<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>

</a> 

</b:if>


pada kondisi tertentu yang tidak menggunakan == seperti <b:if cond='data:comment.isDeleted'>, sobat dapat membalikan atau melawan kondisi tersebut dengan menambahkan <b:else/> tepat dibawahnya seperti berikut:

<b:if cond='data:comment.isDeleted'>

<b:else/>

...Element yang tidak ingin ditampilkan.....

</b:if>


Conditional tags dengan satu kondisi.
 
<b:if cond="kondisi yang diinginkan">

....element....(jika kondisi yang diinginkan benar)

</b:if>


Conditional tags dengan satu kondisi yang benar dan tidak sesuai.
 
<b:if cond="kondisi yang diinginkan">

....element....(jika kondisi yang diinginkan benar)

<b:else>

....element....(jika kondisi yang diinginkan tidak sesuai)

</b:else></b:if>


Conditional tags dengan dua kondisi.
 
<b:if cond="kondisi yang diinginkan1">

<b:if cond="kondisi yang diinginkan2">

....element....(jika kondisi yang diinginkan benar)

</b:if>

</b:if>


Conditional tags dengan dua kondisi yang benar dan tidak sesuai.
<b:if cond="kondisi yang diinginkan1">

<b:if cond="kondisi yang diinginkan2">

....element....(jika kondisi yang diinginkan benar)

<b:else>

....element....(jika kondisi yang diinginkan tidak sesuai)

</b:else></b:if>

</b:if>


Perbedaan tanda atau signal perintah pada Conditional Tags Blogger


Tanda conditional tags sama dengan ==
 
<b:if cond="data:blog.url == data:blog.homepageUrl"> 

....element....

</b:if>

Tanda sama dengan == pada conditional tags di atas menunjukkan bahwa bila url blog sama dengan url homepage maka objek akan dieksekusi.

Tanda conditional tags tidak sama dengan !=
 
<b:if cond="data:blog.url != data:blog.homepageUrl"> 

....element....

</b:if>

Tanda tidak sama dengan != pada conditional tags di atas menunjukkan bahwa bila url blog tidak sama dengan url homepage maka objek akan dieksekusi.

Tanda conditional lebih dari sama dengan >=
 
<b:if cond="data:post.numComments >= 0">

....element....

</b:if>

Tanda lebih dari sama dengan >= pada conditional tags di atas menunjukkan bahwa bila komentar pada postingan lebih dari sama dengan 0 maka objek akan dieksekusi.

Tanda conditional kurang dari sama dengan <=
 
<b:if cond="data:post.numComments <= 2">

....element....

  </b:if>

  
Tanda kurang dari sama dengan <= pada conditional tags di atas menunjukkan bahwa bila komentar pada postingan kurang dari sama dengan 2 maka objek akan dieksekusi.

Signal conditional tags "true".
 
<b:if cond="data:post.isFirstPost == "true"">

....element....

</b:if>

  
Signal "true" pada conditional tags di atas menunjukkan bahwa bila postingan tersebut merupakan postingan pertama maka objek akan dieksekusi.

Signal conditional tags "false".
 
<b:if cond="data:post.isFirstPost == "false"">

....element....

</b:if>

Signal "false" pada conditional tags di atas menunjukkan bahwa bila postingan tersebut bukan merupakan postingan pertama maka objek akan dieksekusi.



Kode - kode diatas adalah kode lengkap Conditional Tags untuk Blogger, jika ada kerkurangan atau kesalahan mohon koreksinya, dan jika ada pertanyaan silahkan ajukan pada kolom komentar, gunakan tag berikut :

<i rel="pre">.. kode yang ingin disisipkan.. </i>

untuk menyisipkan kode panjang, dan

<i rel="code">.. kode yang ingin disisipkan..</i>

untuk menyisipkan kode pendek.

9 comments » Conditional Tags untuk Blogger

Gan
Cara Membuat Comentar Kayak di atas gimana ?
visit back
www.d-prf.net

Balas

komentar yang mana sob?

Balas

Kalo kita ingin menampilkan label tertentu saja di halaman utama (homepage) gimana kode html nya ya bro..?

Balas

coba masuk menu layout pada dashboard blogger, tambahkan widget label. pilih label yang ingin ditampilkan, kemudian edit html templatenya, cari kode label dan gunakan conditional tags berikut sebagai pembuka dan penutup pada kode widget label tersebut :


<b:if cond="data:blog.url == data:blog.homepageUrl">
[widget label]
<b:if>

Balas

Kok gak bisa ya Bro...?selalu muncul tulisan xml parser error waktu html nya saya edit.bisa minta tolong di cek in kesalahannya dimana?maklum masih awam soal edit2 kode html.
Please mail me at aidikuproduction05@gmail.com ...thanks

Balas

Mantap Banget bro,tapi ane ada ASK Sedikit ni,Kalo misal kita tidak ingin menampilkan Widget tertentu untuk Label A Tag Conditionalnya apa bro :D

Balas

klo untuk label tertentu tidak bisa menggunakan tag conditional ini sob, pake JSON dengan menggunakan perintah JS

Balas

kalau mau menampilkan posting di homepage dengan label tertentu gimana sob ?

Balas

waduh terlalu panjang klo di jelaskan di kotak komentar ini sob, nanti saya kan buatkan tutorialnya saja. :D

Balas

Mohon maaf komentar pada blog ini kami moderasi dan tidak akan langsung ditampilkan. Silahkan berikan komentar sesuai judul dan isi artikel. Komentar yang mengandung link aktif / live link, iklan, pornografi, dan semacamnya akan dihapus atau kami masukan pada kategori SPAM.

Catatan :
1. Untuk menyisipkan kode gunakan  <i rel="code">kode yang akan disisipkan</i>
2. Untuk menyisipkan kode panjang gunakan <i rel="pre">kode yang akan disisipkan</i>
3. Untuk menyisipkan quote gunakan <b rel="quote">catatan anda</b>
4. Untuk menyisipkan gambar gunakan <i rel="image">URL gambar</i>
5. Untuk menyisipkan video gunakan <i rel="youtube">URL Video youtube</i>

Keterangan :
Gunakan HTML konverter sebelum menyisipkan kode.
Contoh link image : http://blablabla.com/image.jpg.

Profile yang mengandung broken link akan dihapus tanpa pemberitahuan terlebih dahulu.
Konversi Kode

Top