Membuat Animasi Gear Berputar CSS

Tutorial Cara Membuat Animasi Gear Berputar dengan CSS - Tutorial mudah bagaimana cara membuat animasi gear yang berputar memanfaatkan script dan code CSS. Anda perlu Upload sebuah image misalnnya sebuah Gambar gear untuk membuatnya.

Misalnya menggunakan Gambar diatas untuk dibuat berputar, anda bisa mencari gambar lainya dan dikombinasikan sehingga putarannya bisa seperti berantai.

Berikut ini script Membuat Animasi Gear Berputar CSS

HTML

<div class="gear" id="gear1"></div>

CSS

/* CSS3 keyframes aregnoz.blogspot.com */
@-webkit-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
/* gears aregnoz.blogspot.com*/
.gear {
    float: none;
    position: absolute;
    text-align: center;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#gear1 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_64EuiJm_Rrig_ra-McWUKu7De-xlmcABmPBaOSsOcEhoi19sIruedzqkGZGrMa8Pyfy8Vch050UzvCg1LZ-FCQBL_cJY62flcoiVFc8HInl9kRUOyc21YjGbWuvXVBWP8AyKpUpqT6d/s1600/gear.png') no-repeat 0 0;
    height: 130px;
    left:10px;
    top: 10px;
    width: 130px;
    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;
    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}

​Information !!! Tulisan dengan Background Merah silahkan Anda ganti dengan link Gambar Anda.

Selamat Mencoba.

Continue

Membuat Animasi Loading Yin Yang CSS

Membuat Animasi Loading Yin Yang menggunakan CSS - Animasi ini berbentuk Yin Yang menggunakan CSS dan bisa anda gunakan juga untuk Loading Blog Anda. Untuk pembuatannya anda bisa melihat script berikut ini, yaitu tentang Membuat Animasi Loading Yin Yang dengan CSS.

Membuat Animasi Loading Yin Yang CSS

Berikut ini script yang bisa Anda gunakan
HTML

<div class="yinyang">
</div>

CSS

