Cara Agar Tampilan blog blogger Berubah-ubah

Melanjutkan postingan blogku sebelumnya tentang Cara Membuat Halaman Home Blogger Blogspot lebih Dinamis, dan cara membuat halaman beranda / home di blogspot, sekarang saya mencoba berbagi tentang cara agar tampilan blog berbeda ketika postingan blog diklik. Jika sobat belum membaca postinganku sebelumnya, saya sarankan untuk membacanya.

Sebelum sobat mempraktekkannya, sebaiknya membuat satu blog khusus untuk latihan karena ini dapat dapat merusak tampilan blog sobat jika tidak berhati-hati.

Pada postingan sebelumnya di sini, saya memberikan blog Demo (blog contoh hasil praktek), di mana pada halaman home atau beranda berbeda dengan halaman postingan (single page). Jika ingin melakukan hal yang sama, silahkan sobat membaca postingan ini secara cermat.

Sebenarnya, banyak trik yang dapat kita gunakan, namun pada kesempatan ini, saya hanya memosting trik yang paling sederhana dan mudah dipraktekkan. Walaupun sederhana, tetapi efeknya sangat luar biasa tergantung kemampuan sobat mengembangkannya sendiri (hal ini dikarenakan masing-masing template biasanya memiliki karakter yang berbeda dengan template yang lain).

Perhatikan kode di bawah ini:

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML5 {display:none;}
</b:if>
</style>

Kode tersebut saya letakkan (paste) di atas kode </head>.

Yang berwarna merah adalah id gadget yang akan saya hilangkan ketika pengunjung berada pada halaman postingan (ketika artikel di klik). Bagaimana Jika gadget HTML5 tersebut tidak ingin dihilangkan, melainkan ukurannya di ubah? Bandingkan dengan kode di bawah ini:

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML5 {width:150px;height:200px;}
</b:if>
</style>

Nah, bedanya ada pada display:none, yang artinya HTML5 tidak ingin ditampilkan. Terus, Bagaimana jika bukan hanya HTML5 yang ingin saya ubah ketika halaman postigan diklik? Kita tambahkan saja kode gadget atau elemen lainnya seperti di bawah ini:

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML5 {display:none;}
#HTML2 {display:none;}
#HTML7 {display:none;}
</b:if>
</style>

Nah, Itulah dasar untuk membuat tampilan blog lebih dinamis seperti website yang profesional. Sebenernya teknik ini membutuhkan dasar-dasar CSS, bagaimana mengilangkan, bagaimana merubah ukuran, bagaimana merubah warna, bagaimana memberi background gambar dan seterusnya. Jika sobat sudah mengerti dasar-dasar CSS tersebut, maka teknik di atas akan sangat mudah dan sobat akan dapat mengembangkannya jauh lebh baik. Selain itu, sobat juga harus tahu id masing-masing elemen blog, misalnya elemen header, elemen body, elemen widget, elemen footer dan id-id unik masing-masing gadget.

Saya sarankan sobat banyak berlatih pada blog khusus (jangan menggunakan blog utama untuk latihan karena dapat berpengaruh pada posisi blog kita di google atau search engine lainnya). Kembali pada motto blog ini, kita belajar setahap demi setahap dan otodidak tanpa harus ikut kursus alias gratis (paling cuma butuh biaya internet, hihi)

Jika sobat ingin berdiskusi khusus dengan saya, silahkan bergabung di facebook dan silahkan berkomentar di wall