Cara Membuat Tulisan Ribbon Melayang Di Blog

Cara Membuat Tulisan Ribbon Melayang Di Blog

Bola Hero Gawai

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'.

Cara Membuat Tulisan Ribbon Melayang Di Blog

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:
Sapto Mukti Handoyo

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×