Cara Membuat Pita di Postingan Blog dengan CSS dan HTML

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024

Hi web developer! kembali lagi bersama dengan guru design, kali ini kita akan membahas bagaimana cara membuat pita atau ribbon dengan CSS. 

Cara Membuat Pita di Postingan Blog dengan CSS dan HTML

Kalian pasti pernah melihat pita pada postingan orang lain sebelumnya, terus kalian ingin membuatnya tapi tidak tahu caranya, jika kasusnya seperti itu berarti kalian tepat membaca postingan ini. disini kita akan pelajari dan mempraktekan bersama cara membuatnya. baiklah seperti biasa untuk para suhu dan master ikut menyimak ya siapa tau ada yang kurang tepat silahkan di luruskan. oke lanjut ketutorialnya .

Cara Membuat Pita dengan CSS Ribbon

1. Masuk Blogger >> Tema >> Edit HTML.

2. Paste kode CSS berikut sebelum kode]]></b:skin> atau </style>

/* Pure CSS Ribbon */
.txtrbn{position:relative;z-index:1;padding:1em 2em}
.ribbontext{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#1e88e5;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.ribbontext:before,.ribbontext:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #0b74d0;z-index:-1}
.ribbontext:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.ribbontext:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.ribbontext .wordrbn:before,.ribbontext .wordrbn:after{content:"";position:absolute;display:block;border-style:solid;border-color:#0f63ad transparent transparent transparent;bottom:-1em}
.ribbontext .wordrbn:before{left:0;border-width:1em 0 0 1em}
.ribbontext .wordrbn:after{right:0;border-width:1em 1em 0 0}

3. Simpan Tema.

4. Untuk menerapkannya kedalam postingan blog anda yaitu caranya buat Postingan Baru (Entri Baru) >> pilih Tab HTML (bukan Compose) kemudian paste kode ini di dalamnya.

Versi 1

<div class="txtrbn">
<h2 class="ribbontext">
<b>SELAMAT DATANG</b>
</h2>
</div>

Versi 2

<div class="txtrbn">
<h2 class="ribbontext">
<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Terima kasih Telah Bekunjung </marquee>
</h2>
</div>

Versi 3 

<div class="txtrbn">
<h2 class="ribbontext">
<marquee class="wordrbn">SELAMAT DATANG DAN TERIMAKASIH ATAS KUNJUNGANNYA, JANGAN SUNGKAN UNTUK DATANG KEMBALI</marquee>
</h2>
</div>

Result
Demikian tutorial Cara Membuat Pita dengan CSS di Postingan Blog. Semoga bermanfaat terimakasih.

 

Rafiqi, S.Kom.