Rasanya saya sudah jarang membuat posting baru pada blog tercinta ini.
Hari ini saya mengunjungi Blog teman dan melihat kolom widget yang
berubah tampilan ketika beralih dari satu halaman ke halaman lain. Saya
pun tertarik untuk mengetahui cara membuatnya, coba diterapkan pada Blog
saya, dan membuat posting tentang hal tersebut.
Ternyata agak sulit dalam membuat perubahan kolom widget yang memuat sederetan widget ini, tidak semudah pada satu buah widget.
Namun akhirnya akan mengerti dan mudah menerapkanya jika sobat teliti
dalam menyimak tutorialnya. Perubahan widget yang saya maksud ini sering
disebut
tampilan template dinamis, bisa dikatakan perubahan
tampilan dan jumlah kolom widget. Namun pengertian tadi tentunya
sebagian sobat Blogger masih belum memahaminya dengan jelas.
OK, saya contohkan sebuah kasus.
Mungkin sobat pernah melihat sebuah Blog, pada homepage blog tersebut
menampilkan 3 kolom widget yaitu kolom posts, sidebar kanan, dan sidebar
kiri. Namun ketika sobat beralih pada salah satu halaman posting,
sidebar kiri menghilang. Sehingga hanya terdapat kolom posts dan sidebar
kanan. Bagusnya lagi kolom posts bertambah lebar hingga tidak ada ruang
kosong di sebelah kiri.
OK, sangat berguna ya jika ada sederetan widget yang tidak perlu
ditampilkan ketika pengunjung membaca artikel di Blog sobat. Sebenarnya
mudah untuk menerapkan hal ini, sobat hanya perlu menambahkan kode yang
tidak terlalu banyak pada template blog yang bisa dikatakan berfungsi
sebagai sebuah perintah.
Langsung saja kita menuju ke langkah-langkah penerapnya:
1. Login ke akun Blogger sobat.
2. Masuk ke bagian Template dan klik Edit Template.
3. Dengan tombol ctrl+F, cari kode
]]></b:skin> dan perhatikan kode-kode diatasnya yang cukup banyak. Default-nya (sebelum sobat menambah kode CC tambahan) tepat diatas kode
]]></b:skin> terdapat kode-kode CSS kolom widget, kurang lebih seperti berikut.
/* -- Main -- */
#main-wrapper{float:left;width:650px;margin:0;padding:0}
/* -- End Main -- */
/* -- Sidebar -- */
#sidebar-kiri {float:left;width:230px;display:inline;margin:0;}
#sidebar-wrapper{float:right;width:320px;display:inline;margin:0;}
/* -- End Sidebar -- */
Sobat harus memahami elemen-elemen kolom widget seperti yang saya beri
tanda berwarna merah diatas, dan mengetahui elemen-elemen kolom widget
pada template Blog sobat. Karena kode-kode elemen pada setiap template
biasanya memiliki penulisan yang berbeda-beda.
Sekarang kita belajar membuat sebuah kode untuk perintah membuat kolom widget berbeda.
- Perintah letak perubahan.
Perintah untuk merubah halaman homepage saja.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Perintah untuk merubah semua halaman kecuali homepage.
<b:if cond='data:blog.url != data:blog.homepageUrl'>
Perintah untuk merubah halaman posting saja
<b:if cond='data:blog.pageType == "item"'>
Perintah untuk merubah semua halaman kecuali halaman posting.
<b:if cond='data:blog.pageType != "item"'>
Perintah untuk merubah sebuah halaman tertentu saja
<b:if cond='data:blog.pageType == "url-halaman"'>
Perintah untuk merubah semua halaman kecuali sebuah halaman tertentu.
<b:if cond='data:blog.pageType != "url-halaman"'>
#Pilihlah perintah mana yang sobat perlukan.
Selanjtnya sobat membuat kode dengan urutan:
keterangan penambahan CSS,
perintah letak perubahan,
elemen yang akan diedit dan kode perubahan tampilan, akhiri dengan
</b:if> dan
</style>.
Untuk
elemen yang akan diedit dan kode perubahan tampilan khususnya jika sobat akan merubah tampilan kolom posts,
agar lebih kompleks copy paste dahulu dari kode tampilan elemen
asalnya. Karena kolom tidak hanya memuat posting saja, juga memuat
comments dan lain-lain. Jika ini tidak dilakukan, maka kemungkinan sobat
hanya merubah tampilan posting sedangkan tampilan comments tidak,
sehingga hasilnya akan berantakan.
Perhatikan contoh pembuatan kode-nya.
<style type='text/css'>
<b:if
cond='data:blog.pageType != "item"'>
a img{border-width:0}
.post-body img{border:1px solid #ccc;margin:5px}
#main-wrapper a:hover{color:#c13a10;text-decoration:underline}
a:link,a:visited,#main .post-body a:link,#main .post-body a:visited{color:#346ba4;text-decoration:none}
a:hover,#main .post-body a:hover{color:#999;}
#main-wrapper a:link,#main-wrapper a:visited{text-decoration:none}
#main-wrapper{float:left;width:420px;margin:0;padding:0}
.post h3 a:hover{color:#A91B33;text-decoration:none}
.post-body{line-height:1.6em;margin:0;text-align: justify;}
.post img{padding:5px}
.post h2, .post h2 a {color: #444;font-family: Arial;font-weight: 400;margin: 0 0 5px;padding: 10px 0 0;}
.post blockquote{border-left:3px solid #DDD;margin:5px 0 5px 10px;padding:0 10px;color:#888;text-align:left;}
.post blockquote p{margin:0;padding:0 0 15px}
.post,.comments{background:#FFF top
no-repeat;float:left;border-bottom:1px solid #DDD;width: 400px;margin:0 0
10px;padding-left:10px;padding-right:10px;padding-bottom:10px;border:
1px solid #ccc;}
.post h3,.post h3 a
{color:#444;font-size:17px;font-family:Georgia, Tiles New
Roman;font-weight:400;margin:0 0 5px;padding:10px 0 0}
</b:if>
<b:if cond='data:blog.pageType ==
"item"'>
#Sidebar-kiri {
display:none;}
</b:if>
</style>
Keterangan:
warna biru,
keterangan penambahan CSS
warna hitam,
perintah letak perubahan
warna merah,
elemen yang akan diedit dan kode perubahan tampilan
Kode diatas jika diartikan sederhananya seperti ini.
<style type='text/css'> --- Saya menambahkan perintah baru
<b:if cond='data:blog.url == data:blog.homepageUrl'> --- Pada halaman homepage
a img{border-width:0}
.post-body img{border:1px solid #ccc;margin:5px}
#main-wrapper a:hover{color:#c13a10;text-decoration:underline}
a:link,a:visited,#main .post-body a:link,#main .post-body a:visited{color:#346ba4;text-decoration:none}
a:hover,#main .post-body a:hover{color:#999;}
#main-wrapper a:link,#main-wrapper a:visited{text-decoration:none}
#main-wrapper{float:left;width:420px;margin:0;padding:0} --- Lebar konten menjadi 420px
.post h3 a:hover{color:#A91B33;text-decoration:none}
.post-body{line-height:1.6em;margin:0;text-align: justify;}
.post img{padding:5px}
.post h2, .post h2 a {color: #444;font-family: Arial;font-weight: 400;margin: 0 0 5px;padding: 10px 0 0;}
.post blockquote{border-left:3px solid #DDD;margin:5px 0 5px 10px;padding:0 10px;color:#888;text-align:left;}
.post blockquote p{margin:0;padding:0 0 15px}
.post,.comments{background:#FFF top no-repeat;float:left;border-bottom:1px solid #DDD;width: 400px;margin:0 0 10px;padding-left:10px;padding-right:10px;padding-bottom:10px;border: 1px solid #ccc;} --- Lebar comments menjadi 400px
.post h3,.post h3 a {color:#444;font-size:17px;font-family:Georgia,
Tiles New Roman;font-weight:400;margin:0 0 5px;padding:10px 0 0}
</b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'> --- pada semua halaman kecuali homepage
#sidebar-kiri {display:none;} --- sidebari-kiri jangan ditampilkan
</b:if>
</style> --- selesai
OK, silakan sobat
memulai pembuatan kode perintah perubahan tampilan kolom widget sesuai
dengan yang sobat butuhkan, tentunya dengan cara yang telah saya
jelaskan diatas.
Untuk kode perubahan tampilan,
saya hanya bisa mencontohkan sedikit saja. Sobat bisa membuat perubahan
tampilan yang lebih bagus lagi. Selain menghilangkan dan merubah ukuran
widget, juga bisa merubah warna-warna, jenis font, gaya border dan
lain-lain. Silakan sobat cari tau lagi lebih banyak tentang kode
tersebut.
4. Selanjutnya, letakan kode yang baru sobat buat tepat di bawah kode ]]></b:skin>.
5. Jika kode telah dibuat dan diletakan pada template sobat, silakan klik Simpan Template.
Selesai,
pembahasan saya kali ini mungkin agak berbelit-belit. Saya hanya berdoa
semoga sobat mengerti dan sukses diterapkan pada Blog sobat.
Contoh/screenshot hasil dari Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu dengan cara diatas.
Homepage, terdapat tiga kolom widget termasuk sidebar kiri.
Namun pada halaman posting, sidebar kiri menghilang dan kolom posts bertambah lebar.
