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

Membuat Efek Ribbon Pada Sidebar Blog

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

Berlangganan artikel via email

89 Response to "Membuat Efek Ribbon Pada Sidebar Blog"

Baru sembuh dari sakit ya mas Andes . :)

Balas

Keren loh...gb yg di atas itu.. screen shot dari hasilnya ya mas :)

Balas

Keren juga ya mas memakai beginian, sy perhatikan pada blog tetangga memakai bgnian keren dilihat

Balas

Kayaknya abis masuk angin tuh mas Andes, mangkanya baru nongol lagi hehe...

Balas
avatar
Anonymous

Bagus juga nih mas... apalagi warna pitanya sama fontnya bisa diganti juga, keren keliatannya :)

Balas

Yang ada fotonya kang Dede itu ya mas Bud? Iya bener-bener keren mas...

Balas

ini yang ane cari,,,,
kapan nyoba ah

Balas
avatar
Anonymous

mantap nich mas andes, kemaren ane lihat di web dinas cuma pake gambar yang mirip gambar diatas, tidak menggunakan efek seperti yang mas share ini....

Balas
avatar
Anonymous

Mantep nih kalau dikasih ribbon, berpengaruh pada responsive gak gan?

Balas

syukurlah mas Andez sekarang sudah sembuh,dan sehat selamanya, BTW perlu dicoba neh tutornya,biar sidebar tambah cuantik hehe

Balas

waduh ada foto saya,ini harus bayar Royaltynya nih hahaha

Balas

weew keren bang, efek pita ya??


:D Kunjungan Rutin, Saya Tunggu Kunjungan Baliknya.,..

Balas

KEren gan. kayaknya ..tapi saya belum tahu apa itu effek ribon..maklumin aja.heheh

Balas

iya..mas andes baru nongol. Tapi begitu muncul tipsnya langsung menarik..lagi cari ide kali. Haha

Balas

lagi bertapa nyari ide kali mas..hahaha

Balas

slidenya keren di kasi anime juga biar keliatan canti gitu *salah fokus*

eh itu kok modelnya kang dede tea .. keren.

Balas

habis nyari kodok kali dia ahaha piss :D .

Balas

ciyee yg skrg jadi model bog mas andes ehem ehem ahaa.

Balas

Mantap sobat .. biar kesannya keliatan gimana gitu hehe

Balas

yang follow http://demofaceblog.blogspot.com aja cuma kang dede doang *hoho

Balas

apa iya mas, itu saya terapkan di template default blogger kok bisa. tidak worknya dimana, apakah masih utuh/gak ngaruh ato gimana..

Balas

wah, mantep bgt tuh... pengen nyoba tp takut gagal

Balas

semangkaaaa... kamu bisa bisa!
*mirai oca.

Balas

jadi lebih bervariasi tampilannya sidebar dengan diberi efect ribbon seperti itu , makasih sob udah berbagi info :D



admin "Variasi Blogger"

Balas

kelihatan maskulin gitu.

Balas

habis sunat malah katanya mbak..masih bengkak. Haha..haha..

Balas

abis bikin tatto di punggung pake balsem sama uang receh *haha

Balas

kalo mau kamu juga bisa jadi modelnya miz :)

Balas

abis bikin lubang gali sumur mas, makanya nih baru nongol :)

Balas

saya rasa gak ngaruh mas kalo gak ngrubah sidebar wrapernya

Balas

alhamdulillah kang dede, makan juga rasanya udah enak *hehe

Balas

mas Anthonie : yg keren screenshotnya apa fotonya yah hahaha ( ge er )haha

Balas

Artikel Mas Andes Pasti Yang Terbaik..dari segala nya Trima kasih Mas..Semoga cepat sembuh dengan cepat sakit nya... (Amien)

Balas

Mesti gambarnya...kupu kupu lagi salto kan.. Haha :D

Balas

Jelas yg keren mah..yg ksh komen duluan dong..hehe

Balas

Bisa di kepang juga loh...mas :)

Balas

Ngebulnya juga masih ngebutt nih...hehe

Balas

@mas Babol : Sebelum gali sumur kan mas andes tapa seminggu dulu di goa selarong mas...hehe

Balas

Udah sembuh kok mas..

Cuma lagi berharap parcel buahnya..aja nih yg blm kunjung tiba...hehe :)

Balas

jadi sakti nih, pantas postingnya keren semua.

Balas

iya mas budi, semoga mas andes cepat sembuh dan sehat jadi bisa nambah ilmu tutorial khususnya CSS..)

Balas

ini memang sangat keren mas, saya juga sangat tertarik
perlu juga utk dicoba

Balas

sangat keren memang sob kalau ditambah ribbon, terutama utk variasi atau modifikasi tambah mantap
terima kasih sudah berbagi tutorial yg bermanfaat

Balas

kalo di template default memang aktif mas,, tapi saya pakek template lain, coba liat template yang saya pakai di link ini http://you-comp.blogspot.com/