.yinyang {
    background: none repeat scroll 0 0 #EEEEEE;
    border-color: #121212;
    border-radius: 100%;
    border-style: solid;
    border-width: 2px 2px 50px;
    height: 48px;
    position: relative;
    width: 96px;
    /* css3 animation */
    -webkit-animation: anim4 1s linear infinite;
    -moz-animation: anim4 2s linear infinite;
    -ms-animation: anim4 1s linear infinite;
    -o-animation: anim4 1s linear infinite;
    animation: anim4 1s linear infinite;
}
.yinyang:before {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 18px solid #121212;
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 12px;
}
.yinyang:after {
    background: none repeat scroll 0 0 #000;
    border: 18px solid #EEEEEE;
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 12px;
}
/* css3 keyframes - animation 4 */
@-webkit-keyframes anim4 {
    from { -webkit-transform: rotateZ(0deg); }
    50% { -webkit-transform: rotateZ(180deg); }
    to { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes anim4 {
    from { -moz-transform: rotateZ(0deg); }
    50% { -moz-transform: rotateZ(180deg); }
    to { -moz-transform: rotateZ(360deg); }
}
@-ms-keyframes anim4 {
    from { -ms-transform: rotateZ(0deg); }
    50% { -ms-transform: rotateZ(180deg); }
    to { -ms-transform: rotateZ(360deg); }
}
@-o-keyframes anim4 {
    from { -o-transform: rotateZ(0deg); }
    50% { -o-transform: rotateZ(180deg); }
    to { -o-transform: rotateZ(360deg); }
}
@keyframes anim4 {
    from { transform: rotateZ(0deg); }
    50% { transform: rotateZ(180deg); }
    to { transform: rotateZ(360deg); }
}​

Demonya seperti dibawah ini

Oke selamat mencoba.

Continue

Tutorial Install JomSocial Indonesia

Tutorial Install JomSocial Indonesia - Cara Install JomSocial 2.5 / Versi Selanjutnya. Pada dasarnya menginstall Jomsocial masih sama dengan cara menginstall CMS Jomla pada umumnya. Oke, lebih baiknya mungkin anda bisa menyimak gambar-gambar berikut ini :

Tutorial Install JomSocial Indonesia

Sebelumnya Anda harus sudah menginstall joomla terlebih dahulu, sehingga nantinya akan bisa memanfaatkan JomSocial ini.

1. Setelah Anda download jomSocial silahkan extrak All dahulu

2. Misalnya anda ingin menggunakan com_community_[version].zip' untuk installanya

3. Silahkan Anda install seperti biasanya yang seperti pada di joomla, anda bisa menggunakan XAMPP /localhost jika ingin mengeditnya dulu atau langsung anda upload pada Hosting.

Oke, sekarang kita lanjut ke Tahap selanjutnya dalam penginstalan di hosting.

1. Silahkan Log in ke Administrator Area dan menuju ke Site > Sistem Information > Directory Permission 

2. Kemudian silahkan ke Extention Manager dan broser file kamu yang sudah unzip tadi

3. Silahkan Anda pilih Next > Next beberapa kali

Alternative Install JomSocial
1. Extrak Comunity Joomla/ file yang sudah Di Download tadi...

2. Kemudial Upload lewat FTP Client misal menggunakan FileZille

3.  Pilih Extension Manager

Selesai

Jika anda berhasil maka akan tampil seperti ini.

Semoga Bermanfaat

+++++++++++++++++++++++++++++++++++++++++++++++++

Continue

Download Template Blog Maintenance Part 2

Template Blog Maintenance - Download template blog 'Site Underconstruction' atau blog dalam perbaikan/ maintenance. Bagi anda yang sedang membenahi blognya atau memang masih baru membuat blog dan belum siap tampil, anda bisa memakai template berikut ini untuk membuat pelanggan atau pengunjung blog anda tidak ngacir.

Download Template Blog Maintenance

Tampilannya template yang akan anda dapatkan adalah seperti diatas, berminat..?? silahkan Anda Download Template Blog Maintenance secara Gratis.

Download : Click here

Continue

Download Template Blog Maintenance Part 1

Download Template Blog Maintenance Part 1 - Template Blog untuk tampilan Maintenance / perbaikan. Tampilan blog anda masih dalam perancangan atau masih pilih-pilih template, gunakan template berikut ini yang tentunya gratis 100% untuk anda pergunakan dan modifikasi.

Download Template Blog Maintenance Part 1

Silahkan anda mencobanya di blog anda jika memang blog anda masih dalam tahap perbaikan.

Download  : Click here

Continue

Cara Membuat Multi Menu Horizontal Drop Down Di Blog

Kali ini saya akan membahas Cara Membuat Multi Menu Horizontal Drop Down Di Blog, menu yang satu ini berbeda dengan menu drop down lainnya, yang satu ini menu drop down nya bisa bercabang lagi lebih banyak, menu ini lumayan bermanfaat bagi anda yang ingin menyimpan link yang cukup banyak.

Cara Membuat Multi Menu Drop Down :

1. Login ke Blog kamu.

2. Pilih Menu Edit HTML, cari kode ]]></b:skin>

3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 3.

