Trik Komputer: Juni 2010

Rabu, 30 Juni 2010

CSS3 Rounded Image With jQuery Plugin

Duh ngebleng nih ide mo mosting apaan ampe meuleuneung ~X( Ternyata BW benar-benar melelahkan :-S Berhubung lagi hot-hotnya CSS3, ya sudah mari kita membahas sedikit masalah yang ada pada browsingan mengenai webkit rounded corner :-/ Lebih spesifiknya kode pada inset box shadow yg kurang tampil secara sempurna pada Mozilla Firefox. Secara pecinta browsingan tersebut maka aku posting deh ;)) :D

Itu demo bagaimana kita akan meng-fixed CSS3 rounded images with jQuery plug-in :-" Dengan sentuhan span tag sederhana membuat gambar kita akan bertambah GAYA :)) Nah mari kita eksplore, how to do it :">

.rounded {
display: inline-block;
border: solid 1px #000;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

]]></b:skin>

Untuk mengfixed kita membutuhkan javascript!

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Plug-in

<head>

HTML

<img src="http://link-gambar.gif" height="" width="" alt="" class="rounded" />

class="rounded"

Save.

Original posted :-bd

Webdesignerwall

See yah :-h

Minggu, 27 Juni 2010

CSS Web Lovers

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 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

Sabtu, 26 Juni 2010

Menu Menu

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 :-"

www.sohtanaka.com/web-design/active-state-in-css-navigations

Menu navigasi kreasi SohTanaka ini prinsip kerja dengan menggunakan gambar. Maka itu harus ada gambarnya :D 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.

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

www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery

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.

Design your way

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

Jumat, 25 Juni 2010

Accordion Menu With CSS3 Transitions

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

Semakin maju browse sekarang ini. beraneka ragam bermunculan dengan maraknya :x Dari border radius, transitions, transforms, animations dan seabrek fitur lainnya sekarang menghiasi perkembangan CSS khususnya CSS3 :) Terlihat jelas pada para pengenmbang safari, mozilla, chrome, opera yg berlomba-lomba dalam penyempurnaan :D Contoh simpel animasi yaitu seperti .

Bermain dengan hover pada CSS3 ini, dapat menghasilkan kreasi :-bd Web Designers Desk. Cek cek cek ;) Bermain dengan gradient (warna dg efek diembos gitoooh)

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.

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.

Semua trik itu bisa sobat dapatkan di The Art of Web. Cuma mau kasih tahu itu saja kok :D kabuuurrr...

Kamis, 24 Juni 2010

Easy jQuery Tooltip Plugin

Mengenai postingan sebelumnya 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 Blufusion.net. Disana sobat akan mendapatkan trik tooltip pada titel secara sederhana ;) Dari demonya Demos-Blufusion.net, 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!!!

Rabu, 23 Juni 2010

Make The Links be Funky

Selamat berjumpa lagi dengan gue bloglang ganteng kalem, yang selalu membawa artikel GAYA punya =)) Makanya mau mosting lama karena ngubek-ngubek cari postingan yg unik, gaya, dan berbeda :D Diawali dari iseng-iseng BW (Blog Walking), mentok ke web berisikan project/lab pada bagian menunya dan waktu dibuka...WOW isinya good good b-) Dimulai dengan artikel sederhana sampai artikel sedikit memerlukan skill untuk memahaminya :)

Web tersebut bisa sobat satroni Arc90. Biar cepat ada apa saja didalam lab web tersebut, silahkan langsung menuju Arc90 Lab. Silahkan diubek-ubek deh itu webnya biar gaya blog kita nih ;)) Sebenarnya mau kasih tau mengenai ini :D

Kalau beres terbuka dengan full halaman blog ini maka ketiga link tersebut akan ada thumbnail (gambar screenshot webnya) Bagaimana itu bisa terjadi :P

Lakukan registrasi hanya dengan mengetikkan e-mail sobat pada kotak yg tersedia Websnapr.
Tunggu dan buka e-mail sobat guna mendapatkan verifikasi.
Letakkan kode yg didapat dari email, lalu masukkan pada kotak dihalaman websnapr, dan ikuti langkah yg diberikan.
Beres.

Are you interesting with :-" and that will like it: @BebenKoben, @Anywhere, @Twitter

