Analisyuki
  • Blogger
  • WordPress
  • AdSense
  • Tips SEO
  • Komputer
No Result
View All Result
Analisyuki
  • Blogger
  • WordPress
  • AdSense
  • Tips SEO
  • Komputer
No Result
View All Result
Analisyuki
No Result
View All Result
Home CSS

Cara Membuat Pita (CSS Ribbon) di Blogger

27 Maret 2019
in CSS, HTML
Share on FacebookShare on Twitter

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

  1. Login ke Blogger > Buka menu Tema > selanjutnya pilih Edit HTML
  2. 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}
  3. 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.

Leave Comment

You might also like

Cara Setting Robots txt Blogger

Cara Setting Robots.txt di Blogger yang Benar untuk SEO

1 Januari 2021
Template Blogger Terbaik 2021

Template Blogger Terbaik Tahun 2021

1 Januari 2021
Cara Memasang Kode Google Analytics Wordpress

Cara Memasang Kode Google Analytics Terbaru di WordPress

15 Desember 2020
Cara Memasang Kode Google Analytics Terbaru

Cara Memasang Kode Google Analytics Terbaru di Blogger

13 Desember 2020
Cara Update Google Analytics ke Versi Terbaru

Cara Update Tampilan Google Analytics ke Versi Terbaru

13 Desember 2020
Matched Content

Memodifikasi Iklan Matched Content Menjadi Bentuk Grid

2 Desember 2020
  • Disclaimer
  • Sitemap
  • Privacy Policy
  • Contact
Call us: Contact From

© 2020 Analisyuki - All Right Reserved

No Result
View All Result
  • Blogger
  • WordPress
  • AdSense
  • Tips SEO
  • Komputer

© 2020 Analisyuki - All Right Reserved

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In