Home blogging css html Cara buat Kontak Form di blogspot dengan CSS

Cara buat Kontak Form di blogspot dengan CSS

 Pada artikel kemarin admin webdesign pernah menuliskan membuat Kontak Form di blogspot menggunakan javascript dengan mempaste dari web penyedia Kontak Form,pada tutorial ini saya akan bagikan kembali cara membuat Kontak Form sendiri pada blogspot menggunakan HTML,dan CSS atau Cascading Style Sheet,berikut jika sobat,ingin menerapkan sendiri pada blog,berikut ikuti langkah pembuatan di bawah ini
  1. Masuk ke akun Blogger,dan klik pada Blog yang akan kita buat Kontak Formnya,setelah itu cari bagian Tata Letak,dan langkah pertama pada bagian Sidebar,cari Tambahkan Gadget,setelah muncul Popup,kita cari Tambahkan Gadget Lainnya,maka akan ada pilihan Formulir Kontak,klik pada bagian Tambahkan Formulir Kontak,lihat gambar di bawah untuk kejelasannya,(isi semua form yang akan kita gunakan,sesuai keperluan)dan kita lanjut dengan Simpan Setelan pada tampilan Layout
  2. Selanjutnya kita akan sembunyikan tampilan Kontak Form bawaan dari blogger,yang masih sederhana atau defaut.dengan cara kita lihat pada tampilan Layout,pada bagian atas,jika sobat bingung,lihat tampilan gambar berikut
  3. Admin yakin sobat web design sudah jelas,kita lanjut pada tahap berikutnya,cari bagian Tingkat Lanjut,dan kemudian cari pada bagian Tambahkan CSS,setelah itu masukkan kode CSS berikut di bawah ini
    4. .widget.ContactForm {
     display: none;
  4.  Setelah sobat mempaste CSS diatas,selanjutnya kita cari pada bagian Terapkan ke Blog,pada tahap berikutnya kita akan buat untuk halaman Formulir Kontak,dengan cara seperti biasa,yaitu pada Laman,untuk posisinya di bawah Post,cara penulisan gunakan HTML,bukan pada Compose.lihat gambar di bawah,setelah itu copy paste script di bawah ini
    dan paste script di bawah ini,setelah itu simpan.dan terbitkan atau Publish
    <div class='form'>
    <form name='contact-form'>
    <!-- Nama Anda -->
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Nama" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
    <p></p>
    <!-- Email ID Anda-->
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
    <p></p>
    <!-- Isi Pesan Anda -->
    <textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
    <p></p>
    <!-- Clear Button -->
    <input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>
    <!-- Send Button -->
    <input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Kirim'/>
    <p></p>
    <!-- Validation -->
    <div style='text-align: center; max-width: 222px; width: 100%'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>
    <!-- by webdesign kediri -->
    </div>


  5. Sekarang kita lanjutkan untuk membuat tampilanKontak Form yang kita buat,nantinya bisa tampil elegan,langsung saja sobat webdesign masuk pada bagian pengeditan template dengan HTML,sobat copy paste script berikut di bawah ini.di atas kode </head>
    6. <style>
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    max-width: 220px;
    width: 100%;
    font-weight:bold;
    }
     .contact-form-name {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXllwtehn9VYmPJICiTHE4JPM7Fgp-VLyXS7d7eDuP85vd-vWc9A4kRCmqUHN80aIR5A7VK53_snnB_UfS0KTRCYnvCPrrFHNvswz-nfdA46QhGMQRSf5NWxoWVz-5cDLAA_t_epiMSTs/s320/name.png) no-repeat 7px 8px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;
    }
     
    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJBHkd8c044nw7p7yFB-sEqfKgbw1pISXMagggt6uYPymqQStV9F5WOCcCmlp-YJkQmXArrZiwiy_-kp1U3sN1TLJ0GVphtHhoTh_-sT7IrtbtTIdO3xXjR77XcaHW00IK03jzyUs7Yg/s320/email.png) no-repeat 7px 10px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;
    }

    .contact-form-email:hover, .contact-form-name:hover{
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

    padding: 5px 15px 5px 28px;
    }
    .contact-form-email-message:hover {
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
    padding: 10px;
    }
    .contact-form-email-message {
    background: #FFF;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: arial;
    font-size: 12px;
    margin: 0;
    margin-top: 5px;
    padding: 10px;
    vertical-align: top;
    max-width: 350px!important;
    height: 150px;
    border-radius:4px;
    }

    .contact-form-button {
    cursor:pointer;
    height: 32px;
    line-height: 28px;
    font-weight:bold;
    border:none;
    }

    .contact-form-button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .contact-form-button:hover {
    text-decoration: none;
    }
    .contact-form-button:active {
    position: relative;
    top: 1px;
    }


    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top, #faa51a, #f47a20);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    }

    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top, #f88e11, #f06015);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    border-color: #F47C20!important;
    }

    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top, #f47a20, #faa51a);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    }
    </style>

          <!--[if IE 9]>
        <style>

    .contact-form-name {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXllwtehn9VYmPJICiTHE4JPM7Fgp-VLyXS7d7eDuP85vd-vWc9A4kRCmqUHN80aIR5A7VK53_snnB_UfS0KTRCYnvCPrrFHNvswz-nfdA46QhGMQRSf5NWxoWVz-5cDLAA_t_epiMSTs/s320/name.png) no-repeat 7px 0px;
    }
    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJBHkd8c044nw7p7yFB-sEqfKgbw1pISXMagggt6uYPymqQStV9F5WOCcCmlp-YJkQmXArrZiwiy_-kp1U3sN1TLJ0GVphtHhoTh_-sT7IrtbtTIdO3xXjR77XcaHW00IK03jzyUs7Yg/s320/email.png) no-repeat 7px 6px;
    }
        </style>
        <![endif]-->

        <style>
    @media screen and (-webkit-min-device-pixel-ratio:0) {

    .contact-form-name {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXllwtehn9VYmPJICiTHE4JPM7Fgp-VLyXS7d7eDuP85vd-vWc9A4kRCmqUHN80aIR5A7VK53_snnB_UfS0KTRCYnvCPrrFHNvswz-nfdA46QhGMQRSf5NWxoWVz-5cDLAA_t_epiMSTs/s320/name.png) no-repeat 7px 6px;
    padding: 15px 15px 15px 28px;

    }
    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJBHkd8c044nw7p7yFB-sEqfKgbw1pISXMagggt6uYPymqQStV9F5WOCcCmlp-YJkQmXArrZiwiy_-kp1U3sN1TLJ0GVphtHhoTh_-sT7IrtbtTIdO3xXjR77XcaHW00IK03jzyUs7Yg/s320/email.png) no-repeat 7px 8px;
    padding: 15px 15px 15px 28px;
    }

    .contact-form-email:hover, .contact-form-name:hover{
    padding: 15px 15px 15px 28px;
    }

    .contact-form-button {
    height: 28px;
    }
    }
    </style>

     Setelah itu sobat simpan dan bisa lihat hasilnya,tetapi sebelumnnya untuk penggunaan laman tersebut pada blog,bisa di tempatkan pada navbar,atau sidebar,atau pun bisa pada bagian footer,tinggal copy url,setelah itu buat nama pada navbar dengan Kontak,dengan link yang tertuju ke laman yang kita buat

    Trending

    Tips Merawat Sepeda BMX

    Image
    Pembaca Artikel Ini Juga Membaca BMX adalah salah satu merk ternama dan sekaligus berkualitas yang mana branded ini membawa fokus-fokus tertentu seperti sepeda. Dari kendaraan tanpa bahan bakar minyak ini dapat Anda gunakan di setiap hari. Tentunya dengan pilihan ataupun branded tersebut menjadi salah satu pilihan tersendiri dari sekian banyaknya pilihan. Merk yang terkenal karena kualitasnya ini memang patut untuk dipilih seperti pada sepeda yang bersangkutan, entah itu sepeda untuk pria ataupun wanita. Perbedaan ini pada umumnya tercover pada style sekaligus warnanya. Dengan demikian Anda bisa memilih produk tersebut berdasarkan kualitasnya terlebih dahulu kemudian mengacu pada penggunaan untuk pihak pria ataukah wanita.Meskipun sama-sama sepeda yang dapat digunakan oleh pria maupun wanita dengan nyaman, akan tetapi terdapat pilihan yang lebih spesifik. Seperti halnya dengan pilihan yang berdasar adanya desain yang unik, warna yang menarik, styles yang modern hingga corak lain yang s...
    Read more

    DUA ORANG SAHABAT OLEH AA NAVIS

    Image
    image Dani Seperti sudah dijanjikan, dua orang lelaki bertemu di jembatan beton dekat simpang tiga depan kantor pos. Yang satu kekar dan yang lain kurus. Keduanya sama mendekatkan arloji ke mata, seolah hendak tahu apa mereka tiba tepat waktu. Ketika itu malam belum lama tiba. Hujan yang turun sedari sore, tinggal renyai. Malam menjadi kian gelap dan lebih dingin hawanya. Salah seorang mengenakan mantel hujan. Yang lain bermantel plastik transparan. Kerah mantel- nya sama ditinggikan sampai menutup telinga. Kepala si kekar ditutupi oleh baret abu-abu. Si kurus oleh topi mantel. Sedangkan tangannya sama membenam jauh ke dalam saku celana. Mereka berjalan ke arah timur dengan setengah membungkuk, mengelakkan dingin dan tiupan angin malam. Tak seorangpun yang berbicara. Nyala lampu jalan yang bergoyang-goyang ditiup angin itu, redup cahayanya. Dibendung oleh kabut yang biasa turun di kota pegunungan itu. Jalan itu lengang seperti kota ditinggalkan penduduk karena ada ancaman bencana. Han...
    Read more

    Download Okdo Document Converter Full Version

    Image
    Okdo Document Converter (ODC) merupakan software yang sangat berguna untuk merubah file dokumen menjadi file gambar (jpg, jpeg, bmp, tif, png, ico), gambar animasi (gif, swf) dan masih banyak lagi. Dalam situs resminya, ODC mengklaim bahwa program ini mampu mengconvert file dokumen dengan high quality (kualitas tinggi) dan sangat cepat. Aplikasi ini juga mampu meng- convert file Power Point menjadi word, excel dan gambar. Tak hanya itu, dia juga bisa menekstract file PDF ke format lain. Juga mampu menconvert file Power Point menjadi gambar animasi (SWF). Program ini support dengan aplikasi Optical Character Recognition (OCR). OCR adalah aplikasi untuk mengambil tulisan dari gambar (jadi kita tidak perlu capek-capek mengetik ulang tulisan dari gambar). Untuk lebih jelasnya tentang OCR silahkan baca disini . Selain itu, aplikasi ini akan lebih memudahkan Anda karena dia support di operating system XP, Vista, Windows 7 dan Windows 8. Bagi Anda yang sudah tidak sabar untuk m...
    Read more