Download Template Plus UI + mode Translate v3

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat text pita di blogger, atupun dalam oengertian lainnya adalah tulisan pita di blogger

Text Pita

Apa itu text pita? text pita merupakan sebuah tampilan text di dalam sebuah border box yang mirip dengan pita! kamu tau kan pita itu apa? pita masa gak tau sih? itu lo kalau kado biasanya sih di bungkus dengan yang namanya pita! hehe satu lagi pita biasanya ya di kampung kampung itu di pake buat denging layang layang? haha gak tau apa itu denging layang layang? ya udah kita kanjutkan pembahasan nya aja biar selesai artikel ini, jika ngak, ngak selesai selesai lah jawabannya oke

Menggunakan CSS

Dalam membuat tampilan text pita di blogger itu menggunakan kode CSS saja tanpa ada penggunaan unsur kode javascript dan Tampilan itu sangat responsif juga cepat pastinya

Text Custom

Informasi selanjutnya yang harus kamu ketahui, text apa aja sih yang bisa di tampilkan di dalam pita tersebut? jawabannya macam macam sesuka kamu aja lah, pengen tulis apa saja di dalam pita tersebut yang penting gak nyusahin admin, selain itu jika kamu kreatif kamu bisa mengubah tampilan text pita di blogger menjadi lebih menarik jika paham dan mengerti soal perkodingan

Contoh Tampilan

Jika kamu pemasaran dengan bagaimana kah contoh tampilan dari text pita di blogger, lihat contoh tampilan nya seperti contoh tampilan di bawah ini

Periksa

Info: Bagaimana sobat dengan contoh tampilan nya keren sekali ya kan, pastilah keren 👏

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat text pita di blogger menggunakan kode CSS dengan tampilan yang responsif

Kode CSS

Langkah pertama seperti biasanya kamu bisa menyain kode CSS di bawah ini kemudian kamu bisa meletakkannya di atas kode ]]></b:skin>

/* Icloudice pure CSS Ribbon */
.rahtxtrbn53{position:relative;z-index:1;padding:1em 2em}
.rahribbontext53{font-size:106%!important;text-transform:uppercase;max-width:106%;position:relative;background:#f80000;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.rahribbontext53:before,.rahribbontext53:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #f80000;z-index:-1}
.rahribbontext53:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.rahribbontext53:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.rahribbontext53 .wordrbn:before,.rahribbontext53 .wordrbn:after{content:"";position:absolute;display:block;border-style:solid;border-color:#f80000 transparent transparent transparent;bottom:-1em}
.rahribbontext53 .wordrbn:before{left:0;border-width:1em 0 0 1em}
.rahribbontext53 .wordrbn:after{right:0;border-width:1em 1em 0 0}

Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan untuk membuat text pita di blogger adalah dengan menyalin lagi kode HTML di bawah ini kemudian pakai dan gunakan sesuai keperluan kamu aja

<div class="rahtxtrbn53">
<h2 class="rahribbontext53">
<b>Hi saya ganteng gak 🥰</b>
</h2>
</div>

Info: Fungsi dari kode HTML di atas adalah untuk menampilkan text oita di blog kamu

Penjelsan kode

Sedikit penjelasan mengenai kode text pita di blogger tersebut, jika kamu ingin mengubah warna background pita ubah warna kode HTML pada Ode CSS #f80000 menjadi warna yag kamu inginkan, dan untuk mengubah tampilan text kamu bisa mengubahnya oada kode HTML

Hi saya ganteng gak 🥰