Cara Membuat Ribbon Yang Keren

5:53:00 AM
loading...


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:&quot;&quot;;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:&quot;&quot;;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

Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Formulir Kontak

Name

Email *

Message *