Friday, December 30, 2016

Cara Mudah Membuat Menu Navigasi Multilevel Responsive di Blog

View Article

Cara Mudah Membuat Menu Navigasi Multilevel Responsive di Blog

Artikel kali ini merupakan artikel pertama dari saya yang membahas tentang pembuatan menu navigasi di blog, pada artikel sebelumnya saya hanya sedikit membahas tentang cara membuat color picker, template, pembuatan form dll yang bisa anda lihat di style milik Rizki Design.

Sebelum memulai cara mudah membuat menu navigasi multilevel responsive di blog ini, saya akan sedikit menjelaskan fungsi dari menu navigasi itu sendiri.

Ini merupakan beberapa fungsi dari menu navigasi:
  • Membantu Anda untuk mempermudah dalam mengelola blog atau website.
  • Membantu pengunjung yang mengunjungi blog atau website.
  • Memperindah tampilan blog atau website.
Mungkin itu salah satu fungsi dari menu navigasi, namun sebenarnya ada 1 fungsi lagi yang mungkin sudah tidak asing lagi untuk Anda, yaitu:
Fungsi inilah yang berguna bagi Anda yang ingin bermitra dengan Google Adsense.


Kurang lebih kita akan membuat menu navigasi multilevel seperti pada gambar di atas.

Pada pembuatan menu navigasi ini kita menggunakan 3 jenis kode yaitu HTML, CSS, dan JavaScript. Pasang ketiga jenis kode ini dengan benar agar tampil sesuai dengan demo yang saya berikan, untuk melihat demonya silahkan klik button dibawah ini.


Silahkan simak untuk cara pemasangannya.

Kode HTML

Untuk pemasangan kode HTML ini silahkan Anda cari </header> di dalam template blog Anda, dan simpan kode HTML di bawah ini tepat di atas kode </header>.

<rdnav>
<center><a class="responsive-rdmenu" href="#" id="resp-rdmenu"><i class="fa fa-reorder"></i></a></center>   
    <ul class="rdmenu">
        <li><a class="rdhome" href="/"><i class="fa fa-home"></i> Home</a>
            <ul class="sub-rdmenu">
                <li><a href="#">DropDown Home 1</a></li>
                <li><a href="#">DropDown Home 2</a></li>
                <li><a href="#">DropDown Home 3</a></li>
                <li><a href="#">DropDown Home 4</a></li>
                <li><a href="#">DropDown Home 5</a></li>
            </ul>
        </li>
            <li><a href="#"><i class="fa fa-user"></i> About</a></li>
            <li><a href="#"><i class="fa fa-camera"></i> Portofolio</a>
                <ul class="sub-rdmenu">
                    <li><a href="#">DropDown Portofolio 1</a></li>
                    <li><a href="#">DropDown Portofolio 2</a>
                        <ul>
                            <li><a href="#">DropDown I Portofolio 1</a></li>
                            <li><a href="#">DropDown I Portofolio 2</a></li>
                            <li><a href="#">DropDown I Portofolio 3</a></li>
                            <li><a href="#">DropDown I Portofolio 4</a></li>
                            <li><a href="#">DropDown I Portofolio 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Portofolio 3</a>
                        <ul>
                            <li><a href="#">DropDown Portofolio 1</a></li>
                            <li><a href="#">DropDown Portofolio 2</a></li>
                            <li><a href="#">DropDown Portofolio 3</a></li>
                            <li><a href="#">Sub Sub-Menu 4</a></li>
                            <li><a href="#">DropDown Portofolio 5</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-bullhorn"></i> Blog</a></li>
            <li><a href="#"><i class="fa fa-tags"></i> Categori</a>
                <ul class="sub-rdmenu">
                    <li><a href="#">DropDown Categori 1</a></li>
                    <li><a href="#">DropDown Categori 2</a>
                        <ul>
                            <li><a href="#">DropDown I Categori 1</a></li>
                            <li><a href="#">DropDown I Categori 2</a></li>
                            <li><a href="#">DropDown I Categori 3</a></li>
                            <li><a href="#">DropDown I Categori 4</a></li>
                            <li><a href="#">DropDown I Categori 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Categori 3</a>
                        <ul>
                            <li><a href="#">DropDown Categori 1</a></li>
                            <li><a href="#">DropDown Categori 2</a></li>
                            <li><a href="#">DropDown Categori 3</a></li>
                            <li><a href="#">DropDown Categori 4</a></li>
                            <li><a href="#">DropDown Categori 5</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>
            <li><a href="#"><i class="fa fa-sitemap"></i> Sitemap</a></li>
            <li><a href="#"><i class="fa fa-exclamation-triangle"></i> Disclaimer </a></li>
    </ul>
</rdnav>

Kode CSS

Untuk menyimpan kode CSS ini Anda bisa menyimpannya di atas kode ]]></b:skin> atau agar kode CSS ini tidak bercampur dengan kode bawaan template, Anda bisa membuat kode CSS sendiri di bawah kode <body> dengan menambahkan kode <style type='text/css'> isi kode CSS di bawah ini </style>.

rdnav{
    display: block;
    background: #424242;
}
.rdmenu{
    display: block;
}
.rdmenu li{
    display: inline-block;
    position: relative;
    z-index: 100;
}
.rdmenu li:first-child{
    margin-left: 0;
}
.rdmenu li a{
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #b7b7b7;
    transition: all 0.2s ease-in-out 0s;
}
.rdmenu li a:hover,.menu li:hover>a{
    color: #fff;
    background: orange;
}
.rdmenu ul{
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}
.rdmenu ul:after{
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}
.rdmenu ul li{
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}
.rdmenu ul li a{
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}
.rdmenu ul li a:hover,.menu ul li:hover>a{
    background: #F70000;
    color: #fff;
}
.rdmenu li:hover>ul{
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}
.rdmenu ul ul{
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}
.rdmenu ul ul:after{
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}
.rdmenu li>ul ul:hover{
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}
.responsive-rdmenu{
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}
.responsive-rdmenu:hover{
    background: #374147;
    color: #fff;
    text-decoration: none;
}
a.rdhome{
    background: #F70000;
}
@media (min-width: 768px) and (max-width: 979px){
    .rdmainWrap{
        width: 768px;
    }
    .rdmenu ul{
        top: 37px;
    }
    .rdmenu li a{
        font-size: 12px;
    }
    a.rdhome{
        background: #374147;
    }
}
@media (max-width: 767px){
    .rdmainWrap{
        width: auto;
        padding: 50px 20px;
    }
    .rdmenu{
        display: none;
    }
    .responsive-rdmenu{
        display: block;
    }
    rdnav{
        margin: 0;
        background: none;
    }
    .rdmenu li{
        display: block;
        margin: 0;
    }
    .rdmenu li a{
        background: #fff;
        color: #797979;
    }
    .rdmenu li a:hover,.menu li:hover>a{
        background: #F70000;
        color: #fff;
    }
    .rdmenu ul{
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }
    .rdmenu li:hover>ul{
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }
    .rdmenu ul ul{
        left: 0;
        transform: initial;
    }
    .rdmenu li>ul ul:hover{
        transform: initial;
    }
}
@media (max-width: 480px){
}
@media (max-width: 320px){
}

