Sabtu, 22 Desember 2018

Membuat Formulir Informasi Untuk Teks

Formulir Informasi - 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 pkv games 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 Informasi Untuk Teks pilihan Anda dibawah ini:

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
}

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
}

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)
}

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;
}

di Desember 22, 2018 Tidak ada komentar :

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )

Sabtu, 22 Desember 2018

Membuat Formulir Informasi Untuk Teks