0 Cara Membuat Efek Link Berkedap-kedip Seri 1

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Maksud tutorial ini adalah membuat link-link yang
ada di blog yang kita miliki dapat berkedap-kedip
dan berwarna-warni dengan sendirinya tanpa tersentuh
oleh mouse sekalipun seperti layaknya ' lampu sein '
pada kendaraan bermotor. Sebagai contohnya anda bisa
lihat di blog ini pada Menu Tab View " Komputer ".

Anda tertarik ? Ikuti cara membuatnya seperti berikut :

1.   Masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini dan
      paste di atas kode </head>,
      lalu simpan template anda.

<script type="text/javascript" src="http://h1.ripway.com/syamsudin/flashinglinks.js"></script>

4.   Untuk penerapan pada linknya :
      Sisipkan kode rel="flashfg[green]"
      diantara kode-kode link yang Anda miliki.

Contohnya seperti di bawah ini :

<a href='URL link Anda' rel="flashfg[green]">Keterangan link</a>

KETERANGAN :

Gantilah URL link pada kode di atas dengan
URL link anda termasuk Keterangan Linknya.

Ganti juga warna berkedipnya, pada kode : [green]
dengan warna apa saja sesuka hati Anda.

Selamat mencoba, good luck!

0 Cara Membuat Animasi Garis Atas Dan Bawah Pada Link

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Efek animasi yang bisa kita terapkan pada link yang

kita miliki amat beragam modelnya. Entah sudah

berapa efek animasi link yang diposting blog ini,

Sampai Saya sendiripun tidak ingat lagi. Dan hari ini

Saya coba " bagikan " 1 (satu) lagi efek animasi

pada link yang contohnya seperti di bawah ini :

ANIMASI GARIS DI ATAS LINK =

Cara Membuat Tanda Tangan Model Animasi

Cara Membuat Spoiler Di Blog

Membuat Background Pada Postingan

Cara Membuat Recent Comment

Cara Membuat Text Area Berbackground

ANIMASI GARIS DI BAWAH LINK =

Cara Membuat Tanda Tangan Model Animasi

Cara Membuat Spoiler Di Blog

Membuat Background Pada Postingan

Cara Membuat Recent Comment

Cara Membuat Text Area Berbackground

Untuk membuat Efek animasi ini, caranya adalah :

1.   Masuk ke Edit HTML.

2.   Carilah kode </head>

3.   Letakkanlah di atas kode </head>,
      kode yang berikut ini :

Kode untuk Animasi Garis di atas link :

<style type="text/css">

a:hover {
 text-decoration: none;
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9BKnzhMkjjpxXT5tQ36o4E3JFFlQB8ccAHLgMH0SdmqpGQXinnrAAWqloPVDUtvP-rDDz5OUWRaBBUMoQpkphFWTOslXhFS8ZB0Nf4r1vbBwzc29iEvykiCOlkiXKbOU2weirh0SiSA/);
 background-repeat: repeat-x;
 background-position: 100% 100% 0% 0%;
 padding-bottom: 2px;
}

</style>

Kode untuk Animasi Garis di bawah link :

<style type="text/css">

a:hover {
 text-decoration: none;
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9BKnzhMkjjpxXT5tQ36o4E3JFFlQB8ccAHLgMH0SdmqpGQXinnrAAWqloPVDUtvP-rDDz5OUWRaBBUMoQpkphFWTOslXhFS8ZB0Nf4r1vbBwzc29iEvykiCOlkiXKbOU2weirh0SiSA/);
 background-repeat: repeat-x;
 background-position: 100% 100%;
 padding-bottom: 3px;
}

</style>

Selamat mencoba dan tetap good luck!

0 Cara Menambahkan Image Di Depan Link Seri 2

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Anda lihat kan, gambar bintang berkedip-kedip di
depan link pada sidebar blog ini ? Itulah yang
dimaksudkan dalam tutorial kali ini. Untuk
membuatnya, copy kode yang ada di bawah
kemudian masukkan pada bagian paling atas
sidebar dimana Anda letakkan link tersebut :

<style>.list
{background: url("URL Gambar di sini") no-repeat left center; line-height:1.2em;padding:3px 5px 3px 15px;)</style>

KETERANGAN :

Buatlah gambarnya dengan ukuran
kecil saja, misalnya : 10 px X 10 px.

Letakkan kode URL gambar Anda
pada kode URL Gambar di sini

Sesuaikanlah angka padding-nya
dengan link dan sidebar blog Anda.

PENERAPAN PADA LINKNYA :

Sisipkan kode <div class="list">...............</div>
diantara kode-kode link Anda.

Contohnya seperti di bawah ini :

<div class="list"><a href="http://syamsudinnamaku.blogspot.com/2011/01/membuat-efek-salju-di-blog.html">Membuat Efek Salju di Blog</a></div>

Selamat mencoba, good luck!

0 Cara Membuat Animasi Gambar Di Bawah Menu

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Efek ini menggunakan teknik CSS untuk membuat
Menu Anda tampil lebih keren. Efek ini tidak
menggunakan gambar sebagimana yang biasa
digunakan sebagai penunjang sebuah animasi.
Lihatlah contoh berikut ini. Arahkan cursor Anda
pada deretan menu-menu yang ada di bawah ini :

• Home
• Tabel Warna
• Email Form

Ikuti langkah berikut, bila Anda ingin membuat :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang berikut ini terus simpan.

<ul class="arrowunderline">
<li><a href="URL Menu 1 Anda di sini">Menu URL 1</a></li>
<li><a href="URL Menu 2 Anda di sini">Menu URL 2</a></li>
<li class="selected"><a href="URL Menu 3 Anda di sini">Menu URL 3</a></li>
<li><a href="URL Menu 4 Anda di sini">Menu URL 4</a></li>
</ul>

KETERANGAN :

Masukkan URL Anda pada tempat yang disediakan.

Bila perlu, tambahkan lagi jumlah Menunya

dengan mengikuti kode yang sebelumnya.

1.   Terus Masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini dan
      paste di atas kode </head>,
      kemudian simpan template anda.

<style>

ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 18px Georgia;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:7px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* style of arrow underline */
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
bottom: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent red transparent; /* create up arrow */
}

</style>

Selamat mencoba dan tetap good luck!

0 Cara Membuat Panel Seksi Menu Vertikal

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Panel seksi ini adalah menu daftar vertikal dengan
tepi kanan yang melengkung. Sebagai menu, ini
tidak hanya mempertahankan tampilan melalui
perubahan pada lebar atau tinggi tetapi juga sangat
mudah untuk mewarnainya melalui CSS saja.
Anda mau tahu contohnya ?! Lihat previewnya
dan sorotlah menu-menu di bawah ini :

• » Tanda Tangan Animasi
• » Membuat Spoiler
• » Pesan Online 1
• » Pesan Online 2
• » Kalender Animasi
• » Teks Menulis 2

Bila ingin membuat Panel Seksi Menu Vertikal ini,
Anda ikuti langkahnya seperti berikut ini :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang berikut ini terus simpan.

<ul class="sexypanels">
<li><a href='URL 01 Anda di sini'>» Judul Menu 01</a></li>
<li><a href='URL 02 Anda di sini'>» Judul Menu 02</a></li>
<li><a href='URL 03 Anda di sini'>» Judul Menu 03</a></li>
<li><a href='URL 04 Anda di sini'>» Judul Menu 04</a></li>
<li><a href='URL 05 Anda di sini'>» Judul Menu 05</a></li>
<li class="lastitem"><a href="URL 06 Anda di sini">» Judul Menu 06</a></li>
</ul>

KETERANGAN :

Masukkan URL Anda pada kode yang tersedia.

Dan bila perlu, tambahkan lagi sesuka Anda.

1.   Lalu masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini dan
      paste di atas kode </head>,
      lalu simpan template anda.

<style type="text/css">

.sexypanels{
list-style-type: none;
margin: 0;
padding: 0;
width: 220px; /* width of menu */
}

.sexypanels li{
border-bottom: 0px solid white; /* white border beneath each menu item */
}

