Cara Membuat Ribbon Yang Keren - Halo sahabat-sahabat blogger bertemu lagi dengan Anak Sembada, Kali ini saya akan memberikan tutorial cara membuat ribbon yang keren. Apa itu Ribbon? kalian bisa melihat gambar di atas, sebenarnya ribbon ini fungsinya tidak penting-penting sekali di blog kegunaannya hanya untuk mempercantik tampilan saja. Bagi yang berminat bisa ikuti caranya di bawah ini.
Cara Membuat Ribbon Yang Keren
Pasti yang pertama adalah membuka Blogger > Edit HTML
dan copykan kode dibawah ini tepat di atas </style>
.non-semantic-protector{position:relative;z-index:1}.ribbon{font-size:16px!important;width:50%;position:relative;background:#e74c3c;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}.ribbon:before,.ribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #e74c3c;z-index:-1}.ribbon:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}.ribbon:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#c0392b transparent transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}CSS di atas sudah saya Minifier agar loading blog tidak berpengaruh.
Dan untuk untuk menampilkan ribbon di atas, sobat bisa copy/tulis kode dibawah ini saat mau memposting (harus pada tab HTML)
<div class="non-semantic-protector">
<h1 class="ribbon">
<strong class="ribbon-content">sembadakost.blogspot.com</strong>
</h1>
</div>Ganti sembadakost.blogspot.com sesuai dengan keinginan sobat
Agar tampilannya lebih cantik lagi,buat di halaman statis yang penuh/full.
sobat bisa baca disini : Membuat Halaman Statis Menjadi Full
Oke, itulah kira-kira tutorial dari saya untuk Cara Membuat Ribbon Yang Keren
0 komentar: