.jpg)
Sabtu, 22 Juni 2013
Cara Mendesain sub heading sangat keren di Blog
Seorang blogger pemula (termasuk penulis juga masih pemula) selalumemiliki gagasan/ide yang sempittentang banyaknya pengkodean(coding) yang sederhana. Bahkan ketika saya terjun ke dunia blog dan masih pemula waktu itu, sama sekali saya tidak dapat memahamisedikitpun tentang coding apalagi codingyang rumit dan sulit. Untuk contoh misalnya merancang tag H3 sebagian besar blogger pemula tidak menyadarinya.
Sebelum melanjutkan ke tutorial Anda harus mengubah semua tag H3 menjadi H2. Karena ia akan bekerja untuk sub heading . Dan secara default blogger menetapkan Sub-Heading sebagai tag H3 .
Mendesain sub heading di Blog
Sub-Heading umumnya mendapatkanprioritas di bawah tag judul. Tag heading (judul) kita tetapkan sebagai H2 dan Sub-Heading sebagai H3. Ketika kita menulis artikel tentang apa saja maka kitamenggunakan banyak Sub-Heading dan untuk membuatnya sedikit menarik kita akan menggunakan ikon dan warna dengan coding sederhana ..
Tag Sub-Heading ini sangat berbeda dan memiliki style efek hover. Berharap anda akan menyukainya ..
Tag Sub-Heading ini sangat berbeda dan memiliki style efek hover. Berharap anda akan menyukainya ..
- Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
- Kemudian pilih -> Template-> Edit HTML
- Cari tag/kode ]]></b:skin> tekan CTRL+Funtuk memudahkan proses pencarian
- Berikutnya kopi dan pastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin>
h3{
font-family:Arial !important;
font-style:italic !important;
}
.post h3 {
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: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;
}
font-family:Arial !important;
font-style:italic !important;
}
.post h3 {
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: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;
}
- Simpan template..
