Tutorial Blog for Stylish Blogger

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.

Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.

Your ads here!!!

Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

▼ ▲

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

moronicbajebus.com/playground/cssplay/css-stack-menus/files/
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

moronicbajebus.com/playground/cssplay/hover-sidebar/files/
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

moronicbajebus.com/playground/cssplay/top-menu/files/
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

moronicbajebus.com/playground/cssplay/jump-menu/files/
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 :-"

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

▼ ▲

Accordion Menu With CSS3 Transitions

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

▼ ▲

Make The Links be Funky

5 Komentar

▼ ▲

My Reference Link

6 Komentar

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

▼ ▲

Make Dock or Footer With CSS3

7 Komentar

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

▼ ▲

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

▼ ▲

New Designer Template now Add on Blogger

3 Komentar

▼ ▲

Motion Effect Plug-in of jQuery 2010

2 Komentar

▼ ▲

Print Button for Your Website or Blog

2 Komentar

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

3 Komentar

▼ ▲

Magic Link With a Image

0 Komentar

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

▼ ▲

Feature of CSS Sprites

4 Komentar

▼ ▲

Travels to China

5 Komentar

▼ ▲

Available Your OpenID

6 Komentar

▼ ▲

Fairies!

1 Komentar

▼ ▲

KEHANCURAN ISRAEL

4 Komentar

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