Skip to main content

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

1. Buka blog anda > pilih Tema > Edit HTML

2. Letakkan kode CSS di bawah ini tepat berada di atas 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}

3. Jija sudah pilih Simpan Tema

4. Untuk menerapkannya kedalam postingan blog anda, Buat Postingan Baru > pilih Menu HTML (bukan compose) kemudian letakkan kode ini di dalamnya

<div class="ribbon-rsp">
<h2 class="rspribbon">
<strong class="ribbon-isi">SELAMAT DATANG</strong>
</h2>
</div>

Itulah Cara Membuat Pure CSS Ribbon pada Postingan Blogger, jika ada hal yang kurang dimengerti bisa langsung menuju kolom komentar, Terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar