Cara Mengedit Heading Menjadi Drop Shadow untuk Blogger

Tweet

D-Copy Blog's | Blogger blog memiliki pilihan bebas dari mengedit style sheet. Untungnya Anda dapat bermain-main dengan kode dengan memberikan blog Anda menjadi tampilan yang Anda inginkan. Kami menggunakan tag H3 dalam posting untuk menulis berita utama dan bagian penting dari tulisan. Hari ini kita akan belajar bagaimana membuat judul kustom yang akan berubah warna pada mouse hover. Kami akan menggunakan CSS3 efek untuk menghasilkan efek drop shadow bersama dengan efek hover mouse. Hal ini akan memberikan headline Anda terlihat neon. Jadi mari kita melakukannya!

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu Template > edit HTML > centang Expand Template Widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

/*----DCopy Heading Tag----*/
h3{
font-family:veranda !important;
font-style:italic !important;
}
.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h3:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

Catatan: - Hapus kode dalam template Anda yang mungkin terlihat seperti post h3.

Melakukan perubahan :

• Untuk Mengubah jenis font verdana edit dan ganti dengan font family yang Anda suka.
• Untuk mengubah gaya font dengan menggantikannya menjadi miring dengan baik yang normal maupun tebal
• Untuk mengubah warna teks dan warna perbatasan kiri/kanan di mode aktif kemudian ubah  #666 dan menggantinya dengan warna pilihan Anda
• Untuk mengganti teks dan warna perbatasan pada mouse melayang-layang kemudian ubah #FF133F
• Untuk mengubah warna kotak bayangan dalam perubahan modus aktif #666
• Untuk mengubah warna kotak bayangan pada perubahan modus mouse hover #FF133F
• Anda bisa menggunakan tools Color Code yang disediakan.

     5.  Simpan template Anda dan Anda hampir selesai!