Info Panel Slide Vertikal dengan jQuery

hai sobat akhirnya kita ketemu lagi insya allah dalam keadaan sehat walafiat. ok sobat bloger Karya Anak Kidoel ada sedikit tips buat anda tentang Info Panel Slide Vertikal dengan jQuery bila anda tidak tahu bileh anda lihat di atas yang bernama Info +

Rancangan, edit html, centang tanda Expand Template Widget

Cari kode ]]></b:skin> dan kopi kan CSS berikut diatasnya :

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Selanjutnya </head> cari kode dan kopikan kode berikut diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});
</script>

Selanjutnya cari kode </body> lalu kopi kan kode berikut diatasnya :

<div class='panel'>

<h3>Selamat Datang kawan-kawan</h3>

<p style='text-align:justify'>Selamat datang di situs blog saya, maaf atas kekurangannya atau saya dianggap so tau dsb, sebenarnya saya membuat blog ini sebagai tempat belajar saya, sebagai tempat memuaskan rasa penasaran tentang semua yang ingin saya ketahui <a href='http://ucu-syarief.blogspot.com/' title='Karya Anak Kidoel'>Selengkapnya tentang kami</a></p>

<h3>Sedikit Profil tentang saya</h3>

<img src='http://lh3.ggpht.com/_xTRukLv_HsA/TNjaYa1tSjI/AAAAAAAAABc/jZL2B4_PLHM/s140/screenshaver2.gif' width='73px' height='73px'/>

<p>Nama Saya Syarief Hidayat, saya seorang keluaran MAN bayah jurusan IPA, alamat wr lame</p>

<div style='clear:both;'/>

<div class='columns'>

<div class='colleft'>

<h3>Navigasi</h3>

<ul>

   <li><a href='#' title='home'>Home</a></li>

   <li><a href='#' title='about'>About</a></li>

   <li><a href='#' title='portfolio'>Portfolio</a></li>

   <li><a href='#' title='contact'>Contact</a></li>

   <li><a href='#' title='blog'>Blog</a></li>

</ul>

</div>

<div class='colright'>

<h3>Social Stuff</h3>

<ul>

   <li><a href='#' title='Twitter'>Twitter</a></li>

   <li><a href='#' title='Facebook'>Facebook</a></li>

   <li><a href='#' title='Digg'>Digg</a></li>

   <li><a href='#' title='Del.Icio.Us'>Del.Icio.Us</a></li>

   <li><a href='#' title='Gmail'>Gmail</a></li>

</ul>

</div>

</div>

<div style='clear:both;'/>

</div>

<a class='trigger' href='#'>Info</a>

keterang :

ganti kode yang berwarna merah deng link anda .......!!!!!!

Simpan template........... Selamat mencoba........

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Navigasi Efek Slide Out dengan jQuery

wahai para sobat bloger apakah anda tertarik dengan widget di samping ini dan untuk melihat Tampilannya seperti gambar di samping... untuk cara membuatnya :

Seperti biasa log in blogger

Rancangan , edit html

Masukkan kode dibawah ini di atas kode ]]></b:skin>

ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px; 
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}

Selanjutbya cari kode </head> dan kopikan kode ini di atsnya :

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

Selanjutnya cari kode </body> dan kopikan kode berikut diatasnya :

<ul id='menusisi'>
<li class='beranda'><a href='LINKANDA' title='Beranda'></a></li>
<li class='tentang'><a href='LINKANDA' title='Tentang'></a></li>

<li class='cari'><a href='LINKANDA' title='Cari'></a></li>
<li class='alat'><a href='LINKANDA' title='Alat'></a></li>

<li class='rssfeed'><a href='LINKANDA' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKANDA' title='Komentar'></a></li>

<li class='kontak'><a href='LINKANDA' title='Kontak'></a></li>
</ul>

yang berwarna biru silahkan isi sesuai kebutuhan.....

Simpan template...... selamat mencoba.......

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Efek animasi dengan java script

Sebuah efek animasi gif dengan javascrtipt. Gambar bergerak membentuk sisi kiri atas layar ke sisi kanan bawah layar.

Untuk demonya klik disini

dan simpan kode berikut sesuai keinginan kawan pada edit html / posting atau pada Gadget; Html/Java Script, Atau juga mungkin kawan-kawan bisa mengnembangkannya :

Semoga bermanfaat buat anda sebagai hiburan...!!!!

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Cara membuat Slide Gambar terjatuh

Hai sobat bloger ketemu lagi dengan karya Anak Kidoel kali ini Karya Anak Kidoel akan membahas tentang bagaimana Cara membuat Slide Gambar terjatuh mungkin bagi sobat itu udh ngga asing lagi,

ok untuk melihat hasilnya kamu klik disini dan untuk cara membuatnya ikuti langkah - langkah di bawah ini :

Seperti biasa log in blogger

masuk ke Rancangan, Edit Html

Cari kode </head> dan letakkan kode berikut di atas kode tadi :

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

Simpan template.........

Selanjutnya kopi pastekan kode di bawah ini pada edit Html Postingan atau pada tambah Gadget Html.Java script,,, sesuai kebutuhan :

</script><script src="http://kodecode.googlecode.com/files/animation2.js" type="text/javascript"></script>

</script><style type="text/css">

.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">

$('#ke2').cycle({fx:'scrollDown',speedIn: 2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});

</script>

yang warna merah silahkan ganti sesuai kebutuhan

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Membuat menu Fixed pada blog

ok...!!!! Kiita ketemu lagi dengan tips dan trik dari karya anak kidoel. kali ini karya anak kidoel akan memberikan sedikit tips buat para bloger mungkin anda suka dan tertarik boleh anda memasang tutorial di bawah ini.....!!!

ok langsung saja kita kerjakan.......!!!!!!!

Rancangan, edit html

Simpan kode berikut di atas kode ]]></b:skin> :

#menulateral{

position:fixed; text-align:left;

margin-top:100px; margin-left:-28px;

}

#menulateral{

position:absolute;

}

#menulateral a img{

opacity:1; -moz-opacity:1;

filter:alpha(Opacity=100);

}

#menulateral a:hover img{

opacity:0.8; -moz-opacity:0.8;

filter:alpha(Opacity=80);

position:relative;top:0px;left:2px;

}

#menulateral a img{

filter:alpha(Opacity=100);

}

#menulateral img{

margin-bottom: -5px;

}

.menulateral{

margin-bottom: -3px;

}

Kemudian cari kode :

Jika sudah ditemukan simpan kode berikut di bawah kode tadi :

<span>

</span>

</div>

yang berwarna Link tujuan (Link yang dituju), Judul gambar (Deskripsi gambar) https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Kks7zWF5OMgrDkj67V7nGgmGxBaWpYH1zgojVyv_qtqR-hILdDASctqrGqRlZacn12OGxWq-PuXFxut-OCGsXesWIZOcc7Ck98tdvaP2P775HMFCt4Ke7h3rGrfrViRmFXMm6Q0f07o/s1600/menu-lateral-archivo.png' (Link gambar pada menu fixed)

silahkan ganti sesuai keinginan..

Simpan template. dan selesai........

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Cara mengganti teks link Posting Lama dan Baru dengan image

Jelasnya yaitu tentang cara mengganti menu link menuju posting lama dan posting baru, dan terkadang ada template yang Menu nya tidak menggunakan Image tombol atau lainnya, Cara menggantinya gampang sekali, cukup dengan menyimpan kode CSS berikut pada menu :

1. Rancangan, edit html,

2. cari kode ]]></b:skin> dan simpan css berikut tepat diatasnya :

#blog-pager-newer-link {

width:35%;

float: left;

}

#blog-pager-older-link {

width:35%;

float: right;

}

#blog-pager a       {

   display:block; text-align:center;

   padding-top:13px; width:98%; height:26px;

&nbs; }

#blog-pager #blog-pager-newer-link a {

   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb1MlKoTwRDTDJOq3BV88xmHSD6twTysHv2JMZVjvSXvpyqkUKEdrOdkCDjKdSwPW4wo4Ed7Gsq_sLFiK1hivwZjp3BB3P5Zb_snakToNgLzDekV_cGcixZp_XfYa5ptFA3ZmIgvGgeW4/s1600/Baru.png);

   background-repeat:no-repeat;

}

#blog-pager #blog-pager-older-link a {

   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4-bFAEPJEnAmJT2LB-o1olWWaYuBPc5LbTHyk2unt3VT-117yi3sNOIbCiuMFAwdKdYN1BJ5mOr4UUmIG1r3d0pfmn27zwwvmayy3pi3K9E7Xf69rIUp2Elh8-_sI_kPRgQZRUk6keVw/s1600/lama.png);

   background-repeat:no-repeat;

}

