Langsung ke konten utama

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/AVvXsEhOLHk_VHMUTkBgVr061L4muaZIbuTMUJnIk3CCtKEzuy2VPJ5AdZKf8dfIgIScc0t43wiV2eTyBMmwMKEEJyJWETWl0Qhi40GYoBNK_mE8zF_HJyGhO4-rf5Cbgz3ciYvnxfIVhVVrSdw/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/AVvXsEjOj78329v8qSGx-KZFBDXQaGaaM98bgpEC5AD4F9Xklpjkj47X3WiOrQ_4NyhYnHZKeq3sGmZT9zX36bbfz4JDgCZkIEpGauyvDtdUIqHDjkcKXd6SJQAr4Iht_7AHiyWXg3nSRPbzrp8/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/AVvXsEhOLHk_VHMUTkBgVr061L4muaZIbuTMUJnIk3CCtKEzuy2VPJ5AdZKf8dfIgIScc0t43wiV2eTyBMmwMKEEJyJWETWl0Qhi40GYoBNK_mE8zF_HJyGhO4-rf5Cbgz3ciYvnxfIVhVVrSdw/s320/name.png) no-repeat 7px 0px;
    }
    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOj78329v8qSGx-KZFBDXQaGaaM98bgpEC5AD4F9Xklpjkj47X3WiOrQ_4NyhYnHZKeq3sGmZT9zX36bbfz4JDgCZkIEpGauyvDtdUIqHDjkcKXd6SJQAr4Iht_7AHiyWXg3nSRPbzrp8/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/AVvXsEhOLHk_VHMUTkBgVr061L4muaZIbuTMUJnIk3CCtKEzuy2VPJ5AdZKf8dfIgIScc0t43wiV2eTyBMmwMKEEJyJWETWl0Qhi40GYoBNK_mE8zF_HJyGhO4-rf5Cbgz3ciYvnxfIVhVVrSdw/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/AVvXsEjOj78329v8qSGx-KZFBDXQaGaaM98bgpEC5AD4F9Xklpjkj47X3WiOrQ_4NyhYnHZKeq3sGmZT9zX36bbfz4JDgCZkIEpGauyvDtdUIqHDjkcKXd6SJQAr4Iht_7AHiyWXg3nSRPbzrp8/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
    Label:

    Komentar

    Posting Komentar

    Postingan populer dari blog ini

    modifikasi template bawaan blogger

       Jika sobat sobat mengunakan template bawaan dari blogger,memang terkesan biasa saja,tetapi di sini ada keunggulan yang bisa kita dapatkan,seperti dapat mengubah background dengan gambar dengan cara upload file gambar di komputer ,warna heading,atau mengubah tampilan warna pada heading menyesuaikan lebar,mengubah font,diskripsi blog langsung di bagian penyesuaian,bagi yang ingin mengunakan template bawaan blogger tapi ingin modifikasi tampilan ikuti langkah-langkah di bawah   Pertama klik template, lalu klik sesuaikan ,maka akan terlihat menu opsi untuk mengubah mulai dari latar belakang/background, berfungsi untuk mengubah tampilan latar belakang dengan file gambar yang ada di komputer kita,terus untuk opsi sesuaikan lebar, bisa tinggal geser dengan mouse sobat untuk menentukan lebar border sesuai yang sobat kehendaki terus untuk bilah kiri dan kanan, berfungsi untuk ukuran lebar postingan dan opsi author,atau label,arsip  Untuk fungsi tata letak, mempunyai fungsi...
    Posting Komentar
    Baca selengkapnya

    cara mudah membuat radio atau video streaming facebook dan youtube

     Halo sobat design,kali ini admin akan berbagi pengalaman cara membuat radio streaming yang jarang orang lakukan di facebook dan juga youtube,sebenarnya cara ini sangat mudah ,hanya bermodal komputer atau teng top,,eh laptop saja sudah bisa melakukan siaran radio ,tapi sebelumnya admin akan  berbagi ,bagaimana sih carannya,,yuk ikuti langkah berikut ini  Untuk langkah awal,sobat harus mempunyai komputer,dan jika ingin bercuap-cuap melalui mikrofon bisa gunakan peralatan lain,seperti mixer (alat untuk  penguat microfonbuka mixer untuk ibu-ibu dapur guest),jika tak ada juga tidak apa-apa.bisa menggunakan microfon dari laptop mu.  Langkah kedua,yakni instal OBS STUDIO.setelah instal ,buka OBSnya,aplikasi ini gratis kok,tanpa di pungut biaya,admin yakin ,,indonesia itu ngefans yang namanya gratis,apa lagi tanpa SAN jadinya gratisan,,wkekekekkkk ,bercanda ,terus untuk aplikasinya bagaimana ,yaa sobat cari di google pencarian .  Setelah aplikasi terbuka ,langsung...
    Posting Komentar
    Baca selengkapnya

    panduan instalasi komputer untuk hasil sempurna

      Halo sobat webdesign kali ini admin akan berbagi step demi step cara melakukan instalasi pada komputer,memang ada saatnya kita melakukan instalasi pada komputer ,jika komputer banyak eror,baik system registry,maupun system sudah parah terkena malware,virus,sering kali instal maupun uninstal suatu program,tidak kita sadari sangat berpengaruh sekali terhadap performa komputer.karena saat kita melakukan uninstal suatu program terkadang system registry kita akan ikut terhapus,maupun suatu file dll,biasanya ikut hilang.  Sekarang admin akan mencoba berbagi langkah dari awal sampai finish,melakukan instalasi komputer. pertama kita nyalakan komputer,saat tampil logo,kita tekan tombol "Delete",maka akan tampil Bios untuk melakukan konfigurasi proses instalasi.cari menu "Boot"setelah itu kita atur bagian "Device boot priority"di situ ada 2 pilihan yang akan kita gunakan untuk melakukan pengambilan data disk awal."1st Boot Device [ ubah menjadi Dvd/Vcd rom]...
    Posting Komentar
    Baca selengkapnya