Cara Membuat Efek Bayangan di Setiap Judul Artikel Blog

Cara Membuat Efek Bayangan di Setiap Judul Artikel Blog
Cara membuat efek bayangan di setiap judul artikel blog - 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 membat efek bayangan di setiap judul artikel blog. Setelah menerapkan trik ini, pengunjung akan mengklik judul artikel postingan, maka akan muncul bayangan di setiap judul artikel blog. Dan ketika pengguna akan melepaskan mouse, maka bayangan akan hilang. Keren bukan hehehe.



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 { >  kemudian 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.
Cara Membuat Efek Bayangan di Setiap Judul Artikel Blog
#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;
h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {color: #333;
padding-bottom: 10px; font-weight: 400; }
-webkit-transition: all 0.7s linear;
text-decoration: none; transition: all 0.7s linear;
-ms-transition: all 0.7s linear;}
-moz-transition: all 0.7s linear; -o-transition: all 0.7s linear;
text-shadow: 3px 3px 5px #eee, 5px 5px 5px #707070;
h3.post-title a:hover, h2.post-title a:hover, h1.post-title a:hover { color: #000;
}
#4. Simpan tema.
#5. Selesai.


long shadow



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 hehehe.
Tampilkan Komentar


EmoticonEmoticon