Cara memperbagus tags h2, h3, dan h4 Dengan CSS

Hallo Sobat Blogger Kali Ini Saya Akan Membagikan  Tutor Cara memperbagus tags h2, h3, dan h4 Dengan CSS Langsung Saja  Kita Simak Tutorya

• Heading H2 Itu Judul post Sobat Blogger. Jika Sobat Blogger ingin membuat Sebuah judul Di Dalam Post Lagi
• Subheading h3 Itu Sub bab H2
• Minor heading h4 Itu Sub H3

Gambar di Bawah  Merupakan screenshot dari hasil Cara memperbagus tags h2, h3, dan h4 Dengan CSS.. Semuanya berjumlah 11 style. Langsung Saja Kita Ke tutorialnya Sobat :

• Masuk ke akun Blogge
• Masuk ke Bagian Template Lalu Edit Template
• Cari Kode Yang Berwarna Merah  ]]></b:skin>  Atau </style> Dengan menggunakan Tombol CTRL+F Agar Lebih Cepat
• Simpan kode style CCS Yang dibawah pilihan Sobat Blogger diatas kode ]]></b:skin> Atau </style>
• Save Template jika sudah selesai.

Langsung saja Liat screenshot Tinggal Pilih Yang Agan Suka

 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/AVvXsEjbhzCTPlCmBH4Uoiv1pYlfVF_b38_my_wNKc0cwmm2B8zpiwWItgU707GkfpoM36ecVFRL7nH9-OnvkXWFh5wtHvYI5dqpHL3QXyE14vNsK762pjAXA6y4mIakukEnELvmAg3tNZcbiGr-/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/AVvXsEiMVgAISN-coXiB_jfvk7HCTeODIRAX35eO4uTmj-Zr948rGfoW0gj-MqQveKUgEkalD4J-J8Yn7hkv6YF0dl2wsZQBBMJ92wy7IBHUXqQd0sOnh64_bGOVcbmU9q3B5-56oe8HoB332rmH/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/AVvXsEhT4cdiBex4xCR_WrWntpmzu9AlLRbrNYQZ8EakUaofVwJ9RqWpwsyg9grMBGgF4f44vo8XdQgmjRuYYS9nPTibGnxrXg0_jUQEMvlVRMj9MFP5amlHBg6eaknQ6Nhjnt7NkVPuDm_CY_GE/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 : a very commonly used style in many blogs

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

Heading Style 7 : CSS3 radius

    .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 : all round edge

    .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 : with weird shadow

    .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 : with invisible shadow

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

Heading Style 11 : with hover effect

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

Keterangan
Jika Soabt Blogger Ingin Mengganti .post h4  Yang diatas  dengan  .post h2, post h3, .post h4 (memasang diketiga tags H2 H3 H4)

1 Tutorial Lagi Cara Mempercantik Bullet List di Blog

Tweet