Cara Mudah Membuat Efek Bayangan di Setiap Judul Blog Untuk Menarik Pengunjung

Dengan efek bayangan kita dapat membuat efek luar biasa dalam menghias situs blog kita. Sebelumnya aku bergantung pada gambar untuk mendesain blog. Namun sekarang dengan menggunakan CSS blog developer, aku mampu membuat desain yang berbeda. Dalam kasus google blogger, aku melihat banyak widget yang dikembangkan oleh pengembang dan sebagian besar desain dapat dibuat dan dikelola oleh CSS.

Dalam tutorial ini aku akan menunjukkan kepada sobat desain teks sederhana dengan CSS Murni yang akan menambah efek pada judul posting blog. Setelah menerapkan trik ini saat pengunjung mengklik judul artikel postingan, maka akan muncul bayangan judul posting. Dan ketika pengguna akan melepaskan mouse, maka bayangan akan hilang. Ini sungguh menakjubkan hahaha.

Setiap template blogger memiliki desain judul posting sendiri tetapi aku telah menambahkan skrip lain untuk tampilan judul posting blog yang lebih baik. Kode judul tulisan cssnya akan terlihat seperti dibawah. Jadi, sobat harus menemukan dan menghapus kode judul posting sebelumnya dengan tekan tombol ctrl + f > cari kode  .post-title { > gantikan dengan kode dibawah.

.post-title {
color: #333;
font-family: 'Oswald', sans-serif;
font-size: 24px;
line-height: 30px;
padding-bottom: 10px;
font-weight: 400;
}

Disini aku menggunakan font oswald untuk judul posting. Karena font ini terbaik untuk menampilkan judul posting blog. Meskipun trik ini sepenuhnya didasarkan pada pengkodean CSS, maka sobat tidak perlu khawatir tentang kecepatan loading blog. Karena kode ini sangat ringan. Untuk menerapkan trik ini ikuti saja langkah-langkah di bawah ini.

#1. Buka blogger.

#2. Pilih menu tema > pilih edit html.

#3. Copy kode di bawah dan pastekan di atas atau sebelum ]]> </ b: skin>

.post-title {
color: #333;
font-family: 'Oswald', sans-serif;
font-size: 24px;
line-height: 30px;
padding-bottom: 10px;
font-weight: 400;
}

h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {color: #333;
text-decoration: none;
transition: all 0.7s linear;
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
-o-transition: all 0.7s linear;
-ms-transition: all 0.7s linear;}

h3.post-title a:hover, h2.post-title a:hover, h1.post-title a:hover {
color: #000;
text-shadow: 2px 2px 5px #eee, 5px 5px 5px #707070;
}

#4. Simpan tema.

#5. Selesai.

Baca juga : buat blogmu secepat sinyal 4G dengan memasang tools CSS Minifier. 

Sekarang kunjungi blog sobat dan arahkan mouse sobat di atas judul posting. Lihat bayangan yang muncul. Maka bayangan yang muncul akan seperti gambar gif diatas. Ini terlihat luar biasa dan pengunjung blog sobat akan menyukainya. Mungkin itu aja yang bisa aku bagikan. Terima kasih.

Share this post