#blog-pager #blog-pager-newer-link a:link,

#blog-pager #blog-pager-newer-link a:visited   {

   background-position:left 0px;

   }

#blog-pager #blog-pager-older-link a:link,

#blog-pager #blog-pager-older-link a:visited   {

   background-position:Right 0px;

   }

#blog-pager #blog-pager-newer-link a:hover       {

   background-position: left -39px; color:#FFF

   }

#blog-pager #blog-pager-older-link a:hover       {

   background-position: Right -39px; color:#FFF

   }

Simpan template..............

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Generator meta tag

Meta tags merupakan cara menyampaikan infomasi penting ke search engine(Mesin Pencari) mengenai informasi suatu halaman, Ada banyak meta tag sesuai dengan standar HTML 4.0 dari World Wide Web Consortion, tapi sebenarnya yang betul-betul dipakai oleh search engine hanya 3, description, keyword, dan robots.

Description / Meta Description:

Meta tag description digunakan untuk memberikan gambaran umum mengenai isi dari halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar description ini bisa menjadi kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan.

Keyword / Meta Kata kunci:

Meta tag keyword sangat penting keberadaannya, karena menentukan kata kunci apa yang bisa menemukan halaman web tersebut pada search engine.

Author / Meta Author:

Ini bukan tag yang sangat penting tapi masih semua orang suka untuk melampirkan nama untuk website-nya jadi kenapa harus Anda tinggalkan! : Cukup tulis nama lengkap Anda atau nama blog /website anda dan menghindari menggunakan nama panggilan atau simbol khusus. Jika Anda tidak ingin menambahkan nama Anda maka cukup biarkan kosong kosong pada tool di bawah ini.

Robots / Robot Meta:

Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa diindex oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika seuatu website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine.

ada yang berminat dengan Generator ini silahkan Kopi paste kode di berikut pada Edit Html / postingan kawan :

</a><script src="http://kangdadang.googlecode.com/files/metatag.js.txt" type="text/javascript">

</script><center><table><tbody>

<tr>     <td bgcolor="#181818"><form>

<div align="center"><center>

<table border="0" cellpadding="2"><tbody>

<tr><td><span style="color: #3c3c3c; font-weight: bold;">Description:</span></td><td><input class="mbt3" name="input1" size="40" type="text" /></td>         </tr>

<tr><td><span style="color: #3c3c3c; font-weight: bold;">Keywords:</span></td><td><input class="mbt3" name="input2" size="40" type="text" /></td>         </tr>

<tr><td><span style="color: #3c3c3c; font-weight: bold;">Author (Optional):</span></td><td><input class="mbt3" name="input3" size="40" type="text" /></td></tr>

<tr><td><span style="color: #3c3c3c; font-weight: bold;">Robots (Optional):</span></td><td><select name="input4" size="1"><option selected="selected" value="All">All </option><option value="None">None </option><option value="Index">Index </option><option value="No Index">No Index </option><option value="Follow">Follow </option><option value="No Follow">No Follow </option></select></td></tr>

</tbody></table>

</center></div>

<input class="mbt4" onclick="create(this.form)" type="button" value="Buat Metatags" /> <input class="mbt4" type="reset" value="Clear All" /> <textarea cols="65" name="story" rows="12" wrap=""></textarea></form>

</td></tr>

</tbody></table>

</center><span class="fullpost"></span>

<table border="0" cellpadding="2" cellspacing="0" style="width: 500px;"><tbody>

<tr><td></td><td>

<div align="justify">

</div>

</td></tr>

</tbody></table>

Selamat berexperimen dan ciptakan kreasi anda dengan tips and trick di blog Karya Anak Kidoel.....!!!!!!

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Cara menambahkan Emoticon pada Cbox

Pertama - tama Silahkan login di akun cbox kawan-kawannya terlebih dahulu...

Jika sudah Silahkan pilih menu :

1. Option

2. pilih menu Smilies

Selanjutnya akan tampil menu seperti ini :

Untuk cara menambahkan emoticon baru lihat gambar di bawah ini :

Keterangan :

karakter yang di tandai merah ; :beuh adalah karakter yang ignakan untuk pemanggilan emoticon tsb pada cbox, silahkan ganti sesuai kebutuhan.

