Selain faktor SEO, kualitas konten dan segala tetek bengeknya, salah satu yang juga mesti diperhatikan dalam pengelolaan blog adalah dari segi tampilannya. Blog yang tampak cantik dan rapi tentu juga memiliki andil dan pengaruh lebih dalam membuat pengunjung semakin betah untuk berlama-lama singgah di blog kita. Oleh karena itu, tampilan juga mesti diatur sedemikian rupa agar blog semakin cantik, keren dan elegan.
Dari sekian kode-kode dalam html template, entah kenapa saya begitu menyukai untuk mengutak-atik kode CSS untuk memodifikasi tampilan blog agar semakin cantik dan menarik. Salah satunya seperti yang akan kita pelajari kali ini, yaitu cara membuat atau menambahkan efek bayangan pada gambar dan postingan blog. Cara ini efektif untuk membuat kedua elemen tersebut menjadi seperti mengambang sehingga tampak ada bayangan (shadow) di belakangnya.
Dengan menambahkan efek bayangan ini, tentu tampilan blog anda akan menjadi semakin elegan dan tampak lebih hidup. Artikel juga menjadi terlihat lebih menarik dengan adanya efek bayangan (shadow) ini. Contohnya seperti screenshot berikut ini:
atau seperti di bawah ini:
Untuk membuatnya menjadi seperti ilustrasi di atas, caranya cukup mudah. Kita hanya perlu menambahkan beberapa kode CSS singkat untuk memberi efek shadownya pada elemen yang kita inginkan. Adapun kodenya yaitu:
.. box-shadow: 4px 4px 10px #777
Sebagai contoh, misalnya kita ingin menambahkan efek bayangan ini pada gambar postingan, maka sebelumnya cari terlebih dahulu CSS untuk gambar postingan di html template blog anda.
Misalkan kode CSSnya seperti berikut ini:
.post img {display:block;width:100%;height:auto}
Sisipkan kode CSS pembuat shadow ke dalamnya sehingga menjadi seperti berikut ini:
.post img {display:block;width:100%;height:auto;box-shadow: 4px 4px 10px #777}
Contoh kedua misalnya untuk membuat efek shadow pada postingan, maka silahkan cari kode CSS untuk halaman postingan di html template blog anda.
Misalkan kode CSSnya seperti berikut ini:
.post {background:#fff;font-size:13px;margin:0;padding:0;position:relative;line-height:20px;}
Selanjutnya tinggal tambahkan saja kode CSS pembuat shadow ke dalamnya sehingga menjadi seperti berikut ini:
.post {background:#fff;font-size:13px;margin:0;padding:0;position:relative;line-height:20px; box-shadow: 4px 4px 10px #777}
Untuk mengatur ketebalan efek blur dan bayangannya, anda juga bisa mengubah ukuran (4 4 10) di atas. Termasuk warna bayangannya (#777) juga bisa anda ganti dengan kode dari warna lain sesuka anda.
Kalau anda ingin agar efek bayangan di postingan ini hanya muncul pada halaman beranda dan index halaman label, maka tinggal tambahkan tag kondisional untuk mengaturnya. Hasilnya seperti berikut ini:
<b:if cond='data:blog.pageType == "index"'>.post{background:#fff;font-size:13px;margin:0;padding:0;position:relative;line-height:20px; box-shadow: 4px 4px 10px #777}</b:if>
Simpan kembali template dan lihat hasilnya. Simpel dan mudah bukan. Demikianlah cara membuat/ menambahkan efek bayangan pada gambar dan postingan di blog. Semoga bermanfaat.
Labels:
Blogging
Thanks for reading Cara Membuat/ Menambahkan Efek Bayangan pada Gambar dan Postingan di Blog. Please share...!
0 Komentar untuk "Cara Membuat/ Menambahkan Efek Bayangan pada Gambar dan Postingan di Blog"
Terima kasih telah berkunjung ke blog saya, silahkan berkomentar dengan sopan. Maaf, Komentar berisi Link Aktif, Promosi Produk Tertentu, J*di, P*rn*, Komentar berbau SARA dan Permusuhan, tidak akan dipublish.