New Hide Show Contact Form Widget For Blogger By Askwithloud
How do I make an new hide show contact form widget for blogger by askwithloud?
It won't take much of your blog space, this widget will appear on bottom right hand corner of your blog. The best part is that, if you want to close this widget then you can close it by clicking on the X icon.. What is a new hide show contact form widget for blogger by askwithloud? How do you make a new hide show contact form widget for blogger by askwithloud? This script and codes were developed by Prince on 15 December 2022, Thursday.
New Hide Show Contact Form Widget For Blogger By Askwithloud Previews
New Hide Show Contact Form Widget For Blogger By Askwithloud - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>New Hide Show Contact Form Widget For Blogger By Askwithloud</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='content'>
<div id='header'>
<h1>WWW.ASKWITHLOUD.COM</h1> <p>New Hide Show Contact Form Widget For Blogger.</p></div><div id='menu'>Menu</div> <div id="content1"> <div id="main"> <div id="box"></div> <div id="box"></div> <div id="box"></div> <div id="box"></div> <div id="box"></div> <div id="box"></div> <div id="box"></div> <div id="box"></div> <div id="box"></div> <div id="box"></div> <div id="box"></div> </div> <div id="side"> <div id="sidecontent2" class="cf"><span>Widget</span></div> <div id="sidecontent2" class="cf"><span>Widget</span></div> <div id="sidecontent2" class="cf"><span>Widget</span></div> <div id="sidecontent2" class="cf"><span>Widget</span></div> </div> </div> <div id="footer" class="cf"></div> <div id="credit"><span>by. Dunia Blanter All Right Reserved</span></div>
</div>
<div class='show' id='chslidingbox'>
<div class='chslidingbox-title chslidingbox-www'>
<span style='float:left;margin:0 15px;'>Contact Us</span>
<span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>×</a></span>
<span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
<span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>−</a></span>
</div><div class='chslidingbox-container'>
<form name='contact-form'>
Nama<br/>
<input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<br/>Email Address*
<br/><input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<br/>Message*<br/>
<textarea cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<br/><input id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<br/><div style='max-width:222px;text-align:center;width:100%;'>
<div id='ContactForm1_contact-form-error-message'>
</div><div id='ContactForm1_contact-form-success-message'>
</div></div></form></div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script> <script src="js/index.js"></script>
</body>
</html>
New Hide Show Contact Form Widget For Blogger By Askwithloud - Script Codes CSS Codes
#main { position: relative; float: left; width: 70%; background: #fff;
}
#box { position: relative; width: 93.5%; height: 150px; display: block; background: #f6f6f6; margin: 0 20px 20px 20px;
}
#box:before { position: absolute; content: ''; display: inline-block; left: 0; top: 0; height: 150px; width: 200px; margin: 0; background: #e6e6e6;
}
#content1 { position: relative; width: 100%; height: 1850px; margin: 0; background: #fff; padding: 20px 0;
}
#credit { height: 60px; margin: 0; background: #222;
}
#credit span { display: table; color: #fff; text-align: center; font-size: 16px; line-height: 60px; margin: auto;
}
.cf:before,
.cf:after { content: " "; display: table;
}
.cf:after { clear: both;
}
#side { background: #fff; width: 30%; float: right; position: relative; margin: 0; padding: 0;
}
#sidecontent2 { width: 255px; height: 200px; margin: 0 20px 20px auto; background: #9da9c0; position: relative;
}
#sidecontent2 span { display: table; color: #fff; text-align: center; margin: auto; padding: 20px 0; font-size: 25px;
}
#footer { height: 300px; clear: both; background: #333; border-bottom:1px solid #444;
}#menu{background:#47cf73;color:#fff;padding:20px;text-align:center;font-size:20px}#content{background:#fff;position:relative;margin:5% auto;width:100%;max-width:920px;overflow:hidden;box-shadow:0 0 0 20px rgba(0,0,0,.03);}#header{color:#555;text-align:center;padding:20px 10px}body{margin:0;padding:0;background:#555;font-family:'Josefin Sans',sans-serif}a:link{text-decoration:none}
#chslidingbox{background:#fff;width:100%;max-width:355px;width:100%;position:fixed;overflow:hidden;border:none;right:0;z-index:99;text-align:left;transition:all .4s ease-out}
.chslidingbox-title{background:#5996C1;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.chslidingbox-container{border:1px solid #ddd;float:left;width:100%;height:auto;padding:10px}
.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container >div >span{font-size:14px}
#ContactForm1{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:5px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:300px;height:120px;margin:5px 0;padding:5px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color:#444;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {background:#5996C1;color:#fff;border:1px solid #5996C1;width:100px;height:40px;line-height:30px;cursor:pointer;font-weight:700;font-size:13px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover{background:#fff;color:#5996C1}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:300px;margin-top:35px;}
.show{bottom:-375px}
.hide{bottom:0}New Hide Show Contact Form Widget For Blogger By Askwithloud - Script Codes JS Codes
$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-maximize"),l=$("#chslidingbox-minimize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8866800899420715293';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8866800899420715293','//www.idblanter.com/','8866800899420715293');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Mengirim Pesan...', 'contactFormMessageSentMsg': 'Pesan Anda telah Terkirim.', 'contactFormMessageNotSentMsg': 'Pesan tidak bisa dikirim. Silahkan coba lagi.', 'contactFormInvalidEmailMsg': 'Email Address Wajib diisi.', 'contactFormEmptyMessageMsg': 'Kolom Pesan tidak boleh kosong.', 'title': 'Contact Form', 'blogId': '8866800899420715293', 'contactFormNameMsg': 'Nama', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Pesan', 'contactFormSendMsg': 'Kirim', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
| Developer | Prince |
| Username | Askwithloud |
| Uploaded | December 15, 2022 |
| Rating | 3 |
| Size | 4,069 Kb |
| Views | 8,096 |
Do you need developer help for New Hide Show Contact Form Widget For Blogger By Askwithloud?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Prince (Askwithloud) Script Codes
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Mega menu | DimaZubkov | 5,066 Kb |
| Responsive Boxes without Images | Andymcfee | 4,120 Kb |
| 12 DAYS OF XMAS | Proto78 | 2,313 Kb |
| Blockquote design | Sjmcpherson | 1,863 Kb |
| Feedback Page | TessDiNapoli | 2,836 Kb |
| Bootstrap example | Ssaakkaa | 2,716 Kb |
| Wave Lines | Mikehobizal | 4,023 Kb |
| React TODO | Enieste | 3,320 Kb |
| 3D-box | Parthviroja | 2,346 Kb |
| Sketchy Box | Mnicpt | 3,033 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!