http://i1094.photobucket.com/albums/i447/kang-da2ng/28.png adalah alamat atau link image yang digunakan. silahkan ganti sesuai kebutuhan.

New Row digunakan untuk menambah baris baru untuk penambahan emoticon.

Tanda X digunakan untuk penghapusan baris item emoticon.

Atau mungkin untuk link image nya bisa menggunakan sebagian Link image emoticon yang saya pakai sekarang :

Link : http://i1094.photobucket.com/albums/i447/kang-da2ng/10.png

Link : http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif

Link : http://i1094.photobucket.com/albums/i447/kang-da2ng/21.png

Link : http://i1094.photobucket.com/albums/i447/kang-da2ng/15.png

Link : http://i1094.photobucket.com/albums/i447/kang-da2ng/Very20Happy.gif

Link : http://i1094.photobucket.com/albums/i447/kang-da2ng/Happy.gif

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Efek gambar Pecah dengan jquery

Demonya bisa dilihat di blognya kang dadang disini

1. Log in blogger, Rancangan, edit html,

2. cari kode ]]></b:skin> dan simpan css berikut tepat diatasnya :

.box_container{

margin-left:80px;

position:relative;

width:420px

;height:350px;

overflow:hidden;

color:white;

}

.images_holder{

position:absolute;

}

.image_div {

position:relative;

overflow:hidden;

width:50%;

float:left;

}

.kiri{

}

.kanan img{

margin-left: -100%;

}

Selanjutnya cari kode </head> dan letakkan kode berikut tepat di atas kode tadi :

simpan template....

Cara pemanggilannya, misalkan pada Edit Html Posting :

Simpan..........

Usahakan ukuran gambar keduanya sama, dan bila diatas kode </head> sudah ada java script jquery nya <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>; tak perlu ditambahkan lagi.

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Membuat menu daftar isi jtoctree

untuk mengetahui hasilnya sobat tinggal lihat di bagian pinggir bawah nah di sanah ada namanya daftar isi ......!!!!!!!

Rancangan, edit html, cari kode ]]></b:skin>

Simpan kode berikut tepat diatas kode tadi :

/* jToCTree */

#judafistre {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm5wG6n8c57n5J8hQq_cF9QijDudBayvpKgDRAQaYxASmpcysyARfd5oOFzHoGLqEi6cY9wlogzi5swdj-NMMkZEHgjGxnhS06PP2loC9ABFmRFy3_5o8SjWIgplpVZHE3a5GfLGfDfkQ/d/bg5.gif)

repeat-y scroll left center #E7F7FB;

padding:5px;

border:1px solid #339DC6;

}

.branda {

background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMbWj8ZzI/AAAAAAAAEr4/iqyIQmaeqTc/d/blogger.png)

0px 4px no-repeat !important;

}

.judafis {

padding:0 0 0 4px;

font-weight:bold;

}

.treeview, .treeview ul {

padding: 0;

margin: 0;

list-style: none;

}

.treeview ul {

background-color:

transparent;

margin-top: 4px;

}

.treeview .hitarea {

background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMyDGBM0I/AAAAAAAAEsQ/b__wKvGpCLo/d/treeview-default.gif) -64px -25px no-repeat;

height: 16px;

width: 16px;

margin-left: -16px;

float: left;

cursor: pointer;

}

* html .hitarea {

display: inline;

float:none;

}

.treeview li {

margin: 0;

padding: 3px 0pt 3px 16px;

}

.treeview a.selected {

background-color: #eee;

}

#treecontrol {

margin: 2px 0;

display: none;

}

.treeview .hover {

color: red; cursor: pointer;

}

.treeview li {

background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMyE2GQFI/AAAAAAAAEsU/8rb8Y7zjLQw/d/treeview-default-line.png)

0 0 no-repeat;

}

.treeview li.collapsable, .treeview li.expandable {

background-position: 0 -176px;

}

.treeview .expandable-hitarea {

background-position: -80px -3px;

}

.treeview li.last {

background-position: 0 -1766px ;

}

.treeview li.lastCollapsable {

background-position: 0 -111px

}

.treeview li.lastExpandable {

background-position: -32px -67px

}

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {

background-position: 0;

}

.treeview-black li {

background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMxfHyt7I/AAAAAAAAEsM/OQ8KPEkd4iI/d/treeview-black-line.png);

}

