Biasanya subheading ini ditulis dengan huruf besar dan menggunakan huruf tebal. Hal tersebut untuk memudahkan pembaca untuk mengetahui maksud dari penjelasan artikel maupun judul artikel yang dibacanya.
Karena subheading H3 ini sangat dibutuhkan dan sering digunakan maka kita harus mempercantiknya dong, supaya lebih enak dipandang mata, tujuan ini supaya pengunjung atau pembaca tidak merasa bosan dengan tampilan blog yang terlalu simple, apalagi jika artikel yang kalian berikan sangat bermanfaat, pasti pembaca atau pengunjung merasa tambah betah untuk mengunjungi blog kalian.
Lalu bagaimana cara mempercantik tampilan subheading H3 ini? nah disini saya mempunyai 8 Style Keren Subheading H3.
Cara Pemasangan
- Siapkan kode style subheading H3 nya, lalu salin kode nya. (akan saya berikan setelah ini)
- Masuk ke Dasbord Blogger > Template > Edit HTML
- Tempel (Paste) sebelum kode ]]></b:skin>
Style 1
.post h3 {
border: 1px dashed #C7C7C7;
padding: 3px;
box-shadow: 2px 2px 5px;
padding-left: 10px;
margin-bottom: 7px;
border-radius: 10px;
border-bottom-color: #000;
background: rgba(218, 218, 218, 0.04);
border-bottom-right-radius: 100px;
}Style 2
.post h3 {
padding: 3px;
text-shadow: -2px -1px 1px #060606;
box-shadow: -3px 2px 3px #000;
padding-left: 10px;
margin-bottom: 7px;
background: #303030;
color: #F7F7F7;
}
.post h3:before {
font-family: FontAwesome;
position: relative;
content: '\f054';
font-size: 17px;
padding-right: 10px;
}Style 3
.post h3 {
padding: 3px;
text-shadow: -1px -1px 0px #000000;
box-shadow: -2px 2px 3px #000;
padding-left: 10px;
margin-bottom: 7px;
}
.post h3:before {
font-family: FontAwesome;
position: relative;
content: '\f02d';
text-shadow: 0px 0px 0px #000;
color: #000;
font-size: 17px;
padding-right: 10px;
}Style 4
.post h3{
padding: 3px;
padding-left: 10px;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-color: #FEBD17;
border-radius: 9px;
box-shadow: 2px 2px 2px;
border: #000 1px solid;
}
.post h3:before {
font-family: FontAwesome;
position: relative;
content: '\f061';
font-size: 17px;
padding-right: 10px;
}Style 5
.post h3 {
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKAUZ4VgysOk9DsrBzBPdMPDeatPgl_-vUaX7SP3Rh9YhFcq-fJLBZ5PbHPdFjCWi7jgF270ZTqJhAHdMz1k3HwYqyCMhianb67X-HKQQJ78CPR-L0o9Bt_fdB4fVywhTPaOV518ciCchJ/s1600/h2.jpg") repeat-x scroll 0px 0px;
color: #FFF;
font-size: 20px;
font-weight: 200;
letter-spacing: 0px;
font-family: fantasy;
margin-top: 20px;
margin-bottom: 20px;
box-shadow: 0px 1px 6px 3px #000;
padding: 10px 2px 10px 10px;
text-shadow: 0px 1px #000;
text-transform: uppercase;
}Style 6
.post h3{margin:0 0 10px;padding:10px;background-color:#00ABC5;box-shadow:0 3px 0 #4ACCDF;color:#FFF;font-size:16px;line-height:16px;font-family:"Bree Serif",serif;font-weight:400;text-decoration:none;text-transform:uppercase}Style 7
.post h3{background:#F9F9F9;font-family:'Oswald',sans-serif;font-size:120%;padding:6px 12px;color:#333;text-shadow:1px 1px 1px #AAA;border-bottom:4px solid #03DA03;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:1px 1px 2px #AAA;-moz-box-shadow:1px 1px 2px #AAA;box-shadow:1px 1px 2px #AAA;margin:6px 3px;text-transform:capitalize;width:95%;line-height:1em}
.post h3:hover{border-bottom:4px solid #003F80}Style 8
.post h3{color:#222;border-left:10px solid #222;border-right:10px solid #222;padding:3px 5px 3px 20px;border-radius:15px;-moz-border-radius:15px;box-shadow:0 0 13px #222;-webkit-box-shadow:0 0 13px #222;-moz-box-shadow:0 0 13px #222}
.post h3:hover{color:#219DFC;border-left:10px solid #219DFC;border-right:10px solid #219DFC;box-shadow:0 0 13px #219DFC;-webkit-box-shadow:0 0 13px #32A4FC;-moz-box-shadow:0 0 13px #32A4FC}Cara Menggunakan
- Pilih atau Block kata yang ingin kalian jadikan subheading H3.
- Kemudian pilih Subheading (lebih jelasnya lihat screenshot dibawah ini)
- Lalu klik Pratinjau untuk memastikan style subheading H3 sudah berhasil atau gagal.
Jika kurang jelas atau kalian belum faham dengan artikel ini, silahkan bertanya melalui kolom komentar dibawah artikel ini, harus sesuai peraturan yang saya terapkan dipesan komentar.
Demikian artikel dari 8 Style Keren Subheading H3 di Postingan Blog, jika ada salah-salah penulisan mohon dimaafkan.
Terima Kasih