Lompat ke konten Lompat ke sidebar Lompat ke footer

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

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}
  6. Jika sudah, letakkan kode ini di dalam halaman ada pada mode Tampilan HTML

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>

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.

Admin
Admin Hanya seorang blogger yang malas menulis

Posting Komentar untuk "Cara Membuat Pita (CSS Ribbon) di Blogger"