.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable {

background-image: url(http://lh5.ggpht.com/_xcD4JK_dIjU/TUBMblX2uHI/AAAAAAAAEsI/qilKwCGDUas/d/treeview-black.gif);

}

.filetree li {

padding: 3px 0 2px 16px;

}

.filetree span.folder, .filetree span.file {

padding: 1px 0 1px 18px; display: block;

}

.filetree span.folder {

background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMbqeQA4I/AAAAAAAAEsA/MxndTFShj-4/d/folder.gif)

0 0 no-repeat;

}

.filetree li.expandable span.folder {

background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbhMdwlI/AAAAAAAAEsE/9pe2zTo3i1U/d/folder-closed.gif)

0 0 no-repeat;

}

.filetree span.file {

background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbVyeYzI/AAAAAAAAEr8/pGIGq0amWFE/d/file.gif)

0 0 no-repeat;

}

.filetree span.file a {

text-decoration:none;

}

selanjutnya cari kode </head> dan letakkan kode berikut tepat diatas kode tadi :

var judul = 'Daftar Isi'

function dafisjtoctree() {

$('#hitam').treeview({

animated: 'fast',

collapsed: true,

control: '#treecontrol'

});

}

$(document).ready(function() {

dafisjtoctree();

});

//]]></script>

Daftar Isi bisa diganti dengan nama yang kawan inginkan, Fast dapat diubah dengan kata Normal untuk kecepatan lebih lambat.

selanjutnya untuk cara pemanggilannya pada edit html Posting atau pada Gadget HTML/JAVA SCRIPT :

<div id="judafistre">
<div id="treecontrol">
<a title="Tutup semua folder" href="#"> Tutup</a> | <a title="Buka semua folder" href="#"> Buka</a> | <a title="Tombol buka tutup semua folder" href="#">Buka Tutup</a>

</div>
<script src="http://dadhang.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree">

</script>
</div>

yang berwarna biru ganti dengan alamat blog sobat yang dipakai

selesai.........

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Bounce menu with jQuery

Demonya bisa kawan-kawan lihat disini

Rancangan, Edit Html, Cari kode ]]></b:skin>

Dan Simpan kode berikut diatasnya :

/* Bounce menu with jQuery

----------------------------------------------- */

#topad {

   width:465px;

   height:130px;

   padding-top:35px;

   padding-right:20px;

   float:right;

}

#vnav {

   width:300px;

   float:left;

}

#des {

   width:600px;

   float:right;

}

#des h1 {

   font-size:24px;

   text-shadow: 0 -1px 1px #CCC;

   color:#779ec2;

}

#bounce li {

   height:20px;

   width:200px;

   overflow:hidden;

    color: #fff;

    text-decoration: none;

    font-weight: bold;

    line-height: 1;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-box-shadow: 0 1px 3px #999;

    -webkit-box-shadow: 0 1px 3px #999;

    text-shadow: 0 -1px 1px #222;

    border-bottom: 1px solid #222;

    padding: 7px 10px 6px;

    margin-top:5px;

    background-color:#a447cf;

}

#bounce li p {

   margin-top:10px;

   font-size:12px;

   color:#6CF;



}

selanjutnya simpan java script berikut tepat diatas kode </head> :

simpan template......

cara pemanggilannya :

<div id="vnav">

<ul id="bounce">

<li><h1>

Home</h1>

<a href="#">Home page</a></li>

<li><h1>

About Us</h1>

<a href="#">Check our Portfolio</a>

</li>

<li><h1>

Portfolio</h1>

<a href="#">Check our Portfolio</a>

</li>

<li><h1>

Contact Us</h1>

<a href="#">Check our Portfolio</a>

</li>

</ul>

</div>

Keterangan : sebagai tambahan. jika script http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js ini sudah ada pada template kawan-kawan, kawan semua tak perlu lagi mnambahkan script tadi pada template yang dipakai

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Simple Slide Panel with jquery

Demonya bisa kawan-kawan lihat di pinggir blog ini ......!!!!!

Cara membuatnya :

Rancangan, Edit Html, Cari kode ]]></b:skin>

Dan Simpan kode berikut diatasnya :

/* ---------------

Simple Slide panel with jQuery

---------------------------------- */

#panel {

   background: #754c24;

   height: 200px;

   display: none;

}

