Judul Sidebar Terbagi Dua Seperti Adobe

Hari ini kita belajar memodifikasi judul widget sidebar blogger. Kita akan membuat judul sidebar mirip dengan navigasi redmore milik Adobe.com. Kita akan menerapkan properti :before dan :after dan ini bekerja tanpa masalah di browser apapun, termasuk IE8. Trik ini akan membagi header atau judul sidebar menjadi dua bagian kiri dan kanan. Bagian kiri akan berisi judul dan bagian kanan berisi link terkait. Menarik, bukan?

Langkah 1. Login ke dashboard Blogger Anda > pilih Template > Edit HTML, kemudian klik dimana saja di area HTML Editor untuk memulai pencarian - tekan CTRL + F dan temukan tag penutup </head>

Langkah 2. Tepat di atas tag </head>, Copy dan Paste CSS berikut 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>

Langkah 3. Simpan Template.

Langkah 4. Sekarang buka Tata letak dan tambahkan Gadget HTML/JavaScript, lalu pilih salah satu gaya di bawah ini.

Latar belakang biru:

<div class="module blue">
<h2>Judul Widget<a href="Link URL">more</a></h2>
</div>

Latar belakang kuning:

<div class="module yellow">
<h2>Judul Widget<a href="Link URL">more</a></h2>
</div>

Latar belakang hijau:

<div class="module green">
<h2>Judul Widget<a href="Link URL">more</a></h2>
</div>

Latar belakang merah:

<div class="module red">
<h2>Judul Widget<a href="Link URL">more</a></h2>
</div>

Selamat mencoba..

Sumber:  Adobe Like Arrow Header