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.
#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.