Senin, 21 Juni 2010

My Reference Link

Hmmm...semakin lama mempelajari dunia blog khususnya dan web pada umumnya semakin seru, walau mumet dikepala :D Tapi setelah sekian lama membaca-baca artikel dari para master web sedikit ngeuh lebih dalam bahasa per-weban ini sob :) Singkat kata bahasa yang digunakan pada basic blogspot yaitu menggunakan bahasa direktori XHTML. Nah mengapa apabila kita mengedit template kita suka terdapat pesan error. Salah satunya mungkin bahasa yg tidak valid dengan phrase yg dimiliki oleh blogger. Lihat pada bagian paling atas pada edit editor sobat...

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Seperti penjelasannya , dan inilah tag/bahasa yg secara umum dapat dipakai dan ini karakter sederhana yg dapat dipakai . Sebenarnya postingan dihalaman ini akan selalu diupdate seperti halaman² yg lain didalam blog ini untuk mencari inspirasi dari web-web pilihan. Link-link ini dipilih karena selain menerangkan web pada umumnya, karena terdapat artikel bermanfaat untuk kategori blogging.

Sampai bertemu lagi dengan link-link hebat pilihan Beben si bloglang ganteng kalem :-bd

Sabtu, 19 Juni 2010

Make Dock or Footer With CSS3

Kayaknya postingan kali ini masih mengenai CSS3 nih sob ;)) Bagi sobat yang sudah membaca postingan Beben sebelumnya . 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

Jumat, 18 Juni 2010

Tools CSS by Westciv

Postingan kali ini merupakan dari pengembangan dari postingan beben yang sebelumnya mengenai . Masih mengenai CSS3 dan attribute apa saja yg dapat dipakai dalam membikin blog kita tambah GAYA =)) Dipersempit lagi saya mau menerangkan mengenai CSS3 bentuk Transforms, Text Stroke, Box Shadow, Text Shadow, Radial Gradients, dan Linear Gradients :D Kalau browsingan tidak support terhadap bahasa CSS3 anyar ini tidak akan dapat terlihat sob ;) (gak ngefek) Masih asing ditelinga dan dimata form CSS3 yg disebutkan gue diatas tadi :p Here we go...

Transforms

Contoh bentuk dengan menggunakan kode transform, rotate, translate, skew, transform-origin yang akan terlihat efeknya pada browsingan Safari 4, Firefox 3.5, Opera 10.5, Chrome dan Internet Explorer yg teranyar...hehehehe!!!

Text Shadows

Contoh tulisan text shadows dengan menggunakan efek h offset, v offset, dan blur. 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...hehehe!!!

Box Shadows

Forms CSS dengan perintah/kode untuk Box Shadows. Perhatikan pada sisi kanan dan bawah box ini...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...hehehe!!!

Tools yg mantap bukan sob, nah datangi webnya dan bacalah semua artikelnya, bermanfaat semua :-bd Westciv. Salam bloglang \m/

Rabu, 16 Juni 2010

Dock or Footer

Blog walking until to die \m/ =)) Dapat lagi informasi gaya punya yang mungkin sobat mau pakai nih ;)) Beda nama sama penampilan menurut aku deh ini. Bisa dibilang dashboard atau dock footer dan Beben si bloglang ganteng kalem juga pernah memosting Footbar Static. Jadi intinya segala yg ada dibawah diam ditempat gak bergerak (pusing) :D Trik ini dari para pembuatnya dibikin simpel. Daya kreatif kita diperlukan disini untuk mengaplikasikannya.

Abu Farhan

Disini master Abu Farhan membuat jquery Dock footer dengan prinsip kerjanya, apabila kita menyorotnya akan muncul deh apa yg tersembunyi ;)) ;) :D

Webstuffshare

Ini lain nih, dengan tombol close pada bagian kiri pojok dan apabila diklik...muncul deh :D dari persembunyian itu si dashboard.

BloggerPlugnPlay

Bagi yg suka dengan icon dan mau bergaya dock juga ada kok. Maknyus dan kayak bola basket pake keranjang ikonnya :))

Jankoatwarpspeed

Bagi yg keberadaan docknya suka dipinggir sobat jg bisa kok. Disorot dikiri eh bisa nyerodot muncul ke kanan :">

