Malam sobat Vetizens bertemu dengan saya lagi pada kali ini saya akan berbagi sedikit tutorial yang setelah saya cari di google dan menemukannya :D
Tutorial ini saya dapatkan dari Usagilaabs dan bukan buatan saya.
Tutorial ini cocok untuk kalian para fansub/fanshare khususnya blogger untuk mencari para admin baru.
Langsung Saja ke TKP biar tidak kelamaan . . .
1. Login Blogger > Masuk Blogger fansub/fanshare kalian.
2. Blog kalian > Laman / Pages > Laman baru.
3. Pilih HTML jangan Compose, lalu masukkan script dibawah ini.
Penting :<style>h1.post-title{display:none}.contact-form-box>p{margin:0;line-height:1.5;color:#666;border:1px solid #F1E8C3;background:#FDF6D7;padding:15px;border-radius:3px}.contact-form-box>b{text-transform:uppercase;font-size:17px;text-align:center;display:block;margin:0 0 15px;letter-spacing:.5px;border-bottom:1px solid #ddd}.us_line{display:block;margin-bottom:15px;font-size:13px;color:#666;letter-spacing:.5px;text-transform:uppercase;position:relative;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif}.us_line>b{display:block;text-transform:uppercase;letter-spacing:1px}.us_line>input,.us_line>textarea,.us_line>select{border:1px solid #E2E2E4;background:#FDFDFD;padding:0 10px;width:100%;display:block;color:#999;border-radius:3px;height:35px;line-height:2}.us_line>input:focus,.us_line>textarea:focus,.us_line>select:focus{outline:1px solid #009EFD;color:#333}#ContactForm1_contact-form-reason{height:100px;padding:5px 10px}.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){display:inline-block;width:49.5%}#sendform{background:#77CB59;color:#FFF;border:0;padding:10px 25px;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-radius:3px;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;cursor:pointer}#sendform:hover{background:#66AF4C}#sendform[disabled="disabled"]{background:#DDD!important}#contact_layout{font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);z-index:99999}.contact_top{margin:-55px auto 15px}.contact_top i{background:#70C340;color:#fff;font-size:35px;font-weight:400;text-align:center;margin:auto;border-radius:100%;line-height:60px;padding:0 14px;border:5px solid #FFF}.contact_message{width:40%;background:#FFF;color:#fff;border-radius:5px;padding:20px;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-20%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.contact_message b{text-transform:capitalize;font-size:20px;letter-spacing:.2px;display:block;font-weight:400}.contact_message p{margin:15px 0;color:#666}.contact_message a{display:block;background:#70c340;border-radius:5px;line-height:40px;color:#fff!important;text-transform:uppercase;font-weight:700;font-size:15px}.contact-form-error-message-with-border img{display:none!important}.error_message a,.error_message i{background:#E66148!important}@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}@media screen and (max-width:420px){.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){width:100%}}</style><div class="contact-form-box"><b>Recruitment Staff</b><p>Open Recruitment Staff, if you interested want to join in my fansub please register in form below. thanks</p><form id='us_contact' name="contact-form"><div class='us_line'><b>Name</b><input id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" required/></div><div class='us_line'><b>Email</b><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" type="text" value="" required/></div><div class='us_line'><b>Gender</b><select><option value="Male" name="gender" selected>Male</option><option value="Female" name="gender">Female</option></select></div><div class='us_line'><b>Age</b><input id="ContactForm1_contact-form-age" name="age" placeholder="0" maxlength="2" type="number" min="1" max="30" value="" required/></div><div class='us_line'><b>Domicele</b><input id="ContactForm1_contact-form-domicele" name="age" placeholder="Region, City" type="text" value="" required/></div><div class='us_line'><b>Url Facebook</b><input id="ContactForm1_contact-form-urlfb" name="age" placeholder="http://facebook.com/yourusername" type="url" value="" required/></div><div class='us_line'><b>Contact</b><input id="ContactForm1_contact-form-contact" name="age" placeholder="Ex. Number Phone / ID Line / PIN BBM" type="text" value="" required/></div><div class='us_line'><b>Job</b><select><option value="Translator" name="jobs" selected>Translator</option><option value="Typesett" name="jobs">Typesett</option><option value="Kara Effect" name="jobs">Kara Effect</option><option value="Uploader/Mirroring" name="jobs">Uploader/Mirroring</option><option value="TLC & Editor" name="jobs">TLC & Editor</option><option value="Encoder" name="jobs">Encoder</option><option value="Admin In Fanspage" name="jobs">Admin In Fanspage</option></select></div><div class='us_line'><b>Levels of proficiency</b><select><option value="Zero" name="lvl" selected>Zero</option><option value="Beginner" name="lvl" selected>Beginner</option><option value="Experienced" name="lvl">Experienced</option><option value="Proficient" name="lvl">Proficient</option><option value="Expert" name="lvl">Expert"</option></select></div><div class='us_line'><b>The reason want to join?</b><textarea cols="25" id="ContactForm1_contact-form-reason" name="email-message" placeholder="Give your reasons why you want to join?" required></textarea></div><div class='us_line dn' style='display:none;'><textarea style='display:none;' cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input style='display:none;' id="ContactForm1_contact-form-submit" type="button" value="Send" /></div><button type='button' onclick="generate()" disabled="disabled" id="sendform">Send</button><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></form></div><script type="text/javascript">/*<![CDATA[*/if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');/*]]>*/</script><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><script>//<![CDATA[/** Form Recruitment Fansubs* Source code by http://bit.ly/modifymsg_kompiajaib and http://bit.ly/contactform_kompiajaib* Modify by http://usagilabs.blogspot.com/* Copyright 2016*/var blogsid = "8410876137745120111"; // Your IDBLOGvar nameblog = "//vetizens.id/"; // Your URLBLOG, don't copy HTTP: or HTTPS:var successmsg = "<b>Your form has been sent</b><p>We will strive to respond promptly your registration within 24 hours. if you not get reply within 24 hours please contact admin via fanspage.</p>";var invalidmsg = "<b>A valid email address is required</b><p>You must fill in your email address correctly.</p>";var notsendmsg = "<b>Message could not be sent</b><p>Please try again later</p>";var sett = {name : "Name",email : "Email",gender : "Gender",age : "Age",domicele : "Domicele",urlfb : "Url Facebook",contact : "Contact",jobs : "Jobs",lvl : "Level",reason : "Give your reasons why you want to join?",br : "\n"};//]]></script><script src="//cdn.rawgit.com/tutorialku/usagilabs/master/lib/formrecruitment.min.js" type="text/javascript"></script>
8410876137745120111 ganti dengan ID Blog kalian
//vetizens.id/ ganti dengan url blog kalian tetapi jangan sampai http / https
4. Simpan / Save, lalu lihat hasilnya.
Jika Ingin Melihat Demo nya bisa lihat di bawah.
Sangat simple kan :D
Tambahan Style lain :
Style Boxed
.contact-form-box{border:1px solid #E2E2E4;padding:0 20px;background:#FDFDFD;border-radius:3px}.contact-form-box>p{margin:0;line-height:1.5;color:#666;border:1px solid #F1E8C3;background:#FDF6D7;padding:15px;border-radius:3px}.contact-form-box>b{background:#77CB59;color:#FFF;text-transform:uppercase;font-size:17px;text-align:center;display:block;margin:0 -21px 15px;border-radius:3px 3px 0 0;line-height:45px;letter-spacing:.5px}h1.post-title{display:none}.us_line{display:block;margin-bottom:15px;font-size:13px;color:#B9B9B9;letter-spacing:.5px;text-transform:uppercase;font-weight:700;position:relative;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif}.us_line>b{display:block;text-transform:uppercase;letter-spacing:1px}.us_line>input,.us_line>textarea,.us_line>select{border:1px solid #E2E2E4;background:#FFF;padding:0 10px;width:100%;display:block;color:#B0B1B1;border-radius:3px;height:35px;line-height:2}.us_line>input:focus,.us_line>textarea:focus,.us_line>select:focus{outline:1px solid #009EFD;color:#646464}#ContactForm1_contact-form-reason{height:100px;padding:5px 10px}.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){display:inline-block;width:49.5%}#sendform{background:#77CB59;color:#FFF;border:0;padding:10px 25px;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-radius:3px;font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;cursor:pointer}#sendform:hover{background:#66AF4C}#sendform[disabled="disabled"]{background:#DDD!important}#contact_layout{font-family:'Roboto','Open Sans',Segoe UI,Arial,sans-serif;text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);z-index:99999}.contact_top{margin:-55px auto 15px}.contact_top i{background:#70C340;color:#fff;font-size:35px;font-weight:400;text-align:center;margin:auto;border-radius:100%;line-height:60px;padding:0 14px;border:5px solid #FFF}.contact_message{width:40%;background:#FFF;color:#fff;border-radius:5px;padding:20px;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-20%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}.contact_message b{text-transform:capitalize;font-size:20px;letter-spacing:.2px;display:block;font-weight:400}.contact_message p{margin:15px 0;color:#666}.contact_message a{display:block;background:#70c340;border-radius:5px;line-height:40px;color:#fff!important;text-transform:uppercase;font-weight:700;font-size:15px}.contact-form-error-message-with-border img{display:none!important}.error_message a,.error_message i{background:#E66148!important}@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}@media screen and (max-width:420px){.us_line:nth-of-type(3),.us_line:nth-of-type(4),.us_line:nth-of-type(8),.us_line:nth-of-type(9){width:100%}}Style dengan Icon Fontawesome:
.us_line:after{font-family:FontAwesome;position:absolute;bottom:6px;left:10px;z-index:100;color:#B0B1B1;font-size:13px;font-weight:400;opacity:.6}.us_line:nth-of-type(1):after{content:"\f007"}.us_line:nth-of-type(2):after{content:"\f0e0"}.us_line:nth-of-type(3):after{content:"\f222"}.us_line:nth-of-type(4):after{content:"\f133"}.us_line:nth-of-type(5):after{content:"\f21d"}.us_line:nth-of-type(6):after{content:"\f082"}.us_line:nth-of-type(7):after{content:"\f095"}.us_line:nth-of-type(8):after{content:"\f0f2"}.us_line:nth-of-type(9):after{content:"\f19d"}.us_line>input,.us_line>select{padding-left:30px!important}bagi kalian yang ingin menambahkan icon sobat tinggal copy css dibawah ini lalu taruh diatas </style>, tidak ada yang diganti cuman menambahkan css untuk fontawesome.
Sekian Tutorial dari saya Jika ada kata yang kurang benar mohon dimaafkan.
Jika Masih Bingung Silahkan Berkomentar . . .
Kunjungi Vetizens terus untuk informasi terupdate . . . .
Jika Masih Bingung Silahkan Berkomentar . . .
Kunjungi Vetizens terus untuk informasi terupdate . . . .
0 komentar