.sexypanels li a{
background: #FF0000 url(http://www.dynamicdrive.com/cssexamples/media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: black;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}
.sexypanels li a:visited, .sexypanels li a:active{
color: blue;

}

.sexypanels li a:hover{
background-color: blue; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}

</style>

<!--[if IE]>
<style type="text/css">
.sexypanels li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->

Keren kan ?  good luck!

0 Membuat Efek Transformasi Dan Transisi Dengan CSS3

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Mau tahu yang dimaksud dalam tutorial ini ?
Lihatlah contohnya di bawah ini dan coba saja letakkan
cursor Anda tepat di atas ke-5 (lima) ikon yang ada :

• 
• 
• 
• 
• 

Kalau Anda ingin mencoba membuat yang seperti itu,
ikuti langkahnya seperti berikut ini :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode yang berikut ini lalu simpan.

<ul class="bubblewrap">
<li><a href="URL Stumbleupon Anda"><img src="http://dynamicdrive.com/cssexamples/media/stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="URL Facebook Anda"><img src="http://dynamicdrive.com/cssexamples/media/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="URL Digg Anda"><img src="http://dynamicdrive.com/cssexamples/media/digg.png" title="Add to Digg" /></a></li>
<li><a href="URL Twitter Anda"><img src="http://dynamicdrive.com/cssexamples/media/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="URL RSS Feed Anda"><img src="http://dynamicdrive.com/cssexamples/media/rss.png" title="Add RSS Feed" /></a></li>
</ul>

KETERANGAN :

Masukkan URL Stumbleupon, URL Facebook,
URL Digg, URL Twitter dan URL RSS Feed Anda
di tempat yang tersedia pada kode di atas.

3.   Lalu masuk ke Edit HTML.

4.   Carilah tag </head>

5.   Letakkanlah di atas tag </head>,
      kode yang ada di bawah ini.
      Pratinjau, simpan template Anda.

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

Selamat mencoba, good luck!

0 Membuat Gambar Berjalan Dengan jQuery

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Preview dari tutorial ini adalah seperti ini :



Agar Anda lebih jelas lagi,
lihatlah DEMO-nya di sini.

Untuk membuat seperti yang demikian,
berikut ini tutorialnya :

---

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang ada di bawah ini :

<div id="outerContainer">

<div id="imageScroller">
<div id="viewer" class="js-disabled">
<a class="wrapper" href="URL Link 1 Anda" title="........"><img class="logo" id="........" src="URL Gambar 1 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 2 Anda" title="........"><img class="logo" id="........" src="URL Gambar 2 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 3 Anda" title="........"><img class="logo" id="........" src="URL Gambar 3 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 4 Anda" title="........"><img class="logo" id="........" src="URL Gambar 4 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 5 Anda" title="........"><img class="logo" id="........" src="URL Gambar 5 Anda" alt="........"></a>
</div>
</div>

</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
   
//remove js-disabled class
$("#viewer").removeClass("js-disabled");
   
//create new container for images
$("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");
      
//add images to container
$(".wrapper").each(function() {
$(this).appendTo("div#container");
});
    
//work out duration of anim based on number of images (1 second for each image)
var duration = $(".wrapper").length * 1000;
    
//store speed for later (distance / time)
var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
        
//set direction
var direction = "rtl";
    
//set initial position and class based on direction
(direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
    
//animator function
var animator = function(el, time, dir) {
     
//which direction to scroll
if(dir == "rtl") {
       
//add direction class
el.removeClass("ltr").addClass("rtl");
        
//animate the el
el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
            
//reset container position
$(this).css({ left:$("div#imageScroller").width(), right:"" });
       
//restart animation
animator($(this), duration, "rtl");
       
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;   
           
});
} else {
     
//add direction class
el.removeClass("rtl").addClass("ltr");
     
//animate the el
el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {
            
//reset container position
$(this).css({ left:0 - $("div#container").width() });
       
//restart animation
animator($(this), duration, "ltr");
       
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;   
});
}
}
    
//start anim
animator($("div#container"), duration, direction);
    