Segitu ajah ah...yuk mari yuk babay :-h :)

Selasa, 15 Juni 2010

HTML5 Has Been Present

Susah cari bahan artikel tentang tutorial blogspot. Mentok dan susah cari-cari master blogger lagi nih sob ;)) Karena ngebleng jadi baca-baca tentang HTML5 Simpel, lebih cepat, dan tentunya gaya :D Walau IE masih ada fix dengan hal ini ;)) Tapi itu tidak menjadi masalah :) dalam postingannya membeberkan mengenai Family HTML5. Dapat kita ketahui apa, bagaimana, bahasa ini berkerja. Hasil dari bahasa ini mungkin secara standar dapat terlihat seperti .

Kemajuan ternyata memang tidak bisa ditolak, bahkan kita harus menyelaraskan dg apa yg sedang trendi nih sob (walau kagak ngerti yg penting gaya) =)) Duh #-o lupa belum kenalan nih ama si HTML5 :D Ya sudah meluncur saja kalau ada yg mau kenalan TurtleBlog dan disini juga Robertnyman. Dah cukup kenalannya yah sob :D :x Kalau digambarkan dg struktur, strukturnya jadi akan seperti berikut nih sob Cleartypemedia. Sangkin maraknya pembicaraan mengenai HTML5 ini sampai ada web yg namanya sama :D HTML5 Watch.

Untuk melihat kecocokan serta supportnya Christopher Blizzard. Nah jadi pertanyaannya mengapa kita mempelajari mengenai hal ini Willworkforart, serta kapan kita dan how do you do that Can-I-Use. Makin penasaran kan, hayooo ;)) HTML5.org. Setelah baca kesana kemari ternyata struktur tag HTML-V ini bisa dicontohkan menjadi Orderedlist. Untuk tombolnya kelupaan nih sob ;)) muuf muuf AEXT.NET MAGAZINE. Jadi deh kalau sudah paham kita bisa membuat (build) layout berstandar HTML5 & CSS3 di Onextrapixel|Part 1 and Onextrapixel|Part 1.

Sabtu, 12 Juni 2010

What's The CSS3

Sejak dikumandangkannya CSS3, semakin marak trik dan tips yang dapat kita gunakan dengan variabel CSS. Bisa jadi kedepannya kita dapat mengurangi penggunaan script :) Bedanya mungkin kurang dinamis saja kalau kita menggunakan murni CSS :D tapi fungsinya sama :p Dari yg simpel seperti memberikan bayangan (shadow) pada huruf.

Epsum factorial non deposit quid pro quo hic escorol Olypian.

Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam.

Li Europan lingues es membres del sam familie Lor separat.

Memberikan lengkung pada sudut (rounded corner) dan tulisan berbayang.

This is a example with rounded corners and shadow text!

Membuat multi column yg gaya punya ;)

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.

Ada sepuluh basic penggunaan shadow ini yg sering terpakai. Artikel and demos for this .

Further Information

Ma quande lingues coalesce, li grammatica del resultant lingue es, lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam!!! Epsum factorial non deposit quid pro quo hic escorol.

Tuh lihat bisa rotasi juga kan hanya dg CSS b-) . Mau membuat dropdown menu simpel dengan CSS3 juga bisa kok sob . Bagaimana dengan feature Transitions, Transforms and Animation with CSS3 . Jika merasa ingin membaca lebih mengenai artikel CSS3 ini bisa deh dikunjungin . Untuk membuat angka berurutan dari yg besar ke yg kecil dan kelipatannya . Ini untuk interactions with CSS transitions . Banyak terlalu banyak untuk dibagikan nih sob :D akhir perjalanan mungkin mau menengok Darkcrimson. Happy GAYA blogging, and see you bye bye :-h

Jumat, 11 Juni 2010

New Designer Template now Add on Blogger

Blogger kembali membuat terobosan baru b-) Menambahkan feature New Template Designer. Mendesign template kita sendiri LIVE STREAM baik template yang baru maupun yg sudah dipakai, tanpa harus melakukan save karena terlihat ditempat. Dengan option membuat lebih mudah deh kita sekarang mendesign template nih :-bd Bye-bye software ;))

