Membuat slide slow pada menu navigasi (Blogger)

Buat yang mau mempercantik tampilan blognya dengan slide slow pada menu navigasi (seperti slide slow kami di atas), berikut tahap-tahap yang harus dilakukan:


1. Copy kode skrip berikut ini:
.indentmenu{
 font: bold 11px Arial;
 width: 100%; /*leave this value as is in most cases*/

 }

 .indentmenu ul{
 margin: 2px;
 padding: 0;
 float: left;
 /* width: 80%; width of menu*/
 background: transparent;
 }

 .indentmenu ul li{
 display: inline;
 }

 .indentmenu ul li a{
 float: left;
 margin: 2px;
 color: #000; /*text color*/
 padding: 5px 11px;
 text-decoration: none;
 border: 1px solid #ccc;
 }

 .indentmenu ul li a:hover{
 background:#ddd;
 }

 .indentmenu ul li a:visited{
 color: white;
 }

 .indentmenu ul li a.selected{
 color: white !important;
 padding-top: 6px; /*shift text down 1px*/
 padding-bottom: 4px;
 border: 1px solid #000000;
 background:#000000;
 }

 .tabcontentstyle{ /*style of tab content container*/
 border: 1px solid gray;
 width: 450px;
 margin-bottom: 1em;
 padding: 10px;
 }

 .tabcontent{
 display:none;
 }

 @media print {
 .tabcontent {
 display:block !important;
 }
 }
2. Buka blogger, masuk ke design dan edit HTML. Backup file untuk mencegah hal-hal yang tidak diinginkan. Caranya, klik download full template
3. Tekan F3 dan ketik ]]></b:skin> kemudian paste-kan kode skrip yang telah dicopy tepat di atas kode ]]></b:skin>
4. Tekan kembali F3, ketik </head>, Copy kode skrip dibawah dan letakkan tepat di di atas </head>
<script type='text/javascript'>
//<![CDATA[
//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0) 

////Don't need to edit below////////////////////////

function ddtabcontent(tabinterfaceid){
 this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
 this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
 this.enabletabpersistence=true
 this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
 this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
 this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
 this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
 this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){ 
 var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
 if (document.cookie.match(re)) //if cookie found
  return document.cookie.match(re)[0].split("=")[1] //return its value
 return ""
}

ddtabcontent.setCookie=function(name, value){
 document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

 expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
  this.cancelautorun() //stop auto cycling of tabs (if running)
  var tabref=""
  try{
   if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
    tabref=document.getElementById(tabid_or_position)
   else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
    tabref=this.tabs[tabid_or_position]
  }
  catch(err){alert("Invalid Tab ID or position entered!")}
  if (tabref!="") //if a valid tab is found based on function parameter
   this.expandtab(tabref) //expand this tab
 },

 cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
  if (dir=="next"){
   var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
  }
  else if (dir=="prev"){
   var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
  }
  if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
   this.cancelautorun() //stop auto cycling of tabs (if running)
  this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
 },

 setpersist:function(bool){ //PUBLIC function to toggle persistence feature
   this.enabletabpersistence=bool
 },

 setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
  this.selectedClassTarget=objstr || "link"
 },

 getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
  return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
 },

 urlparamselect:function(tabinterfaceid){
  var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
  return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
 },

 expandtab:function(tabref){
  var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
  //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
  var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
  this.expandsubcontent(subcontentid)
  this.expandrevcontent(associatedrevids)
  for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
   this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
  }
  if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
   ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
  this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
 },

 expandsubcontent:function(subcontentid){
  for (var i=0; i<this.subcontentids.length; i++){
   var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
   subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
  }
 },

 expandrevcontent:function(associatedrevids){
  var allrevids=this.revcontentids
  for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
   //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
   document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
  }
 },

 setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
  for (var i=0; i<this.hottabspositions.length; i++){
   if (tabposition==this.hottabspositions[i]){
    this.currentTabIndex=i
    break
   }
  }
 },

 autorun:function(){ //function to auto cycle through and select tabs based on a set interval
  this.cycleit('next', true)
 },

 cancelautorun:function(){
  if (typeof this.autoruntimer!="undefined")
   clearInterval(this.autoruntimer)
 },

 init:function(automodeperiod){
  var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
  var selectedtab=-1 //Currently selected tab index (-1 meaning none)
  var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
  this.automodeperiod=automodeperiod || 0
  for (var i=0; i<this.tabs.length; i++){
   this.tabs[i].tabposition=i //remember position of tab relative to its peers
   if (this.tabs[i].getAttribute("rel")){
    var tabinstance=this
    this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
    this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
    this.tabs[i].onclick=function(){
     tabinstance.expandtab(this)
     tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
     return false
    }
    if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
     this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
    }
    if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
     selectedtab=i //Selected tab index, if found
    }
   }
  } //END for loop
  if (selectedtab!=-1) //if a valid default selected tab index is found
   this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
  else //if no valid default selected index found
   this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
  if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
   this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
  }
 } //END int() function

} //END Prototype assignment

