Script daftar label melayang

Script ini merupakan daftar label melayang dan bagusnya script ini di letakkan di bagian gadget Header karena dia melayang sesuai ukuran peletakan nya , jadi apabila script ini misalkan anda letakkan di bagian tengah blog maka nanti di bagian itu pula dia melayang ketika scroll di turunkan.
Silahkan mainkan scroll mouse anda ke bawah dan ke atas.

Bagaimana keren bukan hehehe :)

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :


1. Login ke akun Blogger anda

2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Edit sesuai keinginan anda
5. Klik simpan
<style>

/* CSS for sample sticky content */

.mattblacktabs{
overflow: hidden;
width:1000px;
background:#4169E1;
}

.mattblacktabs ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #4169E1; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

/* Sample CSS class applied to sticky element */

.docked{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow version*/
}

</style>


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

<script src="stickycontent.js">
</script>

<script>

//initialize sticky content:

jQuery(document).ready(function($){

  $('#samplemenu').stickyit({
  gap: 5,
  stickyclass: "docked"
 })

})

</script>

<script>
(function ($){

 $.fn.stickyit=function(options){

  var o=$.extend({}, {throttle:30, gap:0, stopstickyafter:0}, options)

  return this.each(function(){
   var $el=$(this)
    // clone element to be sticky and make "fix" its position on the page
   var $elclone=$el.clone(true).css({
    position:'fixed', left:$el.offset().left,visibility:'hidden', top:o.gap, width:$el.width(), height:$el.height(), margin:0
   }).appendTo(document.body)

   // function to throttle the sticking of an element for performance reasons
   function throttlesticky(){
    clearTimeout(o.throttletimer)
    o.throttletimer=setTimeout(function(){stickit(o, $el, $elclone)}, o.throttle)
   }

   $(window).bind('scroll resize', throttlesticky)

   // Disable sticky after x milliseconds?
   if (o.stopstickyafter > 0)
    setTimeout(function(){$(window).unbind('scroll resize', throttlesticky); stickit(o, $el, $elclone, true)}, o.stopstickyafter)
  })

  function stickit(o, $el, $elclone, unstick){
   var docscrolltop=$(document).scrollTop()
   if (!unstick && $el.data('state')!='hidden' && docscrolltop > $el.offset().top){ // stick content if document is scrolled past top of sticky element
    $el.css({visibility:'hidden'}).data('state', 'hidden')
    $elclone.css({visibility:'visible'})
    if (typeof o.stickyclass != "undefined")
     $elclone.addClass(o.stickyclass)
   }
   else if (unstick || ($el.data('state')!='visible' && docscrolltop < $el.offset().top)){ // unstick content if not
    $el.css({visibility:'visible'}).data('state', 'visible')
    $elclone.css({visibility:'hidden'})
    if (typeof o.stickyclass != "undefined")
     $elclone.removeClass(o.stickyclass)
   }
  }

 }

})(jQuery);
</script>

<div id="samplemenu" class="mattblacktabs">
<ul>
<li><a href="http://dhecun.blogspot.com/2012/11/memuat-kotak-permalink-di-bawah-artikel.html">Script 1</a></li>
<li><a href="http://dhecun.blogspot.com/2012/11/membuat-accordion-menu-dengan-efek.html">Script 2</a></li>
<li><a href="http://dhecun.blogspot.com/2012/11/membuat-menu-horizontal-keren-dengan.html">Script 3</a></li>
<li><a href="http://dhecun.blogspot.com/2012/11/membuat-menu-sidebar-melayang-dengan.html">Script 4</a></li>
<li><a href="http://dhecun.blogspot.com/2012/11/membuat-kotak-chatting-di-blog.html">Script 5</a></li></ul>
</div>
<div style="height:5px">
</div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-daftar-label-melayang.html" target="_blank"><span style="font-size: small;">[ Get Widget ]</span></a></div>
Jika anda ingin memasukan script daftar label melayang tersebut ke dalam HTML/JavaScript blog anda secara otomatis , silahkan klik tombol dibawah ini , setelah itu edit sesuai keinginan anda.

Catatan :
1. width:1000px; adalah lebar dari label , bisa anda ganti sesuai keinginan anda.
2. background:#4169E1; warna latar label , bisa anda ganti sesuai keinginan anda.
3. Ganti tulisan warna merah dengan alamat link anda.
4. Ganti tulisan yang berwarna biru dengan teks anda.

Semoga bermanfaat...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge