Menu
 
» » Cara Buat Contact Form Keren Di www.n.nu seperti www.0chaw3b.n.nu

A+ A-

Baca Juga

Assalamu Alaikum WR.WB


Cara Buat Contact Form Keren Di www.n.nu seperti www.0chaw3b.n.nu


Selamat siang kawan .. gimana aktifitas mu siang hari ini ?? .. semoga di lancarkan dalam segala urusan nya ya .. aamiin .. dan alhamdulilah .. di siang hari ini .. masih diberi kesempatan .. kesehatan dan umur .. sehingga masih bisa berada disini .. untuk sedikit berbagi apa yang saya tahu / bisa .. stelah tadi malam buat post Cara Mudah Buat Profil Author Di Web www.n.nu Dengan Efek Hover .. di siank hari ini akan berbagi Cara Buat Contact Form Keren Di www.n.nu seperti www.0chaw3b.n.nu .. hasil nya sih memanglah tidak sekeren judul nya .. cuma bingung aja mau ngisi kekosongan blog ini .. dengan artikel apa .. dan sempet bingung juga mau kasih judul gimana .. daripada bingun - bingung .. ya sudah gimana jadinya aja hehe ..

Ok next .. car buat contact form di www.n.nu ini .. memanglah sangat terbilang mudah .. tanpa harus banyak emebel - embel script dsb .. namun akan tetapi rasanya kurang terlihat bagus aja .. karena tampilan default .. bawaan dari template yang kita pilih .. karena memang kebetulan .. setiap template yang di sediakan di sana .. dalam CSS nya .. sudah terdapat kode contact form nya .. namaun secara garis besar model default .. dan untuk sedikit terilhat agak beda dan menarik dikit .. ya mau gak mau .. kita sendiri yang harus ngutak ngatik nya .. dalaman template nya tersebut .. dan buat yang gak mau ribet .. silahkan lanjutkan membaca .. dan copas kode / script css nya ..

Tutorial Blogging >> Baca Juga :



  • Pertama silahkan sign in ( masuk ) dulu .. jika belum masuk Klik Disini .. jika yang belum sign up ( daftar ) .. silahkan daftar dulu Klik Disini .. Jika belum tau cara nya .. postingan lalu .. mungkin bisa sedikit membantu .. yaitu Cara Cepat Dan Mudah Buat Website Plus Domain Gratis
  • Jika step awal sudah .. berikut nya .. silahkan masuk control panel / dashbor .. lalu klik Settings >> Change CSS .. untuk lebih jelas nya .. silahkan lihat pada postingan saya semalam .. atau klik >> Cara Mudah Buat Profil Author Di Web www.n.nu Dengan Efek Hover .. karena sama saja disini kita akan bermain dengan edit CSS .. jadi tampilan gambar sama .. seperti pada postingan semalam ..
  • Seperti yang sudah saya katakan di post sebelum nya .. yaitu jangan khawatir CSS / Template rusak / error / syntax error dsb .. meski tidak seperti di Blogspot.com .. yaitu template bisa di unduh dulu .. sebelum di edit .. jadi bisa di kembalikan ke template awal lagi .. dengan cara mengupload nya dengan file xml .. di n.nu ini tidak perlu repot - repot download dulu .. karena di bawahnya ada preview .. memudahkan kita untuk mengetahui bagian kode mana nya yang tidak berfungsi ..
  • next.. jika sudah yakin tidak khawatir rusak dengan template nya .. lanjutkan baca .. dan copy css nya dibawah ini .. jika salah pasang .. klik dan beri tanda centang / ceklis saja .. pada bagian reset template default .. dan di bawah ini kode css nya ..


fieldset
#contact-form {
background: url(https://1.bp.blogspot.com/-fqjNoA3NQhE/V0pyfdXotuI/AAAAAAAAAXE/DEqf_wBzUrQ1CJrKGBkZ3wQUkGUsOmDcwCLcB/s1600/Ocha.jpg);
color: #fff;
text-align:center;
border: 5px dashed #ffd700;
border-radius: 10px 10px 10px 10px;
box-shadow: 3px 3px 6px 0 #ffffff inset;
font-family: sans-serif;
font-size: 14px;
padding:10px;
width: 200px;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
background-color: #ffd700;
border: 1px solid #000;
border-radius: 10px 10px 10px 10px;
box-shadow: 5px 5px 5px 0 #ffd700 inset;
padding: 5px 6px 5px 5px;
width: 190px;
}

