Cara Membuat Pita (CSS Ribbon) di Blogger

Cara Membuat Pita (CSS Ribbon) di Blogger – sebelumnya saya juga sudah pernah menjelaskan cara membuat pita teks di postingan/halaman blogger dengan menggunakan css, namun di kesempatan ini saya akan menambahkan dengan efek marque.

Seperti yang pernah saya jelaskan sebelumnya, pita berwarna ini memanjang dan melipat pada kedua sisinya disertai teks yang ada di dalamnya, pita ini biasanya digunakan pada halam statis untuk mempercantik isi halaman tersebut.

Jika kalian mempunyai teks yang begitu panjang untuk ditampilkan dan tetap ingin menggunakan pita (scc ribbon) ini, ini efek marque bisa menjadi solusi untuk anda. Dengan efek ini teks yang anda masukkan dapat berjalan di dalam pita tersebut berulang-ulang.

Cara Membuat Pita (CSS Ribbon) di Blogger

Letakkan kode CSS ini sebelum/ atau berapa diatas 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}

Untuk menerapkannya di postingan anda, pilih Entri Baru > pilih menu HTML (Bukan Compose) kemudian letaakan kode ini di dalam postingan blog anda

Versi 1

<div class="txtrbn">
<h2 class="ribbontext">
<strong class="wordrbn">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 DAPATNG KEMBALI</marquee>
</h2>
</div>

DEMO

Saya membaginya kedalam 3 versi, versi yang pertama adalah versi standar, yang kedua bergerak kiri kanan dan ke kanan dan yang ke tiga mirip seperti breaking news yaitu mengalir dari kanan ke kiri. Demikianlah cara membuat pita ccs ribbon ini, semoga artikel ini dapat bermanfaat bagi kita semua, Terimakasih.