Cara Membuat Heading Tags Menjadi Keren

Assalamualaikum sobat.
Fuuh... akhirnya dapat inspirasi lagi nih untuk posting. Saya akan memberikan Tutorial Blog nih, ehheh seperti apa ya?? Yaitu Cara Membuat Heading Tag Menjadi Keren Yuk langsung saja, saya akan memberikan CSSnya dan cara menggunakannya, Ada Berbagai macam Tags Heading jadi sobat tinggal pilih aja yang sobat suka.

Step:

Login Blogger
Masuk Ke Dashboard
Template ? Edit Html
Cari Kode ]]></b:skin> Untuk mempermudah pencarian, sobat bisa tekan Ctrl+ F

Jika Sudah Ketemu, Sobat bisa pilih macam-macam Heading Tags Dibawah ini!!

.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; }

.post h4 { background-attachment: scroll; background-color: white;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyl_15OuVIcwPhkGT10CSTjoM3SCOIH7vygcehy6onmbLGsDN0h3ZitPJCwqvf4E_ip6UUq0iM6wr498O0VFRd5hnc5g985QCXwgCIR4ZEUPiuiECc-IRI6qjDTkkHMljiZxp3_FTuzT1v/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; }

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

.post h4{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRaHP6SRCNtvt5fBG1LUd9JXnmffcNejE6HclQtL_l26ADCpEIzIPmlgftR2X3ApRQvxFAzPFxl3Z9BAglA7IzL0Ex2f8vaX43bzanCaM7fNHr74jUcn8_-Nv_H6NP0CC3JQoaE_gCTVKP/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;}

.post h4 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSKd8w70rTJOIxOClrajMP8_5b8aC9PpxyKB5E6X6vgaq-IJQwPSpGWoCfS-VlxC_L1K2bnj87YTBqv_jx6ytAjt5V7jTHincBsFuvl9xQzPxmldg5p1smarPzGUsVJa-WgDjpV8hgELKs/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; }

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

.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}

.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;}

.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);}

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

.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;}

Source Script

Keterangan:

Untuk Tulisan Berwarna Merah sobat bisa ganti dengan .post h2, .post h3, .post h5

sesuai selera sobat.

Cara Menerapkan Heading Tag

Sobat bisa lihat gambar dibawah ini

Atau Sobat bisa juga menggunakannya secara manual, caranya adalah berikut ini...

Klik Html didalam posting, Ingat!! Bukan Compose

kemudian, sobat tulis kode seperti ini

<h2> Terserah sobat mau tulis apa </h2>

<h3> Terserah sobat mau tulis apa </h3>

<h4> Terserah sobat mau tulis apa </h4>

<h5> Terserah sobat mau tulis apa </h5>

Ingat!!

Heading Tag tidak akan terlihat disaat sobat menulis Artikel. Heading Tag akan muncul setelah Artikel telah di publikasikan.

Sepertinya sudah jelas Artikel hari ini yang dapat saya sampaikan.Jika kurang jelas, sobat bisa bertanya dikomentar!!

Jika Ingin Copas silahkan sertakan sumbernya!!

Title : Cara Membuat Heading Tags Menjadi Keren
Description : Assalamualaikum sobat. Fuuh... akhirnya dapat inspirasi lagi nih untuk posting. Saya akan memberikan Tutorial Blog nih, ehheh seperti apa...

Postingan Populer

Cara Membuat Heading Tags Menjadi Keren

Step:

Keterangan:

Ingat!!