Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Sidebar Ribbon Pada Blog

Sidebar Ribbon 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.

Berlangganan artikel via email

18 Response to "Membuat Sidebar Ribbon Pada Blog"

luar biasa masbro ini, ilmunya sangat tinggi dalam dunia perblogan, keren mas, lagi2 saya hanya bisa belajar dari artikelnya, tapi nggakpapa, belajar lah setinggi langit. makasi mas, sudah kasih info yang bermanfaat

Balas
avatar
Anonymous

Wah kreasi lainnya nih makin banyak pilihan yah mas Andes, cuman sudah saya coba yang ini juga tetep nggak bisa, kemaren solusi yang mas bilang itu saya masih belum ngerti, maklum orang awam hehe... Makasih mas :)

Balas

Mau coba aah, tengkyu sudah ngajarin...

Balas

klo gk salah ini template baru ya mas... *smile

Balas

Wah,, kreasinya koq banyak amat ya Sob, btw ada sedikit ilmunya dah sy praktekin tuh di blog saya, artikel terakhir, hehehehe...

Balas

keren gan ..nanti aneh praktekin ..thankss

Balas

saya jadi kepengen make.

Balas

wah kueereeeeennn masssss, pokonya hatur thank you udah berbagi

Balas

mau tanya mas
.main-inner = yang mana
.sidebar = yang mana
.widget h2 = yang mana

Balas

yang seperti gambar pesenannya mas basir udah saya buat, ntar tinggal posting aja mas :)

Balas

Minumnya apa sih mas...
Kok jago banget ya...utak atik kode css jadi widget keren..hehe :)

Balas

minumnya sederhana mas Budi,cuma air di bubuhi gula sama kopi sedikit,jiahhh sadapppp

Balas
avatar
Anonymous

Sama ngerokok ngebul-ngebul tengah malem mas hehe...

Balas

gak pernah abis idenya untuk membuat tampilan blog semakin keren.
terimakasih udah share sob

Balas

Wah keren... makasih..
visit back
http://center60.blogspot.com/

Balas

Kk kalau tutornya pasang ribbon pada postingan gambar gimana ya,,,,,
Seperti ini.....http://imagestash.net/i_2mo_tes.html
Mohon link tutornya dikirim ke L_goo@asia.com
ma kasih.

Balas

iya mas nanti secepatnya saya share

Balas

http://4.bp.blogspot.com/--2BdXfQ6UN0/UlHl2gB_cdI/AAAAAAAAGSw/5igfKTPgi0I/s1600/ribbon-css-gallery-image.png

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Sidebar Ribbon Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode