Cara Membuat Desain Form Login Seperti Yahoo Dengan Bootstrap

MP4U - Cara Membuat Desain Form Login Seperti Yahoo Dengan Bootstrap - Hallo guys selamat malam dan selamat membaca kembali di blog MP4U, setelah pada kesempatan yang pertama tadi membahas dan berbagi mengenai Cara Membuat Desain Form Login Seperti Google Dengan Bootstrap, dikesempatan kedua pada malam ini, saya akan kembali mengulas tentang cara pembuatan form login, lebih tepatnya Cara Membuat Desain Form Login Seperti Yahoo Dengan Bootstrap, untuk ulasan selengkapnya simak terus tutorialnya dibawah ini...

Cara Membuat Desain Form Login Seperti Yahoo Dengan Bootstrap

OK Next... Yahoo Style Login menjadi salah satu desain form login yang cukup keren menurut penulis... Meskipun popularitas yahoo kian menurun, Tapi desain form login yahoo masih cukup diperhitungkan, dengan nuansanya yang klasik mengingatkan kita pada era kejayaan Yahoo pada masa nya...


Pada tutorial ini kita akan mencoba membuat desain form login seperti yahoo dengan tambahan nuansa kekinian ala bootstrap... Cara penggunaannya hampir sama dengan Cara Membuat Desain Form Login Seperti Google Dengan Bootstrap, yaitu kita perlu melakukan installasi Bootstrap terlebih dahulu pada direktori blog / website sobat... Dan setelah sobat melakukan installasi bootstrap langkah selanjutnya adalah kita akan menambah css agar tampilannya mirip dengan yahoo...

Cara Membuat Desain Form Login Seperti Yahoo Dengan Bootstrap


Pertama : Tambahkan CSS ( Cascode Style Sheet ) berikut ini pada bagian ]]><b:skin> Or <style>

.account-box
{
border: 2px solid rgba(153, 153, 153, 0.75);
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-o-border-radius: 2px;
z-index: 3;
font-size: 13px !important;
font-family: "Helvetica Neue" ,Helvetica,Arial,sans-serif;
background-color: #ffffff;
padding: 20px;
}

.logo
{
width: 138px;
height: 30px;
text-align: center;
margin: 10px 0px 27px 40px;
background-position: 0px -4px;
position: relative;
}

.forgotLnk
{
margin-top: 10px;
display: block;
}

.purple-bg
{
background-color: #6E329D;
color: #fff;
}
.or-box
{
position: relative;
border-top: 1px solid #dfdfdf;
padding-top: 20px;
margin-top:20px;
}
.or
{
color: #666666;
background-color: #ffffff;
position: absolute;
text-align: center;
top: -8px;
width: 40px;
left: 90px;
}
.account-box .btn:hover
{
color: #fff;
}
.btn-facebook
{
background-color: #3F639E;
color: #fff;
font-weight:bold;
}
.btn-google
{
background-color: #454545;
color: #fff;
font-weight:bold;
}

Kedua : Lalu selanjutnya kode berikut ini merupakan markup HTML yang berfungsi untuk membuat form login sesuai dengan selector yang kita tambahkan tadi agar mirip dengan yahoo... Letakkan pada bagian <body>

<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-4">
<div class="account-box">
<div class="logo ">
<img src="http://placehold.it/90x38/fff/6E329D&text=LOGO" alt=""/>
</div>
<form class="form-signin" action="#">
<div class="form-group">
<input type="text" class="form-control" placeholder="Email" required autofocus />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required />
</div>
<label class="checkbox">
<input type="checkbox" value="remember-me" />
Keep me signed in
</label>
<button class="btn btn-lg btn-block purple-bg" type="submit">
Sign in</button>
</form>
<a class="forgotLnk" href="http://www.jquery2dotnet.com">I can't access my account</a>
<div class="or-box">
<span class="or">OR</span>
<div class="row">
<div class="col-md-6 row-block">
<a href="http://www.jquery2dotnet.com" class="btn btn-facebook btn-block">Facebook</a>
</div>
<div class="col-md-6 row-block">
<a href="http://www.jquery2dotnet.com" class="btn btn-google btn-block">Google</a>
</div>
</div>
</div>
<div class="or-box row-block">
<div class="row">
<div class="col-md-12 row-block">
<a href="http://www.jquery2dotnet.com" class="btn btn-primary btn-block">Create New Account</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Ketiga : Maka nanti hasilnya seperti pada gambar diatas, atau sama saja seperti gambar berikut dibawah ini :

Cara Membuat Desain Form Login Seperti Yahoo Dengan Bootstrap

Itulah kiranya yang dapat admin blog MP4U bagikan pada kesempatan malam ini, mengenai Cara Membuat Desain Form Login Seperti Yahoo Dengan Bootstrap, selamat malam, selamat beristirahat, dan selamat mencoba aja ya guys, Good Luck...


Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!

Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
  • Berlangganan via Email

    '