Buat Pita dengan CSS pada Postingan Blog

PayuBaco
Hai sobat, pada kesempatan yang berbahagia ini (lah kok berbahagia) maksudnya pada kesempatan kali ini saya akan membagikan tutorial Cara Buat Pita dengan CSS pada Postingan Blog dimana tutorial ini saya dapatkan dari salah satu blog milik blogger Indonesia yaitu bang AdityaTekno, yang mungkin penasaran dengan blognya bisa Klik Disini. 

Biasanya Pita yang akan saya berikan tutorialnya ini digunakan untuk mempercantik blog atau juga bisa digunakan untuk teks pada judul, dan yang pasti Pita ini tidak akan memberatkan blog sobat karna hanya menggunakan CSS saja sob. Tanpa panjang lebar yuk simak langkah-langkahnya.

Cara Buat Pita dengan CSS pada Postingan Blog

1. Hal pertama silahkan sobat buka Blog sobat kemudian pilih Tema  lalu pilih Edit HTML.

2. Paste kode yang ada dibawah ini tepat 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. Setelah selesai silahkan Simpan Tema.
4. Nah untuk menerapkan pada postingan sobat, bisa menggunakan ke 3 kode ini, silahkan dipilih sesuai selera.

3 Versi Pita CSS yang Bisa Digunakan

Versi 1

<div class="ribbon-rsp">
<h2 class="rspribbon">
<strong class="ribbon-isi">SELAMAT DATANG</strong>
</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>
Untuk melihat hasilnya sobat bisa lihat dibawah ini.
  Demo
Nah sobat itulah tutorial Buat Pita dengan CSS pada Postingan Blog sobat juga bisa melihat Cara Agar Artikel Blog Tidak Bisa di Copy Paste. Cukup sekian dari saya terima kasih telah membaca tutorial kali ini semoga bisa bermanfaat untuk sobat. Jangan lupa share dan komentar guna mengembangkan blog ini jadi lebih baik lagi kedepannya, sampai jumpa diartikel selanjutnya.