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


Cara memperbagus tags h2, h3, dan h4 Dengan CSS
  • 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("http://4.bp.blogspot.com/-tFJEmtdTP9s/UTnAR0IbXxI/AAAAAAAAbXA/WO-NEvmKtXA/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("http://1.bp.blogspot.com/-zs4aWzVV5J4/UTm__Ri99eI/AAAAAAAAbW4/a--rNrWDM9Q/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("http://1.bp.blogspot.com/-wo4kiWscFy4/UTm_U5Uz8FI/AAAAAAAAbWo/vWgBX1TCQO0/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

Pasang iklan anda Di ini

14 komentar

mantab mas infonya semoga membantu

WAh Mantap Ane BAru Tau BAck Ya

Mantep sob..jadi tau cara membuat tag h3
mampir balik ke " manfaat bersama "

lumayan sob buat lebih memperbaiki blog ane, makasih sudah berbagi :D

manatabbb, tutorialnya

salam

mantap triknya gan.

oh jadi begitu caranya, nice info
thanks for sharing

waah ini nih tips yang keren, sy praktekkan dlu gan :) mksh yaa

ohh jadi gitu toh carannya
nice info gan :D

baru tau nih thanks gan :D

ada cara biar pengunjung betah di blog kita ga gan ?

Bagus nih gan buat referensi css saya.
Izin minta gan..

wah mahasih atas mempelajaran nya mas


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>


EmoticonEmoticon