.ddsmoothmenu{ font: bold 12px Verdana; background: #414141; /*background of menu bar (default state)*/ width: 100%; } .ddsmoothmenu ul{ z-index:100; margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .ddsmoothmenu ul li{ position: relative; display: inline; float: left; } /*Top level menu link items style*/ .ddsmoothmenu ul li a{ display: block; background: #414141; /*background of menu items (default state)*/ color: white; padding: 8px 10px; border-right: 1px solid #778; color: #2d2b2b; text-decoration: none; } * html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; } .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ color: white; } .ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/ background: black; color: white; } .ddsmoothmenu ul li a:hover{ background: black; /*background of menu items during onmouseover (hover state)*/ color: white; } /*1st sub level menu*/ .ddsmoothmenu ul li ul{ position: absolute; left: 0; display: none; /*collapse all sub menus to begin with*/ visibility: hidden; } /*Sub level menu list items (undo style from Top level List Items)*/ .ddsmoothmenu ul li ul li{ display: list-item; float: none; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .ddsmoothmenu ul li ul li ul{ top: 0; } /* Sub level menu links style */ .ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } /* Holly Hack for IE \*/ * html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ /* ######### CSS classes applied to down and right arrow images ######### */ .downarrowclass{ position: absolute; top: 12px; right: 7px; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; } /* ######### CSS for shadow added to sub menus ######### */ .ddshadow{ position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver; } .toplevelshadow{ /*shadow opacity. Doesn't work in IE*/ opacity: 0.8; }

4. Selanjutnya cari kode </head>,setelah ketemu letakan script di bawah ini tepat di atas kode </head>

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

<script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/>

5. Selanjutnya cari kode yang mirip dengan kode di bawah ini.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Web Design | IT Information (Header)' type='Header'/>

</b:section>

</div>

Kode di atas merupakan kode bagian Header dan untuk yang berwarna merah biasanya itu adalah judul header blog anda, jadi cari saja kode yang mirip kayak di atas. Dan setelah ketemu letakan kode di bawah ini tepat di bawah kode bagian akhir kode header di atas (letakan tepat di bawah kode yang berwarna biru).

<div class='ddsmoothmenu' id='smoothmenu1'><ul><li><a href='http://webikhwan.blogspot.com/'>Item 1</a></li><li><a href='#'>Folder 0</a><ul><li><a href='#'>Sub Item 1.1</a></li><li><a href='#'>Sub Item 1.2</a></li><li><a href='#'>Sub Item 1.3</a></li><li><a href='#'>Sub Item 1.4</a></li><li><a href='#'>Sub Item 1.2</a></li><li><a href='#'>Sub Item 1.3</a></li><li><a href='#'>Sub Item 1.4</a></li></ul></li><li><a href='#'>Folder 1</a><ul><li><a href='#'>Sub Item 1.1</a></li><li><a href='#'>Sub Item 1.2</a></li><li><a href='#'>Sub Item 1.3</a></li><li><a href='#'>Sub Item 1.4</a></li><li><a href='#'>Sub Item 1.2</a></li><li><a href='#'>Sub Item 1.3</a></li><li><a href='#'>Sub Item 1.4</a></li></ul></li><li><a href='#'>Item 3</a></li><li><a href='#'>Folder 2</a><ul><li><a href='#'>Sub Item 2.1</a></li><li><a href='#'>Folder 2.1</a><ul><li><a href='#'>Sub Item 2.1.1</a></li><li><a href='#'>Sub Item 2.1.2</a></li><li><a href='#'>Folder 3.1.1</a><ul><li><a href='#'>Sub Item 3.1.1.1</a></li><li><a href='#'>Sub Item 3.1.1.2</a></li><li><a href='#'>Sub Item 3.1.1.3</a></li><li><a href='#'>Sub Item 3.1.1.4</a></li><li><a href='#'>Sub Item 3.1.1.5</a></li></ul></li><li><a href='#'>Sub Item 2.1.4</a></li></ul></li></ul></li><li><a href='http://webikhwan.blogspot.com/'>Item 4</a></li></ul><br style='clear: left'/></div>

Klik dulu PERTINJAUAN sebelum di SAVE untuk menentukan berhasil atau gagal.

Continue

Cara Membuat Menu Diatas Header Blog

Dengan Membuat Menu Diatas Header Blog, Kita bisa menaruh link lebih banyak lagi di blog, dan dari segi keindahan juga tampilan menu diatas header ini membuat blog kelihatan lebih menarik.

Ikuti Langkah-Langkah Berikut :

-Login ke akun Blogger anda:
-Klik Rancangan

-Edit HTML
-Centang Expand Template Widget
Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya.


/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}


cari lagi kode </head> dan letakkan kode brikut dibawahnya:

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='url / link homepage '>home</a></li>
<li><a href='url / link 1'>judul link</a></li>
<li><a href='url / link 2'>judul link</a></li>
<li><a href='url / link 3'>judul link</a></li>
<li><a href='url / link 4'>judul link</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

Setelah itu simpan template dan Lihat Hasilnya.

Continue

Cara Membuat slide show Gambar di blog Dengan Efek Fade

Wah setelah Sekian lama Saya cari tata cara Membuat gambar dengan Slide Show efek Fade pada blog Akhirnya Ketemu Juga, Postingan Kali ini saya Akan menshare sedikit cara Membuat Slideshow Gambar/Foto Diblog, Ya.. Walaupun banyak sih Cara Lain yang lebih menarik dan tampilan yang lebih Dinamis.

Sebelumnya Siapkan Dulu Foto/Gambar yang akan dijadikan Foto Slidenya, Atau Kunjungi http://www.picasaweb.com dan kemudian silahkan Upload Foto Anda yang akan dijadikan Slide show dengan Format Jpg, Png. sesuai dengan Ukuran yang diinginkan.

Setelah  itu Masuklah ke akun Blogger > Tata Letak > Add Gadget > Kemudian Copykan Script dibawah :


