Cara Membuat Pita (CSS Ribbon) di Blogger

Cara Membuat Pita (CSS Ribbon) di Blogger

oleh

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 halaman statis untuk mempercantik isi halaman tersebut.

Jika kalian mempunyai teks yang begitu panjang untuk ditampilkan dan tetap ingin menggunakan pita (ssc 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

  1. Login ke Blogger
  2. Buka menu Tema
  3. Pada menu SESUAIKAN, pilih Edit HTML
  4. Letakkan kode CSS ini sebelum atau berapa diatas kode ]]></b:skin> atau </style>
  5. Untuk Menerapkannya, buat postingan Baru, kemudian letakkan salah  satu kode di bawah  ini pada tampilan HTML
    /* 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}

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.

Tinggalkan komentar