Menggunakan: Sebelum Dan: Setelah Pseudo Elements Di Sidebar Judul

Ini adalah metode lain menggunakan: setelah dan: sebelum sifat dan akan bekerja tanpa terlalu banyak masalah di browser apapun, termasuk IE8. Apa trik ini akan lakukan adalah untuk membagi bar header ke kiri dan kanan bagian, di mana kiri akan berisi judul jelas dan benar, link terkait. 

Ide menghasilkan Adobe seperti Panah Header sebenarnya dibahas oleh css-trik dan disesuaikan dengan Blogger. 

BAGAIMANA TAMBAHKAN HEADER ADOBE SEPERTI KE BLOGGER

. Langkah 1 Login ke Anda dashboard Blogger > pergi ke Template> Edit HTML, kemudian klik di mana saja di dalam area kode untuk mencari - menggunakan tombol CTRL + F - untuk tag berikut: 

 </ Head>

. Langkah 2 Tepat di atas itu, copy dan paste kode ini: 

 <style>
. Modul h2 {
background-color: # D5D5D5;
border-radius: 20px 0 0 20px;
color: # FFFFFF;
font-family: Verdana;
font-size: 14px;
line-height: 32px;
margin: 0;
padding: 0 0 0 20px;
text-shadow: 2px 1px 1px # 222;
}

. Modul h2 a {
border-left: 5px solid # ffffff;
color: # 101921;
float: right;
font-size: 14px;
text-decoration: none;
text-shadow: none;
padding: 10px 0;
position: relative;
-Moz-transition: 0.1s melakukan padding linear;
-Webkit-transition: 0.1s melakukan padding linear;
-Ms-transisi: melakukan padding 0.1s linear;
-O-transition: 0.1s melakukan padding linear;
}
. Modul h2 a: hover {
padding: 32px 0;
}

. Modul h2 a:. Sebelumnya, modul h2: setelah {
isi: "";
height: 0;
position: absolute;
top: 50%;
width: 0;
}
. Modul h2 a: sebelum {
border-bottom: 8px padat transparan;
border-right: 8px solid # ffffff;
border-top: 8px padat transparan;
kiri: 12px-;
margin-top: 8px-;
}
. Modul h2: setelah {
border-bottom: 6px padat transparan;
border-top: 6px padat transparan;
kiri:-6px;
margin-top:-6px;
}

. Module.blue h2 a {background-color: # A2D5EC;}
. Module.blue h2 a: hover {background-color: # C5F0FF;}
. Module.blue h2: setelah {border-right: 6px solid # A2D5EC;}
. Module.blue h2 a: hover: setelah {border-right-color: # C5F0FF;}

. Module.yellow h2 a {background-color: # FCE98D;}
. Module.yellow h2 a: hover {background-color: # FFD700;}
. Module.yellow h2: setelah {border-right: 6px solid # FCE98D;}
. Module.yellow h2 a: hover: setelah {border-right-color: # FFD700;}

. Module.green h2 a {background-color: # bada55;}
. Module.green h2 a: hover {background: # C7E176;}
. Module.green h2: setelah {border-right: 6px solid # bada55;}
. Module.green h2 a: hover: setelah {border-right-color: # C7E176;}

. Module.red h2 a {background-color: # F0A5B5;}
. Module.red h2 a: hover {background-color: # FFC7D2;}
. Module.red h2: setelah {border-right: 6px solid # F0A5B5;}
. Module.red h2 a: hover: setelah {border-right-color: # FFC7D2;}
</ Style>

Langkah 3. Simpan Template. 

Screenshot:

. Langkah 4 Sekarang pergi ke Layout dan Tambah HTML baru / Gadget JavaScript dengan salah satukode di bawah ini untuk masing-masing judul widget: 

Latar belakang warna biru: 

 <div class="module blue">
<h2> Judul di <a href=" Link URL "> Biru </ a> </ h2>
</ Div>

Latar belakang warna kuning: 

 <div class="module yellow">
<h2> Judul di <a href=" Link URL "> Kuning </ a> </ h2>
</ Div>

Latar belakang dalam warna hijau: 

 <div class="module green">
<h2> Judul di <a href=" Link URL "> Hijau </ a> </ h2>
</ Div>

Latar belakang merah: 

 <div class="module red">
<h2> Judul di <a href=" Link URL "> Red </ a> </ h2>
</ Div>

Catatan: Perubahan "Judul dalam" teks dengan judul widget Anda dan Biru, Kuning, Hijau dan Merahdengan teks di sebelah kanan, kemudian tambahkan URL Link untuk itu. 

Langkah 5. Setelah Anda menyimpan gadget HTML / Javascript yang berisi kode di atas, drag dan drop mereka tepat di atas widget Anda ingin menunjukkan ... dan Simpan Pengaturan. 

DEMO 

Anda dapat melihat bagaimana judul sidebar telah digantikan dengan beberapa sundulan bar keren ini demo blog .