Kode JavaScript

Untuk memasang kode JavaScript ini Anda cari kode </body>, kemudian simpan kode JavaScript di bawah ini tepat di atas kode </body>.

<script type='text/javascript'>
$(document).ready(function(){
    var touch  = $('#resp-rdmenu');
    var menu  = $('.rdmenu');
$(touch).on('click', function(e){
    e.preventDefault();
    menu.slideToggle();
 });
$(window).resize(function(){
    var w = $(window).width();
    if(w > 767 && menu.is(':hidden')){
        menu.removeAttr('style');
}
});
});
</script>

Link untuk memanggil Font Awesome & jQuery

Link ini bisa Anda simpan di dalam template blog Anda. Jika, di dalam template blog Anda belum terdapat kode di bawah ini, jika memang kode di bawah ini sudah terdapat di template blog Anda, sebaiknya Anda tidak perlu memasangnya kembali.

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Untuk menyimpan link di atas silahkan Anda simpan di bawah kode <head>.

Keterangan:
  • Kode # di dalam kode HTML isi dengan link tujuan yang sesuai dengan nama menu.
  • Kode rdmenu yang terdapat di dalam kode HTML, CSS dan JavaScript merupakan style yang bisa Anda ubah, kenapa saya menggunakan nama rdmenu, karena supaya tidak terjadi tabrakan antara kode menu bawaan template blog Anda dengan kode menu Rizki Design.
  • Kode rdnav di dalam kode CSS yang bagian background, bisa anda sesuaikan dengan warna template Anda.
  • Untuk Kode JavaScript bisa Anda terapkan atau tidak juga tidak jadi masalah.
Untuk lebih mudah dalam pengeditan, saya sarankan Anda menggunakan text editor terlebih dahulu karena itu akan lebih mempermudah dalam pengeditak kode.
Baca: 10 Text Editor Terbaik Untuk Pemrograman
Nantikan tutorial-tutorial berikutnya hanya di Rizki Design, maka dari itu silahkan Anda Follow blog saya atau like Fanspage Facebook saya untuk mendapatkan informasi tutorial-tutorial yang keren berikutnya. 

Sunday, December 25, 2016

Mata Berkedip

View Article


Saturday, December 24, 2016

Teknik SEO: Cara Menjadikan Website Berada di Peringkat Teratas Google

View Article

Teknik SEO: Cara Menjadikan Website Berada di Peringkat Teratas Google

Terlalu banyak situs yang membahas Teknik SEO yang memiliki isi artikel yang sama sehingga para pemula yang niat terjun ke dunia Blogging merasa pusing dengan artikel-artikel yang sangat panjang lebar namun pada akhirnya mereka tidak mengerti dari isi artikel tersebut.

Maka dari itu, semoga dengan adanya artikel yang saya buat tentang Teknik SEO ini bisa sedikit membantu Anda yang ingin memulai terjun ke dunia Blogging.

Disini saya tidak akan membahas pengertian SEO, disini saya hanya akan membahas cara penerapannya, sehingga artikel ini tidak terlalu panjang, dan bisa di mengerti oleh setiap pembacanya.

Jadikan Konten Sebagai Raja


Mengapa konten harus di jadikan sebagai raja?, ini merupakan pertanyaan sederhana.

Bayangkan apa yang dilakukan bawahan untuk raja?, bukankah bawahan selalu memanjakan raja?, bukankah bawahan selalu menuruti apa kata raja?, sebenarnya hal ini tidak ada kaitannya dengan Teknik SEO, ini hanya ilusi yang sederhana.

Jika kita menjadikan konten sebagai raja maka kita akan berusaha membuat konten tersebut sebaik mungkin, jika kita memiliki konten yang baik otomatis pengunjung menyukainya, dan tidak ada salahnya jika Google mulai menempatkan konten kita di halaman 1 Google, walaupun mungkin tidak akan langsung berada di posisi teratas Google.

Ingat!.
  • Pengunjung hanya ingin belajar hal-hal baru
Buatlah konten yang memiliki informasi terbaru yang belum ada di dalam situs-situs lainnya, maka dari itu meng-copy artikel orang tidak akan bisa menerapkan Teknik SEO sepenuhnya.
  • Pengunjung hanya ingin menemukan isi konten yang berguna
Selain hal baru yang terdapat dalam konten, kita juga harus memperhatikan apakah hal baru tersebut berguna untuk pengunjung atau malah sebaliknya.
  • Pengunjung ingin belajar dengan cepat
Inilah salah satu alasan kenapa saya membuat artikel ini singkat, karna saya ingin membuat Anda cepat mengerti tanpa harus membaca panjang lebar, namun akhirnya tidak mengerti sama sekali.
  • Pengunjung akan berbagi jika mereka terkesan
Jika 3 hal di atas memenuhi standar konten yang anda buat, maka pengunjung tidak akan ragu untuk membagikan konten anda, dikarenakan konten yang anda buat sangat berguna untuk pengunjung.

Dari beberapa hal sepele di atas anda sudah bisa membuat konten yang berkwalitas, dan bukan tidak mungkin konten anda bisa berada di halaman pertama Google.

Lalu, bagaimana Google menemukan konten yang berkwalitas? bisa saja konten yang kita buat memiliki saingat yang berat!.

Ingat!.
  • Google merupakan mesin pencari terbesar di dunia.
  • Google merupakan mesin yang canggih.
  • Google bisa membaca dan merasakan apakah konten yang kita buat berguna atau tidak.
  • Google selalu memeriksa berapa banyak link yang menuju artikel kita.
  • Google juga selalu memeriksa apakah situs tersebut baik atau tidak.
Jadi jangan terlalu takut Google tidak akan menemukan konten terbaik Anda, jika memang konten yang Anda buat berkwalitas Google akan mempertimbangkannya untuk ditaruh dibagian mana konten Anda, maka dari itu buatlah konten yang berkwalitas untuk Google dan pengunjung tentunya.




