© 2019 BungMais. All rights reserved. Design by: BungMais.com

Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

Cara Mempercantik Subjudul Postingan Blog  Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3
Cara Mempercantik Subjudul Postingan Blog - Styling Subheading h3

SUBJUDUL atau subheading yaitu bab dari desain tampilan postingan teks biar lebih user friendly, juga membantu meningkatkan SEO Posting Blog --dengan memasukkan kata kunci.

Mempercantik tampilan subheading h3 ini menyerupai dengan mempercantik judul widget di sidebar blog.

Salah seorang blog ini bertanya wacana cara mempercantik  Subjudul Postingan Blog (Subheading H3).

"Bagaimana cara membuat garis putus-putus pada sub judul "Posting Blog User Friendly" di artikel ini ya?"

Pertanyaannya di posting Cara Menulis Posting Blog yang Baik - User Friendly sudah dijawab sebagai berikut:


Simpan di atas instruksi . Nanti subjudulnya pake subheading

Cara Mempercantik Subjudul Postingan Blog  Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

Ada yang kurang, lengkapnya, kalau tampilan subjudul (subheading) h3 menyerupai blog ini, maka kodenya sebagai berikut:


Cara Mempercantik Subjudul Postingan Blog (Subheading H3)

Sebagai alternatif, CB share postingan dari MBT wacana  how to create some Sub-heading styles for blogger berikut ini.

1. Theme/Tema > Edit HTML
2. Cari instruksi ]]>
3. Di atas instruksi tersebut, copas salah satu instruksi CSS berikut ini.

Subheading H3 Style No.1- Knife Style with Shadow!

Cara Mempercantik Subjudul Postingan Blog  Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

CSS CODE:

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

Style No-2 Black Theme with FontAwesome

Cara Mempercantik Subjudul Postingan Blog  Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

CSS CODE:
.post h3 { padding: 3px; text-shadow: -2px -1px 1px #060606; box-shadow: -3px 2px 3px #000; padding-left: 10px; margin-bottom: 7px; background: #303030; color: #F7F7F7; } .post h3:before { font-family: FontAwesome; position: relative; content: '\f054'; font-size: 17px; padding-right: 10px; }

Style No. 3 White Theme with Font Awesome

Cara Mempercantik Subjudul Postingan Blog  Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

CSS CODE:

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

Style No. 4- Playing With Some Gradient!

Cara Mempercantik Subjudul Postingan Blog  Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

CSS CODE:

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

Tampilan Subjudul h3 Style No.5 

Cara Mempercantik Subjudul Postingan Blog  Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

CDD CODE:

.post h3 { margin: 0px 0px 10px; padding: 10px; background-color: #00ABC5; box-shadow: 0px 3px 0px #4ACCDF; color: #FFF; font-size: 16px; line-height: 16px; font-family: "Bree Serif",serif; font-weight: normal; text-decoration: none; text-transform: uppercase; }

Style No. 6 Shadow & Background Mix

Cara Mempercantik Subjudul Postingan Blog  Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

CSS CODE:

.post h3 { background: transparent url("http://2.bp.blogspot.com/-jNxuEWNpGTk/UV7-6ovsE3I/AAAAAAAABYs/tXcNlEqxCwM/s1600/h2.jpg") repeat-x scroll 0px 0px; color: #FFF; font-size: 20px; font-weight: 200; letter-spacing: 0px; font-family: fantasy; margin-top: 20px; margin-bottom: 20px; box-shadow: 0px 1px 6px 3px #000; padding: 10px 2px 10px 10px; text-shadow: 0px 1px #000; text-transform: uppercase; }

Bonus
Jika tidak ada salah satu tampilan subjudul h3 di atas yang cocok, mampu lihat pula di Blogger Spice. Salah satunya begini:

Cara Mempercantik Subjudul Postingan Blog  Cara Mempercantik Subjudul Postingan Blog - Blogger Post Subheading H3

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

Itu dia Cara Mempercantik Subjudul Postingan Blog (Subheading H3) dengan beberapa alternatif tampilan. Jika hanya akan memperbesar kepunyaa, eh... memperbesar hurufnya saja, maka tinggal cari instruksi h3 dan font-size-nya diubah. 

Good Luck & Happy Blogging!

Posting Komentar

0 Komentar

-------- MASUKAN KODE IKLAN 1 --------
-------- MASUKAN KODE IKLAN 2 --------
-------- MASUKAN KODE IKLAN 3 --------