Hari pertama 2015 saya mau buat tulisan cara membuat menu navigation dan kolom search dibawah header. Sebenarnya, belum ada pembahasan yang menarik untuk saya share di blog, karena alasan malasnya menulis, hehehe. Selain itu memang ada jadwal UAS dikampus.
Tapi biar ada updatean, saya berusaha mengembalikan selera untuk menulis. Namun, InsyaAllah tulisan kali ini ada manfaatnya. Berikut cara membuat Menu Navigation Simple :

Masukkan kode CSS

nav {
    background-color:#333;
    font: 15px arial, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
}
nav ul li.right-nav{float:right;padding-right:10px;}

nav ul {
    height:auto;
    margin:0;
    padding:0 0 0 10px;
    overflow: hidden;
    list-style: none;
    position: relative;
}

nav li {
    list-style:none;
    display:inline;
    margin:0;
    padding:0;
    float:left;
}
nav li a {
    display:block;
    line-height:40px;
    text-decoration:none;
    color:#f3f3f3;
    padding:0 15px;
}

nav li a:hover {
    color:#333;
    background-color:#eee;
}

#search {
    position:relative;
    width:auto;
    height:100%;
    padding:0;
    margin:5px;
    text-align:center;
}

#search-form {
    border-radius:2px;
    margin:0 auto;
    background:#777 url('http://1.bp.blogspot.com/-hol8u-tMI4o/U6a5GKy8xbI/AAAAAAAADxA/axfPxABLUlA/s1600/search.png') 96% 50% no-repeat;
    border:0 none;
    height:28px;
    width:90%;
    color:#f4f4f4;
    font: 15px arial, sans-serif;
    transition:all 0.5s ease 0s;
    padding-left:5px;
    padding-right:5px;
}

#search-form .search-button,#search-form .search-button:hover{
    transition:all 0.5s ease 0s;
    background:#f2f2f2;
    border:0 none;
    float:right;
    cursor:pointer;
    outline:none;
}

#search-form:hover{
    background:#555 url('http://1.bp.blogspot.com/-hol8u-tMI4o/U6a5GKy8xbI/AAAAAAAADxA/axfPxABLUlA/s1600/search.png') 90% 50% no-repeat;
}

#search-form:focus{
    background:#95A5A6 url('http://1.bp.blogspot.com/-hol8u-tMI4o/U6a5GKy8xbI/AAAAAAAADxA/axfPxABLUlA/s1600/search.png') -10% 50% no-repeat;text-shadow:none!important;outline:none;color:#f2f2f2;
}

#box {
    display:none
}

.search-text {
    font-size:15px;
    float:right;
    cursor:pointer;
}

.search-text:hover {
    color:#fff
}


Kemudian berikut kode HTMLnya :

<nav>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Product</a></li>
        <li><a href='#'>Contact Me</a></li>
        <li class='right-nav'>
        <div id='search'>
            <form action='/search' id='searchform' method='get'>
            <input id='search-form' name='q'         onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;' type='text' value='Search here ...'/>
            </form>
        </div>
        </li>
    </ul>
</nav>


Jika kawan ingin menambahkan Font Awsome disetiap Kata yang ada pada Menu Nav, Masukkan data script link diatas </head> dengan

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

 Selipkan Icon, untuk melihat dan memilih Icon Font Awsome klik fortawesome.github.io . Berikut HTML Nav yang saya buat :

<nav>
    <ul>
        <li><a href='#'><i class="fa fa-home"></i>
Home</a></li>
        <li><a href='#'><i class="fa fa-user"></i>
About</a></li>
        <li><a href='#'><i class="fa fa-tags"></i>
Product</a></li>
        <li><a href='#'><i class="fa fa-microphone"></i>
Contact Me</a></li>
        <li class='right-nav'>
        <div id='search'>
            <form action='/search' id='searchform' method='get'>
            <input id='search-form' name='q'         onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;' type='text' value='Search here ...'/>
            </form>
        </div>
        </li>
    </ul>
</nav> 


Jika anda menginginkan Menu Nav dibawah header, maka kode HTML letakkan pada sisi bawah tepat </header>.

Sekian kali ini, selamat mencoba. Keep Happy Blogging.

Kmarin gw update share Template, kali ini gw juga mau membagikan Template Blogger buatan gw. Tema Template yang gw buat juga tidak terlalu jauh berbeda dengan Template-template sebelumnya, namun Theme kali ini sangat Fast Load, dengan meminimalkan banyak gambar yang muncul. Selain itu, Template kali ini juga SEO Friendly, gw cek menggunakan CHKME.COM.

Radja Template

Fitur-fiturnya:
  • Responsive
  • SEO Friendly (100%) Cek di Chkme.com
  • SEO Breadcrumb
  • Menu Drop down
  • Simple Theme
  • etc...
 Cara mengubah Meta Tag bawaan agar Web/Blog kawan menjadi SEO Friendly, ikuti seperti gambar dibawah ini:
Radja Template
Cara menjadikan Style Popular seperti Demo, untuk thumbnail gambar dan cuplikan jangan dicentang:

Cara menjadikan Style Label seperti Demo, pilih style cloud.

Dilarang menghilangkan link Credit menuju Blog saya, kecuali jika anda bisa mengedit ulang style sehingga tampilan jauh berbeda dengan asalnya. Jaga dan hargai karya saya, hehe ;D...

    Kali ini saya mau memberikan hasil template sederhana banget buatan sendiri. Template ini sangat cocok untuk temen-temen ingin menampilkan lebih banyak artikel terbaru pada homepage. Model yang saya buat di leptop saya menampilkan 3 kolom artikel. Inilah ScreenShoot-nya:
    Judul Templatenya adalah HIMAFI Template, gw sebagai anak Fisika UIN JKT sedikit ingin memperkenalkan nama Himafi yang kepanjangannya Himpunan Mahasiswa Fisika. Sebenarnya tidak ada sangkut pautnya dengan Template ini, namun Template ini adalah hasil karya disela-sela kuliah + menggunakan WiFi Gratisan di Kampus hehe ;D.


    Fitur-fiturnya:
    • Sudah Responsive
    • Auto Readmore
    • Related Post
    • Share Button
    • Social Media Button
    • Cool Theme
    • etc...
     Jika temen-temen ingin menampilkan Widget Label/Kategori sesuai demo, Ubah fitur label blog anda dengan model Cloud. Lihat Seperti pada gambar.
    ANDA DILARANG MENGHILANGKAN CREDIT LINK MENUJU LINK BLOG SAYA, HARGAI KARYA ORANG LAIN, jika anda menginginkan Full version, silahkan hubungi kontak saya.