Judul Sidebar Terbagi Dua Seperti Adobe

Cara membuat judul widget terbagi dua, sebelah kiri judul dan sebelah kanan readmore, seperti adobe.com

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>

Catatan: ubah teks "Judul Widget" dengan judul widget Anda dan more teks di sebelah kanan, kemudian tambahkan Link URL untuk itu.

Tempatkan widget yang telah di atas widget yang ingin diberi judul terbagi dua ini. Misalnya Anda ingin menrapkannya untuk Artikel Populer maka hapus judul widget ini terlebih dahulu. Kemudian seret judul widget terbagi dua ini ke atas widget Artikel Populer.

Selamat mencoba..

Sumber:  Adobe Like Arrow Header