Pada sesi ini hilangnya tombol edit post pada navbar Design. Kalau pertama-tama kaget pastinya, tapi tenang saja kita masih bisa menemukannya pada bagian Dashboard.

Terdapat penjelasan kita masih bisa menggunakan Classic Template, dengan konsekuensi kita tidak dapat mengakses semua feature yg ada pada Template Designer. Itu saja penjelasan mengenai terobosan blogger :D Trik dan tips agar kita tidak kehilangan akses kedalam account blog sendiri, ada bijaknya kita membuat dan menyimpan link-link seperti :

Dashboard       : http://www.blogger.com/home
New Post        : http://www.blogger.com/post-create.g?blogID=###
Edit Posts      : http://www.blogger.com/post.g?blogID=###
Change Layout   : http://www.blogger.com/rearrange?blogID=###
Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=###

Isikan ### dengan blogID sobat sendiri ;) Dengan begini mungkin akan aman dan sentosa yak :)) Kalau mau simpan saja di Add a Gadget ► HTML/Javascript ► Save :) . See you and happy blogging \m/

Kamis, 10 Juni 2010

Motion Effect Plug-in of jQuery 2010

Bermain-main jQuery plug-in sampai terperangah :D Bagus, gaya, keren, mantap, ck ck ck deh :x Sudah berapa biji yak plugin yang sudah masuk ke blog ini 8->> berat berat dah yg penting gaya B-) =)) Cloud Zoom dah masuk disini, gambar yg disorot menjadi gede itu sob. Sebenarnya antara zoom dan magnify pada gambar sedikit saja bedanya tapi fungsinya sama :p di jQuery ini. Eh nemu jQuery maginify plug-in tapi buat font nih sob ;)) Pas disorot ke hurufnya bisa jadi gede² sob :x

Ini salah satu dari artikel yg punya web tentang pluginnya ;) . Terdapat 8 biji jQuery plugin lagi yg gaya punya post jQuery Senamion, mantap dah :-bd Kalau mau motion-motion lainnya silahkan ajah meluncur deh . Sekarang Beben si bloglang ganteng kalem mau mencoba masukin yg ini saja sob ;) . Sampai bertemu lagi dengan informasi pilihan² BEBEN :)) Request mau apa ;))

Rabu, 09 Juni 2010

Print Button for Your Website or Blog

Semarak film porno mirip dengan muka artis-artis terkenal dinegeri ini tidak menyurutkan Beben si bloglang ganteng kalem menyurutkan mencari artikel yang gaya punya :)) Print halaman postingan kali ini aku mau kupas sob ;)) Bagi pencinta via tools dapatkan di . Untuk yg menyukai dengan bookmarklet style tinggal drag link berikut ke browser's bookmark toolbar sobat saja :D

javascript:(function(){pfstyle='bk';_pnicer_script=document.createElement('SCRIPT');_pnicer_script.type='text/javascript';_pnicer_script.src='http://cdn.printfriendly.com/printfriendly.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(_pnicer_script);_pnicer_css=document.createElement('LINK');_pnicer_css.rel='stylesheet';_pnicer_css.href='http://cdn.printfriendly.com/printfriendly.css';_pnicer_css.type='text/css';_pnicer_css.media='screen';document.getElementsByTagName('head')[0].appendChild(_pnicer_css);})();" onclick="alert('To start using PrintFriendly, please drag this link to your browser bookmarks toolbar.'); return false;

Terus bagaimana kalau tombol print ini ada langsung di blog kesayangan sobat :-/ Selain full stylish pasti membuat pengunjung serasa diberi kemudahan untuk mengeprint postingan kita :D Tinggal dapatkan saja tombol yg diinginkan mau bergaya apa, dan dapatkan scriptnya, lalu tinggal letakkan saja deh ditemplate sobat .

Kalau mau mencoba kode versi beben, silahkan simpan script berikut ditemplate sobat ;)

<a expr:href='"http://www.printfriendly.com/print?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title' target='_blank'><img alt='Print' src='http://cdn.printfriendly.com/pf-icon-small.gif'/></a>

Bye bye and see you again yaw :-h :)

Fresh Thinking for Web Developers and Designers

