Sabtu, 28 Januari 2017

Cara Membuat Page Pendaftaran Admin di Blogger


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.
<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 IDBLOG
var 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>
 Penting :
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 . . . .

Load disqus comments

0 komentar