Cara Membuat Pita (CSS Ribbon) di Blogger - sebelumnya aku juga sudah pernah menjelaskan cara menciptakan pita teks di postingan/halaman blogger dengan memakai css, namun di kesempatan ini aku akan menambahkan dengan dampak marque.
Seperti yang pernah aku jelaskan sebelumnya, pita berwarna ini memanjang dan melipat pada kedua sisinya disertai teks yang ada di dalamnya, pita ini biasanya dipakai pada halam statis untuk mempercantik isi halaman tersebut.
Jika kalian memiliki teks yang begitu panjang untuk ditampilkan dan tetap ingin memakai pita (scc ribbon) ini, ini dampak marque sanggup menjadi solusi untuk anda. Dengan dampak ini teks yang anda masukkan sanggup berjalan di dalam pita tersebut berulang-ulang.
Cara menciptakan Pita (CSS Ribbon) di Blogger
1. Login ke Blogger > Buka sajian Tema > selanjutnya pilih Edit HTML
2. Letakkan isyarat CSS ini sebelum/ atau berapa diatas isyarat ]]></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 sajian HTML (Bukan Compose) lalu letaakan isyarat 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>Saya membaginya kedalam 3 versi, versi yang pertama yakni versi standar, yang kedua bergerak kiri kanan dan ke kanan dan yang ke tiga menyerupai mirip breaking news yaitu mengalir dari kanan ke kiri. Demikianlah cara menciptakan pita ccs ribbon ini, biar artikel ini sanggup bermanfaat bagi kita semua, Terimakasih.
Sumber http://www.analisyuki.com/
