Cara membuat judul postingan keren dengan efek CSS3 transisi di blog

Apakah Anda menggunakan judul dalam postingan blog Anda? Saya yakin Anda pasti melakukan hal itu. Seaindainya belum menggunakan judul, maka mulailah melakukan judul dalam postingan. Faktanya bahwa membuat judul dalam postingan membuat para pembaca (visitor) dapat membaca dengan mudah dan mesin pencari (search engine) juga menyukai hal itu (kata para master). Anda mesti membuatnya untuk membedakan antara jalur reguler dan heading (judul) terlihat cantik dan keren.  

Kali ini saya akan share ke anda tentang style judul postingan dengan menggunakan efek fading (memudar) hover yang sangat halus dengan bantuan CSS3 transisi serta efek-efek lainnya yang berbeda. Mari kita mulai langkah-langkahnya.. 
 

View Demo

 

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> gunakan CTRL+F untuk memudahkan pencarian
• kemudian pastekan kode CSS berikut tepat diatas kode ]]></b:skin> 

.post h3 {
background: #C72C6A;
padding: 10px;
color: #fff;
font-size: 20px;
-webkit-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.post h3:hover {
background: #AD0348;
color: #fff;
text-shadow: 4px 4px 10px #f4fff2;
filter: dropshadow(color=#f4fff2, offx=2, offy=2);
border: 4px double #FFCFE2;
-webkit-border-radius: 10px 0px 10px 0px;
border-radius: 10px 0px 10px 0px;
-webkit-box-shadow: 3px 3px 10px 1px #C72C6A;
box-shadow: 3px 3px 10px 1px #1F8399;
}

Setiap kali menulis postingan blog dan ingin menambahkan judul postingan, tulis diantara <h3>JUDUL POSTINGAN DISINI</h3>

KET:

• Untuk mengganti warna background,silahkan ganti kode warna yang di sorot warna kuning
• Untuk mengganti warna Font, silahkan ganti kode warna yang disorot wana hijau

Semoga bermanfa'at and Happy Blogging...