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

Membuat Sidebar Blog Dengan Efek Ribbon

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

Berlangganan artikel via email

31 Response to "Membuat Sidebar Blog Dengan Efek Ribbon"

Warna bisa kita atur suka2 ya mas...sesuai sama template..wah bisa matching..jdnya

kapan2 boleh request juga dong.. :)

Balas

Waw ....keren yah, seperti lipatan kertas. Praktek di blog dummy ah..... sapa tau dapat PR 5.....hahahah

Balas

boleh emang mau request lagu apa mas ... Oopss salah \
serasa lagi siaran hehe

Balas

keren mas broww jadi keliaatan gimana gitu hehe
biar tambah variatif ... sip i like lah pokonya

Balas

wah... mantap sidebarnya, dengan efek ribbon seperti itu akan mempercantik blog. Akan saya coba nanti.
makasih mas bro

Balas

PR 6 lah mbak indah

Balas

Kalau mau request harus bawa pisang goreng mas Bud, biar mas Andes bisa pokus hehe...

Balas

Tambah hari tambah keren aja nih mas tutorialnya, sip deh makasih yah mas andes :)

Balas

nyimak aja kak,,,,
newbie,,,, hehehehe

Balas

Keren Mas Artikel nya maju terus Berkarya..

Balas

boleh lah gan dicoba, mudah2an gk bikin berat blog :D

Balas

uh keren dan menarik
bikin aku jadi mau utak utik
tapi belum sebagus punyamu yg cantik

Balas

kamu juga keren

Balas

makasih mas informasinya, kode CSS bisa jadi pembelajaran saya untuk buat template.

Balas

@kang Ruly : jiwa penyiar nya...jd langsung kepancing keluarkan...hehe

@mas Anthonie: jangan cuma pisang goreng nya doang mas..kalo perlu plus sama wajannya sy bawain..hehe :D

Balas

sy PR mate matika .. :)

Balas

saya keren juga loh..

Balas

sama sama..mas :)

Balas

ngeliat widgetnya keren jadi ga berkutik
kalo di pasang bakalan antik

mas Andes memang punya banyak tak tik..

Balas

Wah makin lengkap aja nih mas andes tutor blognya...sukses terus ya

Balas

Keren banget tutorialnya mas, bikin blog semakin catchy :D

Balas

kereen mas,,bisa di coba lain waktu nanti

Balas

Mantab mas, sidebar blog jadi lebih interaktif kelihatannya. Tinggal nyesuain warna, selesai deh! :)

Balas

mantaap tutornya..mas andes emang ahlinya. Saya dari dulu juga pengin menguasai bahasa pemrograman semacam ini, html aja masih bisa dikit2.

Balas

PR 19 aja mas. Haha...

Btw..os19 artinya apa mas? Penasarang gw..

Balas

CSS merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web/blog sehingga akan lebih terstruktur dan seragam. CSS tidak termasuk bahasa pemrograman mas :)

Balas

wah keren mas...dari dulu pengen banget nyoba efek ribbon seperti ini, nanti tak coba ya. oh ya aku ikut follow blog nya juga ya mas,

Balas

saya mulai tertarik dengan css seperti ini..sekarang mulai suka otak-atik kode seperti diatas. kalo script semua script disini saya cloning kemudian saya modif g papa2 mas? itung-itung buat belajar..hahahaha

Balas

tidak apa2 mas babol sangat saya persilahkan, semoga ini bisa membantu dan bermanfaat :)

Balas

huaaa,,,kerennn... tq mas andes ilmunya.. salam ngeblog :D

Balas

kok gak berubah apa apa??

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 Blog Dengan Efek Ribbon" ini bermanfaat, share ke jejaring sosial.
Konversi Kode