<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script><script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script><script type="text/javascript">$(document).ready(function() { $('#content-slider').cycle({ fx: 'fade' }); }); </script><style type="text/css">#content-slider { position: relative; width: 100%; height: 250px; overflow: hidden; margin:0 auto; } #content-slider img { display: block; width: 100%; height: 250px; } </style><div id="content-slider"><img src="URL Gambar 1" /><img src="URL Gambar 2" /><img src="URL Gambar 3" /></div>

Note : UntukTulisan URL Gambar 1,2,3 Silahkan Kamu Ganti dengan URL Gambar Yang Telah DiUpload Tadi,

kemudian Terakhir Save. dan lihat hasilnya.

Continue

Cara Membuat Buku Tamu Buka Tutup Pada Blog

Caranya adalah sebagai berikut:

1. Login ke akun Blogger Anda

2. Klik Tata Letak

3.Add Gadget/tambah Gadget

4.Pilih HTML/Java Script

5 Copy Paste kode/script dibawah ini

6.ubah kode tilisan Letakan disini Script buku tamu andadengan script buku tamu anda.

7.simpan

<div title="header=[:: Isi Buku Tamu Dengan Sopan ::] body=[:: Click Here to Buku Tamu::]"><style type="text/css">.gb_fixed{ position:fixed; top:10px; right:0px; z-index:+10; } * html .gb_fixed {position:relative;} #hidden_gb2 { display:none; border:2px solid #004831; background:#000000; padding:10px; padding-top:0px; } </style><div class="gb_fixed"><table id="hidden_gb2" cellpadding="0" cellspacing="0"><tr><td><center>Letakan disini Script buku tamu anda </center><div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:white">[TUTUP ]</b></a></div></td></tr></table></div><script src=" http://yourjavascript.com/28923216920/Database.js "></script><div style="z-index:+5" class="gb_fixed"><a href="javascript:void(0)" onclick="gb_showHideGB()"><img border="0" style="border:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPdP24lDuLdOJAcP5PTl1gsmZbDEux83K7Om4R8By79ZCaayrkaW3meJCUORku1zos0Wcr9K2F2OGsiU87I3jUHx6Wd1pwv7RcIh-fuDKh8JRwmMaNGKbQH9BRG4SYPH-wa9WT3bnUgTM/s758/tabs2.gif" /></a></div></div>

Continue

Membuat Tulisan Readmore dengan BackGround warna

Buka Blogger dan Loggin
Kemudian Template > Edit HTML
Copykan Kode  dibawah Ini tepat di atas Kode ]]></b:skin>


.jump-link a{ -moz-border-radius:5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; padding:2px 12px; font-style: italic; border:1px solid #b7b7b6; margin:10px 0px; text-decoration:none; color:#000; background:#ccc; text-align:right; float:right; } .jump-link a:hover{ border:1px solid #545353; color:#fff; background:#797878; }


Kemudian Save, dan lihat hasilnya....!!

Continue

Cara Membuat Screen Saver Pada Blog dengan Foto sendiri

Ikuti Langkah berikut :

Masuk ke Dasbor Blogger Anda

Klik Tata Letak

Tambah Gadget

Pilih HTML/Java Script

Setelah itu silakan Copy kode berikut ini dan Pastekan didalam HTML/Java Script :

<script type="text/javascript" src="http://yourjavascript.com/45712822215/screen_saver_tj.js"></script> <style type='text/css'> div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(URL Foto Kalian) no-repeat center center fixed black; } div#energysaving p span {display:none;visibility:hidden;} </style>

Klik Simpan dan lihat hasilnya diblog Anda.

^^Ganti "URL Foto kalian" Dengan URL Foto anda^^

Continue

Cara Mengubah Nama Posting Lama dan Baru dengan Gambar

1. Login ke blogger kalian, bisa klik disini
2. Pilih Template>> klik Edit HTML
3. Centang Expand Template Widget

Mengubah tulisan newer post atau posting baru, cari kode dengan menekan CTRL+F (untuk mempermudah dalam pencarian kode) masukan kode <data:newerPageTitle/> ke kotak cari, kalau sudah ketemu ganti dengan kode di bawah ini

<img src='URL Gambar Anda'/>

5. Mengubah tulisan older post atau posting lama, cari kode dengan menekan CTRL+F (untuk mempermudah dalam pencarian kode) masukan kode <data:olderPageTitle/> ke kotak cari, kalau sudah ketemu ganti dengan kode di bawah ini

<img src='URL Gambar Anda'/>

6. Mengubah tulisan home atau beranda, cari kode dengan menekan CTRL+F (untuk mempermudah dalam pencarian kode) masukan kode <data:homeMsg/> ke kotak cari, kalau sudah ketemu ganti dengan kode di bawah ini

