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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/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(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px;
    }
    .contact-form-email {
    background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px;
    padding: 15px 15px 15px 28px;

    }
    .contact-form-email {
    background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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

    KUMPULAN PUISI TERBAIK NIRWAN DEWANTO

    Image
    image wildflower KATA TERAKHIR Aku mencari nama yang selalu sembunyi di balik lipatan kainmu. Aku mencari debar yang tak lagi bersekutu dengan merah jantungmu. Aku mencari lapar yang tumbuh malu-malu pada bulir-bulir padimu. Aku mencari sisa hujan seraya menyala ragu-ragu di bawah tumpukan abumu. Melalui seribu celah aku hanya memasukimu tapi tak menemukanmu. Cinta adalah kata terakhir yang tergelincir di lidahku tak mampu mengucapkanmu. APEL DAN ROTI Di balik dua butir apel selalu ada sekeping matahari Hijau, sehingga pisaumu tentu akan tersipu malu Menatap merah yang selalu padam itu. Di antara dua potong roti selalu ada selapis jantung Kuning, sehingga lidahmu pasti akan berhenti Sebelum mencapai putih yang menyala itu. Di antara hijau dan kuning selalu ada ekor rubah Abu-abu, yang empunya hanya mampu bertahan Di balik gaunmu, sebelum menerkam sajakku. Di antara perutmu dan piring yang termangu, lapar Bisa juga bernama bianglala, yang segera berakhir Ketika aku menumpahkan sajakku
    Read more

    Baca aja deh

    Image
    Dilansir  Daily Mail , menurut penelitian, saat bertemu wanita, 47% pria langsung mengarahkan matanya pada payudara. Penelitian itu dilakukan oleh University of Wellington, New Zealand. Dalam penelitian itu, para responden pria diminta melihat enam gambar wanita yang sama. Saat itu, para peneliti merekam ke mana mata pria tertuju untuk pertama kalinya, berapa kali mereka melihat dan berapa lama tatapan itu berlangsung. Hasilnya? “80% mata responden langsung tertuju pada payudara dan bagian tengah tubuh. Pria secara konsisten melihat pada payudara ketimbang bagian tubuh lainnya,” ujar seorang peneliti. Lantas apa yang membuat pria begitu tertarik pada payudara? Berikut ini jawaban beberapa pria seperti dilansir  iVillage : Menenangkan Sejumlah pria menganggap payudara bagian tubuh yang menenangkan. Hal itu terkait dengan fungsi bagian tubuh itu, untuk menyusui. Payudara mengingatkan mereka pada fungsi itu dan kehangatan ibu saat sedang memberikan bayi ASI. Simbol Ke
    Read more