Cara Membuat Tulisan Ribbon Melayang Di Blog

Selamat Datang semua di blog Kompiajaib.com! Saya akan membagikan sebuah artikel tentang cara membuat tulisan ribbon sederhana melayang di blog. Sebelumnya saya terinspirasi dengan mode Pratinjau di blog yaitu memunculkan sebuah tulisan melayang bertulis 'Pratinjau'.


Akhirnya saya bisa share tentang coding setelah lama tidak share satu pun tentang coding di blog. Sebenarnya saya masih penasaran dengan coding blogger tetapi entah kenapa dan begitu saja saya meninggalkan coding dan saya merasa seperti bosan padahal saya sudah terbiasa memposting coding.

Cara membuatnya dan cara memasukkan kode ke dalam blog kalian masing-masing.

Caranya cukup mudah :
1. Login ke Blogger
2. Klik 'Template' dan klik 'Edit HTML'
3. Cari kode ]]></b:skin>
4. Kemudian letakkan kode berikut tepat di atasnya :

.smpn1brj_melayang {
top: 75px;
left: -225px;
width: 600px;
padding: 10px;
font-size: 24px;
text-align: center;
color: #FFF;
font-family: "trebuchet ms",verdana,arial,sans-serif;
transform: rotate(-45deg);
transform-origin: 50% 0px 0px;
background-color: #000;
border: 1px solid #AAA;
z-index: 9999;
opacity: 0.5;
position: fixed;
}

.smpn1brj_bayang {
top: 75px;
left: -225px;
width: 600px;
padding: 10px;
font-size: 24px;
text-align: center;
color: #FFF;
font-family: "trebuchet ms",verdana,arial,sans-serif;
transform: rotate(-45deg);
transform-origin: 50% 0px 0px;
border: 1px solid transparent;
position: fixed;
}

5. Setelah itu letakkan kode HTML berikut di antara <body> atau </body> :


<div class='smpn1brj_melayang'>Tulisan</div>
<div class='smpn1brj_bayang'>Tulisan</div>

6. Klik Simpan atau Save

Lihat Hasilnyaa...!!

Ganti kata 'Tulisan' dengan tulisan yang kamu mau.

Jika ada kesalahan atau error pada coding saya, silahkan berkomentar agar bisa diselesaikan dan dapat diperbaiki serta digunakan.

Selesai codingnya dan selamat mencoba....
Postingan ini dikirim oleh:

Saya adalah admin blog smpn1brj.blogspot.com. Hanya seorang anak yang masih berumur 13 tahun dan mencoba blogging, coding, dan programming dari umur 10. Membantu orang tua mencari nafkah dengan menggunakan Google Adsense di blog saya.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments