Cara Membuat Pita dengan CSS di Postingan Blog

Cara Membuat Pita dengan CSS di Postingan Blog – Pada kesempatan ini saya akan membagikan cara membuat Pure CSS Ribbon atau pita pada blog. Pita dengan efek lipat ini biasanya dipakai pada postingan blog atau biasa juga ditempatkan di halaman statis.

Pure CSS Ribbon adalah pita dengan efek lipatan yang biasa diterapkan pada postingan blog atau halaman statis yang digunakan untuk memperindah halaman pada blog. Pita ini dikombinasikan dengan tulisan judul yang ada di dalamnya, seperti untuk ucapan selamat datang atau hanya untuk memperindah tampilan judul saja.

Pita pada blog ini pula tidak akan memberatkan proses membuat halaman pada blog karena menggunakan kode css. Oleh karena itu tanpa panjang lebar lagi berikut saya akan membagikan cara membuat pure css ribbon keren ini di blog kalian.

Cara Membuat Pita dengan CSS di Postingan Blog

Buka Blogger
Pilih menu Tema
Pada menu SESUAIKAN, pilih Edit HTML

Letakkan kode css dibawah ini tepat berada diatas kode ]]></b:skin> atau </style>

/* Pure CSS Ribbon by Yuki */
.ribbon-rsp{position:relative;z-index:1;padding:1em 2em}
.rspribbon{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}
.rspribbon:before,.rspribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #d74545;z-index:-1}
.rspribbon:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.rspribbon:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.rspribbon .ribbon-isi:before,.rspribbon .ribbon-isi:after{content:"";position:absolute;display:block;border-style:solid;border-color:#b23232 transparent transparent transparent;bottom:-1em}
.rspribbon .ribbon-isi:before{left:0;border-width:1em 0 0 1em}
.rspribbon .ribbon-isi:after{right:0;border-width:1em 1em 0 0}

Jika sudah pilih Simpan Tema
Untuk menerapkannya kedalam postingan blog anda, Buat Postingan Baru > pilih Tampilan HTML kemudian letakkan kode ini di dalamnya
```
<div class="ribbon-rsp">
<h2 class="rspribbon">
<strong class="ribbon-isi">SELAMAT DATANG</strong>
</h2>
</div>
```