Cara Membuat Awesome Ribbon Pada Blog

Hi, Blogger? Sudahkah pernah membuat Awesome Ribbon dari CSS? atau ada yang pernah melihat seperti apa yang ada pada gambar diatas? Mungkin kalian sudah tau, 

ya itu Ribbon. Mula sekali saya mengenal Ribbon adalah ketika saya sering berkunjung 
ke Blog Mbak Arlina.

Untuk langkah pertama lakukah hal berikut :
1. Masuk Ke laman Blog kalian | Blogger | 
2. Klik pada Laman Blog
3. Buat Laman Baru
4. masukkan Code CSS dibawah ini pada HTML 

 <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

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

Note : Kode CSS diatas bukan Compose!

#Tag

• CSS Code
• HTML
• Edit Template
• Awesome Ribbon
• Laman
  
  Terima Kasih Telah Berkunjung, baca lagi Artikel lain.

Click he

Share this

Anonymous