.slide {

   margin: 0;

   padding: 0;

   border-top: solid 4px #422410;

   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgii5UFy0AcOyGFgzHi2Uw75D5m1TI6UljqZoLRNvgYyUN0c_rI3Mm6ZjjrT5yf3OpMHIh05WFh7BuXmcu-Gu8UNgEQlYHK9dk8bmcicexksXLsvQUofuTOBUOy3lhSuarvQOh4j7x116Q/s1600/btn-slide.png) no-repeat center top;

}

.btn-slide {

   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTA0UJdgSxj5CtcfniQlHbZDRE68QKgiaAf_29jkp-wxRAJrI9tFp7AsC_Ov-n0haK6nfSuyNeo9k9QeMUdDZNh-Bc9zX_2_6nt6Cyxv2mk-00GeSBNnUaneGWwtBGDEMHfLGmyGSF7M/s1600/white-arrow.gif) no-repeat right -50px;

   text-align: center;

   width: 144px;

   height: 31px;

   padding: 10px 10px 0 0;

   margin: 0 auto;

   display: block;

   font: bold 120%/100% Arial, Helvetica, sans-serif;

   color: #fff;

   text-decoration: none;

}

.active {

   background-position: right 12px;

}

selanjutnya simpan java script berikut tepat diatas kode </head>:

selanjutnya masuk ke menu Rancangan, Tambah Gadget, pilih Html/Java script dan simpan kode berikut:

</div>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

Keterangan : sebagai tambahan. jika script <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> ini sudah ada pada template kawan-kawan, kawan semua tak perlu lagi mnambahkan script tadi pada template yang dipakai

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Lavalamp navigation menu

Demonya bisa kawan-kawan lihat disini

Rancangan, Edit Html, Cari kode ]]></b:skin>

Dan Simpan kode berikut diatasnya :

/* ---------------

lavaLamp With Image

---------------------------------- */

.lavaLampWithImage {

            position: relative;

            height: 29px;

            width: 421px;

            background:-moz-linear-gradient(left, #ff6900, #ff9700, #ff6900, #ff9700, #ff6900); no-repeat top;

-moz-border-radius:10px;

-khtml-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

            padding: 15px;

            margin: 10px 0;

            overflow: hidden;

        }

                .lavaLampWithImage li {

                    float: left;

                    list-style: none;

                }

                    .lavaLampWithImage li.back {

                        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1_Qm_VsCCnIsvlpC9fO8dC-xWT8CNYEdzCd9ZsOyvXWglaJ1Hq-y1O06rAsmj9B4LWsDVQxL1xTbUnl-1xNsVmwOBH6bMRHUZU0676PL4BbBcg-35Ffjq50ULIM1pu5lFVx_DOiV28c/s1600/lava.gif") no-repeat right -30px;

                        width: 9px; height: 30px;

                        z-index: 8;

                        position: absolute;

                    }

                        .lavaLampWithImage li.back .left {

                            background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1_Qm_VsCCnIsvlpC9fO8dC-xWT8CNYEdzCd9ZsOyvXWglaJ1Hq-y1O06rAsmj9B4LWsDVQxL1xTbUnl-1xNsVmwOBH6bMRHUZU0676PL4BbBcg-35Ffjq50ULIM1pu5lFVx_DOiV28c/s1600/lava.gif") no-repeat top left;

                            height: 30px;

                            margin-right: 9px; /* 7px is the width of the rounded shape */

                        }

                    .lavaLampWithImage li a {

                        font: bold 14px arial;

                        text-decoration: none;

                        color: #fff;

                        outline: none;

                        text-align: center;

                        top: 7px;

                        text-transform: uppercase;

                        letter-spacing: 0;

                        z-index: 10;

                        display: block;

                        float: left;

                        height: 30px;

                        position: relative;

                        overflow: hidden;

                        margin: auto 10px;

                    }

                        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {

                            border: none;

                        }

4. Simpan java script berikut tepat diatas kode </head> :

5. Cari kode berikut (ctrl+F untuk mempermudah pencarian) :

6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :

    <li><a href="#">Home</a></li>

    <li><a href="#">Plant a tree</a></li>

    <li><a href="#">Travel</a></li>

    <li><a href="#">Ride an elephant</a></li>

</ul>

sebenarnya ini sesuai template kawan karena pasti ada kemungkinan perbedaan template...

Selanjutnya jika kawan-kawan tertarik dengan menu Lavalamp No Image; cara membuatnya yaitu sebagai berikut :

Seperti pada cara no 3 tinggal simpan CSS berikut di atas kode ]]></b:skin> :