stylenya juga kurang bagus mas

Balas

betul tuh yang komen duluan yang keren... jangan Geer ya kang hehe...

Balas

buat ngiket mas Budi juga bisa kayaknya yah hehe...

Balas

Gara-gara dapet wangsit kali yah suruh pake pita hehe...

Balas

Mas Andes saya tadi udah nyoba tapi kok nggak bisa yah, nggak berubah sama sekali, apa ada yang salah yah?

Balas

Paling yang lagi ngidam mas Bud nih hehe...

Balas

Kalau gagal yah dihapus lagi aja mas hehe...

Balas

Lumayan tuh mbak Tia ada tawaran job jadi model hehe....

Balas

haha emang nih mas kok gak ada parcel datang dari kemaren, udah gak ada yang jual kali ya :)

Balas

biar pake pita yang penting jangan samain aja kayak yang mau mangkal di trotoar perempatan mas :)

Balas

itu dia yang susah di ilangin mas *hoho

Balas

kalo buat template itu mah harus atur ulang lagi mas, pada widget content sama h2 ditambahin elemen width sesuikan lebarnya kira2 dikasih 250px. untuk warna bisa ditata ulang sesuaikan warna template

Balas

ngahaha.. bikin aja widget kribo mas :)

Balas

yang jelas paling keren kang dede, udah gitu cakep pula.
(aku bilang gini tapi gak gratis lho kang)
hahaha

Balas

alhamdulillah ini udah pulih mang, kapok gak pengen lagi.
tiap malem menangis dalam hati, menjerit dalam pikiran *haha

Balas

kalo gak ada yang berubah berarti elemen class untuk sidebar mungkin ada perbedaan mas

Balas

sama2 om pp terimakasih atas partisipasi dan kunjungan rutinnya

Balas

Terus apa ada solusinya mas Andes ?

Balas

Ya gpp kan mas buat nambah-nambah hehe...

Balas

manteb mas andes...ga cuma kado ama garuda pancasila doang yang bisa dikasih ribbon..ternyata follower juga bisa ya mas

Balas

sekarang udah sehat kan? hepi blogging

Balas

pita yg menarik. kalo pasang pita merah mudah di blog sy entar dikira kawin lagi

Balas

saya gak enak ngirim parsel ini, masa isinya balsem, minyak kayu putih ama tolak angin, kalo diganti mana mahal isinya.

Balas

tenang saja mas, solusinya gak serumit masalah KPK dan ahmad fatonah kok :D
coba class sidebar h2 (title widget) sama widget content yang udah ada di ganti kode diatas mas

Balas

bukan cuma follower mas tapi seluruh sidebar :)
garuda pancasila dari dulu kok hadap kiri terus ya mas gak pernah hadap kanan *hikhik..

Balas

katanya sih biar awet muda :D

Balas

ya wes kalau geetoo kita impas saja yah kang Andez,sama-sama di untungkan huahahahahahahaha

Balas

pengen coba tapi takut gak berhasil hehe

Balas

kalo efeknya kayak gambar ini mas http://3.bp.blogspot.com/-HInpz8BuCZw/UNECEYs-RwI/AAAAAAAAA8I/VGdRpA3ufCs/s400/3d-Ribbon-CSS3.jpg

gimana ngaturnya

Balas

scriptnya panjang jg ya gan..., makasih *smile

Balas

Saya hepi salma aja deh.. :)

Balas

Saya juga lagi ngurangin ngerokok kok mas..
Cuma ngurangin rokok temen..hehe :D

Balas

makasih sob triknya. hehehe
kayaknya lebih cantik kalo pitanya ya.

Balas

Supaya mempersingkat Script bisa dibuat (dot) Js. gak gan..?

Balas

ya tidak bisa mas, soalnya ini css bukan javascript

Balas

iya mas nanti, sabar dulu ya :) tutorial selanjutnya

Balas

yang jadi modelnya serasa pernah lihat dimana gitu ....

Balas

Oh kalo css gak bisa di singkat ya gan. tapi bisa dikompres kan sob..

Balas

ya bisa disingkat juga bisa dikompres mas, maksud saya diatas kalo css tidak bisa dijadikan file .js tapi kalo diboundle jadinya ya .css formatnya menjadi:
<link rel="stylesheet" type="text/css" href="file/URL-file.css"/>
tergantung dari penggunaan, boundle css biasanya digunakan untuk file css yang didalamnya terdapat banyak class atau id namun untuk ukuran kecil seperti diatas ya lebih baik langsung dimasukin template gapapa atao kalo mau di kompres dulu juga gapapa

Balas

mantap sangat mas

Balas
avatar
Anonymous

bagus gan ribbon nya :)

Balas

gan cara bikin gambar yg gerak kesamping klo ditekan + (gg tw namannya maklum newbie buat blog)
plis dikasih caranya

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