◄ Min  Size Fonts: + | - | ± Color: Max ►

Some Little from me for You

Jika sobat kepengen memiliki menu navigasi dengan konten link-link berjejer sangkin banyaknya, maka lihatlah postingan AA yang berjudul improve skill css anymore with css1k. Berpuluh-puluh demontrasi bisa kalian lihat hanya dengan ukuran CSS file sebesar 1K! Tinggal sedikit sentuhan kreatifitas agar sreg ditanamkan ke dalam blog tercinta :x Kode CSS sedikit, namun mark-up HTML lumayan :D Jadi kita bisa menyebutnya menu reuteung ala CSS1K. Berikut contoh menu-reuteung (edit dikit sana-sini) jsfiddle.net/bebenkoben/gEBrX/show Web jsFiddle dashboardnya diperbaharui ;)) Links resource keren punya sebenarnya sudah banyak tersedia! Tinggal urusan mendapatkannya, cocok apa tidak, mudah apa sulit dan faktor X lainnya ;)

Berikut beberapa links source pilihan

cdpn.io/izswy, cdpn.io/AepGb, cdpn.io/xzjGB, cdpn.io/xgqtc, cdpn.io/KJkEs, cssdeck.com/labs/full/ufct35ys5t, cssdeck.com/labs/full/8852y8sb, cdpn.io/Ayaqv, cssdeck.com/labs/full/forms-validation-styling-semantics, bit.ly/1a8NR07, bit.ly/1a8O2si & bit.ly/1a8ObvR

Coba sobat datangi link-link tersebut, pasti bakalan seru. Kalau merasa kurang besok lagi saja. Berikut bonusnya dari AA membuat form search atau kotak pencarian bergaya hover.

#search input[type="text"]:hover {width: 208px;border:1px solid #CCC;}
#search input[type="text"] {
background: #FFF url("http://2.bp.blogspot.com/-QrhUJtUBTdc/UTZhTNtkwFI/AAAAAAAABB0/SSp7EhBqyak/s000/search_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #FFF;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: fixed;
top: 0px;
right:20px;
}
Markup HTML<form action="http://YOUR-BLOG.blogspot.com/search/" id="search" method="get" target="top">
<input name="q" placeholder="Query here..." size="40" type="text" />
</form>
Happy coding :)
Bbn cheers \m/
Loading...
XSome Little from me for You
Bagi-bagi links keren punya ditambah bonus membuat kotak pencarian full stylish
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE