Cara Membuat Tampilan Halaman Postingan Berbeda Berdasarkan Label Menggunakan Javascript

Hallo sahabat Eza Reload, Pada Artikel yang Shobat baca kali ini dengan judul Cara Membuat Tampilan Halaman Postingan Berbeda Berdasarkan Label Menggunakan Javascript, kami telah mempersiapkan artikel ini dengan baik untuk Shobat baca dan ambil informasi di dalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel Tutorial blogger, yang kami tulis ini bisa Shobat pahami. baiklah, selamat membaca.

Cara Membuat Tampilan Halaman Postingan Berbeda Berdasarkan Label Menggunakan Javascript
Source: EzaReLoad.Com

EzaReLoad.Com - Cara Membuat Tampilan Halaman Postingan Berbeda Berdasarkan Label Menggunakan Javascript, Terkadang kita merasa jenuh dengan tampilan web kita, sehingga perihal ini pasti saja hendak mengusik kegiatan ngeblog kita.

Hasrat serta inspirasi menulis juga jadi sirna terbawa arus bosan yang menyerang. Hehehe kesannya jadi puitis banget ya....

Untuk menyembuhkan penyakit bosan akan tampilan web yang kerap menyerang blogger ini, ayo mari kita buat tampilan halaman artikel berbeda- beda.

Membedakan tampilan halaman artikel ini dapat kita buat menurut label artikel. Kita dapat membuat transformasi pada header, halaman artikel, sidebar, hingga perubahan pada footer pada sesuatu halaman menurut label postingan.

Caranya yakni memberikan class pada body menurut label dengan javascript. Kayak pada thumbnail di atas, ada perbedaan pada kedua halamannya. Menyingkirkan sebagian element pada halaman dengan label tertentu.

Cara Membuat Tampilan Halaman Postingan Berbeda Berdasarkan Tabel Menggunakan Javascript

Kode javascriptnya seperti berikut


<b:if cond='data:blog.pageType == &quot;item&quot; and data:post.labels'><b:loop values='data:post.labels' var='label'><b:switch var='data:label.name'>
<b:case value='Product'/>
<script type='text/javascript'>
//<![CDATA[
document.body.className += ' post-label';
//]]>
</script>
</b:switch></b:loop></b:if>

Product adalah label postingan, maka pada seluruh halaman dengan label postingan Product akan ditambahkan class=' post-label' pada tag body.

Jika anda ingin menambahkan label lainnya maka silahkan anda tambahkan kode berikut pada kode di atas.


<b:case value='Kosmetik'/>
<script type='text/javascript'>
//<![CDATA[
document.body.className += ' post-label2';
//]]>
</script>

Sehingga kode pertama akan kelihatan seperti Kode di bawah ini.


<b:if cond='data:blog.pageType == &quot;item&quot; and data:post.labels'><b:loop values='data:post.labels' var='label'><b:switch var='data:label.name'>
<b:case value='Product'/>
<script type='text/javascript'>
//<![CDATA[
document.body.className += ' post-label';
//]]>
</script>
<b:case value='Kosmetik'/>
<script type='text/javascript'>
//<![CDATA[
document.body.className += ' post-label2';
//]]>
</script>
</b:switch></b:loop></b:if>

Lakukan hal yang sama jika anda ingin menambahkan label lainnya. Simpan kode di atas pada bagian postingan seperti di bawah ini.


<b:includable id='post' var='post'>
  <article class='post hentry'.........>
    ..............
    ..............
  </article>
KODE TADI DI SINI
</b:includable>

Setelah itu silahkan anda buat style seperti kode berikut untuk mengatur tampilannya.


body.post-label .header {
   ....................
}

body.post-label2 .header {
  .....................
}

body.post-label .post {
 ......................
}

body.post-label2 .post {
 ......................
}

body.post-label .post .post-footer{
 ......................
}

Dan lainnya.

Itulah penjelasan mengenai Cara Membuat Tampilan Halaman Postingan Berbeda Berdasarkan Label MenggunakanJavascript, Bagaimana menurut anda, sangat mudah bukan? Selamat mencoba....

Tags:
cara membuat web sederhana dengan html css dan javascript cara membuat website dengan html, css dan javascript contoh program menggunakan javascript cara membuat next page di html cara membuat javascript di html contoh web menggunakan javascript cara membuat tombol next dan back di blog contoh aplikasi javascript

Penutup

Itulah pembahasan artikel tentang Cara Membuat Tampilan Halaman Postingan Berbeda Berdasarkan Label Menggunakan Javascript mudah-mudahan bisa memberi manfaat untuk Shobat semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Tampilan Halaman Postingan Berbeda Berdasarkan Label Menggunakan Javascript

Anda mungkin menyukai postingan ini

  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>