<img src='URL Gambar Anda'/>

Kemudian terakhir Simpan Template

Continue

Membuat Title Berjalan Pada Blog

1. login blogger

2. Template -> edit HTML

3. lalu cari kode dibawah ini

<title><data:blog.pageTitle/></title>

4. lalu ganti kode diatas dengan kode dibawah ini

<b:include data='blog' name='all-head-content'/><script language='JavaScript'>var txt="<data:blog.pageTitle/>"; var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

5. simpan dan lihat hasilnya

NT: Untuk angka 100 diisi dengan angka terserah anda. itu merupaka kecepatan dari Title tersebut

Continue

Cara Membuat Menu Horizontal Dropdown di Blog

  

Apa menu horisontal dropdown itu? Menu adalah sebuah navigasi yang memudahkan pengunjung blog untuk menjelajahi elemen-elemen yang ada di blog kita. Horisontal artinya berjajar ke samping, sedangkan dropdown artinya turun. Jadi kalau digabungkan, menu horisontal dropdown artinya navigasi berjajar di blog yang jika di tunjuk atau diklik akan keluar sederetan menu yang turun ke bawah.

Berikut ini cara membuatnya :

1. Masuk blogger > Template > edit html > centang expand template widget

Cari kode ]]></b:skin> kemudian pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;} #NavbarMenuleft{width:700px; float:left; margin:0; padding:0;} #search{width:240px; font-size:11px; float:right; margin:0; padding:0;} #nav{margin:0; padding:0;} #nav ul{float:left; list-style:none; margin:0; padding:0;} #nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;} #nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;} #nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;} #nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;} #nav li{float:left; padding:0;} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;} #nav li ul a{width:140px;} #nav li ul ul{margin:-24px 0 0 170px;} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;} #nav li:hover, #nav li.sfhover{position:static;} #searchbox{padding:0; margin:0;} #search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;} #search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;} #top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} .topleft {width: 304px; float: left; margin: 0; padding:0;} .topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;} .topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

Setelah Ketemu Kemudian Save.

2. Setelah Itu Masuk Ke Tata Letak > Tambah Gadget > Masukan Script Dibawah Ini.

Ini Scriptnya :

<div id='outer'><div id='navbarmenu'><div id='navbarmenuleft'><ul id='nav'><li><a href='#'>Menu 1</a></li><li><a href='#'>Menu 2</a></li><li><a href='#'>Menu 3</a></li><li><a href='#'>Menu 4</a></li><li><a href='#'>Menu 5</a><ul><li><a href='#'>menu 5.1</a></li><li><a href='#'>menu 5.2</a></li><li><a href='#'>menu 5.3</a></li><li><a href='#'>menu 5.4</a></li></ul></li></ul></div></div></div>

Kemudian Simpan, Finish dan lihat Hasilnya...!

Continue

Cara Membuat Text Shadow CSS Efek Blur

Membuat Text Shadow Efek Blur

Cara Membuat Text Shadow Efek Blur ~ Tutorial CSS 3 Efek Shadow Text On Mouse Blur sekarang kita belajar lagi menggunakan CSS dengan memanfaatkan fasilitas Text Shadow menjadi Blur. Efek Shadow ini banyak digunakan pada Blogazine untuk lebih menghidupkan Blog / Web mereka.

Tutorial CSS 3 Efek Text Shadow On Mouse Blur ini akan menjadi berubah ketika cursor didekatkan ke Text. Memanfaatkan Hover yang ada pada CSS Tutorial ini bagus untuk Blog bercitra Dark atau Gelap sehingga kelihatan menyala. Namun tidak menutup kemungkinkan untuk dipasang pada Blog bergaya simple dengan dasar putih.

Anda bisa melihat contohnya seperti pada gambar diatas, tulisan yang menyamping dengan aturan kemiringan dan efek shadow juga Blur yang terkombinasi dengan baik.

Demo klik [+]

HTML 

<div id="wrapper" contenteditable="true" spellcheck="false">      
        <p>Where</p>
        <p>are the</p>
        <p>trees</p>
</div>

​CSS

