√ Cara Membuat Pita dengan CSS di Postingan Blog - AdityaTekno

Social Items

AdityaTekno.com - Cara Membuat Pita dengan CSS. Dikesempatan kali ini saya akan membagikan tutorial cara membuat pita atau ribbon dengan pure CSS. Pita dengan efek lipat seperti ini biasanya dikombinasikan dengan konten berupa teks judul. Lalu bagaimana cara membuat pita dengan css?

Tapi sebelum itu, saya akan sedikit memberitahu tentang apa itu pure CSS ribbon?

Pure CSS Ribbon adalah sebuah pita dengan efek lipatan yang biasa diterapkan pada postingan blog atau halaman statis yang digunakan untuk memperindah halaman pada blog. Pita ini biasa dikombinasikan dengan tulisan judul yang ada di dalamnya, seperti untuk ucapan selamat datang atau hanya untuk memperindah tampilan judul saja.

Baca Juga: Cara Membuat Tombol Demo dan Download Flat UI

Lalu, apakah menggunakan pita seperti ini akan memberatkan loading blog? Tentu jawabannya tidak, karena hanya menggunakan kode CSS saja. Berikut saya akan membagikan cara membuat pure css ribbon keren ini di blog.
Cara Membuat Pita dengan Pure CSS

Cara Membuat Pita dengan CSS Ribbon


1. Masuk Blogger >> Tema >> Edit HTML.

2. Paste kode CSS berikut sebelum 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. Simpan Tema.

Baca Juga: Mengganti Reaksi ShareThis dengan Animasi Emoji Facebook

4. Untuk menerapkannya kedalam postingan blog anda yaitu caranya buat Postingan Baru (Entri Baru) >> pilih Tab HTML (bukan Compose) kemudian paste kode ini di dalamnya.

Versi 1

<div class="ribbon-rsp">
<h2 class="rspribbon">
<strong class="ribbon-isi">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 DATANG KEMBALI</marquee>
</h2>
</div>


Demikian tutorial Cara Membuat Pita dengan CSS di Postingan Blog. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com

Cara Membuat Pita dengan CSS di Postingan Blog

AdityaTekno.com - Cara Membuat Pita dengan CSS. Dikesempatan kali ini saya akan membagikan tutorial cara membuat pita atau ribbon dengan pure CSS. Pita dengan efek lipat seperti ini biasanya dikombinasikan dengan konten berupa teks judul. Lalu bagaimana cara membuat pita dengan css?

Tapi sebelum itu, saya akan sedikit memberitahu tentang apa itu pure CSS ribbon?

Pure CSS Ribbon adalah sebuah pita dengan efek lipatan yang biasa diterapkan pada postingan blog atau halaman statis yang digunakan untuk memperindah halaman pada blog. Pita ini biasa dikombinasikan dengan tulisan judul yang ada di dalamnya, seperti untuk ucapan selamat datang atau hanya untuk memperindah tampilan judul saja.

Baca Juga: Cara Membuat Tombol Demo dan Download Flat UI

Lalu, apakah menggunakan pita seperti ini akan memberatkan loading blog? Tentu jawabannya tidak, karena hanya menggunakan kode CSS saja. Berikut saya akan membagikan cara membuat pure css ribbon keren ini di blog.
Cara Membuat Pita dengan Pure CSS

Cara Membuat Pita dengan CSS Ribbon


1. Masuk Blogger >> Tema >> Edit HTML.

2. Paste kode CSS berikut sebelum 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. Simpan Tema.

Baca Juga: Mengganti Reaksi ShareThis dengan Animasi Emoji Facebook

4. Untuk menerapkannya kedalam postingan blog anda yaitu caranya buat Postingan Baru (Entri Baru) >> pilih Tab HTML (bukan Compose) kemudian paste kode ini di dalamnya.

Versi 1

<div class="ribbon-rsp">
<h2 class="rspribbon">
<strong class="ribbon-isi">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 DATANG KEMBALI</marquee>
</h2>
</div>


Demikian tutorial Cara Membuat Pita dengan CSS di Postingan Blog. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo