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

    Mengubah kode java script yang di proteksi dengan HEX

     Biasanya sebuah kode javascript yang di proteksi dengan pengkodean HEX,biasanya tujuan para pembuat file java script, sengaja memproteksi,supaya dokumen yang di buat bisa aman dan tidak mudah untuk di hack,atau pun di tiru,tetapi di sini hanya sebagai referensi yang bertujuan sebagai media pembelajaran,admin webdesign akan bagikan cara mengubah file javascript yang di proteksi dengan mengconvert menjadi kode HEX.  Sebuah tools online yang bisa sobat coba gunakan untuk membuka file dari JS yang di konvert,tetapi sebelumnya admin akan sedikit memberi penjelasan seperti apa ya script JS yang di proteksi dengan kode HEX,lihat tampilan script file javascript di bawah ini yang di konvert oleh para pembuat,dan biasanya di gunakan untuk proteksi credit link,seperti file HTML,XML,PHP, ["\x73\x63\x72\x65\x65\x6E\x20\x61\x6E\x64\x20\x28\x6D\x69\x6E\x2D\x77\x69\x64\x74\x68\x3A\x20\x36\x30\x65\x6D\x29","\x6D\x61\x74\x63\x68\x4D\x65\x64\x69\x61","\x6D\x61\x74\x63\x68\x65\x7
    Posting Komentar
    Baca selengkapnya

    cara encode mp3 pada semua pengguna Cakewalk Sonar

     Halo sobat webdesign kali ini admin aka berbagi cara mengconvert file kita yang berada di Cakewalk sonar semua versi.berikut tahapan yang akan admin bagikan,yang pertama download dulu pluginnya yakni LAME setelaah itu extrak ,bisa gunakan winrar atau zip.dan selanjutnya hasil extrak tadi kita simpan dulu. Sekarang kita buka folder Cakewalk sonar kita .yakni C:\\Program file\cakewalk\Shared utility\(lalu buat folder dengan nama (lame). tahap berikutnya ,kita pindahkan semua file lame  hasil extrakan tadi ke dalam folder Cakewalk yang barusan kita buat tadi.  Cara mengkonvert atau menyimpan file dari draft Cakewalk sonar semua versi menjadi mp3,berikut tahapan untuk melakukan perubahan tersebut,langkah pertama yakni buka sonar kita ,dan kita masuk ke bagian tools "utilities" selanjutnya kita cari "external enconder Configuration utiliy"lalu tekan enter.maka akan muncul penampakan seperti pada gambar di bawah ini.
    Posting Komentar
    Baca selengkapnya

    Cara setting Handler Mapping pada IIS

     Masih terkait pengaturan Internet Information Service atau IIS,kali ini admin akan bagikan cara mengkonfigurasi Handler Mapping pada IIS,untuk Handler Mapping sendiri biasanya di gunakan untuk pengaturan pada PHP file,yang mana PHP file biasanya kita set pada C:/ php,jika kita gunakan IIS.berikut langkah untuk mengatur Handler Mapping pada IIS.tapi sebelumnya sobat sudah download file yang di perlukan seperti mysql Community,PHP,PHPmyadmin.dan sudah melakukan setting terhadap ketiga file tersebut.lihat gambar di bawah,untuk konfigurasi IIS Terlihat pada gambar di atas tampilan dari IIS,sebagai langkah awal kita akan konfigurasi pada bagian nomer 1,Handler Mapping,double klik untuk lakukan pengaturan,selanjutnya kita pilih Add Module Mapping. maka akan tampil seperti pada gambar di bawah ini Masing-masing keterangan pada angka sobat isi sebagai berikut isi dengan *.php Sobat cari FastCGIModule C:\php\php-cgi.exe (dimana folder php berada lalu pilih php-cgi ) PHP FastCgiModule Request R
    Posting Komentar
    Baca selengkapnya