Cara Membuat Slide Ala Kompas.com

Posted on
  • 15 Juni 2011
  • by
  • Unknown
  • in
  • Label:

  • Saya dari dulu Nyari cara bikin Slide bergambar kaya di blog saya tapi ngga ketemu-ketemu,karena banyak sobat blogger yang nanya cara bikinya bagaimana akhirnya saya mencari cara-caranya dan ada sobat bloger yaitu agan KOMUD atau andr3455 yang mau berbagi ilmunya dan mau saya COPAS artikelnya.
    mungkin slide yang saya bikin tidak sama dengan menu slide yang saya miliki saat di menu HOME tetapi menu slide yang muncul ketika melihat postingan,seperti menu slide yg di samping tu loh.OK langsung ja deh saya kasih tau cara-caranya,cekidot...

    1. Log In ke Blog,
    2. Klik Rancangan,
    3. Klik Edit HTML,
    4. Kalau masih ragu Download Template Lengkap dulu,
    5. Centang ,
    6. Cari kode ]]></b:skin> Gunakan F3 atau Ctrl+F untuk mempermudah pencarian,
    7. Setelah Ketemu Letakan Script ini dan letakan di atas kode tadi:

      <!--Slide1 blognewb1e.blogspot.com-->
      /* Start Slide*/
      .img400{width:100%;height:250px;}.img400 img{width:99%;height:250px;border:2px solid#000;z-index:80;}.cursor{cursor:pointer;}.h250{height:250px;}.min250{margin-top:-250px;}.des_4{background:#000;padding:3px 8px;filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;width:80px;color:#F60;margin-bottom:2px;z-index:990;}.des_1{background:#000;height:57px;padding:3px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;z-index:990;}.des_1a{background:#000;height:50px;padding:10px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;margin-top:-60px;}.font16{font-size:13px;}.font16{font-size:14px;}.c_white{color:#FFF;}.c_white a{text-decoration:none;color:#FFF;}.c_white a:hover{text-decoration:underline;}.page_hl a{font:bold 12px arial;color:#FFF;text-decoration:none;padding:2px 5px;display:inline;background:#000000;filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;}.page_hl a:hover,.page_hl a.selected{color:#fff;text-decoration:none;background:#000;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60;}.page_hl span a{color:#FFF;text-decoration:none;background:#F30;filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;}.pd_5{padding:5px;}.clearit{clear:both;margin:0;padding:0;}.pb_10{padding-bottom:10px;}
      <!--Slide1 end blognewb1e.blogspot.com-->
    8. Selanjutnya Cari kode </head> setelah ketemu,letakkan kode berikut di atas nya:

      <!--Slide2 blognewb1e.blogspot.com-->
      <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)

      ////NO NEED TO EDIT BELOW blognewb1e.blogspot.com////////////////////////

      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>
      <!--Slide2 end blognewb1e.blogspot.com-->
    9. Lalu Setelah itu klik Elemen Laman Klik Tambah Gadget Pilih HTML/Java Script Dan COPAS script ini :
      <!--Slide blognewb1e.blogspot.com-->
      <div id="gal1" class="img400">
      <div class="h250"><img alt="" src="http://URL GAMBAR KAMU&cat=1&pid=2107&cache=false" /></div>
      <div class="min250">
      <div style="margin-top:168px;" class="des_4"><strong>JUDUL</strong></div>
      <div class="des_1 font16 c_white"><span class="font11 c_orange">ISI TERSERAH ANDA</span><br /><a href="http://blognewb1e.blogspot.com"><strong>more</strong></a>
      </div>
      </div>
      </div><div id="gal2" style="display:none;"

      class="img400">
      <div class="h250"><img alt="" src="http://URL GAMBAR KAMU" /></div>
      <div class="min250">
      <div style="margin-top:168px;" class="des_4"><strong>JUDUL</strong></div>
      <div class="des_1 font16 c_white"><span class="font11 c_orange">ISI TERSERAH ANDA</span><br /><a href="http://blognewb1e.blogspot.com"><strong>more</strong></a>
      </div>
      </div>
      </div><div id="gal3" style="display:none;"

      class="img400">
      <div class="h250"><img alt="" src="http://URL GAMBAR KAMU&cat=1&pid=2107&cache=false" /></div>
      <div class="min250">
      <div style="margin-top:168px;" class="des_4"><strong>JUDUL</strong></div>
      <div class="des_1 font16 c_white"><span class="font11 c_orange">ISI TERSERAH ANDA</span><br /><a href="http://blognewb1e.blogspot.com"><strong>more</strong></a>
      </div>
      </div>
      </div><div id="gal4" style="display:none;"

      class="img400">
      <div class="h250"><img alt="" src="http://URL GAMBAR KAMU" /></div>
      <div class="min250">
      <div style="margin-top:168px;" class="des_4"><strong>JUDUL</strong></div>
      <div class="des_1 font16 c_white"><span class="font11 c_orange">ISI TERSERAH ANDA</span><br /><a href="http://blognewb1e.blogspot.com"><strong>more</strong></a>
      </div>
      </div>
      </div><div id="gal5" style="display:none;"

      class="img400">
      <div class="h250"><img alt="" src="http://URL GAMBAR KAMU" /></div>
      <div class="min250">
      <div style="margin-top:168px;" class="des_4"><strong>JUDUL</strong></div>
      <div class="des_1 font16 c_white"><span class="font11 c_orange">ISI TERSERAH ANDA</span><br /><a href="http://blognewb1e.blogspot.com"><strong>more</strong></a>
      </div>
      </div>
      </div><div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5"><a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a> </div></div><div

      class="clearit"></div>
      <div class="clearit pb_10"></div>
      <script type="text/javascript">
      var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(5000)
      </script>
      <!--Slide end blognewb1e.blogspot.com-->
    10. Simpan dan lihat Hasilnya.!!!

    NB :
    • Untuk ukuran lebar slide otomatis mengikuti widget blog anda.
    • Ganti Tulisan yang bercetak tebal dengan link atau tulisan yang anda inginkan.
    • Happy Blogger dah.
    Sumber : KOMUD


    12 komentar:

    Unknown mengatakan...

    Gan, ngikut kopi ya.. semuga kasih gulanya :)

    Unknown mengatakan...

    satu lagi gan, buat panjang JUDUL dimana editnya? dah pusing... terlalu pendek :'(

    alfiandika mengatakan...

    @Pik ane jg bngung maz bro,soalnya dah ane cari ngga ktmu2.....

    juel mengatakan...

    langsung di praktekin dah...... :D

    Surya Erlangga mengatakan...

    langsung praktek aja deh gan... makasih ya...

    Digital Boy mengatakan...

    Nice info ..:D ijin copas scriptnya ya!!!

    Dayz mengatakan...

    Slidenya keren neh :)
    mantap,, ntar pasang ah :D

    ztiffler zoo mengatakan...

    bagus gan..makasih..tapi klobuat leader bord ada ga gan..

    Anonim mengatakan...

    kunjangan malam and happy blogging

    Obat Tradisional Penyakit Asam Urat mengatakan...

    makasih banyak infonya.....

    Edi mengatakan...

    Mantab bro.. patut di coba. cara membuat kotak scroll di bawah pada arsip blog, new komentar n label gimana ya?

    Unknown mengatakan...

    Gk ada yang otomatis langsung ambil dari Postingan yang di publish?

    Posting Komentar

    Yang dah mampir di Blog Ane Jangan Lupa ninggalin KOmen ea gan.

     
    (◕‿-) Designer By Alfiandika Nur Muhammad Putra
    Sponsored By Blog Newb1e