/* Wrapper ------------------------------------------------------ */
body {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
 
    background-color: hsla(30,20%,95%,.9);
 
    /* Pixel pattern only enabled for WebKit because of performance */  
    background-size: 2px 3px;
    background: hsla(30,20%,95%,.9) -webkit-linear-gradient(45deg, hsla(0,0%,0%,0)  0px,
                                                                    hsla(0,0%,0%,0)  1px,
                                                                    hsla(0,0%,0%,.1) 2px,
                                                                    hsla(0,0%,0%,.1)  3px);
    display: -webkit-box;
    display:    -moz-box;
    display:     -ms-box;
    display:      -o-box;
    display:         box;
 
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-box-align: center;
         -o-box-align: center;
            box-align: center;
 
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-box-pack: center;
         -o-box-pack: center;
            box-pack: center;
    }
#wrapper {
    position: relative;
    background :#333;
    /z-index: 0;
    text-align: center;
    font-weight: bold;
    font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
    margin: 0 auto;
    width: 600px;
    padding: 7em 0;
    background: url(bg.jpg) no-repeat center center;
    border-radius: 4px;
    box-shadow: inset 0 -1px 0  hsla(0,0%,0%,.2), 0 21px 8px -12px rgba(0,0,0,.2);
 
    -webkit-perspective: 350;
       -moz-perspective: 350;
        -ms-perspective: 350;
         -o-perspective: 350;
            perspective: 350;
    }
 
    #wrapper:focus {
        outline: none;
        }

#wrapper p {
    font-size: 10em;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow:     rgba(0,0,0,0.1) 0 20px 80px;
    -webkit-transition: -webkit-transform .1s ease-in; /* only WebKit because of performance */
    }

/* Hover ------------------------------------------------------ */
#wrapper:hover p {
    color: hsla(0,0%,0%,0);
 
    -webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
       -moz-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
        -ms-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
         -o-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
            transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
 
    -webkit-transition: -webkit-transform .1s ease-out; /* only WebKit because of performance */
    }
#wrapper:hover p:nth-child(1) {
    font-size: 9em;
    text-shadow:     #fff 0 0 10px,
                    #fff 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    text-indent: 0.3em;
    }
#wrapper:hover p:nth-child(2) {
    font-size: 10em;
    text-shadow:     #fff 0 0 1px,
                    #eee 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 3px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }
#wrapper:hover p:nth-child(3) {
    font-size: 11em;
    text-shadow:     #fff 0 0 2px,
                    #fff 0 4px 5px, #ddd 0 9px 5px,  #ccc 0 12px 10px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }

/* Middle ------------------------------------------------------ */
#wrapper p:nth-child(2):hover {
    text-shadow:     #fff 0 -5px 1px,
                    #eee 0 -1px 3px, #ddd 0 4px 3px,  #ccc 0 7px 1px,
                    rgba(0,0,0,0.2) 0 15px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
 
#wrapper p:nth-child(2):active {
    text-shadow:     rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
/*effand bocah nozh*/
#wrapper p::selection {
    background-color: red;
    }

Silahkan dicomot dan dimodifikasi gan, jangan lupa Es Degan nya di tinggalin dibawah biar tambah Brrrr ..
Ref : http://simurai.com

Continue

Cara Membuat List Styles Dengan CSS

Cara Membuat List Styles Dengan CSS

Cara Membuat List Styles Dengan CSS ~ Tutorial Membuat List Menu Hover berikut adalah tutorial CSS untuk membuat List Menu Hover, triks ini saya dapat dari http://designshack.net anda bisa mencobanya dan tentunya tetap untuk mampercantik blog kita.

Tutorial Membuat List Menu Hover sudah banyak juga diterangkan di blog-blog lain sehingga jika disini beda bisa anda terapkan di blog anda.

Tidak ada salahnya juga anda memodifikasinya agar lebih jan jos tenan.

Oke sekarang anda bisa mencobanya, berikut ini script yang bisa anda pakai dan modifikasi :

HTML :

<div>
  <h2>List Hover</h2>
  <ul>
    <li><a href="#">Demo 1</a></li>
    <li><a href="#">Demo 2</a></li>
    <li><a href="#">Demo 3</a></li>
    <li><a href="#">Demo 4</a></li>
    <li><a href="#">Demo 5</a></li>
  </ul>
</div>​

CSS :

div {
  width: 200px;
}

h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

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

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}

li:last-child {
  border: none;
}

li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

li a:hover {
  font-size: 30px; color:#026aba;
  background: #f6f6f6;
}​

Selesai sudah agan-agan, silahkan dicomot dan jangan lupa tinggalkan baunya dibawah untuk mempererat jalinan blogger Indonesia.

Demonya : Klik [+]

Continue

Membuat Text Shadow Dengan CSS

