For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat text pita (pure CSS) di blogger

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

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 🥰


About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.