/* ---------------

lavaLamp no Image

---------------------------------- */

.lavaLampNoImage {

            position: relative;

            height: 29px;

            width: 421px;

            background-color: white;

            padding: 15px;

            margin: 10px 0;

            overflow: hidden;

            border: 1px solid gray;

        }

                .lavaLampNoImage li {

                    float: left;

                    list-style: none;

                }

                    .lavaLampNoImage li.back {

                        border: 1px solid #000;

                        background-color: #e6e8ea;

                        width: 9px;

                        height: 30px;

                        z-index: 8;

                        position: absolute;

                    }

                    .lavaLampNoImage li a {

                        font: bold 14px arial;

                        text-decoration: none;

                        color: #000;

                        outline: none;

                        text-align: center;

                        top: 7px;

                        text-transform: uppercase;

                        letter-spacing: 0;

                        z-index: 10;

                        display: block;

                        float: left;

                        height: 30px;

                        position: relative;

                        overflow: hidden;

                        margin: auto 10px;

                    }

                        .lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {

                            border: none;

                        }

sekarang lihat pada Langkah ke 4 kawan-kawan bisa lihat script yang ditandai warna biru #1 kawan2 cukup ganti dengan #2,

untuk cara pemanggilannya seperti pada langkah 5 dan 6 yaitu :

<ul class="lavaLampNoImage" id="2">

    <li><a href="#">Home</a></li>

    <li><a href="#">Plant a tree</a></li>

    <li><a href="#">Travel</a></li>

    <li><a href="#">Ride an elephant</a></li>

</ul>

dan simpan template.....

Yang berikutnya pembuatan Lavalamp Bottom Style, langsung ke caranya :

Seperti pada cara no 3 tinggal simpan CSS berikut di atas kode ]]></b:skin> :

/* ---------------

lavaLamp Bottom Style

---------------------------------- */

.lavaLampBottomStyle {

            position: relative;

            height: 29px;

            width: 421px;

            background-color: white;

            padding: 15px;

            margin: 10px 0;

            overflow: hidden;

            border: 1px solid gray;

        }

                .lavaLampBottomStyle li {

                    float: left;

                    list-style: none;

                }

                    .lavaLampBottomStyle li.back {

                        border-bottom: 5px solid blue;

                        width: 9px;

                        height: 30px;

                        z-index: 8;

                        position: absolute;

                    }

                    .lavaLampBottomStyle li a {

                        font: bold 14px arial;

                        text-decoration: none;

                        color: #000;

                        outline: none;

                        text-align: center;

                        top: 7px;

                        text-transform: uppercase;

                        letter-spacing: 0;

                        z-index: 10;

                        display: block;

                        float: left;

                        height: 30px;

                        position: relative;

                        overflow: hidden;

                        margin: auto 10px;

                    }

                        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {

                            border: none;

                        }

sekarang lihat pada Langkah ke 4 kawan-kawan bisa lihat script yang ditandai warna biru #1 kawan2 cukup ganti dengan #3,

untuk cara pemanggilannya seperti pada langkah 5 dan 6 yaitu :

<ul class="lavaLampBottomStyle" id="3">

    <li><a href="#">Home</a></li>

    <li><a href="#">Plant a tree</a></li>

    <li><a href="#">Travel</a></li>

    <li><a href="#">Ride an elephant</a></li>

</ul>

dan simpan template.....

Semoga berhasil dengan pekerjaan anda.....!!!!

Terima Kasih

Created By Syarief Hidayat

------------------------------------------------------------------------------------------

Suka Pendidikan

Berita Yang Disukai Terkini

Info Panel Slide Vertikal dengan jQuery

Navigasi Efek Slide Out dengan jQuery

Efek animasi dengan java script

Cara membuat Slide Gambar terjatuh

Membuat menu Fixed pada blog

Cara mengganti teks link Posting Lama dan Baru dengan image

Generator meta tag

Cara menambahkan Emoticon pada Cbox

Efek gambar Pecah dengan jquery

Membuat menu daftar isi jtoctree

Bounce menu with jQuery

Simple Slide Panel with jquery

Lavalamp navigation menu

Entri Populer

Blog Archive

My List Blog

Daftar Blog Saya