Cara Membuat Subheading H3 dengan Style Keren

Imamkunblog.com | Hallo sobat semuanya kembali lagi dengan saya disini, dan pada artikel ini saya akan membagikan kepada sobat Tutorial Cara Memperindah Tampilan Subheading H3 di Blog.

Sebelum memasuk tutorialnya, lebih baik kita mengenal terlebih dahulu, apa itu subheading atau Subjudul?

Subjudul atau Subheading adalah salah satu bagian dari tampilan desain postingan blog dan juga merupakan perlengkapan SEO yang paing sederhana atau dasar. Subheading memiliki fungsi untuk menyusun jenis heading lainnya seperti H1, H2, H3 dan seterusnya hingga H6.

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

Dengan memasang subheading pada template blog anda maka akan mempermudah Google dan mensin pencari untuk mengindex blog anda dengan cepat. Ini adalah salah satu fungsi yang dimiliki Subheading apabila digunakan.

Memassang subheading di dalam artikel blog juga sangat bermanfaat untuk pembaca, karena dapat mempermudah para pembaca artikel anda dan mudah memahami artikel yang anda bagikan.

Subheading di blog sama halnya seperti subheading yang di koran, dan majalah yaitu sama-sama untuk mempermudah pembaca mengenali judul yang dibahas. Seubheading memiliki ukuran font yang sedikit lebih besar dibandingkan tulisan artikelnya.

Anda juga dapat mengedit atau mempercantik tampilan subheading anda dengan mengeditnya di menu HTML template blog anda. Dulu saya pernah membahas juga Cara Membuat Subheading H1-H6. Dan untuk artikel ini khussu desain untuk H3

Bagi anda yang ingin mempercantik tampilan Subheading anda supaya jauh lebih seo friendly, silahkan simak berikut ini caranya.

Cara Mempercantik Tampilan Subheading H3 di Blog

Sebelum itu, untuk memperbanyak tampilan atau desain subheading dengan style keren disini saya meng-share artikel dari blog luar yang bernama MyTuorialBloggers (MTB).

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

Code CSS:

.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

Code CSS: 

.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

Code CSS:

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

Code CSS: 

.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 yang saya gunakan sendiri.

Code CSS: 

.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 cara membuat dan mempercantik tampilan subheading h3 di blog. Bagaimana menurut sobat keren-keren enggak tuh tampilannya? Nanti saya akan update lagi apabila ada desain yang menarik lainnya.

Baca Juga: Cara Mengubah Subjudul Blog ke H1 Seo Friendly

Baikalh, demikian untuk artikel singkat ini semoga bermanfaat dan pilih salah satu saja yang menurut anda menarik. Jika ingin mengubah warna yang terdapat di CSS tersebut sobat cari saja kode color atau background dan ganti kodenya seperti #F8FAFD dengan warna yang sobat inignkan, jika tidak tahu kode warna silahkan klik disini untuk mendapatkan kode warna.

Share this post