Bersambung!!! Lanjutkan lagi nanti :)

Friday, December 16, 2016

Tutorial Membuat Tabel HTML dan CSS Keren

View Article



Tutorial Membuat Tabel HTML dan CSS Keren - Pada tutorial kita kali ini saya akan berbagi Tutorial Membuat Tabel HTML dan CSS Keren, pada dasarnya tabel digunakan di dalam sebuah website bertujuan untuk membuat struktur text menjadi lebih tersusun rapi.

Banyak sekali jenis Tabel yang bisa digunakan di dalam sebuah website, namun kali ini saya akan mencoba memberikan tutorial membuat tabel jenis "Pricing Table", tabel jenis ini biasanya digunakan di sebuah website penjualan atau pendaftaran prabayar.
Gambar 0.1
Tabel yang akan kita buat kali ini kurang lebih akan tampak seperti pada Gambar 0.1, saya tegaskan disini bahwa tutorial kali ini saya hanya akan membagikan tutorial berbentuk style, sehingga tabel ini belum terkoneksi ke dalam database.

Untuk dari itu silahkan anda pantau terus blog Rizki Design ini untuk mendapatkan informasi-informasi terbarunya.

Tutorial Membuat Tabel HTML dan CSS Keren


Langkah pertama dalam pembuatan tutorial kita kali ini adalah membuat 2 file dengan format HTML dan CSS, kenapa saya hanya menggunakan HTML dan CSS saja, kenapa tidak menggunakan JavaScript atau jQuery, karena saya ingin membuat sebuah tabel yang ringan, artinya jika menggunakan HTML dan CSS saja sudah cukup kenapa harus ditambah dengan JavaScript atau jQuery yang bisa saja membebani speed sebuah website.

Disini saya sudah menyiapkan 2 file dengan format Index.html dan Style.css, kedua file ini saya simpan di dalam satu folder, supaya mudah saat memanggil CSS dari HTML.
Gambar 0.2
Text Editor yang saya gunakan adalah Sublime Text v.3.

Langkah selanjutnya adalah memasukan kode HTML di bawah ini ke dalam file Index.html, dan jangan lupa untuk save filenya.


<link rel="stylesheet" type="text/css" href="style.css">
<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Enterprise<span>$59</span></h3>
        <a class="signup" href="">Sign up</a>         
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
            <li><b>20</b> Email Accounts</li>
   <li><b>Unlimited</b> subdomains</li>   
        </ul> 
    </div>
    <div class="plan" id="most-popular">
        <h3>Professional<span>$29</span></h3>
        <a class="signup" href="">Sign up</a>        
        <ul>
            <li><b>5GB</b> Disk Space</li>
            <li><b>50GB</b> Monthly Bandwidth</li>
            <li><b>10</b> Email Accounts</li>
   <li><b>Unlimited</b> subdomains</li>   
        </ul>    
    </div>
    <div class="plan">
        <h3>Standard<span>$17</span></h3>
  <a class="signup" href="">Sign up</a>
        <ul>
            <li><b>3GB</b> Disk Space</li>
            <li><b>25GB</b> Monthly Bandwidth</li>
            <li><b>5</b> Email Accounts</li>
   <li><b>Unlimited</b> subdomains</li>   
        </ul>
    </div>
    <div class="plan">
        <h3>Basic<span>$9</span></h3>
        <a class="signup" href="">Sign up</a>  
        <ul>
            <li><b>1GB</b> Disk Space</li>
            <li><b>10GB</b> Monthly Bandwidth</li>
            <li><b>2</b> Email Accounts</li>
   <li><b>Unlimited</b> subdomains</li>   
        </ul>
    </div>  
</div>

Setelah membuat file HTML, selanjutnya masukan kode CSS di bawah ini ke dalam file Style.css, dan jangan lupa untuk save filenya juga.


body{
  background: #303030;
}

#pricing-table {
  margin: 100px auto;
  text-align: center;
  width: 892px; /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
  font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
  text-shadow: 0 1px rgba(255,255,255,.8);        
  background: #fff;      
  border: 1px solid #ddd;
  color: #333;
  padding: 20px;
  width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
  float: left;
  position: relative;
}

#pricing-table #most-popular {
  z-index: 2;
  top: -13px;
  border-width: 3px;
  padding: 30px 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
  -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
  box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
}

#pricing-table .plan:nth-child(1) {
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;        
}

#pricing-table .plan:nth-child(4) {
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;        
}

/* --------------- */ 

