5.3.15
40
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




Teks Box



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 >>
= TERIMA KASIH =

40 komentar

  1. bahasa apa ya itu mabk devy yang lorem ipsum.....

    BalasHapus
    Balasan
    1. biyar devy yg jawab.. inih

      Hapus
    2. emang kalau mas Al yang jawab kenapa tuh.? bebas kok mas, silahkan saja kalau mas Al mau jawab apa yang ditanyakan Chelin, hehe..!!

      bahasa itu tergantung kita membacanya mbak, jika kita didaerah sunda, boleh kok itu bahasa jadi bahasa sunda, hehe..
      bahasa seperti itu biasanya sering digunakan untuk mengisi teks artikel pada sebuah Template, jadi hanya sebuah teks informasi saja, bukan sebagai kode-kodean kok.

      Hapus
    3. Sejarah Lorem ipsum berakar dari sebuah naskah sastra latin klasik dari era 45 sebelum masehi, hingga bisa dipastikan usianya telah mencapai lebih dari 2000 tahun. Richard McClintock, seorang professor Bahasa Latin dari Hampden-Sidney College di Virginia, mencoba mencari makna salah satu kata latin yang dianggap paling tidak jelas, yakni consectetur, yang diambil dari salah satu bagian Lorem Ipsum. Setelah ia mencari maknanya di literatur klasik, ia mendapatkan sebuah sumber yang tidak bisa diragukan. Lorem Ipsum berasal dari bagian 1.10.32 dan 1.10.33 dari naskah “de Finibus Bonorum et Malorum” (Sisi Ekstrim dari Kebaikan dan Kejahatan) karya Cicero, yang ditulis pada tahun 45 sebelum masehi. Buku ini adalah risalah dari teori etika yang sangat terkenal pada masa Renaissance. Baris pertama dari Lorem Ipsum, “Lorem ipsum dolor sit amet..”, berasal dari sebuah baris di bagian 1.10.32.

      begitu kira-kira mas chelin

      Hapus
    4. jadi ada ide mau nulis lorem ipsum nih heheee...itulah untungnya ya kalau kita ikut aktif dalam komentar blog. makasih dev sudah menginspirasi.

      Hapus
  2. klow efeknya dipake ssemua bagaimana Vy?
    seperti di demo 1,2,3,4

    BalasHapus
    Balasan
    1. TAB CONTENT SISTEM, itu hanya merupakan dukungan untuk menampilkan beberapa model efek yang berbeda dalam 1 tag body, namun halaman saya atur dengan perintah js-jQuery-color (sistem scroll saya ganti dengan slide halaman dengan background yang berbeda).

      kinerja efek itu sudah pernah Devy bahas pada tutorial ini mas Al

      Membuat Profil Menu Efek Slot Tab

      Hapus
    2. yayaya,..inih yg pas buat post.. maaksi,
      lagi buat post ttng pilem inih Vy.. kodenya mau ditest dulu..muda2han bisa diterapkan..

      Hapus
    3. Vy..!
      kalau dimensi gambar yg pas yg dipake di demoshow itu berapa?
      soalnya.. gambar tidk tepat berada di tengah..
      yg bagian bawah tidak spasi ..menyentuh bingkai..untuk yg dikepala sdh bagus ..ada spasinya..

      Hapus
    4. tambahkan CSS background position pada gambar seperti ini:

      .div {
      background:url(http://...jpg) no-repeat center center;
      }


      lalu ubah format size gambar s1600 menjadi s265 atau sampai ketemu dimensi gambar yang tepat untuk mengikuti bingkai border.

      Hapus
    5. sempurna..

      tulisan memanjang Vy..
      maksudnya.. tulisan penjelasannya memanjang keluar dari boxnya.. tidak mengikuti area box..

      Hapus
    6. sdh tengah malam nih Vy,..bobo..bobo
      bsk sj jawabnya..

      Hapus
    7. .content-box {
      overflow:hidden;
      position:absolute;
      top:20px;
      left:25px;
      ➞ width:700px;
      height:230px;
      }


      Tab content dengan 3 kolom, jika colom1 dengan width:30%, maka area luar atau selurauh lebar tampilan buat menjadi auto, atau hapus kode yang Devy tandai dengan Panah

      Hapus
    8. div class untuk 8 tab.. susunannya bagaimana Vy..?

      Hapus
    9. udah main panah nih dalam membahas formulir informasi....

      Hapus
  3. Hmmm... Jadi selama ini blog gue nggak ada yang baca yaaa karena blog gue muatannya lebih dari 15 paragraf .. Hmmm

    Coba tak pasang yg facebook mbak, semoga nggak berat....

    BalasHapus
    Balasan
    1. bukannya gak dibaca mas, tepatnya tidak semua tulisan kita pada blog pengunjung baca sampai kelar. jadi ada baiknya bukan hanya mempercantik tampilan blog pada sidebar saja, tetapi memanjakan pengunjung agar tertarik membaca informasi yang menurut kita penting, jika kita bungkus dengan tampilan box formulir seperti contoh diatas.

      Hapus
    2. begini mas...sebenarnya tidak semua pengunjung yang tidak baca artikel anda, tapi mungkin ada beberapa blogwalker yang hanya baca judul atau bagian penting aja lalu langsung komen. kalau boleh saran, usahakan membuat artikel jangan kepanjangan...target aja minimal 300 kata dan paling banyak sekitar 500an kata. dengan begitu pengunjung juga akan merasa tidak di susahkan dengan membaca artikel anda. kita juga harus maklum dengan keadaan ini.

      udah kayak penasehat gak ane komennya dev?

      Hapus
  4. Lagi2 sy gagal pasangnya nya .... :(
    Knp ya ... apa ada yg salah dg blog sy ...

    BalasHapus
    Balasan
    1. bagian atau model formulir yang mana mas yang gagal.

      Hapus
  5. masih bingung mbak kalo soal kode-kode :d

    BalasHapus
    Balasan
    1. gak apa-apa mbak, ntar lama kelamaan pasti tambah pusing, hehe..!!

      secara bertahap mbak, mungkin karena belum terbiasa, kalau berani mencoba pasti akan terbiasa.

      Hapus
    2. kalo untuk mengatasi comment yang gamau nongol gimana mbak.
      maaf kalo oot.

      Hapus
    3. Devy bingung sih mbak mau berkunjung ke blog mbak DEWI, soalnya blognya banyak banget, kalau gak salah ada 5 blog dalam 1 akun, jadi blog yang aktif yang mana satu tuh mbak, maksudnya yang sering mbak update artikelnya.

      kalau masalah comment yang gak mau nongol ada 2 penyebabnya.
      1. comment jendela munculan (pop Up)
      2. mungkin belum ada yang coment.

      Hapus
    4. jadi ketawa saya dev...polos banget ya poin duanya...heeee...piss yaaa

      Hapus
    5. hehe..habisnya gimana attuh mbah, mau berkunjung balik tetapi blog mbak DEWI banyak banget dalam 1 akun, kan bingung mbah mau mengoreksi comment pada blog yang mana satu tuh yang tidak mau muncul, masa mau Devy koreksi blog beliau satu persatu, capek keles..hehe..!!

      buat dan menyusun kode-kode untuk artikel berikutnya saja sudah pusing neh mbah, hehe..!!

      Hapus
  6. lihat demonya 1 , 2 ,3 ,4 pusing mbak semua bagus
    itu isinya kok nggak ada artinya ya mbak...?
    apakah saya yang belum bisa bahasa inggris :)

    BalasHapus
    Balasan
    1. itu cuma bahasa yang sering digunakan dalam tampilan REVIEW Template, kalau mau menampilkan teks yang berbeda, tinggal dihapus teks Lorem ipsum..... lalu ganti dengan teks yang kita inginkan.

      mudah kok. hehe..!!

      Hapus
    2. nah tuh sama kasusnya dengan saya dev...ternyata ada kawan bingung juga...heeee

      Hapus
  7. Info & tuto menarik.. thanks sharing Devi.. :)

    BalasHapus
  8. satu kata deh buat mbak Devy atas Tutorialnya "SEMPURNA" :d

    BalasHapus
  9. sempat bingung juga mau pilih yang mana, masalahnya bagus semua hasilnya. kayaknya saya CTRL + D artikel cara membuat formulir informasi untuk teks dan saya pelajari dulu...nanti kalau udah gak bingung lagi mau pilih yang mana, saya akan terapkan di blog saya dev. pokoknya jempol buat tukang coding devy indriyani...

    BalasHapus
    Balasan
    1. kasih jempolnya kira-kira berapa mbah, hehe..!!

      Devy jadi ikutan bingung neh, mau menerima jempol 1 saja atau 3 ya..? hehe..!!
      tetapi terimakasih loh mbah udah dipuji dengan jempol. salam sukses juga ya uat mbah dinan.

      Hapus
    2. akhirnya saya sudah pastkan untuk setia sama demo nomor tiga dev. makasih ya udah berbagi.

      Hapus
    3. Setiap tikungan ada donk mbah (SETIA) hehe..!!!
      seip dech mbah, terimakasih kembali.

      Hapus
  10. Klo pasang yang sperti ini, tampilan blog jadi tambah hidup ya (o)

    BalasHapus
  11. wah mbak ini sangat membantu tutorialnya,terima kasih :)
    oiya,tutorial agar tampilan artikel halaman utama sprti blog mbak ada gak ?

    BalasHapus
    Balasan
    1. Hilangkan dahulu daftar artikel default Template pada blog mas Andrian, lalu halaman posting yang biasanya dapat kita lihat pada setting tata-letak kita ubah menjadi halaman widget-add gadget.

      Mas bisa pelajari sumbernya disini:

      Mengganti Halaman Utama Dengan Tampilan Widget

      Hapus
    2. terima kasih ya mbak, sangat jelas sekali,aku terapin untuk blog 1 nya :)
      *secangkir (c) dulu mbak hehehe

      Hapus

  • 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