Thursday, February 4, 2016

Cara Membuat Show Hide Contact Form di Sudut Blog


Prodeku - Contact Form (Kontak Formulir) merupakan widget yang sangat penting dalam sebuah blog. Dengan adanya contact form, pengunjung dapat lebih mudah untuk bertanya, request artikel, menawarkan kerjasama, serta memberikan kritik dan saran pada blog yang kita kelola.

Baca juga: Cara Memasang Rainbow Popular Posts With Image di Blog

Namun beda halnya dengan contact form biasa yang ada di halaman tersendiri. Contact form yang akan saya bagikan ini akan selalu ada di setiap halaman yang nantinya beredampingan dengan tombol back to top milik anda. uniknya, contact form ini dapat di show hide agar tidak memenuhi layar blog anda. Penasaran? Yuk ikuti tutorial mudah dibawah ini.

Tutorial Show Hide Contact Form

  1. Buka akun blogger
  2. Pilih menu Tata Letak
  3. Tambahkan widget contact form (dimana saja) pada Tata Letak


  4. Lanjut, pilih menu Template > Edit HTML
  5. Cari kode ]]></b:skin>, tambahkan kode berikut ini tepat diatas kode ]]></b:skin>

    /* Fixed Contact Form */
    .ContactForm,.ContactForm .title{
    	display:none;
    }
    .floating-ai{
    	position:fixed;
    	width:280px;
    	right:30px;
    	bottom:0;
    	z-index:99;
    }
    .floating-ai-head a{
    	cursor:pointer;
    	padding:8px 10px;
    	background:#5FD0BA;
    	color:#fff;
    	font-weight:400;
    	display:inline-block;
    	transition:all .3s linear;
    }
    .floating-ai-head a:hover{
    	background:#53B6A2;
    	color:#fff;
    	text-decoration:none;
    }
    .floating-ai-body{
    	height:285px;
    	background:#fff;
    	padding:10px;
    	display:none;
    	box-shadow:0 2px 5px 0 rgba(0,0,0,.26);
    }
    .floating-ai-head{
    	text-align:right;
    }
    .floating-ai-body .ContactForm{
    	margin:0;
    	display:block!important;
    }
    #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
    	background:#fff;
    	border:0;
    	padding:10px 0;
    	color:#999;
    	font-weight:normal;
    	width:100%;
    	max-width:initial;
    	border-bottom:1px solid #ccc;
    	transition:.2s ease all;
    }
    #ContactForm1_contact-form-email-message{
    	background:#fff;
    	border:none;
    	color:#8f8f8f;
    	padding:10px 0;
    	width:100%;
    	max-width:initial;
    	border-bottom:1px solid #ccc;
    }
    #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{
    	background:#fff;
    	box-shadow:none;
    	border-bottom-color:#ff3c3c;
    	transition:all .3s linear;
    }
    #ContactForm1_contact-form-submit{
    	position:relative;
    	color:#fff;
    	font-weight:400;
    	font-size:12px;
    	cursor:pointer;
    	background:#57ad68;
    	border:none;
    	float:left;
    	box-shadow:0 0 0 0 rgba(0,0,0,0.19);
    	transition:all .3s linear;
    }
    #ContactForm1_contact-form-submit:hover{
    	background:#468a53;
    }
    #ContactForm1_contact-form-submit:active{
    	box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);
    }
    .contact-form-widget form{
    	display:table;
    	margin:0 auto;
    }
    .contact-form-widget {
    	max-width:initial;
    }
    .floating-ai-body{
    	-moz-box-sizing:initial;
    	-webkit-box-sizing:initial;
    	box-sizing:initial;
    }
  6. Cari kode </body>, letakkan kode berikut ini tepat diatas kode </body>

    <script type='text/javascript'>
    //<![CDATA[
    // Fixed Contact Form
    $("body").append('<div class="floating-ai"><div class="floating-ai-head"><a>Contact us</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())});
    //]]>
    </script>
  7. Simpan Template.
Jika sudah berhasil, silahkan cek contact form anda, apakah sudah berjalan dengan lancar? Untuk mengeceknya, silahkan isi contact form kemudian kirim. Jika berhasil, maka akan ada email masuk pada gmail anda seperti ini.


Mudah kan? Demikian tutorial tentang Cara Membuat Show Hide Contact Form di Sudut Blog milik anda. Selamat mencoba ...

3 komentar

Tinggalkan komentar walaupun hanya sepatah kata
EmoticonEmoticon