Tak elak dari kegiatan BW kita dapat berbagi. Tutorial, agama, hack, atau informasi lainnya :-bd Karena Beben si bloglang menitikberatkan pada artikel seputar tutorial blog, eh ternyata jadi merembet ke web juga nih ;)) :"> Diluar sana terdapat banyak link² yg menawarkan artikel bermanfaat mengenai bahasa HTML, CSS, Javascript dan lain-lain. Smashing, speckyboy, CSStrick, wah banyak deh sampe lupa sapa ajah :)) Melirik ke satu web, eh eh kok artikelnya gaya punya nih sob :X Biasa mau mereferensi untuk baca-baca biar jadi master ;)) Dengan penulis yg seperti sebuah tim membuat web ini seperti sixrevisions.

Dari artikel bisa ke forum dan langsung dikasih referensi buku pilihan mengenai artikel yg sedang dibahas KEREN!!! \m/ Untuk contoh postingan mengenai CSS ini nih sob :P

Here's articles for CSS label SitePoint, javascript articles Client-side Coding, PHP articles, ASP & .NET Tutorials. Meluncur dah untuk selengkapnya SitePoint.

Senin, 07 Juni 2010

Magic Link With a Image

Postingan kali ini mirip dengan post Beben yang sebelumnya mengenai . Gambar panah kecil yg selalu ada disamping kanan sebuah link itu loh sob :p Dengan sedikit variasi target='top/new/_blank' menandakan bahwa link tersebut akan terbuka pada New Tab. Dari web yg rencananya akan dijual, menemukan kembali artikel mirip seperti itu sob ;)) ;) Bedanya disini, ikon kecil disebelah kanan berperan untuk menandakan "New Tab" Coba deh dihalaman ini untuk demonya "http://www.codehouse.com/browser_watch/" Gimana? pasti sudah paham :D

Yang dibutuhkan disini, sediakan gambar/ikon kecil beresolusi 12px x 11px sebanyak dua biji dengan warna yg berbeda. Sekarang memasuki tahap selanjutnya.

Letakkan kode CSS berikut diatas/sebelum kode </b:skin>

a.ch-magic-link:link {
background-color: #EBEBEB;
}
img.ch-magic-link {
margin-left: 3px;
}

Letakkan scriptnya diantara/didalam tag <head> </head>

<script>
//<![CDATA[
/**
 * Copyright (C) 2003, CodeHouse.com. All rights reserved.
 * CodeHouse(TM) is a registered trademark.
 *
 * THIS SOURCE CODE MAY BE USED FREELY PROVIDED THAT IT IS NOT
 * MODIFIED (EXCEPT IN THE SECTION MARKED "MODIFIABLE SECTION") OR DISTRIBUTED,
 * AND IT IS USED ON A PUBLICLY ACCESSIBLE INTERNET WEB SITE.
 *
 * Script Name: Click for Window
 *
 * You can obtain this script at http://www.codehouse.com
 */

// START MODIFIABLE SECTION
//------------------------------------------
magicLink.IMG_URL = "external.gif";
magicLink.IMG_OVER_URL = "external_over.gif";
magicLink.CLASS = "ch-magic-link";
magicLink.TOOLTIP = "TITLE WAKTU MENYOROT GAMBAR KECILNYA";
//-------------------------------------------
// END MODIFIABLE SECTION

// YOU MAY NOT MODIFY THE CODE BELOW
function magicLink(id)
{
   var f = arguments.callee;
   var img = document.createElement("img");      
   var a = document.getElementById(id);   
   var oldAnchorClass = a.className;   
   
   img.title = f.TOOLTIP;
   img.style.cursor = window.ActiveXObject ? "hand" : "pointer";
   
   img.onmouseover = function()
   {
      this.src = f.IMG_OVER_URL;
   a.className = f.CLASS;
   window.status = a.href;
   }   
         
   img.onmouseout = function()
   {
      this.src = f.IMG_URL;   
   a.className = oldAnchorClass;
   window.status = "";   
   }
   
   img.onclick = function()
   {
      window.open(a.href);
   }
   
   img.src = f.IMG_URL;   
   img.className = f.CLASS;
   a.parentNode.appendChild(img);
 }
//]]>
</script>

<head>

</head>

magicLink.IMG_URL

