Memberi Efek Pita Pada Text Box - Sebelum melanjutkan artikel ini, saya mengucapkan HAPPY VALENTNE buat semua sahabat pecinta SAHABAT BLOGGER 77 yang turut merayakannya, semoga semakin sayang dan cinta dengan muatan konten yang ada pada blog ini, yang mau ucapin sayang dan cinta sama adminnya boleh melalui SMS/BB. Hehhe..!!
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
Kode CSS 1
.ribbon:before,.ribbon:after {content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #986794;z-index:-1;}
.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
Kode CSS 2

.ribbon {width:60%;font:normal bold 16px Arial,Sans-Serif !important;position:relative;background-color:#ba89b6;color:white;text-align:center;padding:1em 2em;margin:0 auto 3em;
/* 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

<div class="rb-wrap">
<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.
Cukup Copy kode ini, dan letakkan pada mode HTML saat anda menuliskan postingan baru
<style>
.rb-wrap {
  position:relative;
  z-index:1;
}

.ribbon {
  width:60%;
  font:normal bold 16px Arial,Sans-Serif !important;
  position:relative;
  background-color:#ba89b6;
  color:white;
  text-align:center;
  padding:1em 2em;
  margin:0 auto 3em;
  /* 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);
}

.ribbon:before,
.ribbon:after {
  content:"";
  position:absolute;
  display:block;
  bottom:-1em;
  border:1.5em solid #986794;
  z-index:-1;
}

.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;
}</style>

<div class="rb-wrap">
<p class="ribbon">
<strong class="ribbon-content">Tulis text anda disini.....</strong>
</p>
</div>

Maka hasilnya akan seperti ini


HAPPY VALENTINE DAY'S

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Memberi Efek Pita Pada Text Box
Ditulis oleh= Devy Indriyani
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 >>
= TERIMA KASIH =

10 komentar

  1. Pertamax nich kayaknya saya
    semoga..
    hehehe

    nyimak aja mbak

    BalasHapus
    Balasan
    1. yang pertama pertamax.kedua bensin dan yang ketiga solar,hehe
      silahkan menyimak mas,terimakasih sudah berkunjung

      Hapus
  2. jadi semakin menarik tampilannya ya mbak :)

    BalasHapus
    Balasan
    1. bener sekali sob,apalagi jika efek pita diatas kita gunakan untuk dekorasi judul posting, so pasti pengunjung akan betah berlama-lama di blog kita

      Hapus
  3. EFEKNYA KEREN yang punya BLOG pasti LEBIH KEREN ,... Heheheee

    visit : www.surindersurisahni.blogspot.com

    BalasHapus
    Balasan
    1. terimakasih mas,tetapi yang punya blog kan cewek mas,masa dibilang keren sih,kurang pantes aja cewek dibilang keren,hehehe

      yang pasti terimakasi sudah singgah kemari mas,salam blogger

      Hapus
  4. Iya sama-sama ..
    KAMU cantik, DAN saya TERPESONA ... Heheheee

    BalasHapus
  5. postingan jadi lebih berwarna kalau pakai code pita ini
    thanks mbak Devy :))

    BalasHapus
  6. wah keren juga nih pitanya, bener-bener unyu deh ya

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK