Membuat Sidebar Blog Dengan Efek Ribbon

Membuat Sidebar Blog Dengan Efek Ribbon – untuk menanggapi request dari dari mas Mubasir Alamsah maka pada tutorial ini saya kembali membahas tentang efek ribbon untuk sidebar blog. Efek ribbon pada tutorial ini berbentuk seperti yang dia cantumkan pada URL gambar yang terdapat di form komentar pada artikel yang berjudul membuat background dan border shadow pada sidebar blog dan membuat efek ribbon pada sidebar blog. Untuk menepati janji karena akan saya jelaskan didalam halaman posting, maka pada tutorial inilah saya uraikan untuk membuat efek ribbon tersebut. Bilamana ada yang suka memodifikasi maupun mendesain template blog mungkin efek ribbon ini juga bisa digunakan untuk melengkapi desain pada sidebar blognya. Untuk penerapan kode masih sama seperti pada tutorial yang sebelumnya. Untuk mengingat kembali agar tidak susah maka sekarang saya sertakan kembali penerapan atau cara memasangnya kedalam blog. Berikut adalah tutorial untuk cara Membuat Sidebar Blog Dengan Efek Ribbon.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini.

.main-inner .sidebar .widget h2 {
width:290px;
position: relative;
color: #fff;
padding: 10px 5px;
margin: 0;
left:-20px;
z-index: 100;
box-shadow: 0px 0px 3px #52e052;
background: #52e052;
font-size: 160%;
text-align: center;
text-shadow: #fff 0 -1px 1px;
font-weight: bold;
}
.main-inner .sidebar .widget h2:before {
content: ' ';
position: absolute;
left: 280px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #00cc00 transparent transparent #00cc00;
}
.main-inner .sidebar .widget h2:after {
content: ' ';
position: absolute;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #00cc00 #00cc00 transparent transparent;
}
.main-inner .sidebar .widget-content {
width:250px;
padding: 60px 5px 5px 5px;
margin-top:-60px;
position: relative;
box-shadow: 0px 0px 3px #999;
background: #000;
color: #fff;
font-size: 90%;
}
.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;
}

Keterangan:
Untuk warna bisa sesuaikan sendiri sesuka mungkin yang pas dengan warna template blog anda sehingga bisa serasi dan tercipta hasil yang maksimal.

3. Klik Template >> Edit HTML lalu paste diatas/sebelum kode ]]></b:skin> selanjutnya klik Simpan Template.

Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, agar lebih mudah maka bisa juga dilakukan dengan cara lain yaitu klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut) selanjutnya klik Terapkan ke Blog.
Maka nantinya kode CSS diatas akan muncul secara otomatis terletak diatas/sebelum kode ]]></b:skin> yang terdapat di Edit HTML template blog.