Membuat Sidebar Ribbon Pada Blog

Membuat Sidebar Ribbon Pada Blog – ini merupakan versi kedua atau kelanjutan dari tutorial yang sebelumnya mengenai cara membuat efek ribbon pada sidebar blog. Sengaja tidak saya sertakan dalam satu halaman posting dengan tutorial sebelumnya, karena selain untuk menumbuhkan artikel posting dan menambah variasi widget juga tentunya untuk meningkatkan internal linking. Jika pada tutorial tersebut terdapat pita yang ada disisi kiri title widget maka pada sidebar ribbon ini tidak menggunakan pita, namun terdapat sudut lengkung yang berada disisi kanan title widget seperti yang terlihat pada gambar diatas. Untuk yang masih menggunakan template default blogger dan ingin menambahkan efek ribbon pada sidebar blognya bisa menggunakan cara ini untuk melengkapi blognya. Bagaimana langkahnya membuat sidebar ribbon pada blog? Maka berikut adalah tutorial cara penerapan dan Membuat Sidebar Ribbon Pada Blog.

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

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

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, cara lain bisa juga dilakukan dengan cara klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut) selanjutnya klik Terapkan ke Blog. Selesai sudah dan sangat simple tentunya untuk Membuat Sidebar Ribbon Pada Blog, selanjutnya bisa dilihat hasilnya.