Cara Membuat Tulisan Ribbon Melayang Di Blog
Home Blogger CSS3 Trik 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'.
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....
http://www.kompiajaib.com/2015/04/cara-membuat-tulisan-ribbon-melayang-di.html
0 Response to "Cara Membuat Text Ribbon dan Melayang di Blog"
Post a Comment