#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
background-color: #ffd700;
}

#contact-form input[type="text"]:hover,
#contact-form input[type="email"]:hover,
#contact-form textarea:hover {
background: url(https://1.bp.blogspot.com/-fqjNoA3NQhE/V0pyfdXotuI/AAAAAAAAAXE/DEqf_wBzUrQ1CJrKGBkZ3wQUkGUsOmDcwCLcB/s1600/Ocha.jpg);
}

#contact-form input[type="submit"] {
background: none repeat scroll 0 0 #ffd700;
border: 3px dashed #00bfff;
border-radius: 7px 7px 7px 7px;
margin-top: 10px;
box-shadow: 0 0 2px 0 #ccc;
float: center;
font-size: 14px;
padding: 5px 20px;
}

#contact-form input[type="submit"]:hover {
color: #ff1493;cursor:
pointer;
}

#header-img {
width:940px;
text-align:center;
margin:0 auto;
}

#header-img img {
border:none;
}




  • Jika semua code CSS diatas sudah di pasang .. sekarang tinggal cara penempatan nya .. untuk tahap ini .. tidak perlu menggunakan lagi kode HTML .. cukup kita atur mau ditempatakn di bagian mana .. sidebar .. bawah post .. navigasi .. atau buat halaman baru .. itu terserah gimana mau nya .. disitu saya tempatkan dibagian sidebar .. dan cara pasang nya .. cukup dengan tag ## .. simple banget bukan ?? .. sperti ini cara nya .. cukup dengan mengetik ##CONTACT-FORM## .. maka akan langsung jadi .. mudahkan ? ..
  • lalu bagai mana untuk mengatur warna .. border .. lebar .. background dsb ?? .. jawab nya .. ya dari css yang tadi kita pasang .. jika terlihat kekecilan atau kegedean .. tinggal buka lagi template nya dan edit ulang .. bagian css contact form nya .. jika tidak mau repot harus edit ulang .. sebelum di save perkirakan dulu kira - kira udah pas apa belum nya ..
  • Nah .. untuk dashed #ffd700 .. garis putus - putus yang berwarna ffd700 ( Gold ) .. jika tidak suka ganti saja .. misal dengan solid .. grove .. dotted .. double dsb .. karena saya suka gaya sperti itu .. maka pake nya dashed ..
  • lalu untuk tombol button nya pun .. disitu saya menggunakan nya dashed .. dashed #00bfff .. jika tidak suka ganti saja .. yang berwarna dashed #00bfff ..
  • dan gambaran dari css di atas adalah sperti pada gambar di bawah ini ..


Sebelum.png
Gambar sebelum di klik


Sesudah.png
Gambar sesudah di klik


  • Gimana setelah lihat review nya .. masih ada yang tertarik ingin membuat nya ?? .. jika tidak .. abaikam saja ;) ..
  • dari kedua gambar di atas .. dengan sentuhan efek hover .. sebelum dan sesudah diklik .. sangat simple dan bagus banget bukan .. dengan background bintang .. yang seakan akan dirimu berada diangkasa sana .. hahaha nagwur ..


Tutorial Blogging >> Post Unggulan :




Udah cuma segitu aja .. untuk review silahkan kunjungi web saya .. di www.0chaw3b.n.nu

Penulis
Casa.png Dari, Majalengka, Rajagaluh - Jawa Barat
MyProfil.pngUser.png OCHA
Jangan jadikan sesuatu ke gagalan sebagai ketakutan untuk mengulang nya kembali .. Sehingga anda tak mau mencoba nya lagi .. Tapi jadikan lah ke gagalan sebagai awal ke suksesan untuk menjadi yang lebih baik dari sebelum nya ..." [View More]
twitter-icon.png facebook-icon.png facebook-icon.png google-icon.png Add Friend

4f2396db8f1172a17b478a5a5.png



Itulah Postingan kali ini .. mengenai » Cara Buat Contact Form Keren Di www.n.nu seperti www.0chaw3b.n.nu « .. yang bisa saya bagikan .. Pada kesempatan yang ke 73x nya ini .. Kurang lebih nya mohon di maklum aja .. Jika ada salah - salah kata atau pun penulisan .. Semoga bermanfaat dan sampe ketemu lagi di lain waktu dan lain kesempatan .. Akhir kata saya ucapkan ..



Wassalamu'Alaikum WR.WB

Diposkan oleh
Label:

Share to:

At Friday, October 21, 2016
 
Top
Loading...