Tutorial Membuat Text Shadow menggunakan CSS 

Cara Membuat Text Shadow Dengan CSS ~ Tutorial Membuat Text Shadow menggunakan CSS lanjutan tutorial sebelumnya tentang text shadow, Kali ini untuk text shadow lanjutan untuk tambahan koleksi text shadow yang saya punya dan saya share saja agar temen-temen tahu bagi yang belum tahu dan yang sudah tahu harap di buat baca-baca saja, hee..

Tutorial Membuat Text Shadow menggunakan CSS ini saya adopsi dari tutorial dari website luar negeri yang menurut saya perlu saya share untuk pengetahuan kita semua.

Sekarang ayo kita lihat beberapa demonya :

CSS :

.shadow  { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px;  }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666;  } 

 HTML :

<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>

Diatas hanya untuk contoh saja.

Sekarang Kita Belajar Membuat text Shadow Dengan CSS


1. Double Text

Double Text Shadow

Script : text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

2. Close and Heavy

Text Shadow  Close and Heavy

Script : text-shadow: 0px 4px 3px rgba(0,0,0,0.4),             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);









3. Text Shadow 3D

Text shadow 3 dimensi (3D)

Script : text-shadow: 0 1px 0 #ccc,   0 2px 0 #c9c9c9,  0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,  0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),  0 3px 5px rgba(0,0,0,.2),   0 5px 10px rgba(0,0,0,.25),  0 10px 10px rgba(0,0,0,.2),  0 20px 20px rgba(0,0,0,.15);

4. Text Shadow Glowing

Text Shadow Glowing

Script : text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

5. Text Soft Embos

Membuat Text Shadow Dengan CSS

Script : color: rgba(0,0,0,0.6);

            text-shadow: 2px 8px 6px rgba(0,0,0,0.2),

            0px -5px 35px rgba(255,255,255,0.3);

6. Text Shadow Down

Shadow and down

Script : text-shadow: 0px 3px 0px #b2a98f,

                 0px 14px 10px rgba(0,0,0,0.15),

                 0px 24px 2px rgba(0,0,0,0.1),

                 0px 34px 30px rgba(0,0,0,0.1);

Oke kawand, diatas 6 tutorial CSS untuk membuat efek shadow dan masih bisa kamu modifikasi lagi. Tutorial sejenis akan saya lanjutkan ditutorial part ke-2.

Coming Soon...

Continue

Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS ~ Tutorial Cara Membuat Menu di Blog ini bisa kita pakai di blog kita sebagai variasi untuk mempercantik blog kita. Menu yang ada diatas blog bisa kita tambahi script ini untuk memperindah blog kita tentunya.

Anda bisa membuat tampilannya dengan sedikit perubahan mungkin menambahi Hover, Text Shadow dan Box Efek shadow dengan CSS.

Anda bisa melihat contohnya di bawah ini.

• Button 1
• Button 2
• Button 3
• Button 4
• Button 5

Anda bisa melihat demonya diatas dan anda bisa memodifikasi nya agar sesuai dengan template blog Anda.

Script nya bisa anda copy dibawah ini
Embed Script CSS