#pricing-table h3 {
  font-size: 20px;
  font-weight: normal;
  padding: 20px;
  margin: -20px -20px 50px -20px;
  background-color: #eee;
  background-image: -moz-linear-gradient(#fff,#eee);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
  background-image: -webkit-linear-gradient(#fff, #eee);
  background-image: -o-linear-gradient(#fff, #eee);
  background-image: -ms-linear-gradient(#fff, #eee);
  background-image: linear-gradient(#fff, #eee);
}

#pricing-table #most-popular h3 {
  background-color: #ddd;
  background-image: -moz-linear-gradient(#eee,#ddd);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));    
  background-image: -webkit-linear-gradient(#eee, #ddd);
  background-image: -o-linear-gradient(#eee, #ddd);
  background-image: -ms-linear-gradient(#eee, #ddd);
  background-image: linear-gradient(#eee, #ddd);
  margin-top: -30px;
  padding-top: 30px;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;     
}

#pricing-table .plan:nth-child(1) h3 {
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;       
}

#pricing-table .plan:nth-child(4) h3 {
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;       
} 

#pricing-table h3 span {
  display: block;
  font: bold 25px/100px Georgia, Serif;
  color: #777;
  background: #fff;
  border: 5px solid #fff;
  height: 100px;
  width: 100px;
  margin: 10px auto -65px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

/* --------------- */

#pricing-table ul {
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
}

#pricing-table li {
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

/* --------------- */
  
#pricing-table .signup {
  position: relative;
  padding: 8px 20px;
  margin: 20px 0 0 0;  
  color: #fff;
  font: bold 14px Arial, Helvetica;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;       
  background-color: #72ce3f;
  background-image: -moz-linear-gradient(#72ce3f, #62bc30);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));    
  background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
  background-image: -o-linear-gradient(#72ce3f, #62bc30);
  background-image: -ms-linear-gradient(#72ce3f, #62bc30);
  background-image: linear-gradient(#72ce3f, #62bc30);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;     
  text-shadow: 0 1px 0 rgba(0,0,0,.3);        
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#pricing-table .signup:hover {
  background-color: #62bc30;
  background-image: -moz-linear-gradient(#62bc30, #72ce3f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));      
  background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
  background-image: -o-linear-gradient(#62bc30, #72ce3f);
  background-image: -ms-linear-gradient(#62bc30, #72ce3f);
  background-image: linear-gradient(#62bc30, #72ce3f); 
}

#pricing-table .signup:active, #pricing-table .signup:focus {
  background: #62bc30;       
  top: 2px;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
  box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; 
}

/* --------------- */

.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}

.clear {
  zoom:1
}

Kode HTML dan CSS sudah kita pasang, langkah selanjutnya silahkan anda cek di Browser kesayangan anda.

Untuk melihat demonya langsung, anda bisa menekan tombol di atas.
Note: Jika artikel ini menurut anda menarik, tidak ada salahnya bukan jika anda bersedia untuk membagikan artikel ini kepada teman-teman anda, supaya mereka juga tau cara membuat tabel keren hanya dengan HTML dan CSS

Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF

View Article

Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF - Dalam tutorial kita kali ini saya akan berbagi sedikit tentang cara Membuat Animasi Loading Untuk Website Tanpa Menggunakan GIF, maksudnya tanpa menggunakan GIF disini adalah kita tidak memerlukan sebuah animasi yang sudah jadi (GIF) ataupun images-images lainnya yang bisa memberatkan spees loading sebuah website. Disini saya hanya akan menggunakan CSS dan HMTL untuk membuat Animasi Loading yang keren.
Gambar 0.1
Pada Gambar 0.1 itu merupakan contoh Animasi Loading yang akan kita buat dalam tutorial saya kali ini, sudah saya jelaskan di atas bahwa saya akan menggunakan CSS dan HTML dalam pembuatan Animasi Loading ini, sehingga tidak akan mempengaruhi spees loading website anda.

Kode CSS dan HTML yang saya gunakan juga tidaklah terlalu panjang, dan kodenya pun bisa dibilang sederhana sehingga anda bisa mudah mengingat kodenya.

Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF


Untuk langkah pertama seperti biasa yaitu menyiapkan 2 buah file dengan format HTML dan CSS, disini saya telah membuat 2 file tersebut dengan nama Index.html dan Style.css, kedua file tersebut saya letakan dalam 1 folder supaya tidak sulit ketika proses pemanggilan dari HTML ke CSS.
Gambar 0.2
Langkah selanjutnya anda hanya perlu memasukan kode HTML di bawah ini di dalam file Index.html, dan jangan lupa untuk save filenya.


<h1>LOADING WEBSITE - RIZKI DESIGN</h1>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Loading 1 -->
<div class="loader loader--style1" title="0">
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
  <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
  <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
    C22.32,8.481,24.301,9.057,26.013,10.047z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 20 20"
      to="360 20 20"
      dur="0.5s"
      repeatCount="indefinite"/>
    </path>
  </svg>
</div>
<!-- Loading 2 -->
<div class="loader loader--style2" title="1">
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
  <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>
</div>

<!-- Loading 3  -->
<div class="loader loader--style3" title="2">
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
  <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>
</div>

<!-- Loading 4 -->
<div class="loader loader--style4" title="3">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="4" height="7" fill="#333">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0s" dur="0.6s" repeatCount="indefinite" />       
    </rect>

    <rect x="10" y="0" width="4" height="7" fill="#333">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.2s" dur="0.6s" repeatCount="indefinite" />       
    </rect>
    <rect x="20" y="0" width="4" height="7" fill="#333">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.4s" dur="0.6s" repeatCount="indefinite" />       
    </rect>
  </svg>
</div>

<!-- Loading 5 -->
<div class="loader loader--style5" title="4">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="4" height="10" fill="#333">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="10" y="0" width="4" height="10" fill="#333">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.2s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="20" y="0" width="4" height="10" fill="#333">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.4s" dur="0.6s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>

<!-- Loading 6 -->
<div class="loader loader--style6" title="5">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="13" width="4" height="5" fill="#333">
      <animate attributeName="height" attributeType="XML"
        values="5;21;5" 
        begin="0s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML"
        values="13; 5; 13"
        begin="0s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="10" y="13" width="4" height="5" fill="#333">
      <animate attributeName="height" attributeType="XML"
        values="5;21;5" 
        begin="0.15s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML"
        values="13; 5; 13"
        begin="0.15s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="20" y="13" width="4" height="5" fill="#333">
      <animate attributeName="height" attributeType="XML"
        values="5;21;5" 
        begin="0.3s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML"
        values="13; 5; 13"
        begin="0.3s" dur="0.6s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>

<!-- Loading 7 -->
<div class="loader loader--style7" title="6">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="4" height="20" fill="#333">
      <animate attributeName="opacity" attributeType="XML"
        values="1; .2; 1" 
        begin="0s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="7" y="0" width="4" height="20" fill="#333">
      <animate attributeName="opacity" attributeType="XML"
        values="1; .2; 1" 
        begin="0.2s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="14" y="0" width="4" height="20" fill="#333">
      <animate attributeName="opacity" attributeType="XML"
        values="1; .2; 1" 
        begin="0.4s" dur="0.6s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>

<!-- Loading 8 -->
<div class="loader loader--style8" title="7">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="8" y="10" width="4" height="10" fill="#333"  opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="16" y="10" width="4" height="10" fill="#333"  opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>

Langkah selanjutnya adalah memasukan kode CSS di bawah ini ke dalam file Style.css, dan jangan lupa untuk save filenya juga.


body{
  padding: 1em;
  background: #2B3134;
  color: #777;
  text-align: center;
  font-family: "Gill sans", sans-serif;
  width: 80%;
  margin: 0 auto;
}
h1{
  margin: 1em 0;
  border-bottom: 1px dashed;
  padding-bottom: 1em;
  font-weight: lighter;
}
p{
  font-style: italic;
}
.loader{
  margin: 0 0 2em;
  height: 100px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top;
}
/*
  Set the color of the icon
*/
svg path,
svg rect{
  fill: #FF6700;
}

Setelah kode HTML dan CSS di pasang, anda tinggal menjalankannya di Browser kesayangan anda. Untuk melihat demonya terlebih dahulu silahkan anda tekan tombol di atas.

Note: Bagikan artikel ini jiga menurut anda menarik. Bagikan artikel ini jika menurut anda bisa membantu teman-teman anda yang sedang membutuhkan

Cara Membuat Form Login Sederhana Tapi Berkelas

View Article

Cara Membuat Form Login Sederhana Tapi Berkelas - Dalam tutorial kita kali ini saya akan memberikan sedikit tutorial tentang bagaimana Cara Membuat Form Login Sederhana Tapi Berkelas, Form Login ini belum saya sambungkan dengan PHP karna tutorial kita kali ini lebih fokus terhadap tampilan / style.
Gambar 0.1
Pada gambar 0.1 merupakan sekilas tampilan Form Login yang akan kita buat kali ini, Form Login ini tidak menggunakan kode JavaScript dan jQuery, sehingga tidak akan mempengaruhi speed loading web anda.

Form Login ini juga hanya menggunakan kode HTML dan CSS yang sangat simple sehingga dapat lebih mudah anda hapal untuk kodenya.

Cara Membuat Form Login Sederhana Tapi Berkelas


Langkah pertama yang harus disiapkan adalah sebuah file dengan format HTML dan CSS, disini saya sudah membuat 2 file dengan nama Index.html dan Style.css.
Gambar 0.2
File Index.html dan Style.css saya taruh di dalam 1 folder agar dapat mudah saat memanggil CSS dari HTML, dan sinisi saya juga menggunakan Text Editor Sublime Text.

Kenapa saya menggunakan Sublime Text, karena menurut saya Fitur yang terdapat di dalam Sublime Text lebih lengkap dan Sublime Text lebih mudah digunakan.
Baca: 10 Text Editor Terbaik Untuk Pemrograman
Untuk langkah selanjutnya silahkan anda masukan kode HTML di bawah ini di dalam file Index.html, dan jangan lupa untuk save filenya.


<!DOCTYPE html>
<html>
<head>
 <title>Cara Membuat Form Login Sederhana Tapi Berkelas</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login">
    <h2 class="login-header">Form Login</h2>
        <form class="login-container">
            <p>
                <input type="email" placeholder="Email">
            </p>
            <p>
                <input type="password" placeholder="Password">
            </p>
            <p>
                <input type="submit" value="Log in">
            </p>
        </form>
</div>
</body>
</html>

Kemudian silahkan masukan kode CSS di bawah ini di dalam file Style.css, dan jangan lupa untuk save filenya juga.


body {
  background: #456;
  font-family: 'Open Sans', sans-serif;
}
.login {
  width: 400px;
  margin: 16px auto;
  font-size: 16px;
}
/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
  margin-top: 0;
  margin-bottom: 0;
}
.login-header {
  background: #28d;
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}
.login-container {
  background: #ebebeb;
  padding: 12px;
}
/* Every row inside .login-container is defined with p tags */
.login p {
  padding: 12px;
}
.login input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
}
.login input[type="email"],
.login input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}
/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
  border-color: #888;
}
.login input[type="submit"] {
  background: #28d;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
}
.login input[type="submit"]:hover {
  background: #17c;
}
/* Buttons' focus effect */
.login input[type="submit"]:focus {
  border-color: #05a;
}

Untuk melihat hasilnya silahkan anda jalankan file Index.html di Browser kesayangan anda.

Form Login ini merupakan Form Login yang menurut saya sederhana tapi tidak kalah jauh dari Form Login yang lainnya. Jika anda tidak suka dengan Form Login yang satu ini, jangan khawatir karna saya masih punya tutorial-tutorial yang lebih keren tentang style Form Login.
Baca: Cara Membuat Form Login Keren Full CSS + HTML
Untuk melihat demonya terlebih dahulu, silahkan klik  tombol diatas.

10 Text Editor Terbaik Untuk Pemrograman

View Article

10 Text Editor Terbaik Untuk PemrogramanText Editor merupakan sebuah software yang biasanya digunakan oleh seorang programmer dalam menulis sebuah kode program. Text Editor kadang digunakan juga oleh seorang web designer untuk menciptakan halaman web yang didesain olehnya. Text Editor umumnya hanya mempunyai fungsi untuk menulis kode program dan tanpa disertai compiler yang terintegrasi.
Gambar 0.1
Di dalam sebuah text editor biasanya terdapat beberapa fitur umum seperti syntax highlightingsearch dan replace sintaks, memberikan komentar pada sebuah blok kode programcode folding, line numberline markingsnippet, dan lainnya.

Seperti beragamnya penduduk di Indonesia yang terdiri dari berbagai suku dan bahasa. Di dalam dunia programming pun terdapat banyak sekali diversifikasi yang tercipta. Jika kita mengacu kepada sistem operasi tentu ada programmer yang menggunakan Mac, Linux, Windows, atau BSD. Jika melihat dari sudut pandang selera, tentunya tampilan dan fitur yang ditawarkan oleh sebuah text editor dapat memiliki fan base masing – masing. Misal saat ini Sublime Text merupakan salah satu text editor yang digandrungi saat ini.

Oleh karena itu, Rizki Design akan mencoba menghadirkan 10 text editor yang dapat digunakan oleh anda untuk keperluan programming. Umumnya text editor yang akan kami bahas adalah text editor yang bersifat free dan ada versinya yang di-free-kan (karena versi lainnya merupakan versi berbayar). Berikut adalah beberapa text editor yang dapat anda gunakan untuk programming.

10 Text Editor Terbaik Untuk Pemrograman


#1. Notepad++

Notepad++
Website Resmi: http://www.notepad-plus-plus.org/
Semboyan: No Semboyan

System Operasi: Windows

Prabayar | Free
Fitur Unggulan:
  • syntax highlighting
  • syntax folding
  • user defined syntax highlighting and folding
  • perl compatible regular expression search/replace
  • customizable GUI
  • document map
  • auto-completion
  • multi-document
  • multi-view
  • WYSIWIG printing
  • zoom in and zoom out
  • multi-language environment supported
  • bookmark
  • macro recording and playback
  • launch with different argument
  • multi-editing
  • column-mode editing
  • line number

#2. Kate

Kate
Website Resmi: http://www.kate-editor.org/
Semboyan: Get an Edge in Editing
System Operasi: Windows, Mac, Linux, BSD
Prabayar | Free
Fitur Unggulan:
  • window splitting
  • multi-document interface
  • embedded terminal
  • session support
  • encoding support
  • bidirectional text rendering support
  • line ending support (Windows, Unix, Mac)
  • open remote files
  • extensible through scripting
  • bookmarking system
  • scroll bar marks
  • line modification indicators
  • line numbers
  • code folding
  • bracket matching
  • highlighting for more than 180 languages
  • vi input mode
  • auto completion
  • smart comment
  • auto indentation
  • rectangular block selection mode
  • search and replace
  • backup and restore

#3. VIM

VIM
Website Resmi: http://www.vim.org/
Semboyan: Vi Improved, a programmers text editor
System Operasi: Windows, Mac, Linux, BSD dan Solaris
Prabayar | Free
Fitur Unggulan:
  • multi level undo
  • multi windows and buffers
  • syntax highlighting
  • command line editing
  • filename completion
  • online help
  • visual selection
  • ex mode
  • view mode
  • gui mode
  • easy mode
  • restriction mode
  • arabic and hebrew support
  • binary mode
  • debugging mode
  • list mode
  • editor server for netbeans support
  • windows stacked
  • windows side by side
  • windows tab pages
  • recovery mode
  • silent mode
  • encryption
  • remote file editing

#4. Nano

Nano
Website Resmi: http://www.nano-editor.org/
Semboyan: Nano's ANOther editor, an enhanced free Pico clone
System Operasi: Mac, Linux, BSD, dn Solaris
Prabayar | Free
Fitur Unggulan:
  • text editor for command line
  • search and replace
  • goto line
  • column numbering
  • smart home
  • backup
  • bold text
  • tab to spaces
  • multi buffer
  • history log
  • undo and redo
  • wrapping text
  • auto indent
  • syntax highlighting

#5. Atom

Atom
Website Resmi: http://www.atom.io/
Semboyan: Hackable Text Editor
System Operasi: Windows
Prabayar | Free
Fitur Unggulan:
  • web based technology desktop text editor
  • file system browser
  • fuzzy finder for quickly opening files
  • fast project-wide search and replace
  • multiple cursors and selections
  • multiple panes
  • snippets
  • code folding
  • a clean preferences UI
  • TextMate grammars importing
  • modular design
  • nodejs integration

#6. Geany

Geany
Website Resmi: http://www.gaeny.org/
Semboyan: Small and Lightweight IDE
System Operasi: Windows, Linux, BSD, Mac, dan Solaris
Prabayar | Free
Fitur Unggulan:
  • virtual terminal emulator
  • widget styling
  • cloning document
  • unicode support
  • folding
  • column mode editing
  • drag and drop text
  • auto-indentation
  • bookmakrs
  • code navigation history
  • search and replace
  • auto completion
  • user definable snippet
  • goto line
  • color schemes menu
  • workspace tags
  • file browser
  • windows spliting
  • export as HTML or LaTex

#7. Komodo Edit

Komodo Edit
Website Resmi: http://komodoide.com/komodo-edit/
Semboyan: No Semboyan
System Operasi: Windows, Linux, BSD, Mac, dan Solaris
Prabayar | Free
Fitur Unggulan:
  • multi language editor
  • auto complete
  • call tips
  • toolbox
  • project & place manager
  • multiple selections
  • skins and icon sets
  • breadcrumbs
  • open files pange
  • minimap
  • smart snippets

#8. Ultra Edit

Ultra Edit
Website Resmi: http://www.ultraedit.com/
Semboyan: No Semboyan
System Operasi: Windows, Linux, dan Mac
Prabayar | Free
Fitur Unggulan:
  • 64 bit file handling
  • unicode support
  • disk based text editing
  • large file handling
  • mulitiline find and replace
  • spell checker
  • localization support
  • syntax highlighting
  • tag matching form XML and HTML
  • FTP client and browser
  • SSH/Telnet Window
  • XML Manager
  • function list
  • project / workspace support
  • environment selector
  • integrated scripting language
  • configurable keyboard mapping
  • column/block mode editing
  • hexadecimal editor
  • code completion
  • auto expanding with Smart Templates
  • auto-completion
  • HTML Toolbar
  • WebSearch Toolbar
  • file encryption / decryption
  • multibyte support

#9. JEdit

JEdit
Website Resmi: http://www.jedit.org/
Semboyan: Java Based Programmer Text Editor
System Operasi: Windows, Linux, dan Mac
Prabayar | Free
Fitur Unggulan:
  • runs on any operating system with java 1.6 or higher virtual machine
  • efficient keyboar shortcut for everything
  • unlimited undo/redo
  • copy paste with unlimited number of clipboards
  • register contents are saved across editing sessions
  • kill ring
  • rict set of keyboard command
  • markers
  • multiple open windows
  • split windows
  • rectangular selection
  • multiple selection
  • word wrap

#10. Sublime Text

Sublime Text

Website Resmi: http://www.sublimetext.com/
Semboyan: The Text Editor You'll Fall in Love With
System Operasi: Windows, Linux, BSD dan Mac
Prabayar | Free
Fitur Unggulan:
  • goto anything
  • command pallete
  • multiple selections
  • distraction free mode
  • split editing
  • instant project switch
  • customize anything
  • plugin API
10 Text Editor Terbaik Untuk Pemrograman sudah saya paparkan di atas, setiap Text Editor memiliki Fitur Unggulan yang berbeda-beda, setiap Text Editor pasti memiliki kekurangan dan kelibihannya tersendiri.

Namun disini saya lebih suka menggunakan Text Editor Subsime Text.

Mungkin masih banyak lagi Text Editor yang belum saya ketahui sehingga saya belum bisa memasukan ke dalam artikel ini, jika anda mengetahui Text Editor selain Text Editor yang tertera diatas, saya berharap anda bisa memberikan tambahan untuk artikel ini.

Cara Membuat Form Login Keren Full CSS + HTML

View Article

Cara Membuat Form Login Keren Full CSS + HTML - Dalam tutorial kita kali ini kita akan mencoba membuat Form Login menggunakan CSS dan HTML, dalam pembuatan tutorial ini kita tidak menggunakan JavaScript ataupun jQuery sehingga jika digunakan untuk sebuah web Form Login ini tidak akan mempengaruhi speed loading sebuah web.

Form Login ini memiliki beberapa fitur di dalamnya, diantaranya:
#1. Responsive - Sehingga memiliki tampilan yang luar biasa dibandingkan dengan Form Login yang biasanya.
#2. Disukai Google -  Mempunyai tampilan menarik (Responsive) bukan hanya disukai oleh Google tapi juga disukai oleh pengunjung, sehingga pengunjung akan betah membca artikel - artikel dalam web tersebut.
#3. Logo -  Terdapat sebuah logo di dalam Form Login yang akan kita buat, dan logo itu bukan merupakan (JPG, PNG, ICO, GIF) tapi logo yang kita gunakan Pure CSS.

Cara Membuat Form Login Keren Full CSS + HTML

Untuk memulai pembuatannya silahkan anda membuat 2 file dengan format:
#1. Index.html
#2. Style.css
Gambar 0.1
 Disini saya menggunakan Sublime Text sebagai Text Editor, dan disini saya sudah menyiapkan 2 file dengan format HTML dan CSS.
Baca: 10 Text Editor Terbaik Untuk Pemrograman
Silahkan anda masukan kode HTML dibawah ini di dalam file Index.html dan jangan lupa untuk save filenya.

<!DOCTYPE html>
<html>
<head>
 <title>Cara Membuat Form Login Keren Pure CSS + HTML</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
    <div class="container">
        <h1>RIZKI DESIGN</h1>
        <div class="login-body">
            <div class="top-login">
                <div class="title">
                    Login Form
                </div>
                <div class="line-1"></div>
                <div class="line-2"></div>
                <div class="line-3"></div>
                <div class="line-11"></div>
                <div class="line-22"></div>
                <div class="line-33"></div>
                <div class="line-111"></div>
                <div class="line-222"></div>
                <div class="line-333"></div>
            </div>
            <div class="character-circel">
                <div class="character-body">
                    <div class="head"></div>
                    <div class="hair1"></div>
                    <div class="hair2"></div>
                </div>
            </div>
            <div class="character-bacground"></div>
            <div class="character-bacground2"></div>
            <div class="character-bacground3"></div>
            <div class="character-circle1"></div>
            <div class="character-circle2"></div>

            <div class="login-box">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="morab31"></div>
                <div class="morab32"></div>
                <div class="morab33"></div>
                <div class="morab34"></div>
                <input type="text" placeholder="Username ...">
                <input type="password" placeholder="Password ...">
                <button class="button">Sign in</button>

                <div class="last-info">
                    <div class="one">
                        Remember Me
                        <input type="checkbox" id="thing">
                        <label for="thing"></label>
                    </div>
                    <div class="two">
                        <a href="#">Create Account</a>
                    </div>
                    <div class="three">
                        <a href="#">Forget Password ?</a>
                    </div>
                </div>
            </div>
            <div class="down-login">
            </div>
        </div>
    </div>
</body>
</html>
Langkah selanjutnya silahkan anda masukan kode CSS di bawah ini di dalam file Style.CSS dan jangan lupa untuk di save filenya.

/*Cara Membuat Form Login Keren Pure CSS + HTML : Rizki Design*/
body {
    margin: 0;
    padding: 0;
    background-color: #3e004d;
    overflow: hidden;
}
.container {
    width: 950px;
    margin: auto;
    overflow: hidden;
}
.container h1 {
    margin-top: 60px;
    font-family: Open Sans;
    font-size: 35px;
    font-weight: 600;
    color: white;
    text-align: center;
}
/* Login Body */
.login-body {
    position: fixed;
    margin-left: 277px;
    width: 400px;
    height: 508px;
    background-color: #2a0138;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0px 13px 33px -10px rgba(0, 0, 0, 0.63);
}
.login-body .top-login {
    background-color: #aa0247;
    width: 420px;
    height: 85px;
    position: absolute;
}
/* LINES LINES LINES + Title */
.top-login .title {
    font-family: Open Sans;
    font-size: 25.5px;
    font-weight: 600;
    color: white;
    text-align: center;
    margin-top: 24px;
}
.line-1 {
    width: 54px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 16px;
    left: 45px;
}
.line-2 {
    width: 10px;
    height: 9px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 16px;
    left: 33px;
}
.line-3 {
    width: 54px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 16px;
    left: -23px;
}
.line-11 {
    width: 44px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 37px;
    left: 30px;
}
.line-22 {
    width: 10px;
    height: 9px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 37px;
    left: 18px;
}
.line-33 {
    width: 54px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 37px;
    left: -37px;
}
.line-111 {
    width: 44px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 60px;
    left: 41px;
}
.line-222 {
    width: 10px;
    height: 9px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 60px;
    left: 30px;
}
.line-333 {
    width: 54px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 60px;
    left: -26px;
}
/* LINES LINES LINES */
/* Character */
.login-body .character-circel {
    position: absolute;
    background-color: #aa0247;
    top: 117px;
    border-radius: 50%;
    width: 130px;
    height: 130px;
    left: 125px;
    overflow: hidden;
}
.login-body .character-body {
    position: absolute;
    background-color: #ff7d4a;
    top: 71px;
    width: 72px;
    height: 72px;
    left: 31px;
    border-radius: 25px;
}
.login-body .character-body:before {
    content: "";
    position: absolute;
    background-color: #aa0247;
    top: -7px;
    width: 30px;
    height: 30px;
    left: 48px;
    border-radius: 12px;
}
.login-body .character-body:after {
    content: "";
    position: absolute;
    background-color: #aa0247;
    top: -7px;
    width: 30px;
    height: 30px;
    left: -6px;
    border-radius: 12px;
}
.login-body .character-body .head {
    position: absolute;
    background-color: #ffb03e;
    top: -51px;
    width: 56px;
    height: 56px;
    left: 8px;
    border-radius: 22px;
    z-index: 1;
}
.login-body .character-body .head:before {
    content: "";
    position: absolute;
    background-color: #85ffff;
    top: 18px;
    width: 9px;
    height: 7px;
    left: 36px;
    border-radius: 8px;
    z-index: 1;
}
.login-body .character-body .head:after {
    content: "";
    position: absolute;
    background-color: #85ffff;
    top: 18px;
    width: 9px;
    height: 7px;
    left: 13px;
    border-radius: 8px;
    z-index: 1;
}
.login-body .character-body .hair1 {
    position: absolute;
    background-color: #85ffff;
    width: 8px;
    height: 27px;
    left: 32px;
    border-radius: 8px;
    z-index: 0;
    top: -66px;
}
.login-body .character-body .hair2 {
    position: absolute;
    background-color: #85ffff;
    width: 8px;
    height: 27px;
    left: 36px;
    border-radius: 8px;
    z-index: 0;
    top: -62px;
    -webkit-transform: rotate(-156deg);
    transform: rotate(-156deg);
}
.character-bacground {
    position: absolute;
    background-color: #5f416a;
    width: 230px;
    height: 25px;
    border-radius: 15px;
    top: 128px;
    z-index: -1;
    left: 89px;
}
.character-bacground:before {
    content: "";
    position: absolute;
    background-color: #5f416a;
    width: 44px;
    height: 21px;
    top: 22px;
    left: 15px;
}
.character-bacground:after {
    content: "";
    position: absolute;
    background-color: #2A0138;
    width: 44px;
    height: 21px;
    top: 24px;
    left: -3px;
    border-radius: 15px;
}
.character-bacground2 {
    position: absolute;
    background-color: #5f416a;
    width: 221px;
    height: 23px;
    border-radius: 15px;
    top: 172px;
    z-index: -1;
    left: 71px;
}
.character-bacground2:before {
    content: "";
    position: absolute;
    background-color: #5f416a;
    width: 44px;
    height: 21px;
    top: 22px;
    left: 152px;
}
.character-bacground2:after {
    content: "";
    position: absolute;
    background-color: #2A0138;
    width: 44px;
    height: 21px;
    top: 22px;
    left: 189px;
    border-radius: 11px;
}
.character-bacground3 {
    position: absolute;
    background-color: #5f416a;
    width: 108px;
    height: 23px;
    border-radius: 15px;
    top: 213px;
    z-index: -1;
    left: 223px;
}
.character-circle1 {
    position: absolute;
    background-color: #70557a;
    width: 11px;
    top: 157px;
    left: 112px;
    height: 11px;
    border-radius: 50%;
}
.character-circle1:before {
    content: "";
    position: absolute;
    background-color: #482554;
    width: 11px;
    left: -14px;
    height: 11px;
    border-radius: 50%;
}
.character-circle1:after {
    content: "";
    position: absolute;
    background-color: #401b4c;
    width: 11px;
    left: -28px;
    height: 11px;
    border-radius: 50%;
}
.character-circle2 {
    position: absolute;
    background-color: #401b4c;
    width: 11px;
    top: 199px;
    right: 93px;
    height: 11px;
    border-radius: 50%;
}
.character-circle2:before {
    content: "";
    position: absolute;
    background-color: #482554;
    width: 11px;
    left: -14px;
    height: 11px;
    border-radius: 50%;
}
.character-circle2:after {
    content: "";
    position: absolute;
    background-color: #70557a;
    width: 11px;
    left: -28px;
    height: 11px;
    border-radius: 50%;
}
.login-box {
    position: absolute;
    width: 300px;
    height: 175px;
    top: 264px;
    left: 50px;
}
.login-box .line1 {
    position: absolute;
    width: 260px;
    height: 1px;
    top: 41px;
    background-color: #ff7d4a;
    left: 20px;
}
.login-box .line2 {
    position: absolute;
    width: 260px;
    height: 1px;
    top: 89px;
    background-color: #ff7d4a;
    left: 20px;
}
.login-box .morab31 {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 85px;
    background-color: #FFFFFF;
    left: 16px;
    -webkit-transform: rotate(-64deg);
    transform: rotate(-64deg);
}
.login-box .morab32 {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 85px;
    background-color: #FFFFFF;
    right: 16px;
    -webkit-transform: rotate(-64deg);
    transform: rotate(-64deg);
}
.login-box .morab33 {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 37px;
    background-color: #FFFFFF;
    right: 16px;
    -webkit-transform: rotate(-64deg);
    transform: rotate(-64deg);
}
.login-box .morab34 {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 37px;
    background-color: #FFFFFF;
    left: 16px;
    -webkit-transform: rotate(-64deg);
    transform: rotate(-64deg);
}
.login-box input[type=text] {
    color: #FFFFFF;
    border: none;
    font-family: Open Sans;
    font-size: 15px;
    padding-left: 35px;
    font-weight: 400;
    background-color: transparent;
    margin-top: 13px;
}
.login-box input[type=password] {
    color: #FFFFFF;
    border: none;
    font-family: Open Sans;
    font-size: 15px;
    padding-left: 35px;
    font-weight: 400;
    background-color: transparent;
    margin-top: 24px;
}
.login-box .button {
    font-family: Open sans;
    font-size: 16px;
    font-weight: 400;
    color: white;
    border: none;
    background-color: #aa0247;
    position: absolute;
    top: 113px;
    right: 42px;
    width: 210px;
    height: 47px;
    border-radius: 25px;
    cursor: pointer;
}
.login-box .button:hover {
    font-family: Open sans;
    font-size: 16px;
    font-weight: 400;
    color: #AA0247;
    border: none;
    background-color: #FFFFFF;
    position: absolute;
    top: 113px;
    right: 42px;
    width: 210px;
    height: 47px;
    border-radius: 25px;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.last-info {
    position: absolute;
    width: 400px;
    bottom: 2px;
}
.last-info .one {
    position: absolute;
    bottom: -45px;
    color: white;
    font-family: Open sans;
    font-size: 14px;
    left: -37px;
    width: 119px;
}
.last-info .one:after {
    content: "";
    position: absolute;
    width: 1.2px;
    height: 25px;
    background-color: white;
    color: white;
    font-family: Open sans;
    font-size: 14px;
    right: -6px;
    top: -2px;
}
.last-info .two a {
    position: absolute;
    bottom: -45px;
    font-family: Open sans;
    font-size: 14px;
    left: 100px;
    text-decoration: none;
    color: white;
}
.last-info .two a:after {
    content: "";
    position: absolute;
    width: 1.2px;
    height: 25px;
    background-color: white;
    color: white;
    font-family: Open sans;
    font-size: 14px;
    right: -15px;
    top: -2px;
}
.last-info .three a {
    position: absolute;
    bottom: -45px;
    font-family: Open sans;
    font-size: 14px;
    left: 224px;
    text-decoration: none;
    color: white;
    font-style: italic;
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label {
    top: 4px;
    background: #aa0247;
    height: 13px;
    width: 13px;
    border-radius: 30%;
    display: inline-block;
    padding: 0 0 0 0px;
    cursor: pointer;
    position: absolute;
    right: 5px;
    -webkit-transition: all 1s;
    transition: all 1s;
}
input[type=checkbox]:checked + label {
    top: 4px;
    background: #FFFFFF;
    height: 13px;
    width: 13px;
    border-radius: 30%;
    display: inline-block;
    padding: 0 0 0 0px;
    cursor: pointer;
    position: absolute;
    right: 5px;
}
/* End Character */
/*Rare Down Login */
.down-login {
    position: absolute;
    background-color: #f93854;
    width: 420px;
    height: 10px;
    bottom: 0;
}
/*Rare Down Login*/
/* do not group these rules */
Untuk melihat hasilnya silahkan anda buka di bworser kesayangan anda.
Baca: Cara Membuat Form Login Sederhana Tapi Berkelas
Untuk melihat demonya silakan anda klik tombol di atas.
Jika tutorial ini menurut anda menarik silahkan share agar teman-teman kita tahu Cara Membuat Form Login Keren Full CSS + HTML