magicLink.IMG_OVER_URL

Icon

Save

Cara memakainya nanti waktu menulis sebuah link pada postingan sedikit berbeda :D

<a href="http://example.com" id="NAMA_UNIQUE-ID" title="penjelasan">Magic Link</a><script type="text/javascript">magicLink("NAMA_UNIQUE-ID")</script>

Original post : http://www.codehouse.com/javascript/scripts/magic_link/

http://www.codehouse.com/javascript/script_archive_listing/
http://www.codehouse.com/javascript/scripts/
See you next time :))

Sabtu, 05 Juni 2010

Feature of CSS Sprites

Semenjak dikumandangkannya perkembangan mengenai CSS3 ini, para developer web terus mengeksplorasinya b-) Tidak lain untuk membuat load pada CSS lebih cepat dan tentunya lebih variatif ;) Drag dan kopi address berikut guna mengetahui sedikit tentang CSS Sprites http://tinyurl.com/2eufx6l Nah itu sobat, sekarang Beben mau berbagi hasil ngebloglang mengenai apa itu CSS Sprites. Bagi yg sudah master mungkin sudah tahu nih, ya ini mah untuk sekedar berbagi saja kok sob :))

Sobat pernah melihat sourcenya facebook, google, ASK.com atau yg lainnya. Source pada gambar yg akan tampak seperti

Dengan teknik sprites, gambar yg berantakan akan menjadi rapih pada hasil browsingan :-bd Melihat perbincangan di CSS-Tricks seru abisss. Penjelasan CSS Sprites menurut Dave Shea A List Apart. Kita lanjutkan saja sob, salah satu hasil dari teknik ini karya Soh Tanaka ;)

Mirip-mirip dengan kinerjanya dengan teknik a:hover kita dapat membuat gambar berubah dengan satu gambar saja :-/ Meluncur sob Soh Tanaka. Bagaimana??? Jika ingin mencoba layanan generatornya ;) CSS Sprites generator, dan bagaimana kalau ingin membuat CSS Stripes ini tanpa meninggalkan blog sobat??? Dengan hanya mendrag link berikut pada bookmark toolbar sobatjavascript: (function(){spritemejs=document.createElement('SCRIPT');spritemejs.type='text/javascript';spritemejs.src='http://spriteme.org/spriteme.js';document.getElementsByTagName('head')[0].appendChild(spritemejs);})();Layanan itu jasa web SpriteMe.

Bye bye...

Jumat, 04 Juni 2010

Travels to China

Negara dengan sebutan tirai bambu, China. Selain memiliki atlet-atlet bulutangkis yg markotop, ternyata ada jago-jago tutorial blog juga sob b-) Mau membahas satu-satu tersandung bahasanya euy. Kalau bahasa bisa ditranslate sih, tapi gaya bahasanya yg sedikit membingungkan ;)) Satu dari hacknya yang diberi title blogger-ext bisa dibilang hack yg membuat para blogger khususnya berbasis blogspot terlihat GAYA :D

Beben si bloglang ganteng kalem ngoprek² tentang hack LVCHEN. Menghapus komentar nih sob :p Mungkin tools ini berguna bagi para blogger yg telah menghapus link yg bergambar tong sampah del pada templatenya :-bd Ini lebih hebat lagi nih Original post | Indonesian translate. Buka blog ini LVCHEN Blog dan Racklin's Blog, lalu tengok ke sebelah kanannya ;) Yang membingungkan Beben, ini blog punya siapa yak =)) dua blog saling berlinkbacks nih...keren :))

See you :-h

Rabu, 02 Juni 2010

Available Your OpenID

Biar terlambat yang penting GAYA!!! =)) Seru juga korek-korek arsip blogger yg sudah duluan membahas tentang tutorial blog :D Baca-baca artikel mengenai OpenID eh jadi ikutan juga daftar ;)) Soalnya kalo BW ke blog² luar dan kita dalam keadaan tidak Sign-in pilihannya suka tidak ada untuk link dan nama. Nah, yg adanya OpenID deh sob :-/ Secara detail juga Beben si bloglang ganteng kalem tea tidak tahu sih :D Tapi kayaknya unik dan gaya gitooo b-)

Oke bagi yg berminat membaca mengenai si OpenID ini, cek get dot :p