ul {
  display: table;
  width: 400px;
}
li {
  display: table-cell;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
ul:hover li {
  width: 15%;
}
li:hover {
  width: 40% !important;
  opacity: 0.7;
}
ul li:nth-of-type(1) { background: #FF4C4C; }
ul li:nth-of-type(2) { background: #FFBF49; }
ul li:nth-of-type(3) { background: #444444; }
ul li:nth-of-type(4) { background: #6FDC6F; }
ul li:nth-of-type(5) { background: #3AADFE; }

 HTML

 <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
</ul>

Langsung Praktek Gan. .

Continue

Membuat Text 3D dengan CSS [3 Dimensi]

Membuat Text 3D dengan CSS [3 Dimensi] - Text 3 Dimensi dengan CSS ini adalah kita memanfaatkan shadow yang terkombinasi sekian rupa sehingga bisa membentuk gambar / tulisan 3D. Banyak hal yang bisa dilakukan jika kita menggunakan fasikitas CSS ini, dari edit untuk box hingga Text.

Membuat Text 3D dengan CSS [3 Dimensi]

Oke Sekarang kita terapkan code CSS nya :

Embed Script :

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Dan sekarang kamu lihat hasilnya seperti berikut ini :

3D TEXT CSS

Hmm, gimana hasilnya lumayan kan, mangtabs jaya atau jan joss tanan, hee..
Oke sekian dulu turorial kali ini, lanjut lagi kapan-kapan. Selamat mencobanya.

Continue

Membuat Bingkai Border dengan CSS

Tutorial Membuat Bingkai Border dengan CSS - Bingkai dengan CSS di blogspot ini menggunakan fungsi border-corner yang ada dalam CSS. Bingkai Border ini didalamnya bisa kita isi text maupun Foto, anda tinggal mengisi dengan tulisan atau dengan URL Image anda. Sesuaikan dengan kebutuhan saja.

Membuat Bingkai Border dengan CSS bisa kalian lihat contoh imagenya dibawah ini :

Membuat Bingkai Border dengan CSS

Seperti itulah contohnya dari Membuat Bingkai Border dengan CSS 

DEMO :

TEXT silahkan Anda disini, silahkan anda isi misalnya "Membuat Bingkai Border dengan CSS" atau yang lain juga bisa. Bisa dijadikan modifikasi untuk template blog kamu, tinggal gimana kamu mengkreasikan ini. Membuat Bingkai Border dengan CSS ada 4 kertas dipojok yang digunakan untuk mengapit pigora ini, seperti ditempeli dengan Kertas.

1. HTML

<div class="tucked-corners top-corners">
    <span class="tucked-corners bottom-corners">
             Textmu atau Url Image    </span>
</div>

2. CSS

div.tucked-corners {
    background: #f6f6f6;
    height: 380px;
    margin: 50px auto;
    padding: 10px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
span.tucked-corners {
    background: #999;
font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    color:#FFF;
    display: block;
    height: 380px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
}
/* Top Corner Effect */
.top-corners:after,
.top-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
    z-index: 10;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.top-corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.top-corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
/* Bottom Corner Effect */
.bottom-corners:after,
.bottom-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    bottom: -25px;
    width: 100px;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
    left: -50px;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
.bottom-corners:before {
    right: -50px;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

Oke sekian dulu cara membuat Bingkai dengan CSS, tunggu tutorial selanjutnya.

Salam Blogger Donomulyo.

Continue

Membuat Slider Otomatis Dengan JQuery

Membuat Slider Otomatis Dengan JQuery - Cara membuat Slider otomatis menggunakan Jquery ini bisa anda manfaatkan untuk mempercantik Blog Anda. Slider Otomatis dengan J-Query dibawah ini mungkin cukup agag semrawut demonya, yang bisa anda lihat dibawah.

Berikut ini contoh Membuat Slider Otomatis Dengan JQuery:

Oke anda sudah melihat contohnya, jika anda tertarik silahkan ikuti caranya di bawah ini.

1. HTML

<div id="gallery">
    <a href="#" class="show">    <img src="images/flowing-rock.jpg" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<h3>Flowing Rock</h3>You can put html element
    inside the REL attribute."/></a>
    </a>
    <a href="#">        <img src="images/grass-blades.jpg" alt="Grass Blades" alt="" title="" width="580" height="360" rel="<h3>Grass Blades</h3>description"/>
    </a>
     ......    ......
    ......
   <div class="caption"><div class="content"></div></div>/div>
<div class="clear"></div>

2. CSS

#gallery {
    position:relative;
    height:360px
}
    #gallery a {
        float:left;
        position:absolute;
    }
   
    #gallery a img {
        border:none;
    }
   
    #gallery a.show {
        z-index:500
    }

    #gallery .caption {
        z-index:600;
        background-color:#000;
        color:#ffffff;
        height:100px;
        width:100%;
        position:absolute;
        bottom:0;
    }

    #gallery .caption .content {
        margin:5px
    }
   
    #gallery .caption .content h3 {
        margin:0;
        padding:0;
        color:#1DCCEF;
    }

 3. Javascript

$(document).ready(function() {    
   
    //Execute the slideShow
    slideShow();

});

function slideShow() {

    //Set the opacity of all images to 0
    $('#gallery a').css({opacity: 0.0});
   
    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.0});
   
    //Set the caption background to semi-transparent
    $('#gallery .caption').css({opacity: 0.7});

    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
   
    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);
   
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',6000);
   
}

function gallery() {
   
    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
   
    //Get next image caption
    var caption = next.find('img').attr('rel');
   
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
   
    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
   
    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
   
    //Display the content
    $('#gallery .content').html(caption);
       
}

 Selesai, tutorial Membuat Slider Otomatis Dengan JQuery silahkan Anda coba semoga berhasil. ^_^

Continue