Cara Membuat Awesome Ribbon dengan CSS

Membuat Awesome Ribbon dengan CSS

NewBie-Membuat Awesome Ribbon dengan CSS

Pada kesempatan Kali ini Saya akan Berbagi Tutorial Blogger Yaitu Membuat Awesome Ribbon dengan CSS pada Blog Ribbon Ini Dapat anda letakkan Di berbagai Tempat,Cara Nya Sangat Mudah 

Barikut Ini Cara Membuat Awesome Ribbon dengan CSS:

1. Buka halaman Yang Ingin DIpasang Ribbon.

2. Klik Tap HTML ( Bukan Compose ) Letakkan CSS Dibawah ini Dihalaman Tersebut

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

3. Setelah Selesai Masukkan  Kode Dibawah ini Dibawah CSS ( Di Tap HTML Bukan Compose )

<div class="css-new-ribbon">
<h1 class="bsrribbon">
<strong class="ribbon-isi">Newbie Weblog</strong>
</h1>
</div>

4. Done, Pratinjau Dan Lihat Hasil nya Kalau menurut anda Bagus Silahkan Di Publikasikan

Keterangan:

- Ganti Tulisan Newbie Weblog Sesuai Keinginan anda.

- Anda Bisa Ganti Warna Sesuai Keinginan Anda Tinggal Edit CSS nya 

- Anda Bisa Cari Kode Warna-nya Disini 

RESULT

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

Artikel Terkait

Cara Membuat Awesome Ribbon dengan CSS

4/ 5

Oleh Teknokrat

Teknokrat 10:27 PM 4 Komentar