Kebetulan masih dalam suasana Valentine Day's, so pasti banyak dekorasi dengan hiasan pita, seperti yang anda lakukan mungkin buat kekasih tercinta, memberi COKLAT dengan balutan pita sebagai penghias agar efek romantisnya dapet, betul guys.!?
Dengan surprise kado yang diterima, semua dengan pita sebagai pemberi keindahan, sempat berpikir bagaimana jika seandainya pita-pita ini dapat juga dirasakan oleh semua sahabat?, tak terkecuali yang JOMBLO sekalipun, Karena dengan niat diatas, idenya saya tuangkan untuk mengambil pita sebagai tema pembahasan untuk Memberi Efek Pita Pada Text Box, sehingga yang ingin memberi kado boleh menyertakan kata-katanya dengan hiasan pita pada text box.
Tanpa mengubah desain awalnya, saya tetap menggunakan kode <text area>, hanya sedikit tambahan CSS yang saya gabungkan dengan XML Code agar efek pita pada text box-nya dapat tampil.
Berikut CSS yang saya gunakan

.ribbon:before {left:-2em;border-right-width:1.5em;border-left-color:transparent;}
.ribbon:after {right:-2em;border-left-width:1.5em;border-right-color:transparent;}
.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {content:"";position:absolute;display:block;border-style:solid;border-color:#804f7c transparent transparent transparent;bottom:-1em;}
.ribbon .ribbon-content:before {left:0;border-width:1em 0 0 1em;}
.ribbon .ribbon-content:after {right:0;border-width:1em 1em 0 0;}
Kode berikut saya tambahkan untuk menentukan model pita efeknya

/* Content javaScript text='http://sahabatblogger77.blogspot.com' google-code-versi-ID='ribbon77' */
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
box-shadow:0 1px 1px rgba(0,0,0,.2);}
Saatnya Penerapannya untuk menampilkan di blog
Perhatikan kode berikut. Kode textarea saya hilangkan dan saya ganti dengan kode berikut, kode ini untuk tempat kita menuliskan text pada box yang sudah diberi efek pita, anda cukup mengganti text yang saya beri warna Merah
<p class="ribbon">
<strong class="ribbon-content">Tuliskan Text Anda</strong>
</p>
</div>
Biasanya penempatan CSS Code kita letakkan pada HTML Template, tetapi kode berikut sudah saya susun sehingga anda tidak perlu membentangkan kode-kode HTML Template anda.
Maka hasilnya akan seperti ini
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Memberi Efek Pita Pada Text Box
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
Pertamax nich kayaknya saya
BalasHapussemoga..
hehehe
nyimak aja mbak
yang pertama pertamax.kedua bensin dan yang ketiga solar,hehe
Hapussilahkan menyimak mas,terimakasih sudah berkunjung
jadi semakin menarik tampilannya ya mbak
BalasHapusbener sekali sob,apalagi jika efek pita diatas kita gunakan untuk dekorasi judul posting, so pasti pengunjung akan betah berlama-lama di blog kita
HapusEFEKNYA KEREN yang punya BLOG pasti LEBIH KEREN ,... Heheheee
BalasHapusvisit : www.surindersurisahni.blogspot.com
terimakasih mas,tetapi yang punya blog kan cewek mas,masa dibilang keren sih,kurang pantes aja cewek dibilang keren,hehehe
Hapusyang pasti terimakasi sudah singgah kemari mas,salam blogger
Iya sama-sama ..
BalasHapusKAMU cantik, DAN saya TERPESONA ... Heheheee
wadduh lain lagi neg ceritanya.
Hapuspostingan jadi lebih berwarna kalau pakai code pita ini
BalasHapusthanks mbak Devy
wah keren juga nih pitanya, bener-bener unyu deh ya
BalasHapusSilahkan KLIK gambar untuk melihat kode
TERIMA KASIH