Cara Membuat Awesome Ribbon Dari Css

Cara Membuat Awesome Ribbon Dari Css - Ada yang pernah melihat  gambar seperti di atas? ya itu adalah ribbon . Awal mula saya mengenal ribbon/gambar seperti di atas adalah saat saya berjalan jalan di blog mbak arlina dan alhasil saya melihat ribbon yang sangat menarik apabila di pasang di blog saya . Setelah lama Blogwalking dengan teman teman blogger , eh ada yang blognya menyediakan tutorial seperti ini , yasudah saya langsung praktek di blog saya dan berhasil .

Bagi anda yang ingin mengetahui cara membuat awesome ribbon dari css berikut tororialnya  :
1. Masuk ke www.blogger.com
2. Pilih blog
3. Klik Laman > Buat Laman Baru
4. Masukkan kode css di bawah ini di bagian HTML (Ingat bukan compose)

<style type='text/css'>
.css-new-ribbon{position:relative;z-index:1;padding:1em 2em}
.bsrribbon{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#f35b5b;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.bsrribbon:before,.bsrribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #d74545;z-index:-1}
.bsrribbon:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.bsrribbon:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.bsrribbon .ribbon-isi:before,.bsrribbon .ribbon-isi:after{content:"";position:absolute;display:block;border-style:solid;border-color:#b23232 transparent transparent transparent;bottom:-1em}
.bsrribbon .ribbon-isi:before{left:0;border-width:1em 0 0 1em}
.bsrribbon .ribbon-isi:after{right:0;border-width:1em 1em 0 0}
</style>

5. Dan untuk memancing munculnya Ribbon , masukkan kode ini tepat di bawah kode CSS diatas

<div class="css-new-ribbon">
<h1 class="bsrribbon">
<strong class="ribbon-isi">Ki-rik Blog</strong>
</h1>
</div>

6. Ganti Ki-rik Blog Menjadi Terserah anda , dan hasilnya akan seperti ini

Ki-rik Blog

Demo
Click here

Source : http://wajahilmu.blogspot.com/2015/06/make-awesome-ribbon-from-css.html