Showing posts with label HTML. Show all posts
  • Membuat Dropdown Menu Website

    Kali ini kita akan membahas cara membuat dropdown pada menu website

    pertama buat file style.css
    lalu isikan script berikut pada file style.css
    nav ul {
    padding: 0 0px;

    list-style: none;

    position: relative;

    width: 100%;

    font-family: 'helvetica', arial;

    }

    nav ul:after{

    content: "";

    clear: both;

    display: block;

    }

    nav ul li {

    float: left;

    }

    nav ul li:hover {

    background-color: #222;

    }

    nav ul li a {

    display: block;

    padding: 20px 30px;

    text-decoration: none;

    color: #fff;

    }

    nav ul li a:hover{

    color: #fff;

    }

    nav ul ul {

    display: none;

    background: #111;

    padding: 0;

    position: absolute;

    top: 100%;

    max-width: 300px;

    width: auto;

    }

    nav ul ul li {

    float: none;

    border-bottom: 1px solid rgba(0,0,0,.2);

    position: relative;

    }

    nav ul li:hover > ul {

    display: block;

    }

    nav ul ul li a {

    padding: 10px 40px;

    color: #fff;

    }

    nav ul ul li a:hover {

    background: #222;

    }

    nav ul ul ul {

    position: absolute;

    left: 100%;

    top:0;

    width: 200px;

    }

    Jika anda sudah selesai buat file baru berextensi php ataupun html

    lalu buat kira kira semacam ini
    <link rel="stylesheet" href="style.css" />
     <nav>

           <ul>

              <li><a href="#">Beranda</a></li>

              <li><a href="#">Profil</a>

                 <ul>

                    <li><a href="#">Profil 1</a></li>

                    <li><a href="#">Profil 2</a></li>

                 </ul>

              </li>

              <li class="dropdown"><a href="#">Kategori</a>

                  <ul>

                      <li><a href="#">CSS</a></li>

                      <li><a href="#">PHP</a></li>

                      <li><a href="#">Jquery</a></li>

                      <li><a href="#">HTML</a>                                                                          <ul>

                              <li><a href="#">Dasar HTML</a></li>

                              <li><a href="#">Tag HTML</a></li>

                                                                                                    </ul>

                       </li>

                   </ul>

                </li>

                    <li><a href="#">Kontak</a>

        </nav>
    jika sudah silakan anda mencoba membuka dengan localhost ataupun web kesayangan anda

    bagi anda yang tidak mau membuat file style.css
    bisa dengan cara seperti ini
    <style type="text/css">
    nav ul {
    padding: 0 0px;

    list-style: none;

    position: relative;

    width: 100%;

    font-family: 'helvetica', arial;

    }

    nav ul:after{

    content: "";

    clear: both;

    display: block;

    }

    nav ul li {

    float: left;

    }

    nav ul li:hover {

    background-color: #222;

    }

    nav ul li a {

    display: block;

    padding: 20px 30px;

    text-decoration: none;

    color: #fff;

    }

    nav ul li a:hover{

    color: #fff;

    }

    nav ul ul {

    display: none;

    background: #111;

    padding: 0;

    position: absolute;

    top: 100%;

    max-width: 300px;

    width: auto;

    }

    nav ul ul li {

    float: none;

    border-bottom: 1px solid rgba(0,0,0,.2);

    position: relative;

    }

    nav ul li:hover > ul {

    display: block;

    }

    nav ul ul li a {

    padding: 10px 40px;

    color: #fff;

    }

    nav ul ul li a:hover {

    background: #222;

    }

    nav ul ul ul {

    position: absolute;

    left: 100%;

    top:0;

    width: 200px;

    }
    </style>

     <nav>

           <ul>

              <li><a href="#">Beranda</a></li>

              <li><a href="#">Profil</a>

                 <ul>

                    <li><a href="#">Profil 1</a></li>

                    <li><a href="#">Profil 2</a></li>

                 </ul>

              </li>

              <li class="dropdown"><a href="#">Kategori</a>

                  <ul>

                      <li><a href="#">CSS</a></li>

                      <li><a href="#">PHP</a></li>

                      <li><a href="#">Jquery</a></li>

                      <li><a href="#">HTML</a>                                                                          <ul>

                              <li><a href="#">Dasar HTML</a></li>

                              <li><a href="#">Tag HTML</a></li>

                                                                                                    </ul>

                       </li>

                   </ul>

                </li>

                    <li><a href="#">Kontak</a>

        </nav>

    lalu save dan kemudian anda coba panggil di localhost ataupun web kesayangan anda
    Sebagai gambaran hasil silakan lihat screenshot berikut
     jika anda ingin membuat dropdown yang berbeda anda bisa mengkreasikannya dengan mengedit css :D
    sekian saja dari saya terimakasih
    jika ada yang ingin ditanyakan silahkan berkomentar

  • 50 Template Login Page Gratis Terbaik untuk Website anda

    Halaman Login terdapat pada website dinamis. Halaman ini adalah 'pintu' menuju halaman administrator, atau halaman user jika website-nya merupakan website yang mengharuskan penggunanya mempunyai akun.
    Keberadaan halaman login cukup vital mengingat kegunaan dan interaktivitasnya dengan pengguna. Tidak seperti elemen-elemen website lain, form login ini ada bukan untuk dibaca, tetapi untuk digunakan secara langsung dengan mengisi isiannya. Isian form login biasanya terdiri dari email atau username dan password.
    Mengingat pentinya halaman ini, kita tidak bisa asal-asalan merancangnya. Desain halaman login yang bagus akan menghasilkan pengalaman pengguna yang baik.
    Nah, di bawah ini saya kumpulkan 50 template halaman login gratis yang siap pakai. Silahkan anda pilih dan download yang anda sukai. Anda bebas menggunakannya pada project anda. Klik gambarnya untuk detail dan download.

    1. Login and Registration Form with HTML5 and CSS3

    Login and Registration Form with HTML5 and CSS3

    2. Animated Login Form

    Animated Login Form

    3. Login Form HTML5 and CSS3

    Login form HTML5 and CSS3

    4. Slick Login Form with CSS3

    Slick Login Form With CSS3

    5. Stylish animated login & Sign Up Form

    Stylish Animated Login and Signup Form

    6. Login form - HTML5/CSS3/JQuery

    Login Form – HTML/CSS3/jQuery

    7. Login Form with PHP, Jquery and CSS3

    Login Form with PHP, JQuery and CSS3

    8. Login Form

    Login Form

    9. Modern Login Form

    Modern Login Form

    10. Apple-Like Login Form

    Apple-like Login Form

    11. Login Form (Coded)

    Login Form (Coded)

    12. Free HTML5 CSS3 Login Form

    Free HTML5 CSS3 Login Form

    13. Slick Login Form with HTML5 & CSS3

    Slick login form with HTML5 & CSS3

    14. Facebook Login Form

    Facebook Login Form

    15. HTML & CSS Login Form

    HTML & CSS Login Form

    16. Rounded Flat Login Form

    Login Form

    17. CSS3 Login Form

    CSS3 Login Form

    18. Custom Login Form

    Custom Login Form

    19. Login + Register Form

    Login/Register Form

    20. Login Form HTML5 and CSS3

    Login Form HTML5 and CSS3

    21. Simple Dropdown Login Box

    Simple Dropdown Login Box

    22. Dark Login Form

    Dark Login Form

    23. Minimal Flat CSS Login Form

    Minimal Flat CSS Login Form

    24. Simply Login Form

    Simply Login Form

    25. Transparent Login Form

    Transparent Login Form

    26. Unique Style Form Login

    Unique Style for Login

    27. Classic HTML Login Form

    Classic HTML Login Form

    28. Signin Form

    Signin form

    29. New CSS3 Login Form

    New CSS3 Login Form

    30. JS Login Form

    JS Login Form

    31. Minimal Form Template for Login

    Minimal Form Template for Login

    32. Signup/Login Form

    Signup/Login Form

    33. Dropdown Login Form

    DropDown Login Form

    34. Custom Login Form Styling

    Custom Login Form Styling

    35. Login & Register Form

    Login & Register Form

    36. Login Form

    Login Form

    37. Disqus Like Sign-in Form

    Disqus Like Sign-in form

    38. Nice and Simple Login Form

    Nice and Simple Login Form

    39. Flat UI Login Form

    Flat UI Login Form

    40. Pure CSS Login Form

    Pure CSS Login Form

    41. Login Form Template with HTML & CSS

    Login Form Template with HTML and CSS

    42. Login - Animation

    Login – Animation

    43. CSS Login Form

    CSS Login Form

    44. Bootstrap Login Form Layered Free

    Bootstrap Login Form Layered Free

    45. Bootstrap Login Form with CSS 3D Transforms

    Bootstrap Login Form with CSS 3D Transforms

    46. Bootstrap Parallax Login Form

    Bootstrap Parallax Login Form

    47. Responsive Login Form Template Free

    Responsive Login Form Template Free

    48. Bootstrap Login With Social Button

    Bootstrap login with social buttons

    49. Free Flat Login Form

    Free Flat Login Form

    50. Free Modal Login Form

    Free Modal Login form

    Itulah 50 template login page yang bisa anda download secara gratis. Semoga bermanfaat.

    Sumber :
    http://www.syakirurohman.net
    http://designscrazed.org/css-html-login-form-templates/
    http://www.designsave.net/2014/08/responsive-html5-login-forms-free.html
    http://www.multyshades.com/2014/04/login-form-templates/
    http://designsparkle.com/login-form-templates/

  • Nisekoi Template Designed by Johanes Djogan

    ©2016 - ReDesigned By Ani-Sudo