NEWS UPDATE :
Thursday, April 19, 2012

Memunculkan Kolom/Elemen Blog di Halaman Tertentu

Share to :

Pada postingan sebelumnya, kita telah membahas tentang Cara Membuat Widget Muncul dan Menghilang Pada Palaman Tertentu (Home/Posting).

Konsepnya sama seperti postingan yang dulu. Jika pada postingan yang dulu widgetnya yang muncul dan menghilang, tetapi kali ini Kolom/Elemennya yang akan kita modif agar bisa muncul dan menghilang.

Trik ini di gunakan untuk menyembunyikan atau mengontrol ukuran kolom/elemen dan sifatnya.

Untuk lebih jelasnya silahkan simak tutorial ini dengan baik.

A) Kolom, ukuran kolom  atau widget, di tampilkan pada  halaman Beranda/depan namun disembunyikan atau ( berubah ) pada halaman Postingan. scriptnya mengunakan ini :
<b:if cond="data:blog.url == data:blog.homepageUrl"> Letakan Kolom, ukuran kolom  atau widget anda disini, kemudian di tutup dengan </b:if>
B) Kolom/elemen yang tampil pada halaman Beranda/depan dan indek label, namun tidak tampil atau ( berubah ) pada halaman Postingan. scriptnya mengunakan ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>  Letakan Kolom, ukuran kolom  atau widget anda disini, kemudian di tutup dengan </b:if>
C) Pada halaman Beranda/depan,  kolom/elemen widget-nya tidak tampil namun akan tampil atau ( berubah ) pada halaman Postingan. scriptnya mengunakan ini :
<b:if cond='data:blog.pageType == "item"'>  Letakan Kolom, ukuran kolom  atau widget anda disini, kemudian di tutup dengan </b:if>
Kurang lebih maksudnya seperti ini :
Jika kita ingin "Membuat Halaman Home, Berbeda dengan Halaman Posting" maka kita akan menggunakan script A.

Contoh kasus-nya akan seperti ini :
Pada halaman beranda atau home kita memiliki 4 kolom, dan pada halaman postingan kita ingin agar sebuah kolom kita menghilang, maka akan muncul hannya 3 kolom serta ukuran kolomnyapun berubah pada halaman postingan.

Untuk lebih jelasnya silahkan lihat gambar dibawah ini
>> Gambar dibawah ini adalah tampilan Halaman Beranda/Home Page ada 4 kolom
>> Gambar dibawah ini adalah tampilan Halaman Postingan yang berubah menjadi 3 kolom

Untuk memodifikasi agar bisa seperti ilustrasi di atas, caranya seperti ini :
Sebelum memluai, jangan lupa untul membackup dulu template sobat, agar bila terjadi kesalahan bisa di restore lagi.
Sebelumnya sobat juga harus tahu nama dari kolom2 yang ada di dalam template sobat. Misalnya seperti contoh beriktu ini :
Sebelum tulisan  ]]></b:skin> sobat telah membuat beberapa kolom yang sobat beri nama sesuai dengan nama kolom-kolom yang di template sobat, yang scriptnya kurang lebih seperti ini :
#main-wrapper {
width: 600px;

.post-body img{
width:….px;
}
.post-body {text-align:justify;}
.main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 .5em 1.5em 0;
  padding:0 0 1.5em;
}

#Sidebar-1 {
width: 200px;

#Sidebar-2 {
width: 200px;

#Sidebar-3 {
width: 200px;

#Sidebar-4 {
width: 200px;
}
Setelah tulisan  ]]></b:skin> 
Tambahkan di antaranya ( kira-kira ) , script seperti contoh ini :
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper {
width:400px;
}
.post-body img{
width:….px;
}
.post-body {text-align:justify;}
.main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 .5em 1.5em 0;
  padding:0 0 1.5em;
}

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#Sidebar 1 { display:none;}
</b:if>
</style>

==>>Yang artinya kurang lebih seperti ini :
<style type='text/css'>
 Artinya " saya akan menambahkan sebuah gaya pada blog saya dengan menggunakan text/css "

<b:if cond='data:blog.pageType != &quot;item&quot;'>
Artinya " jika kondisi blog yang dibuka adalah halaman depan dan indek label, maka :
#content {
width:400px;
}
Artinya " hi content berubahlah lebarmu menjadi 400px "
</b:if> ini adalah akhir dari kondisi yang saya katakan di depan".


<b:if cond='data:blog.pageType == &quot;item&quot;'>
Artinya " jika kondisi blog yang dibuka adalah halaman depan dan indek label, maka : 

#Sidebar-1 { display:none;} sidebar-1 tidak usah muncul ya!!!

</b:if> ini adalah akhir dari kondisi yang saya katakan di depan".

</style> ini adalah akhir dari gaya yang saya telah katakan di depan.
Sebenarnya tutorial ini gampang banget, asal sobat bisa memahami ini dengan baik. Sobat juga bisa memodifikasi sesuai yang sobat inginkan, misalnya ingin kolom content_nya saat di halaman beranda/Home berada di kiri, lalu saat dihalaman postingan, maka kolom content nya pindah di bagian kiri,
Selamat mencoba dan semoga sukses...http://1.bp.blogspot.com/-5njbf-h80n0/T5Ar9s-hXaI/AAAAAAAAAtU/xYuX0WEdJis/s72-c/imnnages.jpg
Sumber : www.nuedges.blogspot.com


Memunculkan Kolom/Elemen Blog di Halaman Tertentu


Tulisan ini menarik? Copas permalink ini blogmu donk!

10 komentar :

Harrys76 | Share Everything said... Balas Komentar

oh jd gini caranya kalo nyembunyiin widget tanpa ninggalin bekas! :D

thx buat info nya...!

PERTAMAX dulu ah! :D

AbduGreen said... Balas Komentar

Iya sob.. seperti itulah... hehehe :D silahkan disimak dengan cermat..

Widodo said... Balas Komentar

makasih sob infonya tutorial ini udah saya terapin

AbduGreen said... Balas Komentar

ok.. sukses ya sob...

Rama88 said... Balas Komentar

sepp dah.. thx tutornya sob,,

TORAYASURABAYA said... Balas Komentar

Alhamdulillah ini udah saya terapkan juga :D

♥VPie◥♀◤MahaDhifa♥ said... Balas Komentar

. . bagus nich artikelnya. tenkz ya?!? aq mau coba besok aja lah. tenkz banget . .

AbduGreen said... Balas Komentar

@rama88 ==> ok sobat..

@TORAYASURABAYA ==> Ok sobat,, sukses ya..

@♥VPie◥♀◤MahaDhifa♥ ==>> Ok sob,, sippp

MIKROTIK said... Balas Komentar

nice HTML..

AbduGreen said... Balas Komentar

@And Antariksa:iya sob..

Post a Comment

Berkomentarlah di blog ini dengan Etika yang Baik dan Cerdas
- Jangan mencantumkan link apapun, ex: http://xxx
- Komentar yang Nyepam TIDAK AKAN SAYA PUBLISH
- Jangan sampai komentarmu masuk ke dalam SPAM!

 
Support : Creating Website | My Pages | Makcum Abdu
Copyright © 2011. Abdu-Green's Blog - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger