Cara Membuat Stikybar / Sidebar Melayang ke-2

Cara Membuat Stikybar / Sidebar Melayang yaitu membuat sidebar blog menjadi mengikuti scroll sehingga akan selalu nampak.

Caranya, Letakan Kode dibawah ini tepat diatas kode </head>

Kode Javascript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://belajar-e.googlecode.com/files/Stikybar.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&quot;#sidebar-right-1&quot;).stickyBar({
animated:true,
speed:400,
easing:null,
top:0,
bottom:0,
until:&quot;&quot;
});
});
</script>

Bila template anda sudah dipasang library JQuery maka kode yang digaris bawah dihapus saja.
Demikian Cara Membuat Stikybar / Sidebar Melayang semoga berhasil.

Rating: 5 Reviewer: Unknown

JQuery Membuat Sidebar Melayang / Auto scroll

Membuat Sidebar Melayang / Auto scroll ini maksudnya yaitu membuat sidebar menjadi tampak selamanya meskipun halaman discroll ke bawah atau keatas, sidebar akan selalu terlihat karena tidak ikut terscroll.

Adapun caranya, kawan tinggal meletakan kode dibawah ini tepat diatas kode </head>. namun ingat kode ini adalah kode JQuery sehingga template sobat harus sudah memasang library JQuery.

Berikut kodenya:

<script type='text/javascript'> $(function(){var offset=$(&quot;#rsidebar-wrapper&quot;).offset();var topPadding=144;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:0})}})}); </script> 

Perhatikan kode yang berwarna merah itu ID sidebarnya.. anda bisa ganti dengan ID sidebar anda karena ID sidebar setiap template berbeda-beda.

Demikian Membuat Sidebar Melayang / Auto scroll ini semoga berhasil.

Rating: 5 Reviewer: Unknown

Membuat Simple Tab JQuery

Membuat Simple Tab JQuery ini dengan menggunakan JQuery, untuk cara peletakan kodenya kawan Panduan Cara Meletakan Kode pada template kawan tinggal memasukan kode dibawah ini sesuai panduan tersebut.

.simpleTab {
  margin:10px auto;
  color:white;
  text-align:left;
}

.simpleTab ul.tab-wrapper {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
}

.simpleTab ul.tab-wrapper li {
  margin:0px 0px;
  padding:0px 0px;
  float:left;
  list-style:none;
  display:inline;
}

.simpleTab ul.tab-wrapper li a {
  margin:0px 2px 0px 0px;
  display:block;
  font:bold 14px/30px threbuchet,Sans-Serif;
  padding:0px 15px;
  background-color:black;
  color:white;
  text-decoration:none;
  border:1px solid black;
  border-bottom:none;
  position:relative;
  z-index:1;
  outline:none;
  border-radius:10px 10px 0 0;
}

.simpleTab .tab-content {
  clear:both;
  padding:10px;
  background-color:#216F04;
  border:15px solid #956703;
  position:relative;
  z-index:2;
  top:-1px;
  height:200px;
  overflow:auto;
}

.simpleTab ul.tab-wrapper li a.activeTab {
  background-color:#956703;
  color:white;
  z-index:3;
}

<script type='text/javascript'>
//<![CDATA[
(function(d){d.fn.simpleTab=function(a){a=jQuery.extend({active:1,fx:"fade",showSpeed:1000,hideSpeed:1000,showEasing:null,hideEasing:null,show:function(){},hide:function(){},change:function(){}},a);return this.each(function(){var e=d(this),b=e.children("[data-tab]"),f=a.active-1;e.addClass("simpleTab").prepend('<ul class="tab-wrapper"></ul>');b.addClass("tab-content").each(function(){d(this).hide();e.find(".tab-wrapper").append('<li><a href="#">'+d(this).data("tab")+"</a></li>")}).eq(f).show();e.find(".tab-wrapper a").on("click", function(){var c=d(this).parent().index();d(this).closest(".tab-wrapper").find(".activeTab").removeClass("activeTab");d(this).addClass("activeTab");"slide"==a.fx?b.eq(c).is(":hidden")&&b.slideUp(a.hideSpeed,a.hideEasing,function(){a.hide.call(this)}).eq(c).slideDown(a.showSpeed,a.showEasing,function(){a.show.call(this)}):"fade"==a.fx?b.eq(c).is(":hidden")&&b.hide().eq(c).fadeIn(a.showSpeed,a.showEasing,function(){a.show.call(this)}):"fancyslide"==a.fx?b.eq(c).is(":hidden")&&b.slideUp(a.hideSpeed, a.hideEasing,function(){a.hide.call(this)}).eq(c).delay(a.hideSpeed).slideDown(a.showSpeed,a.showEasing,function(){a.show.call(this)}):b.eq(c).is(":hidden")&&b.hide().eq(c).show();a.change.call(this);return!1}).eq(f).addClass("activeTab")})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(function() {
    $(&#39;#tab&#39;).simpleTab();
});
</script>

<div id="tab">
    <div data-tab="Tab-1">Content 1</div>
    <div data-tab="Tab-2">Content 2</div>
    <div data-tab="Tab-3">Content 3</div>
    <div data-tab="Tab-4">Content 4</div>
</div>

Semoga cara Membuat Simple Tab JQuery ini berhasil dan bermanfaat.

Rating: 5 Reviewer: Unknown