Cara Buat Subheading H3 dengan Style Keren

  • Whatsapp

Cara Buat Subheading H3 dengan Style Keren

Cara Membuat Subheading H3 dengan Style Keren – Subheading atau Subjudul adalah salah satu bagian dari tampilan desain postingan website dan juga merupakan salah satu pendukung perlengkapan SEO yang paling dasar. Subheading memliki 6 urutan dari angka satu hingga angka enam, dimana masing-masing subheading memiliki ukuran yang berbeda.


Subheading H1 sering digunakan untuk judul suatu blog, sedangkan Subheading H2 digunakan untuk judul postingan atau judul didalam postingan dan untuk H3 digunakan untuk Widget-widget pada tampilan website.


Salah satu fungsi atau manfaat dengan memasang subheading pada template blog sobat adalah akan mempermudah Google atau mensin pencari untuk mengindex blog sobat dengan cepat. Ini adalah salah satu fungsi yang dimiliki Subheading apabila digunakan.

Memasang subheading di dalam artikel blog juga sangat bermanfaat untuk pembaca, karena dapat mempermudah para pembaca artikel untuk memahami artikel yang sobat bagikan.

Subheading di blog sama halnya seperti subheading yang di koran, dan majalah yaitu sama-sama untuk mempermudah pembaca mengenali judul yang dibahas. Subheading memiliki ukuran yang jauh lebih besar dibanding tulisan-tulisan normalnya.

Untuk di blogger atau wordpress sendiri sudah menyediakan fitur heading pada saat mau menulisa sebuah artikle, namun itu headingnya default atau biasa lah gitu tidak ada dicampur desain-desain sedikit.



Nah, bagi sobat blogger yang ingin mempercantik headingnya, sobat dapat menggunaakan cara mempercantik heading blogger yang akan saya bagikan ini.

Disini ada lima desain heading h3 yang saya bagikan untuk sobat dari yang simple hingga yang super keren sekali.

Baiklah tidak perlu berlama-lama lagi mari langsung mulai saja, cara membuat heading h3 menjadi keren dengan css.

Cara Mempercantik Tampilan Subheading H3 di Blog


Silahkan ikuti tutorial ini dari awal hingga akhir ya, ikuti langkah-langkahnya secara pelan-pelan supaya tidak ada kesalahan dalampemasangannya. Oia disini sobat dapat mencoba satu persatu css h3 nya, style mana yang meurut sobat bagus untuk digunakan.

1. Login ke Blogger.com
2. Pada menus Dashboard pilih Tema > Edit HTML.
3. Cari Kode ]]></b:skin>
4. Pilih salah satu desain dibawah ini dan simpan kodenya diatas kode ]]></b:skin>


1. Subheading Desain Garis Titik-titik
.post h3, .post-body h3 {
padding: 10px 0;
color: #444;
border-top: 1px dashed #ddd;
border-bottom: 1px dashed #ddd;
font-weight: 700;
margin: 15px 0;
font-size: 18px;
}

2. Subheading H3 Desain Knife Style

.post h3 { border: 1px dashed #C7C7C7; padding: 3px; box-shadow: 2px 2px 5px; padding-left: 10px; margin-bottom: 7px; border-radius: 10px; border-bottom-color: #000; background: rgba(218, 218, 218, 0.04); border-bottom-right-radius: 100px; }

3. Subheading H3 Desain White Theme With Font Awesome

.post h3 { padding: 3px; text-shadow: -1px -1px 0px #000000; box-shadow: -2px 2px 3px #000; padding-left: 10px; margin-bottom: 7px; } .post h3:before { font-family: FontAwesome; position: relative; content: 'f02d'; text-shadow: 0px 0px 0px #000; color: #000; font-size: 17px; padding-right: 10px; }

4. Subheading H3 Playing With Some Gradient!

.post h3{ padding: 3px; padding-left: 10px; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-color: #FEBD17; border-radius: 9px; box-shadow: 2px 2px 2px; border: #000 1px solid; } .post h3:before { font-family: FontAwesome; position: relative; content: 'f061'; font-size: 17px; padding-right: 10px; }

5. Subheading dengan border disamping kiri.

.post h3{
margin-top:10px;
max-width:95%;
padding:6px 2px;
color: #000000;
padding-left:10px;
margin-bottom:10px;
font-size:20px;
font-family:'Oswald',sans-serif;
background-color:#F8FAFD;
text-decoration:none;
border-left:10px solid #05A8FC;
box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h3:hover {
border-left:10px solid #FC2B2C;
}

Itulah kumpulan Style Taq H3 Keren yang dapat sobat gunakan dan terapkan pada template blog atau website sobat. Silahkan pilih salah satu yang menurut sobat suka saja ya.



Jika ingin mengubah warna di subheading H3 diatas, sobat dapat mengubah kode warnanya di kode CSS diatas dengan kode warna kesukaan sobat.

Demikianlarh tutorial di artikel kali ini mengenai Cara Membuat Subheading H3 Style Keren. Semoga artikel ini dapat membantu sobat.

Sekian terima kasih~

Related posts

Leave a Reply

Your email address will not be published.