-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Membuat Tombol kembali ke atas (Back To Top)

  1. Login blogger
  2. Pilih Rancangan --> Elemen Halaman
  3. KLIK tambah Gadget --> HTML/Java Script
  4. Simpan Kode berikut :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://kangdadang.googlecode.com/files/BackToTopBlue.js"></script>
Untuk kode  http://kangdadang.googlecode.com/files/BackToTopBlue.js adalah Java script dengan tampilan gambar seperti di bawah ini :




Bisa diganti juga dengan http://kangdadang.googlecode.com/files/BackToTopGreen.js dengan tampilan gambar :

atau dengan http://kangdadang.googlecode.com/files/BackToTopYellow.js dengan tampilan gambar :

atau juga kawan-kawan ingin menggantinya dengan gambar keinginan masing-masing, bisa dilakukan dengan cara :

  1. Download Java script http://kangdadang.googlecode.com/files/BackToTopBlue.js lalu edit dengan notepad cari link gambar http://i1094.photobucket.com/albums/i447/kang-da2ng/back2top.png lalu ganti dengan link gambar yang diinginkan.... dan Save
  2. Upload Java script tadi midalnya pada google code, untuk tutornya bisa dilihat disini
selamat mencoba..............
Read More Sabtu, 03 Desember 2011 0 komentar

Info Panel Slide Vertikal dengan jQuery

  1. Log in blogger
  2. Rancangan, edit html, centang tanda Expand Template Widget
  3. 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://dadhang.blogspot.com/' title='Ciamis Blogger'>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 dadang herdiana, saya seorang keluaran SMk jurusan Otomotif, nama sekolah saya SMkn 1 Kawali, alamat Ciamis</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>

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

Selamat mencoba......
Read More 0 komentar

Memindah-mindahkan widget dengan jQuery (Draggeble)

Dibawah ini adalah contoh kode widget pada template blogger, kalian bisa melihat sendiri pada template kalian.


<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML3' locked='false' title='SAMPLE' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='Profile1' locked='false' title='About' type='Profile'/>
Dari kode diatas, bisa kita ambil dan kita simpulkan type-type widget yang ada pada blogspot (warna merah). yaitu :

^^ Followers
^^ HTML
^^ Label
^^ Profile

dan masih banyak lagi "TYPE" widget blogger yang lainnya.

Setelah kita tahu Type dari widget nya, sekarang kita lanjutkan ke pembahasan awal, yaitu memindahkan widget blog dengan jQuery.

1. Login ke blogger kalian
2. Pilih Rancangan --> EDIT HTML
3. Simpan kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>


Catatan :Jika script diatas sudah ada dalam template kalian, tidak usah dipasang lagi / cuekin tahap No. 3 ini.

4. sekarang pasang script berikut dibawah kode script no.3


<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.widget.TYPEWIDGET&quot;).draggable();
});
</script>
Keterangan :
silahkan ganti kode warna merah dengan nama Type Widget yang akan di sisipkan effect drag.

Contoh untuk Widget Followers :
$(".widget.Followers").draggable();
Jadi script lengkapnya seperti berikut ini :
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.widget.Followers&quot;).draggable();
});
</script>
Untuk Widget TYPE HTML kalian tinggal menambahkan kata HTML pada scriptnya, jadi bentuknya seperti ini :
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.widget.HTML&quot;).draggable();
});
</script>

Tambahan :
Untuk TYPE HTML, kode diatas akan memindahkan semua WIDGET TYPE HTML yang ada di blog

Sekarang saya akan berikan contoh script lengkap meliputi HTML, Label, Followers, HTML, Profile dan Gambar:
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;div.drag_gambar img&quot;).draggable();
$(&quot;.widget.Label&quot;).draggable();
$(&quot;.widget.Profile&quot;).draggable();
$(&quot;.widget.HTML&quot;).draggable();
$(&quot;.widget.Followers&quot;).draggable();
});
</script>
Read More 0 komentar

Navigasi Efek Slide Out dengan jQuery

Tampilannya seperti gambar di samping... untuk cara membuatnya :
  1. Seperti biasa log in blogger
  2. Rancangan , edit html
  3. 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.......
Read More 0 komentar