Nah pada point ke-3 itu sobat bisa membaca bagaimana memasangnya di blog tercinta sobat :) Kalau sobat tau, postingan ini tidak ada sambungannya komentarnya bisa dari depan ;)) Yang bertuliskan Add your Comm :D di jajaran label ;)

Fairies!

Bookmark sekarang ini selalu menjadi daya tarik sendiri buat Beben nih sob ;)) :D Mungkin sobat tertarik Brainy Bookmarklet Links. Selain unik, fungsinya sekarang ini makin merambah saja :-bd Eh nemu lagi yg gaya nih sob. Tapi aku gak tauk ini bookmark atau apa yak :-/ Ya ini saja deh sob kalau mau dicoba mah :D

<a href="javascript:(function(){if(window.fairyenvironment&&fairyenvironment.fairy){return init()}var s=document.documentelement.appendchild(document.createelement('script')),t=setinterval(function(){if(window.fairyenvironment&&fairyenvironment.fairy){clearinterval(t);s.parentnode.removechild(s);init()}},50);s.src='http://github.com/jamespadolsey/fairy/raw/master/fairy.js';function init(){var d=document.body.appendchild(document.createelement('div')),docel=document.documentelement,body=document.body,winheight,resize=function(){winheight=window.innerheight||docel.clientheight||body.clientheight;fairyenvironment.bounds.right=math.max(docel.clientwidth,docel.offsetwidth);scroll()},scroll=function(){fairyenvironment.bounds.top=math.max(~~window.pageyoffset,body.scrolltop,docel.scrolltop);fairyenvironment.bounds.left=math.max(~~window.pagexoffset,body.scrollleft,docel.scrollleft);fairyenvironment.bounds.bottom=fairyenvironment.bounds.top+winheight};resize();if(window.addeventlistener){window.addeventlistener('resize',resize,false);window.addeventlistener('scroll',scroll,false)}else{window.attachevent('onresize',resize);window.attachevent('onscroll',scroll)}fairyenvironment.spawn(25,function(){if(this.dom){d.appendchild(this.dom);this.start()}})}}());">clicking here</a>

Heres for details , and demo here's .

Selasa, 01 Juni 2010

KEHANCURAN ISRAEL

Melihat dan mendengar berita di televisi mengenai tingkah negara Israel, mungkin saja bisa membuka mata dunia siapa sebenarnya Israel itu :) Geram, marah, ngilu, dan beraneka macam rasa yg kita rasakan melihat saudara² kita (khususnya muslim) diperlakukan dengan semena-mena :-s Mari kita jadikan do'a sebagai senjata tersembunyi untuk memanjatkan sodara² kita disana amin yaa rabal'alamin :)

Dari Abi Hurairah ra. bahwa Nabi SAW bersabda, "Tidak akan terjadi hari kiamat hingga kalian (muslimin) memerangi Yahudi, kemudian batu berkata di belakang Yahudi, "Wahai muslim, inilah Yahudi dibelakangku, bunuhlah!"
(HR Bukhari dan Muslim dalam Shahih Jami’ Ash-Shaghir no. 7414)

Tidak akan terjadi hari kiamat, hingga muslimin memerangi Yahudi. Orang-orang Islam membunuh Yahudi sampai Yahudi bersembunyi di balik batu dan pohon. Namun batu atau pohon berkata, "Wahai muslim, wahai hamba Allah SWT, inilah Yahudi dibelakangku, kemarilah dan bunuh saja. Kecuali pohon Gharqad (yang tidak demikian), karena termasuk pohon Yahudi."
(HR Muslim dalam Shahih Jami’ Ash-shaghir no. 7427)

Dua hadits diatas dari segi kekuatan sanadnya termasuk hadits shahih. Mungkin sobat sudah pada tahu "hadits" merupakan salah satu mukjizat yg diberikan kepada Rasulullah Muhammad Saw mengenai berita yg akan datang. Coba renungkan hadits diatas tadi, kapan itu terucapkan, bagaimana Yahudi pada saat itu :-? Mungkin setelah ini Beben akan mengkopas keterangan isi dari hadits diatas tadi :D (takut salah)

