Trik Menggunakan Kode CSS di bagian tertentu blogClick here to get more tutorials!

Trik ini dimaksudkan untuk membuat fungsi baru kode css. Anda dapat membuat kode css yang benar-benar baru dan mempunyai fungsi tertentu, meniadakan fungsi kode css yang telah ada agar tidak berfungsi dibagian tertentu blog atau hanya merubah beberapa variabel tertentu dari kode css agar dibagian tertentu dari blog ditampilkan berbeda dari bagian blog lainnya. Agar lebih jelas, sebagai contoh misalnya anda ingin dihalaman utama (homepage) hanya ditampilkan judul posting (post title) tanpa konten sama sekali, menghilangkan sidebar di homepage, merubah warna link di homepage dan post page menjadi berbeda, membuat background homepage berbeda dengan post page, menggunakan font berbeda di posting tertentu (berdasar URL posting) serta berbagai perubahan dan perbedaan lainnya. Anda bisa mengembangkan trik ini untuk membuat blog menjadi jauh lebih berbeda & jauh lebih menarik.

Contoh bentuk kode default template

Kode di bawah ini hanya sebuah contoh. Andaikan saja ini merupakan kode css pengatur tampilan link yang ada ditempate. Kode css ini secara otomatis akan berfungsi sama di semua bagian blog.

a,a:link{
    text-decoration:none;
    color:black;
}
a:visited{
    text-decoration:none;
    color:gray;
}
a:hover{
    text-decoration:underline;
    color:orange;
}

Merubah tampilan link di homepage

Agar tampilan link di homepage berbeda dari yang seharusnya (berdasar kode css di atas), maka anda harus membuat sebuah pengaturan tampilan link yang baru dan berlaku khusus di homepage. Pengaturan ini dilakukan dengan menggunakan kode css baru dengan variabel (value) berbeda. Sebagai contoh kita buat kode css dalam bentuk seperti di bawah ini:

a,a:link{
    text-decoration:underline;  /* menampilkan text decoration */
    color:brown;  /* merubah warna link */
    font-weight:bold; /* kode baru ditambahkan */
}
a:visited{
    text-decoration:none;
    color:darkblue; /* merubah warna */
}
a:hover{
    text-decoration:none; /* menghilangkan text decoration */
    color:red; /* merubah warna hover */
}

Bentuk kode yang yang siap untuk digunakan

Anda harus menambahkan kode html yang berfungsi "hanya membuat kode css baru ini bekerja secara khusus di homepage (halaman utama blog). Anda juga harus menambahkan tag pembuka dan penutup style, sehingga tampilan kodenya akan seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
a,a:link{
    text-decoration:underline;  /* menampilkan text decoration */
    color:brown; /* merubah warna link */
    font-weight:bold; /* kode baru ditambahkan */
}
a:visited{
    text-decoration:none;
    color:darkblue; /* merubah warna */
}
a:hover{
    text-decoration:none; /* menghilangkan text decoration */
    color:red; /* merubah warna hover */
}
</style>
</b:if>
</b:if>

Atau seperti yang ini:

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
a,a:link{
    text-decoration:underline;  /* menampilkan text decoration */
    color:brown;  /* merubah warna link */
    font-weight:bold; /* kode baru ditambahkan */
}
a:visited{
    text-decoration:none;
    color:darkblue; /* merubah warna */
}
a:hover{
    text-decoration:none; /* menghilangkan text decoration */
    color:red; /* merubah warna hover */
}
</b:if>
</b:if>
</style>

Keterangan :

1. Kode yang berwarna hijau adalah kode html yang berfungsi untuk mebuat sebuah fungsi hanya bekerja di homepage.
2. Kode yang berwarna coklat (brown) adalah tag pembuka & penutup style untuk kode css. Tag ini diperlukan karena kita akan menyimpan kode perubahan di atas </head>
3. Kode berwarna orange adalah kode variable (value) css yang baru.

Cara menyimpan Kode CSS

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : </head>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy & paste-kan kode baru di atas </head>.
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat penampilan image profile blogger baru anda!

Posisi Penempatan Kode thd tag </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
a,a:link{
    text-decoration:underline;  /* menampilkan text decoration */
    color:brown; /* merubah warna link */
    font-weight:bold; /* kode baru ditambahkan */
}
a:visited{
    text-decoration:none;
    color:darkblue; /* merubah warna */
}
a:hover{
    text-decoration:none; /* menghilangkan text decoration */
    color:red; /* merubah warna hover */
}
</style>
</b:if>
</b:if>

</head>

Menghilangkan sidebar di halaman statis blog

Sebuah contoh menghilangkan sidebar blog di halaman statis. Andaikan saja sidebar blog menggunakan id="sidebar-wrapper". Untuk menghilangkan sidebar dan memperlebar halaman posting di halaman statis anda bisa menambahkan nilai baru untuk lebar "main-wrapper" (misalnya id untuk halaman posting adalah main wrapper).

<b:if cond='data:blog.pageType == &quot;Static Page&quot;'>
<style type='text/css'>
#sidebar-wrapper{
    display:none; /* menghilangkan sidebar-wrapper - sidebar blog */
}
#main-wrapper{
    width:100%;  /* gunakan nilai yang sesuai  */
}
</style>
</b:if>

Kode untuk halaman statis tersebut hanya sebuah gambaran kecil tentang cara melakukan perubahan bagian (lokasi) blog melalui perubahan kode css dengan cara meniadakan fungsi yang sebelumnya ada dan mengganti dengan fungsi baru. Anda bisa sesuaikan kode yang diperlukan sesuai dengan kode yang ada di template. Beberapa variable atau attribute css yang lain juga perlu ditambahkan agar perubahan terjadi secara optimal dengan hasil memuaskan.

Anda dapat emmbuka link di bawah ini untuk penggunaan fungsi kode di bagian tertentu yang lain dari blog selain homepage dan halaman statis.

Menampilkan Widget di Bagian Tertentu BlogBerbagai trik menampilkan Widget Blogger di Halaman Tertentu dengan memanfaatkan kode blogger.