Membuat Formulir Informasi Untuk Teks

Membuat Formulir Informasi Untuk Teks - Banyak sahabat yang berpendapat dan mengatakan bahwa mereka yang berkunjung ke sebuah blog, hanya 20% diantaranya yang mau membaca semua informasi yang tertulis dalam blog tersebut, dan selebihnya mereka hanya membaca poin-poin penting saja di blog itu. Apalagi sebuah blog yang meng-informasikan sebuah cerita pribadi, yang ceritanya panjang mencapai 7 sampai 10 paragaraf, sudah pasti teks informasi apa yang tertulis disana tidak semuanya akan mereka (pengunjung) baca.

Seperti cara membuat widget dan menambahkannya pada halaman sidebar dengan tujuan untuk mempercantik tampilan blog agar pengunjung betah berlama-lama di blog tersebut, tetapi hal seperti itu hanya sebagai tahap pendukung saja, karena cara seperti itu tidak cukup untuk memanggil mereka agar mau bertamu di blog Anda, pengunjung butuh informasi untuk di baca sebagai alasan kenapa harus berkunjung, informasi apa yang sudah Anda sajikan.

Jika formulir untuk menulis teks kita hiasi dengan tampilan box dengan berbagai gaya tampilan, maka teks informasi apa yang sudah Anda tuliskan di blog akan membuat pengunjung tertarik untuk membacanya, dengan begitu teks informasi yang menurut Anda penting bisa Anda bungkus dengan 4 Pilihan Formulir Box Keren dengan berbagai efek seperti ini:

Silahkan KLIK salah satu model formulir teks pilihan Anda dibawah ini:

1. CSS Paper Effect
2. Facebook Comment Boxes
3. Box Info Profile
4. Profile Info With Ribbon

DEMO SHOW

Source referensi - Desain Template Tutorial Label

1. CSS Paper Effect (Demo - 1)
Layaknya Anda menulis pada selembar kertas kosong, ukuran lebar kolom teks sudah saya sesuaikan dengan font-size standart. Tampilan simple, namun terlihat cantik untuk membuat tampilan teks informasi Anda menarik untuk dibaca.

.paper {
  border-top:30px solid #252525;
  margin-left:35px;
  text-align:justify;
  box-sizing:border-box;
  background-color: #FFFFAF;
  background-image:linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px),linear-gradient(#A4CE9A .1em, transparent .1em);
  background-size:100% 23px;
  line-height:23px !important;
  padding:0 10px 1px 75px
}

GET IN CODE

2. Facebook Comment Boxes (Demo - 2)
Seperti tampilan kolom komentar Facebook pada umumnya, tertulis nama sipemberi komentar, dan diakhir teks comment ada link LIKE. Namun agar tampilan terlihat sedikit berbeda, pada kolom header saya cantumkan WAKTU stopwatch, cara membuatnya seperti ini:

.facebook .box .time {position:absolute;right:0;top:0;color:#333}
.facebook span {color:#333}
.facebook {
  padding:10px 12px;
  background:#fff;
  box-sizing: order-box;
  border-radius:5px;
  overflow:hidden;
  box-shadow:inset 0px 4px 4px rgba(0, 0, 0, 0.6)
}

.facebook .box {
  position:relative;
  font:bold 16px/15px 'Alegreya SC', serif;
  padding-bottom:3px;
  margin-bottom:3px
}

GET IN CODE

3. Box Info Profile (Demo - 3)
Saya desain dengan tampilan double border-left-right pada teks judul, sedangkan sebagai teks penutup saya membuat nama profile Author pada bottom-page, seperti ini:

.contact-info{
  text-align: center;
  width: 650px;
  margin: 20px auto;
  padding: 20px;
  background: rgba(255,255,255,0.8);
  border-radius: 10px;
  color:#111;
  box-shadow: 0px 0px 9px rgba(0,0,0,0.7), 0px 4px 0px #00FF7F
}

.bottom p::before,.bottom p::after {
  display: inline-block;
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 1px 20px;
  background: #FF0090;
  box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4)
}

GET IN CODE

4. Profile Info With Ribbon (Demo - 4)
Sama seperti tampilan model ke- 3, namun untuk tampilan teks judul saya pisahkan dengan efek ribbon position-right. Efek ini saya ambil dari 3 Colection Ribbon Style Boxes Info pada artikel sebelumnya, lalu saya tambahkan profile info. Kode CSSnya seperti ini:

.boxProfile{
  text-align: justify;
  padding: 1px 15px;
  background: #FFCCFF;
  color:#111;
  border:1px solid #ccc;
  margin:40px auto;
  width:650px;
  border-left:solid 5px #FF0090
}

.ribbon1 p {
  background:#FF0090;
  box-shadow: 0 2px 7px rgba(0,0,0,0.5);
  color:#fff;
  font:bold italic 18px/35px Verdana,sans-serif;
  text-shadow:1px 2px 1px #111;
  padding: 4px 30px;
  right:326px;
  top:137px;
  position: absolute;
  border-radius:3px 0 0 3px
}

.ribbon1 p:after {
  border-width: 7px;
  border-style: solid;
  border-color: #134 transparent transparent #134;
  content: "";
  position: absolute;
  top:100%;
  right:0px;
  width:0px;
  height:0px;
}

GET IN CODE

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Formulir Informasi Untuk Teks
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 >>

http://sahabatblogger77.blogspot.com/2015/03/membuat-formulir-informasi-untuk-teks.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77