Membuat Efek Ribbon Pada Sidebar Blog

Membuat Efek Ribbon Pada Sidebar Blog – alhamdulillah setelah beberapa hari diberi nikmat untuk terbaring di tempat tidur akhirnya sekarang bisa jumpa kembali dan berblogging ria sekaligus menyapa sahabat dari dunia nyata maupun maya.
Oke langsung saja lanjut ke pokok bahasan. Jika pada tutorial sebelumnya sudah pernah membahas mengenai tentang bagaimana untuk membuat background dan border shadow pada sidebar blog maka pada tutorial ini bisa menjadi lanjutan dari tutorial tersebut untuk membuat efek yang berbeda khususnya pada judul widget yang terdapat di sidebar blog. Pada efek ribbon ini nantinya hanya terdapat istilahnya satu lipatan pita pada judul widget yang terdapat di sebelah kiri judul widget sidebar blog. Sengaja saya pasang satu pita karena mungkin jika menggunakan dua pita akan lebih memakan lebar sidebar dan efek tersebut nanti bisa kita bahas pada tutorial selanjutnya tanpa menggunakan pita agar lebih ringkas dan elegant. Untuk menerapkan efek ini kedalam blog, maka berikut adalah tutorial cara Membuat Efek Ribbon Pada Sidebar Blog.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

.main-inner .sidebar .widget h2 {
position: relative;
font-size: 1.5em;
font-weight: bold;
padding: 6px 20px 6px 71px;
margin: 0px 0px 5px -20px;
color: #555;
background-color: #999;
text-shadow: 0px 1px 2px #bbb;
-webkit-box-shadow: 0px 2px 4px #888;
-moz-box-shadow: 0px 2px 4px #888;
box-shadow: 0px 2px 4px #888;
text-align:right;
}
.main-inner .sidebar .widget h2:before,
.main-inner .sidebar .widget h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
}
.main-inner .sidebar .widget h2:before {
width: 20px;
left: -20px;
top: 12px;
border-width: 20px 10px;
border-style: solid;
border-color: #999 #999 #999 transparent;
}
.main-inner .sidebar .widget h2:after {
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
.main-inner .sidebar .widget-content {
margin-top: -55px;
padding-top: 55px;
text-align: justify;
text-decoration: none;
border: 1px solid #999;
background: #f2f2f2;
box-shadow: 1px 1px 6px 1px #999;
}
.main-inner .widget #ArchiveList {
margin: 0px;
}
.main-inner .widget ul,
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
margin: 0px;
padding: 2px;
list-style: none;
}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

Untuk warna background, font, dll silahkan bisa anda sesuaikan sendiri yang cocok dengan warna tema dari blog anda.