cara menerapkan dan memperbagus tags h2, h3 dan h4 dalam postingan

Kenyang banget udah bukber alias buka bersama, bareng temen-temen sekelas. Walupun menyitrika dompetku sehingga menjadi tipis, yang penting bisa liat si doi seneng -__- . Wajar anak muda gan :D . Ngomongin soal post kali ini, seperti yang telah saya janjikan kepada seseorang yang telah berkomentar di post Susunan tags H1, H2, H3, H4, H5, H6 yang benar pada blog. Dan sekarang saya akan membahas tentang penerapan tags h2, h3, h4 di dalam postingan (on page). Untuk penerapan tags pada template nanti akan saya buatkan postnya.

Seperti yang sudah saya jelaskan di Susunan tags H1, H2, H3, H4, H5, H6 yang benar pada blog. H2 atau biasa kita kenal dengan judul post adalah heading dari h1 (judul blog). Dan h3 adalah sub heading atau sub judul dari h2 (judul post). H4 berupa minor heading atau pokok pikiran mengenai si h3 ini. Pusing ya untuk dimengerti ? Contohnya seperti ini.

Judul post (H2) : Flora dan fauna
H3 (sub bab) : Jenis-jenis fauna
H4 (sub h3) : Pengertian dan contoh hewan Reptile

Fungsi dari penerapan h3 dan h4 ini adalah untuk pengindeksan kata dalam post. Google itu mengindeks kata atau keyword yang ditandai dengan bold, italic, underline atau h3 dan h4 ini. Itulah kata yang akan muncul atau dicari di SERP (Search Enggine Optimization). Ok langsung saja ke topik pembahasan :

Cara penerapan tags h2 h3 dan h4 dalam postingan

Heading (h2) adalah judul post. Jika anda ingin membuat sebuah judul post lagi dalam postingan disahsahkan saja.
Subheading (h3) adalah sub bab
Minor heading (h4) adalah sub h3
Normal adalah penjelasan dari setiap sub (isi postingan)

Penerapannya simple, anda cukup memilih mode mana yang mau digunakan. Ingat jangan lupa mengganti ke dalam mode normal kembali setelah menggunakan heading / subheading / minor heading.

Cara memperbagus tags h2, h3, dan h4 with CSS code

Gambar diatas merupakan screenshot dari hasil memperbagus tags heading h2, h3, h4. Berurutan dari atas adalah style pertama ke yang terakhir. Semuanya berjumlah 11 style. Ok langsung saja ke tutorialnya :

Masuk ke akun blogger anda.
Masuk ke bagian template dan edit template
Cari kode ]]></b:skin> dengan menggunakan fungsi CTRL+F
Simpan kode style (dibawah) pilihan anda tepat diatas kode ]]></b:skin>
Save jika sudah selesai.

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/AVvXsEi4Txysa7WoSgMopwi-UmMRRGgCbtxlpauI34b7cnF5QloQzadXP2NbzqIZt3ZN_8oRu8dJYlYm4CTMluCnS7rzI_QpS2KbX0gB3RKl99uwxRFHYOWDffIPmflSIg5I8hx5EbTcyud4nVlJ/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/AVvXsEgMcZEYWXV-YnJNhq0O8Oxdzjb0CjYg1v26UnNDpSu__i4Gr_mfka-mSuFl4ldgoK1VT-OWov0eSe7dkJWrQGv2bkVX8YSt9WtBjUSXDLvY4OyPRzZ86x2xq7e7j2r6LgsRTZKbdTo8ZhlM/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/AVvXsEirOjQKHsK4ESE_mni3eQYVS-oHwbBviaf5yJGAD2v7cmflUx_oHzL10AQW8NeCxtv2N7-zJohFbqQ-9RpYH76QedC-4G_rDN9Sr6oAdFJrhQ3rRAer8kxJJ859Ndx1ju4B5DzjTkc5biuu/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 :
ganti .post h4 diatas dengan .post h4 atau .post h3, .post h4 (memasang dikedua tags) atau .post h2, post h3, .post h4 (memasang diketiga tags)

Last Words

Bagaimana? cukup mudahkan tutorial diatas? Saya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk cara menerapkan dan memperbagus tags h2, h3 dan h4 dalam postingan. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. Oh iya jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI dan jika mau copas, cantumin dong Url postingan ini ya !

Sekian post tentang cara menerapkan dan memperbagus tags h2, h3 dan h4 dalam postingan. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!