//pause on mouseover
$("a.wrapper").live("mouseover", function() {
      
//stop anim
$("div#container").stop(true);
     
//show controls
($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
     
//variable to hold trigger element
var title = $(this).attr("title");
     
//add p if doesn't exist, update it if it does
($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
});
    
//restart on mouseout
$("a.wrapper").live("mouseout", function(e) {
      
//hide controls if not hovering on them
(e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
     
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
              
//work out distance left to travel
var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
     
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
    
//restart anim
animator($("div#container"), newDuration, $("div#container").attr("class"));

});
            
//handler for ltr button
$("#ltr").live("click", function() {
          
//stop anim
$("div#container").stop(true);
    
//swap class names
$("div#container").removeClass("rtl").addClass("ltr");
          
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
     
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
     
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
     
//restart anim
animator($("div#container"), newDuration, "ltr");
});
    
//handler for rtl button
$("#rtl").live("click", function() {
          
//stop anim
$("div#container").stop(true);
     
//swap class names
$("div#container").removeClass("ltr").addClass("rtl");
     
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
     
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
    
//restart anim
animator($("div#container"), newDuration, "rtl");
});
});
</script>

KETERANGAN :

Masukkan Link dan Gambar Anda dalam kode
di atas pada tempat yang disediakan.

Isilah titik-titik pada kode title=", id=" dan alt="
dengan kata atau kalimat yang Anda inginkan.

---

3.   Lalu masuk ke Edit HTML.

4.   Carilah tag </head>

5.   Letakkanlah di atas tag </head>,
      kode yang ada di bawah ini lalu
      simpanlah template Anda.

<link rel="stylesheet" type="text/css" href="http://nettuts.s3.amazonaws.com/300_jquery/image Scroller/imageScroller.css" />

---

Selamat mencoba, good luck!

0 Membuat Rollover Tombol Background

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Ini adalah sebuah script yang membuat setiap button
atau tombol menjadi berubah warna manakala
cursor diletakkan tepat di atasnya.

Contohnya seperti terlihat di bawah ini :

Untuk membuat, langkahnya adalah sebagai berikut :


1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang ada di bawah ini
      kemudian simpan.

<form onmouseout="change(event, 'lime')" onmouseover="change(event, 'yellow')">
<input class="initial2" onclick="jumpto2('URL 1 Anda di sini')" type="button" value="Judul link 1" /> 
<input class="initial2" onclick="jumpto2('URL 2 Anda di sini')" type="button" value="Judul link 2" /> 
<input class="initial2" onclick="jumpto2('URL 3 Anda di sini')" type="button" value="Judul link 3" />
<input class="initial2" onclick="jumpto2('URL 4 Anda di sini')" type="button" value="Judul link 4" />
</form>

KETERANGAN :

Ubahlah warna tombol sebelum dan sesudah
disorot cursornya, pada kode :

change(event, 'yellow')

change(event, 'lime')

Masukkan Link Anda pada kode

URL 1 - 4 Anda di sini

Ganti Judul link 1 - 4 dengan
Judul link yang Anda masukkan.

3.   Kemudian masuk ke Edit HTML.

4.   Cari kode </head>

5.   Copy kode yang ada di bawah ini dan
      paste di atas kode </head> ini,
      lalu simpanlah template anda.

<style type="text/css">
.initial2{font-weight:bold;background-color:lime}
</style>

<script type="text/javascript">
<!--

//Specify optional button target: "_new" for new window, or name of FRAME target (ie "myframe")
var buttontarget=""

function change(e, color){
var el=window.event? event.srcElement: e.target
if (el.tagName=="INPUT"&&el.type=="button")
el.style.backgroundColor=color
}

function jumpto2(url){
if (buttontarget=="")
window.location=url
else if (buttontarget=="_new")
window.open(url)
else
parent[buttontarget].location=url
}

//-->
</script>

Selamat mencoba, good luck!

0 Belajar Membuat Gambar Gif dengan Adobe ImageReady Seri 4

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Tutorial ini berkaitan dengan tutorial " Membuat -
Background Blog Dapat Berganti Seri 3 ".
Oleh sebab itu, pada kesempatan kali ini bahasan
kita adalah tentang bagaimana cara membuat warna
backgroundnya yang berkedip-kedip itu.

Untuk mempersingkat waktu, langsung saja kita
ke tutorialnya. Tapi sebelumnya, Anda bisa lihat
screenshootsnya seperti di bawah ini :

01.  Sebagai langkah awal, bukalah program
       Photoshop anda. Dalam tutorial ini
       saya menggunakan Photoshop 7 (tujuh).

02.  Buatlah New Document dengan ukuran bebas
       terserah anda dengan Resolution 72 pixels/inch.
       Dalam tutorial ini saya membuatnya dengan
       ukuran : 50 px X 10 px.

03.  Buatlah beberapa layer. Pada tutorial ini
       saya buat 10 (sepuluh) layer dengan
       warna masing-masingnya berbeda.
       (lihat gambar di bawah ini)

04.  Aktifkan hanya layer 1 saja,
       yang lain di Hide (sembunyikan)
       (lihat gambar di bawah ini)

05.  Klik ikon Jump to ImageReady atau
       tekan Control + Shift + M
       Untuk menuju ke Adobe ImageReady.
       (lihat gambar di bawah ini)

06.  Tambahkan tabelnya menjadi 10 tabel
       dengan mengklik ikon yang ditunjukkan panah
       berwarna merah seperti yang terlihat pada
       gambar yang ada di bawah ini :

07.  Ubah tabel 2 s/d 10 dengan mencocokkannya
       pada layernya masing-masing.   
       (lihat gambar di bawah ini)

08.  Kalau sudah, aktifkan layer 1 saja
       tekan tombol Shift lalu klik tabel 10,
       sehingga semua tabelnya aktif.
       (lihat gambar di bawah ini)

09.  Bila tabelnya sudah aktif semua,
       klik kanan salah satu delay angkanya.
       Terserah anda pada tabel yang mana saja.
       (lihat gambar di bawah ini)

10.  Tentukan nilainya sesuai kehendak anda.
       Pada contoh ini saya pilih 0.1 seconds.
       Lalu klik tombol Plays untuk priviewnya.
       (lihat gambar di bawah ini)

11.  Setelah anda rasa sudah sesuai dengan yang anda
       inginkan, save-lah dengan mengklik File
       dan pilih Save Optimized As... Ctrl+Shift+Alt+S
       (lihat gambar di bawah ini)

12.  Savelah dengan nama apa saja
       yang anda kehendaki.
       (lihat gambar di bawah ini)

Selamat mencoba, good luck!

0 Cara Membuat Menu Bevel Vertikal

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Seperti kebanyakan efek hover yang dimiliki oleh

menu vertical pada umumnya, menu inipun demikian

halnya. Akan tetapi efek hover yang dihasil oleh

menu yang satu ini berupa bevel. Untuk jelasnya

silahkan sorotkan cursor Anda tepat di atas menu-

menu yang ada di berikut ini :

• My Home Satu
• My Home Dua
• JavaScript Reference
• DOM Reference
• CSS Drive
• Coding Forums
• Tutorials

Untuk membuat Menu Bevel Vertikal seperti ini,

Anda hanya memerlukan 2 (dua) langkah saja, yaitu :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang berikut ini lalu simpan.

<ul class="bevelmenu">
<li><a href="URL Anda di sini" >Judul URL Anda</a></li>
<li><a href="URL Anda di sini" >Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
</ul>

KETERANGAN :

Masukkan URL Anda di tempat yang tersedia.

Ganti dan sesuaikan Judul-judul URL-nya
dengan URL yang Anda masukkan.

Silahkan tambahkan URL Anda sesuka hati
sesuai dengan jumlah yang Anda butuhkan.

3.   Setelah itu masuk ke Edit HTML.

4.   Carilah tag </head>

5.   Copy kode yang ada di bawah ini dan
      letakkan di atas tag </head> ini,
      pratinjau lalu simpan template Anda.

<style type="text/css">

.bevelmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 230px;
}

.bevelmenu li a{
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
text-decoration:none;
}

.bevelmenu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */
border-style: inset;
}

</style>

KETERANGAN :

Gantilah warna backgroundnya dengan
warna apa saja yang Anda inginkan.

Selamat mencoba, good luck!

0 MAKE STATUS EMOTICON GRAFIK

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

KLIK HERE

1.KLIK DISINI
2.LIKE THIS


and klik 

UPDATE STATUS FACEBOOK

0 Automatic Poke Generator

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Detail:
Deskripsi : Automatic Poke Generator
Aktifitas :

• "POKE/COLEK" semua USER Facebook yang ada di beranda kita setiap 2.5 menit

Cara penggunaan:

• Jalanlan aplikasi dan Login ke akun facebook anda melalui aplikasi tersebut.
• Setelah aplikasi masuk ke beranda, klik Tombol START dan biarkan, secara otomatis aplikasi akan melakukan "POKE" USER yang berada di beranda anda.

Silahkan Unduh Aplikasi ==> DISINI