sobat Bloggers .. kali ini saya mau kasih tau cara bikin Kertas kelipet pinggiranya Pake CSS ..
lansung aja ya gk usah pake penjelasan, soalnya dah Ngantuk sob ..
1. Biasa lah login Blog dulu
2. Rancangan --> Edit HTML
3. Cari Elemen ]]></b:skin>
4. Masukan CSS berikut di atas code Elemen tadi
/*5. Simpan Template
--------------------------
Standar tampilan
--------------------------
*/
.note {
position:relative;
width:30%;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
background:#97C02F;
overflow:hidden;
}
.note:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 16px 16px 0;
border-style:solid;
border-color:#fff #fff #658E15 #658E15;
background:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
display:block; width:0; /* Firefox 3.0 damage limitation */
}
/*
--------------------------
Opsi untuk memberikan efek rounded corner
dengan menambahkan class "rounded"
--------------------------
*/
.note.rounded {
-webkit-border-radius:5px 0 5px 5px;
-moz-border-radius:5px 0 5px 5px;
border-radius:5px 0 5px 5px;
}
.note.rounded:before {
border-width:8px;
border-color:#fff #fff transparent transparent;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius:0 0 0 5px;
border-radius:0 0 0 5px;
}
6. Untuk memanggil CSS di atas di butuhkan Code HTML, Di bawah ini adalah Code HTMLnya
<div class='note'>
Tulisan Loe Disini
</div>
<div class='note rounded'>
Tulisan Loe Disini ..
</div>
DEMO :
Lorem Ipsum bla bla bla ..
Lorem Ipsum Bla bla bla ..
Silahkan di coba sob ..
BalasHapussaya jamin gk nyesel hehehe .. :D
wah kapan" bisa dicoba ni sob :D
BalasHapusKo kk ga di pake
BalasHapusmantabb broo :D
BalasHapusmantab...
BalasHapus@Pendelz : monggo di coba sob :D
BalasHapus@JeQ : wakaka, Kapan2 tak pake lah ..
@Afterlife : ya biar ..
@Indramayu : apa iya sob ? hahahahahayyyyy ..
@w_hack : apa Iya sob ?
wahhh...abang jago script ya...postingannya script... bisa jadi tempat belajar saya nih....tenkyu tutornya bang
BalasHapusgk jago kok Kang ..
BalasHapussaya cuma Share yang saya Bisa aja ..
Waduh langsung Follow saya, Saya akan segera Follbek kang ..
wkwkwkwkw .. :D =))
BalasHapuskang Ubay klo klo Comment PertamaxxX
wkwkwkwwk .. :D =))
Izin ya bang mau aku bantai dulu...hahahyyyy.
BalasHapusNice Share Sob, saya masih belum terlalu paham di bagian CSS akayk beginian, masih harus banyak belajar :D
BalasHapuswah jago baget ni maen css, ane coba praktekin ya sob :D
BalasHapus@Icah : ampun mas jangan di Bantai hahahahayyyy :D
BalasHapus@Bayu : CSS cuma buat Style aja kok sob, Mudah di Pelajari sob ..
@Nando : waduh,kalo di bilang Jago nggk kok sob, Saya cuma Share yang Saya bisa aja .. :D