Namun ada yang hal yang kurang kita sadari selama ini. Yaitu bahwa hadits ini baru terasa relevan di zaman sekarang ini saja. Sepanjang 14 abad lamanya, tiap ada orang yang baca hadits ini di zamannya, akan sedikit berkerut kening. Mengapa? Sebab di masa mereka hidup, sejarah Yahudi tidak seperti sekarang. Mereka belum lagi menjadi sosok negara super power yang ampuh. Keangkuhan Yahudi dengan negara Israelnya belum pernah ada sepanjang 14 abad itu. Keberadaannya baru muncul di abad 20 ini atau abad 14 hijriyah. Orang Yahudi sepanjang sejarah Islam, justru selalu berada di bawah perlindungan negeri-negeri Islam. Komunitas Yahudi selalu dimusuhi oleh semua bangsa dan negara sepanjang sejarah. Nyaris tidak ada tempat buat Yahudi kecuali di dalam negeri Islam. Mereka aman bila tinggal di wilayah khilafah Islam, karena hukum Islam melarang memerangi ahlu zimmah (kafir zimmi). Salah satu penguasa yang anti Yahudi adalah Spanyol Kristen. Ketika Spanyol dikuasai rejim Katolik, bukan hanya umat Islam yang diusir, tetapi termasuk juga kalangan Yahudi. Tidak ada satu pun tanah didunia ini yang mau menampung bangsa ini, kecuali penguasa muslim Turki Utsmani.

Maka selama 14 abad itu, hadits ini cukup mengherankan umat Islam. Bagaimana mungkin umat Islam yang selama ini melindungi bangsa Yahudi serta mengharamkan darah mereka, lantaran mereka termasuk ahlu zimmah,
tiba-tiba akan memerangi Yahudi sampai mati. Bahkan batu dan pohon akan memerintahkan umat Islam untuk membunuh mereka juga. Teka-teki hadits ini baru terjawab pada tahun 1948, ketika komunitas Yahudi dunia melakukan agresi, penjajahan dan pencaplokan sebuah negeri Islam merdeka, Palestina. Dan pada tahun 1967 semakin jelas lagi hadits ini, karena ternyata komunitas Yahudi yang selama 14 abad hidup di bawah perlindungan, asuhan dan kerahiman umat Islam, tiba-tiba berubah menjadi srigala liar yang mengakibatkan perang Arab-Israel. Barulah di masa sekarang ini hadits ini menjadi lebih punya arti, setelah terkuaknya misteri. Ternyata Yahudi yang selama ini hidup dibawah asuhan dan kasih sayang umat Islam, tiba-tiba jadi makhluk buas pembantai nyawa. Dan menarik untuk diperhatikan, bahwa Yahudi sudah mempersiapkan apa yang mereka dapat di masa sekarang ini sejak lama. Bahkan ada yang mengatakan sejak ribuan tahun yang lalu untuk mewujudkan cita-cita pembentukan Israel.

Selain terkuaknya misteri hadits ini di abad 14 hijriyah, hadits ini sangat tegas menyebutkan kepastian kehancuran bangsa pengingkar Allah SWT dan nabi ini. Bahkan pohon dan batu pun akan ikut membantu umat Islam dalam menumpas mereka. Karena itu, hadits ini juga menjadi penghibur derita, pelipur lara dan pembangkit harapan buat umat Islam yang sempat merasakan kebengisan Yahudi secara lebih nyata. Ini adalah sebuah kepastian, karena yang bilang bukan sembarang orang. Yang bilang adalah seorang yang paling dekat kepada Allah SWT, yaitu Nabi Muhammad SAW. Yang menarik juga, di dalam hadits ini Rasulullah SAW menyebutkan sebuah nama pohon, yaitu Gharqad. Pohon ini milik Yahudi, sehingga kalau ada Yahudi sembunyi di baliknya dari kejaran umat Islam, pohon ini tidak akan berbicara. Sebaliknya, pohon ini akan melindungi Yahudi, karena pohon ini milik mereka.

Wallahu a'lam bishshawab...
By : Ustzd. Ahmad Sarwat, Lc.

Artikel ini diambil dari Mengungkap Kebenaran Mukjizat Al-Qur'an dan Hadits is on Facebook.

WassaLamu'aLaikum Wr Wb