Tutorial Blog for Stylish Blogger: Juni 2010

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN_TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Tempatnya free download mp3 terlengkap Fortysix Mp3 dan bisa pesan pula. Pokok`e top margot top

Your ads here!!!

Assalamu'alaikum Wr Wb - Selamat datang di Blog berat dan aneh ♥ Semoga tidak mengurangi sobat untuk menjamahnya. Sssttt...MOZILLA pakainya yah...! Eit!!! Mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging - Wassalamu'alaikum Wr Wb ☺

▼ ▲

CSS3 Rounded Image With jQuery Plugin

4 Komentar

▼ ▲

CSS Web Lovers

5 Komentar

Selamat berjumpa lagi kawan, sobat, follower tercintaku :x Seperti biasa mau berbagi hasil ngebloglang nih Beben si ganteng kalem :D Berangkat dari web yang benar-benar menyukai CSS. Trik yg biasa memakai script kebanyakan orang membuat, sama web ini mah bisa dibikin hanya dengan menggunakan CSS b-) Web dengan tampilan bergaya scrolling ini bisa dibikin dgn CSS. No cing-cong, no bacot, no talk anymore kemon lets cek gi dot artikel pilihan setelah bloglang mengacak-ngacak webnya >:) :))

Demo1

Kode CSS untuk trik ini, seperti biasa taruh diatas kode ]]></b:skin>

/* The container for the whole thing */
#trigger {
position: fixed;
bottom: 1px;
left: 1px;
width: 100px;
height: 100px;
}
/* The box that says "Trigger", this hides the popup items */
#trigger .trigger-button {
display: block;
width: 100px;
height: 100px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
position: absolute;
z-index: 5; /* Move the trigger over the stack items to hide the items */
background-color: rgba(0,0,0,.8); /* See through for the example */
color: white;
-webkit-box-shadow: 0 0 3px rgba(50,50,50,.8);
-moz-box-shadow: 0 0 3px rgba(50,50,50,.8);
-o-box-shadow: 0 0 3px rgba(50,50,50,.8);
box-shadow: 0 0 3px rgba(50,50,50,.8);
-moz-box-shadow: 0 0 3px rgba(50,50,50,.8);
-o-box-shadow: 0 0 3px rgba(50,50,50,.8);
box-shadow: 0 0 3px rgba(50,50,50,.8);
text-align: center;
line-height: 100px;
font-size: 20px;
text-shadow: 0 0 3px #999;
cursor: default;
}
#trigger ul {
position: absolute;
bottom: 50px;
padding: 0;
margin: 0;
}
/* The stack items */
#trigger ul li {
/* clear the default styles */
margin: 0;
display: block;
opacity: 0.2; /* Would be 0, 0.2 for the example */
/* place the items below the trigger-button */
position: absolute;
bottom: -51px;
/* The size of the items plus padding to allow for the cursor to move from item to item without closing the stack */
padding: 10px;
width: 80px;
height: 80px;
/* Setup the animation effect */
-webkit-transition: -webkit-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
-moz-transition: -moz-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
-o-transition: -o-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
transition: transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
/* Move the origin far to the right to be the axis to rotate around*/
-webkit-transform-origin: 575px 50px;
-moz-transform-origin: 575px 50px;
-o-transform-origin: 575px 50px;
}
/* Move the stack items up to unhide behind the trigger-button */
#trigger:hover ul li {
bottom: -50px;
}
/* Position the stack items for when open by rotating them upwards */
#trigger:hover ul li:nth-child(1) {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
opacity: .9;
}
#trigger:hover ul li:nth-child(2) {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
opacity: .8;
}
#trigger:hover ul li:nth-child(3) {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
opacity: .7;
}
#trigger:hover ul li:nth-child(4) {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
opacity: .6;
}
#trigger:hover ul li:nth-child(5) {
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
opacity: .5;
}
/* Hide any items after the fifth */
#trigger ul li:nth-child(5) ~ li {
display: none;
}
/* Full opacity for hovering over the stack items */
#trigger:hover ul li:hover {
opacity: 1;
}
/* The button/icons for the stack items */
#trigger ul a {
display: block;
background-color: yellow;
border: solid 2px white;
background-image: -webkit-gradient(linear,left top, left bottom,color-stop(0, rgba(100%,100%,100%,.2)),color-stop(1, rgba(100%,100%,100%,0)));
line-height: 76px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
text-align: center;
text-shadow: none;
text-decoration: none;
font-size: 30px;
color: #111;
-webkit-transition: background-color .4s;
-moz-transition: background-color .4s;
-o-transition: background-color .4s;
transition: background-color .4s;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.5);
-o-box-shadow: 0 0 3px rgba(0,0,0,.5);
box-shadow: 0 0 3px rgba(0,0,0,.5);
}
#trigger ul li:nth-child(odd) a{
background-color: teal;
}
#trigger ul li:nth-child(n) a:hover {
background-color: green;
}
/* The next is to create the axis marker for the example */
#trigger ul {
counter-reset: axis;
}
#trigger ul li:after {
display: block;
position: absolute;
left: 573px;
top: 23px;
width: 50px;
height: 50px;
border: dashed green 1px;
counter-increment: axis;
content: "axis " counter( axis );
padding: 2px;
border: dashed 2px green;
text-align: center;
line-height: 50px;
color: rgba(0,0,0,.5);
opacity: .5;
}
#trigger ul li:hover:after {
z-index: 5;
color: black;
opacity: 1;
border-color: red;
-webkit-box-shadow: 0 0 5px yellow;
-moz-box-shadow: 0 0 5px yellow;
-o-box-shadow: 0 0 5px yellow;
box-shadow: 0 0 5px yellow;
}

Kode HTML untuk trik ini juga seperti biasa masukan didalam tag <body>...</body> dan kalau mumet pilih option Add a Gadget ► HTML/Javascript ► :D

<div id="trigger">
<span class="trigger-button">TITLE</span>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</div>

Satu gaya tuh bagi blogger full stylish :-B Come lets go to the look other trick ;))

Demo2

Lihat pada bagian kiri monitor, ada bagian sidebar yg bisa nongol :bz This is CSS code.

/*The Sidebar The Default Settings */
#sidebar {
position: fixed; /* Keeps it in the same place for the viewer.*/
left: 0;
top: 0;
bottom: 0;
z-index: 2000;
background-color: #aaa;
width: 9px;
border-right: 3px solid #000;
}
#sidebar img.label{
position: absolute;
right: 0;
top: 30%;
}
#sidebar ul{
margin: 0;
padding: 0;
width: 59px;
top: 50%;
left: 0;
position: absolute;
display: none; /* To hide the items*/
}
#sidebar ul li{
list-style-type: none;
}
#sidebar ul li a{
border-color: #4174A3;
border-style: solid;
border-width: 1px;
width: 40px;
height: 40px;
margin: 1px auto 1px auto;
display: block; }
#sidebar ul li a:hover{
background-color: #D4E1EE;
}
#sidebar ul li a img{
border: none;
}
/* the hover state */
#sidebar:hover{
width: 65px; /* This makes is pop out. */
}
#sidebar:hover ul{
display: block; /* To show the items instead of not showing them*/
}

And this is for HTML code.

Berikutnya ini sedikit memerlukan kejelian kalau memang berminat mau make :-"

Demo3

Kode CSS ;))

/* navigation menu */
#nav{
position: fixed;
left: 0;
top: 14px;
width: 75px;
height: 11px;
background-image: url(HTTP://GAMBAR-MENU KECIL-BERESOLUSI 75px × 9px.PNG); /* Menu label */
background-position: 0 0;
background-repeat: no-repeat;
z-index: 1000;
}
#nav:hover{
width: 100%; /* note change in width*/
height: 43px;
background-position: left bottom;
background-image: url(HTTP://GAMBAR-MENU KECIL HOVER-BERESOLUSI 75px × 9px.PNG);
}
#nav:hover ul{
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 9px;
/*background-color: #AFAFC0;*/
background-image: url(HTTP://GAMBAR GARIS-BERESOLUSI 1px × 100px.PNG);
border-bottom: 14px solid #636384;
padding: 0 0 0 15px;
margin: 0;
height: 32px;
}
#nav ul{
display: none;
}
#nav ul li{
float: left;
width: 32px;
height: 32px;
list-style: none;
margin: 0 1px ;
}
#nav ul li a span{
display: none;
}
/* The links */
#nav ul li a{
background-image: url(HTTP://GAMBAR-BACKGROUND RESOLUSI 32px × 32px.PNG);
text-decoration: none;
display: block;
width: 32px;
height: 32px;
}
#nav ul li a:hover{
background-image: url(HTTP://GAMBAR HOVER-RESOLUSI 48px × 48px.PNG);
position: relative;
left: -9px;
top: -9px;
width: 48px;
height: 48px;
}
/* the button images */
#nav ul li a {
background-image: url(HTTP://GAMBAR HOME-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="/"]:hover{
background-image: url(HTTP://GAMBAR HOVER HOME-RESOLUSI 48px × 48px.PNG);
}
#nav ul li a[href="new/"]{
background-image: url(HTTP://GAMBAR APA SAJA-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="new/"]:hover{
background-image: url(HTTP://GAMBAR HOVER APA SAJA-RESOLUSI 48px × 48px.PNG);
}
#nav ul li a[href="edit/"]{
background-image: url(HTTP://GAMBAR APA SAJA-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="edit/"]:hover{
background-image: url(HTTP://GAMBAR HOVER APA SAJA-RESOLUSI 48px × 48px.PNG);
}
#nav ul li a[href="manage/"]{
background-image: url(HTTP://GAMBAR APA SAJA-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="manage/"]:hover{
background-image: url(HTTP://GAMBAR HOVER APA SAJA-RESOLUSI 48px × 48px.PNG);
}
#nav ul li a[href="logout/"]{
background-image: url(HTTP://GAMBAR APA SAJA-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="logout/"]:hover{
background-image: url(HTTP://GAMBAR HOVER APA SAJA-RESOLUSI 48px × 48px.PNG);
}
/* The popup text*/
#nav ul li a:hover span{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #39426B;
float: left;
display: block;
font-weight: bold;
position: relative;
left: 30px;
top: 30px;
background-image: url();
padding: 1px;
border: 1px solid;
}
topas{
font-size: 9px;
color: White;
font-weight: bold;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0;
background-color: #373A62;
text-align: center;
padding: 1px 15px 1px 15px;
background-image: url(HTTP://GAMBAR GARIS-RESOLUSI 1px × 14px.PNG);
background-position: bottom;
background-repeat: repeat-x;
}

Kode HTML ;))

<topas>Lorem Ipsum blah bleh blog Menu Panuan</topas>
<div id="nav">
<ul>
<li><a href="/"><span>Home</span></a></li>
<li><a href="new/"><span>New</span></a></li>
<li><a href="edit/"><span>Edit</span></a></li>
<li><a href="manage/"><span>Manage</span></a></li>
<li><a href="logout/"><span>Logout</span></a></li>
</ul>
</div>

Demo4

Kalau yg ini sedikit bingung dari sebelumnya, tapi dikiiiiiiittt deh bingungnya ;)) Pada demo ini ada 3 buah. Beben ambil yg ketiga The Third Jump Menu pada contoh tersebut. Dibutuhkan beberapa gambar nih sob kalau memang mau persis seperti contoh di demo itu . Trik ini dasarnya menjadikan link didalam CSS kita untuk tujuan jump. Maka harus benar² diperhatikan dalam penulisannya. Kode CSS untuk trik ini!!!

.jumpMenu{
position: relative; /* needed */
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
width: 124px;
}
.jumpMenu:hover{
z-index: 10; /* place it over top of the surronding text */
}
/* The label of the jump menu */
.jumpMenu .label{
width: 124px;
height: 14px;
display: block;
position: relative;
z-index: 2; /* key so that the links can hide underneath it */
text-align: center;
cursor: default; /* The pointer cursor gives a better ui feel, I think */
color: Black;
background-color: #bbb;
}
.jumpMenu:hover .label{
background-color: #eee;
color: Black;
}
.jumpMenu ul{
margin: 0;
padding: 0;
height: 0;
position: absolute;
}
.jumpMenu ul li{
list-style: none;
display: inline;
}
.jumpMenu ul a{
display: block;
text-decoration: none;
background-image: none;
width: 124px;
height: 14px;
/* Make it small and place underneath the label which
* hides the links but allows them to gotten to by tabbing */
margin-top: -10px;
position: absolute;
height: 0;
overflow: hidden;
color: black;
background-color: #eee;
}
.jumpMenu ul a:hover{
background-color: #000066;
color: White;
}
.jumpMenu:hover ul a,
.jumpMenu ul a:focus
{
margin-top: 0;
height: 14px;
visibility: visible;
position: static;
overflow: visible;
z-index: 3;
}
#third.jumpMenu {
position: relative;
margin-left: 20px;
}
#third.jumpMenu .label{
width: 127px;
height: 35px;
/* a bit of image replacement */
overflow: hidden;
text-indent: -9000px;
background-image: url(jumpmenuButton.png);
background-color: transparent;
}
#third.jumpMenu:hover ul{
background-image: url(hoverBg.png);
background-repeat: no-repeat;
width: 135px;
height: 236px;
position: absolute;
left: 10px;
top: 2px;
}
#third.jumpMenu:hover ul a[href="http://address-1.com/"]{
background-color: transparent;
position: absolute;
z-index: 2;
width: 88px;
height: 31px;
text-indent: -9000px;
background-image: url(launch.png);
top: 89px;
left: 42px;
}
#third.jumpMenu:hover ul a[href="http://address-1.com/"]:hover, #third.jumpMenu:hover ul a[href="http://address-1.com/"]:focus{background-image: url(launchHover.png);}
#third.jumpMenu ul a[href="http://address-1.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 88px;
height: 31px;
text-indent: -9000px;
background-image: url(launchHover.png);
}
#third.jumpMenu:hover ul a[href="http://address-5.com/"], #third.jumpMenu:hover ul a[href="http://address-5.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 52px;
height: 36px;
text-indent: -9000px;
background-image: url(site.png);
top: 209px;
left: 72px;
}
#third.jumpMenu:hover ul a[href="http://address-5.com/"]:hover, #third.jumpMenu:hover ul a[href="http://address-5.com/"]:focus{
background-image: url(siteHover.png);
}
#third.jumpMenu ul a[href="http://address-5.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 52px;
height: 36px;
text-indent: -9000px;
background-image: url(siteHover.png);
}
#third.jumpMenu:hover ul a[href="http://address-4.com/"]{
background-color: transparent;
position: absolute;
z-index: 2;
width: 179px;
height: 47px;
text-indent: -9000px;
background-image: url(playground.png);
top: 119px;
left: -27px;
}
#third.jumpMenu:hover ul a[href="http://address-4.com/"]:hover{
background-image: url(playgroundHover.png);
}
#third.jumpMenu ul a[href="http://address-4.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 179px;
height: 47px;
text-indent: -9000px;
background-image: url(playgroundHover.png);
}
#third.jumpMenu:hover ul a[href="http://address-2.com/"]{
background-color: transparent;
position: absolute;
z-index: 2;
width: 81px;
height: 37px;
text-indent: -9000px;
background-image: url(about.png);
top: 47px;
left: 62px;
}
#third.jumpMenu:hover ul a[href="http://address-2.com/"]:hover{
background-image: url(aboutHover.png);
}
#third.jumpMenu ul a[href="http://address-2.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 81px;
height: 37px;
text-indent: -9000px;
background-image: url(aboutHover.png);
}
#third.jumpMenu:hover ul a[href="http://address-3.com/"]{
background-color: transparent;
position: absolute;
z-index: 2;
width: 114px;
height: 38px;
text-indent: -9000px;
background-image: url(rant.png);
top: 177px;
left: 30px;
}
#third.jumpMenu:hover ul a[href="http://address-3.com/"]:hover{
background-image: url(rantHover.png);
}
#third.jumpMenu ul a[href="http://address-3.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 114px;
height: 38px;
text-indent: -9000px;
background-image: url(rantHover.png);
}

Kode HTML, perhatikan sekali lagi link. Dalam kode penulisan dan gambar harus benar.

<div class="jumpMenu" id="third">
<span class="label">Jump Menu 3rd</span>
<ul>
<li><a href="http://address-1.com/">Title-1</a></li>
<li><a href="http://address-2.com/">Title-2</a></li>
<li><a href="http://address-3.com/">Title-3</a></li>
<li><a href="http://address-4.com/">Title-4</a></li>
<li><a href="http://address-5.com/">Title-5</a></li>
</ul>
</div>

Itulah beberapa artikel gaya yg Beben pilih di web keren dan gaya punya . Silahkan satroni webnya guna memperdalam trik dan tips yg ada :) Pamit :)>-85V9C7B2EVYU

▼ ▲

Menu Menu

3 Komentar

Baca dulu dong postingan ini Hybrid Menu, karena postingan kali ini akan bercerita tentang menu. Nah, yang dimaksudkan pasti sudah mengerti. Menu disini bukan menu untuk makanan sob :D melainkan menu navigasi pada web/blog :) Macam dan jenis bisa jadi rujukan mau yg mana sobat memakainya ;)) Basa basinya sudah ah, soalnya bakalan panjang nih postingan :-"

SohTanaka

Menu navigasi kreasi SohTanaka ini prinsip kerja dengan menggunakan gambar. Maka itu harus ada gambarnya :D DEMO. Disini gambarnya nih Download Picture. Setelah didownload, dihosting gambarnya ya :)

Letakan kode CSS berikut sebelum kode ]]></b:skin>

.container {
width: 960px;
height: 58px;
position: absolute;
font-size: 1.2em;
}
ul#topnav {
margin: 0 0 20px; padding: 0;
list-style: none;
width: 960px;
float: left;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
}
ul#topnav a {
float: left;
display: block;
height: 58px;
text-indent: -99999px;
background-position: left top;
}
ul#topnav a:hover {
background-position: left -58px;
}
#home li.home a,
#about li.about a,
#services li.services a,
#portfolio li.portfolio a,
#contact li.contact a,
#blog li.blog a {
background-position: left bottom;
}
ul#topnav li.home a {
background-image: url(home.jpg);
width: 120px;
}
ul#topnav li.about a {
background-image: url(about.jpg);
width: 147px;
}
ul#topnav li.services a {
background-image: url(services.jpg);
width: 157px;
}
ul#topnav li.portfolio a {
background-image: url(portfolio.jpg);
width: 182px;
}
ul#topnav li.contact a {
background-image: url(contact.jpg);
width: 179px;
}
ul#topnav li.blog a {
background-image: url(blog.jpg);
width: 175px;
}

biru

Masukan kode HTML diantara tag <body>...</body>

<div class="container">
<ul id="topnav">
<li class="home"><a href="http://">Home</a></li>
<li class="about"><a href="http://">About Us</a></li>
<li class="services"><a href="http://">Services</a></li>
<li class="portfolio"><a href="http://">Portfolio</a></li>
<li class="contact"><a href="http://">Contact</a></li>
<li class="blog"><a href="http://">Blog</a></li>
</ul>
</div>

Save.
Demo

Nah itu menu pertama full stylish sob :D Kita lanjut ke menu yg sederhana yuk, tapi gaya juga atuh :))

Aext.Net Magazine

Disini ada 2 buah menu sob! Vertikal dan horizontal gaya yg dibuatnya ;)
>> Horizontal

Letakan kode CSS seperti biasa.

#horizontal {
width: auto;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#horizontal li {
clear: both;
height: 2em;
}
#horizontal li a {
float: left;
display: block;
padding: 4px;
text-decoration: none;
color: #666;
text-transform: uppercase;
margin-bottom: 5px;
margin-right: 10px;
}
#horizontal li:hover a,
#horizontal li a:hover
{
background: #999;
color: #fff;
}
#horizontal ul {display: none;}
#horizontal li:hover ul {display: block;}
#horizontal ul {
list-style: none;
float: left;
margin: 0;
padding: 4px 8px;
}
#horizontal ul li {
float: left;
clear: none;
margin: 0;
padding: 0;
width: auto;
height: auto;
color: #999;
}
#horizontal li:hover ul li a,
#horizontal ul li a
{
display: inline;
padding: 0 6px 0 0;
float: none;
text-transform: lowercase;
color: #999;
background: none;
}
#horizontal li:hover ul li a:hover,
#horizontal ul li a:hover
{
background: #aaa;
color: #000;
}

Kode HTML juga sama seperti biasa masukinnya yah sob :D

<ul id="horizontal">
<li>
<a href="#">Parent Item 1</a></li>
<li>
<a href="#">Parent Item 2</a><ul>
<li><a href="#">Child Item 1</a></li>
<li><a href="#">Child Item 2</a></li>
<li><a href="#">Child Item 3</a></li>
</ul>
</li>
<li><a href="#">Parent Item 3</a>
<ul>
<li><a href="#">Child Item 1</a></li>
<li><a href="#">Child Item 2</a></li>
</ul>
</li>
<li><a href="#">Parent Item 4</a></li>
</ul>

Save.
Demo

Yang vertikal dateng ajah ke webnya :))

HiFi CMS for Designers

Kode CSS

#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0}
#trans-nav li {float: left; position: relative; padding: 0; line-height: 40px; background: #5a8078}
#trans-nav li:hover {background-position: 0 -40px;}
#trans-nav li a {display: block; padding: 0 15px; color: #fff; text-decoration: none;}
#trans-nav li a:hover {color: #6CCE6D;}
#trans-nav li ul {opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0;}
#trans-nav li:hover ul {opacity: 1;}
#trans-nav li ul li {float: none; position: static; height: 0; line-height: 0; background: none;}
#trans-nav li:hover ul li {height: 30px; line-height: 30px;}
#trans-nav li ul li a {background: #63867f;}
#trans-nav li ul li a:hover {background: #5a8078;}
#trans-nav li {-webkit-transition: all 0.2s;}
#trans-nav li a {-webkit-transition: all 0.5s;}
#trans-nav li ul {-webkit-transition: all 1s;}
#trans-nav li ul li {-webkit-transition: height 0.5s;}

Kode HTML

<ul id="trans-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Widgets</a></li>
<li><a href="#">Thingamabobs</a></li>
<li><a href="#">Doohickies</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>

Save.
Demo

SohTanaka2

Kode CSS

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 970px;
list-style: none;
position: relative;
font-size: 1.3em;
background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li.on a {
background-color: #1376c9;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 5px 10px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover {background: #1376c9 url(topnav_active.gif) repeat-x; }
ul#topnav li span {
float: left;
padding: 10px 0;
position: absolute;
left: 0; top:34px;
display: none;
width: 970px;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

biru

Picture

Kode HTML

<ul id="topnav">
<li class="on"><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<span>
<a href="#">Your Title</a> |
<a href="#">Your Title</a> |
<a href="#">Your Title</a>
</span>
</li>
<li>
<a href="#">Services</a>
<span>
<a href="#">Your Title</a> |
<a href="#">Your Title</a> |
<a href="#">Your Title</a>
</span>
</li>
<li>
<a href="#">Portfolio</a>
<span>
<a href="#">Your Title</a> |
<a href="#">Your Title</a> |
<a href="#">Your Title</a> |
<a href="#">Your Title</a> |
<a href="#">Your Title</a>
</span>
</li>
<li><a href="#">Contact</a></li>
</ul>

v1.3.2

Letakan scriptnya dibawah tag <head>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">//<![CDATA[
$(document).ready(function(){$("ul#topnav li").hover(function(){$(this).css({'background':'#1376c9 url(topnav_active.gif) repeat-x'});$(this).find("span").show();},function(){$(this).css({'background':'none'});$(this).find("span").hide();});});//]]></script>

Save.
Demo

Design your way

Mungkin segitu aneka menu yg bisa Beben sajikan (:| Kalau mau menengok ini nih ;)) dan sobat bisa mempelajarinya di . Dadah :-h >-)

▼ ▲

Accordion Menu With CSS3 Transitions

7 Komentar

CSS3 lagi ah postingannya ;)) seru-seru :)) Kali ini mengenai make an accordion menu using CSS3 transition Cocok untuk menyembunyikan content panjang atau memang sengaja disembunyikan :D di blog sobat. Baiklah mari kita tengok screenshotnya...dalam bentuk gambar nan indah :))

Itu gambar tampak sebelum dan setelah, akan menjadi...

Tuh lihat dengan CSS doang tuh sob :D Bisa membuat accordion dengan CSS3 mah yah :"> Ayo bagaimana caranya, dan itu bisa didapatkan setelah memencet tombol read more :))

Letakan CSS berikut diatas/sebelum kode ]]></b:skin>

#accordion {
margin-top: 5px;
}
#accordion .item {
width: auto;
height: 30px;
overflow: hidden;
transition: height ease-in-out 500ms;
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border: 1px solid #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 3px;
}
#accordion a {
display: block;
height: 20px;
line-height: 20px;
background: #aaa;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
font-weight: bold;
}
#accordion p {
height: 100px;
overflow:auto;
padding: 1px;
}
#accordion div:hover {
height: 180px;
}
#accordion div:hover a {
border-bottom: 1px solid #ccc;
font-weight: bold;
color: #7FFF7F;
}

Letakan HTML berikut didalam tag <body> ... </body>

<div id="accordion">
<div class="item">
<a href="#">Your Title</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div class="item">
<a href="#">Your Title</a>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>
</div>
<div class="item">
<a href="#">Your Title</a>
<p>Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum...</p>
</div>
<div class="item">
<a href="#">Your Title</a>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
</div>
</div>

Save.

Pada langkah kedua jika bingung Add a Gadget ► HTML/Javascript :D Kode CSS diatas telah mengalami penambahan guna maknyus dalam pemakaian ;) Happy blogging \m/

▼ ▲

Make Your Blog Full Art

4 Komentar

▼ ▲

Easy jQuery Tooltip Plugin

3 Komentar

Mengenai postingan sebelumnya Make The Links be Funky ternyata sinergi dengan trik Tooltip. Artikel ini disadur dari web gaya punya, dimana artikelnya memang membuat kita betah dalam membaca dan praktek 1stwebdesigner. Disana sobat akan menemukan artikel 30 jQuery Tooltip Plug-in :-bd Hebat dah webnya, mengumpulkan postingan mengenai suatu tutorial langsung berebet buanyak :x

Seperti yg dijanjikan tadi Beben si bloglang ganteng kalem mau berbagi trik tooltips yg simpel tapi memang stylish punya b-)

Demo tooltip pada link.

class="tooltip"

Demo tooltip pada link dengan gambar.

class="preview"

Demo tooltip link tulisan dan gambar.

class="screenshot"

Original post by Css Globe.

Kalau itu dipisah trik tooltipnya, sesuai selera mau mana yg bermanfaat. Bagaimana kalau itu semua jadi satu :-/ Yuk mari dilanjut jalan-jalan ;)) Trik ini dari web . Disana sobat akan mendapatkan trik tooltip pada titel secara sederhana ;) Dari demonya , ini yg akan Beben kupas! cek get dot...

Pertama-tama harus memiliki script jQuery minimal versi berikut.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Letakan kode CSS berikut diatas/sebelum kode ]]></b:skin>

span {
display:none;
position:absolute;
z-index:1000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.tooltip1 {
background:#5a85a5 url(http://GAMBAR-RESOLUSI 48px x 48px.PNG) 10px center no-repeat;
color:#fff;
min-height:30px;
padding:15px 15px 10px 55px;
opacity:0.9;
}
.tooltip2 {
background:#363636;
padding:3px;
color:#fff;
text-align:center;
}
.tooltip3 {
background:#777;
color:#fff;
padding:5px;
border:1px solid #f00;
}

Masukan script pemanggilnya diatas/sebelum tag </body>

Save.

Berikut penulisan ketika sobat mau memosting sebuah link.

Contoh pertama.

<div class="tooltips">
jQuery Tooltip Demo<span class="tooltip1">Lorem ipsum dolor sit amet.</span>
</div>

Contoh kedua.

<div class="tooltips">
Sample Content<span class="tooltip2"><img src="http://LINK-GAMBAR.PNG"/><p>Epsum factorial</p></span>
</div>

Contoh ketiga.

<div class="tooltips">
Sample Navigation<span class="tooltip3">This is a normal tooltip</span>
</div>

Intinya dalam penulisan sebuah link nanti pada postingan harus di tag <div class="tooltips">...</div> dan titik-titik tersebut diisikan dgn penulisan link beserta attribute class="tooltip1/tooltip2/tooltip3" Gambar diatas merupakan demo yg sudah Beben praktekan dan its work. See you bay bay :-h Happy blogging \m/ salam blogger!!!

▼ ▲

Kayaknya postingan kali ini masih mengenai CSS3 nih sob ;)) Bagi sobat yang sudah membaca postingan Beben sebelumnya tools css by westciv. Kalau sudah mencoba tools yg ada di web itu mungkin sobat bisa melihat tulisan About... dipojok kiri bawah :-/

About... Tulisan tersebut jika disorot dengan cursor, maka akan terbuka footer yg tersembunyi :D Seperti postingan Beben mengenai . Ternyata bisa menggunakan CSS3 dalam membuat trik ini sob. Serupa tapi tak sama ;))
Langkah-langkahnya :

Cari kode </b:skin>
Masukkan CSS berikut sebelum/diatas kode pada langkah pertama.

#bottom{position:fixed;bottom:0;background-color:#333;width:100%;color:#bfbfbf;font-size:.9em;text-shadow:none;z-index:10000;background-image:0 to(#444), color-stop(0.6,#000));opacity:.9;-webkit-transition:top 1s;-o-transition:top 1s;top:100%;left:0;padding:1em 0 0}
#bottom:hover{top:45%}
#bottom a:link,#bottom a:visited{color:#eee;text-decoration:none;font-weight:700;text-shadow:1px 1px 1px #fff}
#f00t{color:#fff;text-decoration:none;font-weight:700;position:absolute;top:-2em;background-color:#FF8640;font-size:1.3em;text-align:center;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;background-image:0;text-shadow:1px 1px 1px #444;margin-left:.1em;box-shadow:2px 2px 2px #bbb;-webkit-box-shadow:2px 2px 1px #bbb;-moz-box-shadow:2px 2px 1px #bbb;border-color:#e1563e;border-style:solid;border-width:2px;padding:.3em .7em}
#bottom>div{float:left;width:23%;padding:0 1%}
#bottom>p{clear:both;margin-top:3em;text-align:right;width:98%}

Masukkan kode HTML berikut sebelum/diatas kode </body>

<div id="bottom">
<div id="f00t">Your Title???</div>
<div>
<p>Lorem ipsum dolor sit amet <a href="/">Your title link</a> by <a href="/">Beben Koben</a> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
</div>
<div>
<p>At vero <a href="/">Style Master</a>, eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div>
<p>Stet clita kasd gubergren, <a href="/">your title</a> no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, <a href="/">your title</a>.</p>
<p>consetetur sadipscing elitr <a href="/">your title</a>.</p>
</div>
<p>© 2009—2010 <a href="/">your title</a> hacked by <u>Beben Koben</u></p>
</div>

Save.

Pada langkah kedua ada tulisan berwarna hijau. Itu rubah untuk mendapatkan tinggi hover sesuai yg diinginkan. Dapatkan panduan CSS gaya punya di . Selamat menyambut CSS3 dan HTML5 :x and happy blogging with me si bloglang ganteng kalem.
Inspiration by www.westciv.com

▼ ▲

Tools CSS by Westciv

2 Komentar

▼ ▲

Dock or Footer

6 Komentar

▼ ▲

HTML5 Has Been Present

4 Komentar

▼ ▲

Looking for The Directory

6 Komentar

Sekian lama BW (Blog Walking) selalu menemukan informasi yang baru, trendi, unik dan GAyA :)) Jujur kalau mau ngomong, hampir tidak pernah menclok ke blog yg notabene sudah jadi web, kebanyakan Beben si bloglang malah cari blog yg masih berdomain blogspot :D Malah dapet ilmu dari web-web developer sob =)) Dari minta blogroll ama yg punya, sampe komen-komenan yg akunya malah roaming =)) Salut buat master Abu Farhan dan Choen :-bd kreasinya menghiasi dunia perbloggeran ;))

Enak sih enak BW, kalao dapet yg diinginkan, empet kalau gak dapetnya :"> Saran aku kalo ketemu dengan web/blog berbicara tutorial, langsung cari label/kategori how to, blogging, tutorial kalau yg suka script cari deh buanyak b-) (jangan pernah lupa melihat kiri kanan didalam sebuah blog) Jangan terpaku pada postingan barunya saja sob ;) Simpan link yg sudah pernah dijumpai, jgn sampe hilang. Tak ayal kita mungkin susah lagi nemunya kan. Kesampingkan keluh kesah yg melanda guna apa yg kita cari itu terpenuhi (ahaaaiii prikitiw lebay mode On)

Ini dia hasil walking Beben mengenai dimana sobat bisa menemukan ide, inspirasi dan referensi berdasarkan tahun situs dibuat, jumlah halaman yang terindeks di Google, jumlah link balik ke domain sebagaimana dicatat oleh Yahoo, Google PageRank dari homepage. Apakah link DoFollow, Nofollow atau redirect. Lokal data, jika ada, apakah ada kebijakan editorial atau apakah mereka menerima apa-apa, dan saya juga diperiksa indeks untuk perjudian, farmasi dan situs-situs porno untuk melihat apakah mereka link ke banyak spam berkualitas rendah situs. Semua itu diclaim dengan title

The Best Blog Directory List in the World...Ever!

Blogged

8,140

Blogarama

171,180

BlogCatalog

568

Bloggernity

227,763

Bloghub

278,768

Globe of Blogs
Blog Search

305,116

BlogToplist

3,192

Bloggapedia

465,558

Blog Flux

12,315

Blogs Rating
B-Collection.com
Blogville
MyBlog2u
Blog Listing
Blog Engage
TopBlogArea

5,968

BlogExplosion

372,374

LSBlogs
Getblogs.com
BlogZ
Technorati

577

blogio.net

577

Spillbean.com
Blog Site List
ShoutyourSite.com
Yahoo! Blog

Dmoz ODP

847

Blloggs.com
BlogBurst
blog Folders
BLOGFINDS
Best Blogs

212,675

blogdirectory.me
Blog Hints
Blog Collector
Blog-Directory.org
BlogIntro.com
Best of the Web
BloggerNow
MV Blogs
Submitblognow

1,004,276

Wil's Domain

634,935

MyBlogLog

4,712

B4Blogs.Com
Quality Blogs
Free Blog Directory
Blog Directory
BlogDire
BlogWebDirectory
Blog Rate Directory
FuelMyBlog

570,413

TopOfBlogs

41,792

Blog Ratings
Blog Search

1,504,509

Blog Seek
Blogzila
Go Blogz
blogBunch
Blogs By Country
BlogDirectory.ws
Buzzer Hut
Blogger-Tips
BlogMeeting
Spread My Blog
Blogz-Search
weblogs
BloggerCyber
JustBlogz
BlogsDirectory
DPN Blog
AllForBlog

Di bagian ini terdapat link-link yg bermanfaat untuk mencari resource dan tools bagi plat form blog ;)

alvit.de
e-learningcentre.co.uk

Fiuhhh...tuh ngasih dah direktori buat sobat-sobat yg mau menterkenalkan blog atau webnya :)) :-bd Artikel ini diambil dari . Kunjungi webnya untuk mendapatkan artikel gaya lainnya :-h

Tutorial blog for full stylish blogger - Freedom of expressions and system of brains.

RESOURCE

GRAPHICS STATUS

Laman

My ETC

TRANSLATE

KATEGORI

JOINT WITH ME ON g+ PAGE

ARSIP

RECENTLY

FACEBOOK PAGE