Menggunakan 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 dan disesuaikan dengan Blogger anda.

Bagaimana Tambahkan Header Adobe seperti ke Blogger

Step 1. Login ke Anda Blogger dashboard > 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>
.module 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;
}

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
  padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: &quot;&quot;;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

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

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

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

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Step 3. Save the Template.

Screenshot:

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

Background in blue:

<div class="module blue">
<h2>Title in <a href="Link URL">Blue</a></h2>
</div>

Background in yellow:

<div class="module yellow">
<h2>Title in <a href="Link URL">Yellow</a></h2>
</div>

Background in green:

<div class="module green">
<h2>Title in <a href="Link URL">Green</a></h2>
</div>

Background in red:

<div class="module red">
<h2>Title in <a href="Link URL">Red</a></h2>
</div>

Catatan: Perubahan "Judul dalam" teks dengan judul widget Anda dan Biru, Kuning, Hijau dan Merah dengan 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.