//]]>
</script>

5. Simpan template
6. Masuk ke halaman page elements dan add gadget, pilih html/javashript
7. Masukkan kode skript berikut ini:
<table border="8" cellpadding="3" />
<tr>
<td>
<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:300px;">

    <div id="pettabs" class="indentmenu">

    <ul>
    <li><a href="#" class="selected" rel="tab1">1</a></li>
    <li><a href="#" rel="tab2">2</a></li>
    <li><a href="#" rel="tab3">3</a></li>
    <li><a href="#" rel="tab4">4</a></li>

    </ul>
    <br style="clear: left" />
    </div>

    <div style="width:220px;text-align:justify;padding: 5px; margin-bottom:1em">

    <div id="tab1" class="tabcontent">
    <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="230" src="http://i829.photobucket.com/albums/zz213/4raharjo/nanang.jpg" height="160" title="Sumafone distributor pulsa all operator lintas nasional harga grosir" />

    <p><h3><a href="http://www.pulsahp.net">Sumafone</a></h3></p>
Distributor pulsa all operator harga grosir lintas wilayah
    </div>

    <div id="tab2" class="tabcontent">
    <a href="http://www.pulsahp.net/2009/10/mitra-pulsa-bersama-sumafone-adalah.html">
    <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="230" src="http://1.bp.blogspot.com/_2P_djTkxkFw/TGbrfqoOlzI/AAAAAAAABGg/r-cloGEjlJs/s320/daftar-pulsa-2.jpg" height="160" title="Peluang bisnis sebagai mitra sumafone" /></a>
    <p><h3><a href="http://www.pulsahp.net/2009/10/mitra-pulsa-bersama-sumafone-adalah.html">Peluang bisnis sebagai mitra sumafone</a></h3></p>
Transaksi/komplain 24 jam, harga pulsa grosir, dan stok terjamin
    </div>

    <div id="tab3" class="tabcontent">
    <a href="http://www.pulsahp.net/2009/11/poin-reward-transaksi-sumafone.html">
    <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N &#39;Roses" width="225" src="http://lh5.ggpht.com/_2P_djTkxkFw/TMey20QSADI/AAAAAAAABeU/WHq6ZBpDayk/poinreward.jpg" height="160" title="Tingkatkan transaksi, dapatkan keuntungannya, raih poinnya, dan tukarkan hadiahnya" /></a>
    <p><h3><a href="http://www.pulsahp.net/2009/11/poin-reward-transaksi-sumafone.html">Poin reward transaksi</a></h3></p>
Setiap transaksi mendapat poin yang bisa ditukarkan dengan hadiah berupa deposit pulsa
    </div>

    <div id="tab4" class="tabcontent">
    <a href="http://www.pulsahp.net/2009/10/strategi-bisnis-pulsa-dengan-cerdas.html">
    <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="225" src="http://1.bp.blogspot.com/_2P_djTkxkFw/Ss00N52asKI/AAAAAAAAAOA/nzB9ufhnq3I/s400/server-goga.jpg" height="160" title="Strategi bisnis pulsa dengan cerdas" /></a>
    <p><h3><a href="http://www.pulsahp.net/2009/10/strategi-bisnis-pulsa-dengan-cerdas.html">Strategi bisnis pulsa</a></h3></p>
Pahami sistem, rancang strategi, dan implementasikan. Silahkan baca artikelnya
    </div> </div>

    <script type="text/javascript">

    var mypets=new ddtabcontent("pettabs")
    mypets.setpersist(true)
    mypets.setselectedClassTarget("link")
    mypets.init(6000)

 </script></div>
</td>
</tr>
</table>

8. Edit sesuai selera anda dengan mengganti link gambar dan uraian. Sesuaikan lebar dan tinggi dengan edit besar widht dan hight, baik untuk besar frame maupun gambarnya. Untuk mengatur cepat lambat slide, ganti nominal mypets.init(6000) dengan angka lebih besar jika ingin lebih lama durasi pergantian slide-nya.

0 Komentar:

Posting Komentar

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More