Cara Memperindah Heading Tags H1 - H4 Dengan CSS

Hai Sobat, kali ini saya akan share " Cara Memperindah Heading Tags H1-H4 Dengan CSS ". Cara ini cocok untuk memperindah tampilan heading tags H1 H2 H3 H4 agar lebih menarik.
Mau tau caranya... Langsung Ke Tutorial...

Cara Memperindah Heading Tags H1-H4 Dengan CSS

Cara Membuat Heading Tags H4 Agar Lebih Seo Friendly

1. Masuk Ke Beranda Blogger > Template > Edit HTML

2. Cari Kode <h2 class='title'><data:title/></h2> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F

3. Ganti Kode <h2 class='title'><data:title/></h2> Dengan Kode Di Bawah Ini

<h2 class='title'><data:title/></h2>

Ganti h2 Menjadi h4
4. Klik Simpan

Cara Memperindah H1 - H4 Dengan CSS

1. Masuk Ke Beranda Blogger > Template > Edit HTML

2. Cari Kode ]]></b:skin> Atau </style> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F

3. Pilih Beberapa Kode Di Bawah Ini Yang Anda Sukai, Lalu Masukkan Kode Di Bawah Di Atas Kode ]]></b:skin> Atau </style>

Heading Style 1

.post h4 {     background-attachment: scroll;     background-color:white;background-image: url("http://2.bp.blogspot.com/-GZCR82-F- bU/UTnAhdjJ9eI/AAAAAAAAbXI/Fy0CjGpYCMM/s1600/h2.png");     background-position: 4px 50%;     background-repeat: no-repeat no-repeat;     border: 3px solid;     border-radius: 60px 60px 60px 60px;     box-shadow: 0 1px 3px, 1px 1px 0 inset;     color: #333333;     font-family: inherit;     font-size: inherit;     font-size-adjust: inherit;     font-stretch: inherit;     font-style: inherit;     font-variant: inherit;     font-weight: inherit;     line-height: 1;     list-style: none outside none;     margin: 15px 3px;     outline: medium none;     padding: 3px 10px 3px 30px;     text-shadow: 0 1px 0;     text-transform: uppercase;     vertical-align: baseline; }

Heading Style 2

.post h4 {     background-attachment: scroll;     background-color: white;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK7-k70CXQYnzlBmCTjlIc2HNY3RkM1Wduuea33lPtqYT6KM2cQwCqEvh9Os78SNX0OyPdCoXzn6rOmPPNUYZDUVOgIbTkyVMgOnem6hG5VplOEn6YYlmH5GrA2mBlTD61Aq1iCcnnjA9T/s1600/h2.png"); 
    background-position: 0 50%;     background-repeat: no-repeat no-repeat;     border: 3px solid #0D7005;     border-radius: 14px 14px 14px 14px;     box-shadow: 3px 3px 3px #ABABAB;     color: #25991C;     font-family: Lobster,cursive;     font-size: 26px;     font-weight: normal;     margin: 0 0 1em;     padding: 0 1px 4px 34px;     position: relative;     text-shadow: 1px 1px 0 #000000;     text-transform: capitalize; }

Heading Style 3

.post h4 {border-bottom: 1px dotted #4E555A;border-top: 1px dotted #4E555A;color: #4E555A;padding: 3px;}

Heading Style 4

.post h4{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfr5WhFr4lFvq43jDEaZ89okBWs82WlMsVbXjE9MAqiuwq63HYvoRGHhCZQadbTUHSVxA_bgipJWtxzbyet5UsYhgKCPid_nRh05HbWcgRRTwhzIt9gRgcQTaKKincErTgf4-VJxcvTJhZ/s1600/h2.png") no-repeat scroll 4px center transparent;border: 3px solid #C8C800;border-radius: 60px 60px 60px 60px;box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;color: #A5A503;font-family: 'lobster',sans-serif;font-size: 19px;font-weight: bold;line-height: 1;margin: 15px 3px;padding: 3px 10px 3px 30px;text-shadow: 0 1px 0 #CCCCCC;text-transform: uppercase;}

Heading Style 5

.post h4 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRb1HoU-aM3bRdG7kzg9Pq9aLVUxxLRNPcsGIbdmqkjTLO-3gcDtUM_6PPS2dwdJo8LOCb9QfDYbBA3aZZztZnm6MxYXiHYr1CsOr3t3035E6xPF7CbmjWC-6x9XjwTmSXBbCkPmoYNRHT/s1600/star.png") no-repeat scroll 5px center transparent;
 clear: both;color: #662D2D;font-family: 'Oswald',sans-serif;font-size: 26px;font-weight: bold;line-height: 1.2;margin: 25px 5px;padding: 6px 10px 2px 40px;text-shadow: 0 1px 0 #CCCCCC;text-transform: uppercase; }

Heading Style 6

.post h4{color:#0080ff;border-top:1px dotted #0080ff;border-bottom:1px dotted #0080ff;padding:3px;}

Heading Style 7

.post h4{text-align: center;font-weight:bold;border:solid 5px #999c3b;font-size:14px;-moz-border-radius-topleft: 75px;-moz-border-radius-topright:75px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:75px;-webkit-border-top-right-radius:75px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border-top-left-radius:75px;border-top-right-radius:75px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding:3px}

Heading Style 8

.post h4{text-align: center;font-weight:bold;border:solid 5px #0fc7ff;font-size:14px;-moz-border-radius-topleft: 75px;-moz-border-radius-topright:75px;-moz-border-radius-bottomleft:75px;-moz-border-radius-bottomright:75px;-webkit-border-top-left-radius:75px;-webkit-border-top-right-radius:75px;-webkit-border-bottom-left-radius:75px;-webkit-border-bottom-right-radius:75px;border-top-left-radius:75px;border-top-right-radius:75px;border-bottom-left-radius:75px;border-bottom-right-radius:75px;}

Heading Style 9

.post h4{line-height: 1em;color: #91b9ff;font-weight:bold;font-size: 17px;text-shadow:0px 0px 0 rgb(-365,-325,-255), 0px -1px 0 rgb(-620,-580,-510),0px -2px 1px rgba(0,0,0,1),0px -2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);}

Heading Style 10

.post h4{ font-size: 14px; font-weight: bold; text-shadow: 0px 0px 35px #000000;}

Heading Style 11

.post h4 {color:#0000ff;border-left:10px solid #0000ff;border-right:10px solid #0000ff;padding:3px 5px 3px 20px;border-radius:15px;-moz-border-radius:15px;box-shadow:0px 0px 13px #0000ff;-webkit-box-shadow:0px 0px 13px #0000ff;-moz-box-shadow:0px 0px 13px #0000ff;}.post h3, .post h4:hover {color:#f01a1a;border-left:10px solid #f01a1a;border-right:10px solid #f01a1a;box-shadow:0px 0px 13px #f01a1a;-webkit-box-shadow:0px 0px 13px #f01a1a;-moz-box-shadow:0px 0px 13px #f01a1a;}

Anda Dapat Mengganti Heading Tags Yang Di Catak Tebal Dengan Heading Tags Yang Sering Anda Pakai
4. Klik Simpan