Membuat Menu Tab View dengan Fungsi Foward dan Back

Ada yang merequest tutorial sahabat saya yaitu mbak Deta.Karena ada waktu luang,akhirnya bisa kukerjakan juga

Bagaimana cara membuat menu yang ada tiga fungsi itu?

Mau tahu caranya ikuti langkah-langkahnya :

• Login ke Blogger.com

• Klik Layout/Tata Letak

• Klik Menu Edit HTML

• Klik Edit HTML --> Sebelumnya terlebih dahulu anda backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.

• Copy Paste kode berikut diatas kode ]]></b:skin>

  /* ######### CSS for Shade Tabs. Remove if not using ######### */
  
  .shadetabs{
  padding: 3px 0;
  margin-left: 0;
  margin-top: 1px;
  margin-bottom: 0;
  font: bold 12px Verdana;
  list-style-type: none;
  text-align: left; /*set to left, center, or right to align the menu as desired*/
  }
  
  .shadetabs li{
  display: inline;
  margin: 0;
  }
  
  .shadetabs li a{
  text-decoration: none;
  position: relative;
  z-index: 1;
  padding: 3px 7px;
  margin-right: 3px;
  border: 1px solid #778;
  color: #2d2b2b;
  background: white url(gambar shade.gif) top left repeat-x;
  }
  
  .shadetabs li a:visited{
  color: #2d2b2b;
  }
  
  .shadetabs li a:hover{
  text-decoration: underline;
  color: #2d2b2b;
  }
  
  .shadetabs li a.selected{ /*selected main tab style */
  position: relative;
  top: 1px;
  }
  
  .shadetabs li a.selected{ /*selected main tab style */
  background-image: url(gambarshadeactive.gif);
  border-bottom-color: white;
  }
  
  .shadetabs li a.selected:hover{ /*selected main tab style */
  text-decoration: none;
  }
  
  .tabcontent{
  display:none;
  }
  
  @media print {
  .tabcontent {
  display:block !important;
  }
  }
  
  /* ######### CSS for Inverted Modern Bricks II Tabs. Remove if not using ######### */
  
  .modernbricksmenu2{
  padding: 0;
  width: 362px;
  border-top: 5px solid #D25A0B; /*Brown color theme*/
  background: transparent;
  voice-family: "\"}\"";
  voice-family: inherit;
  }
  
  .modernbricksmenu2 ul{
  margin:0;
  margin-left: 10px; /*margin between first menu item and left browser edge*/
  padding: 0;
  list-style: none;
  }
  
  .modernbricksmenu2 li{
  display: inline;
  margin: 0 2px 0 0;
  padding: 0;
  text-transform:uppercase;
  }
  
  .modernbricksmenu2 a{
  float: left;
  display: block;
  font: bold 11px Arial;
  color: white;
  text-decoration: none;
  margin: 0 1px 0 0; /*Margin between each menu item*/
  padding: 5px 10px;
  background-color: black; /*Brown color theme*/
  border-top: 1px solid white;
  }
  
  .modernbricksmenu2 a:hover{
  background-color: #D25A0B; /*Brown color theme*/
  color: white;
  }
  
  .modernbricksmenu2 a.selected{ /*currently selected tab*/
  background-color: #D25A0B; /*Brown color theme*/
  color: white;
  border-color: #D25A0B; /*Brown color theme*/
  }
  
  .tabcontent{
  display:none;
  }
  
  @media print {
  .tabcontent {
  display:block !important;
  }
  }
  
  /* ######### CSS for Indented CSS Tabs. Remove if not using ######### */
  
  
  .indentmenu{
  font: bold 13px Arial;
  width: 100%; /*leave this value as is in most cases*/
  }
  
  .indentmenu ul{
  margin: 0;
  padding: 0;
  float: left;
  /* width: 80%; width of menu*/
  border-top: 1px solid navy; /*navy border*/
  background: black url(gambar indentbg.gif) center center repeat-x;
  }
  
  .indentmenu ul li{
  display: inline;
  }
  
  .indentmenu ul li a{
  float: left;
  color: white; /*text color*/
  padding: 5px 11px;
  text-decoration: none;
  border-right: 1px solid navy; /*navy divider between menu items*/
  }
  
  .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;
  background: black url(gambar indentbg2.gif) center center repeat-x;
  }
  
  
  .tabcontentstyle{ /*style of tab content oontainer*/
  border: 1px solid gray;
  width: 450px;
  margin-bottom: 1em;
  padding: 10px;
  }
  
  .tabcontent{
  display:none;
  }
  
  @media print {
  .tabcontent {
  display:block !important;
  }
  }

• Copy Paste Script berikut dibawah kode <head>

  <script type="text/javascript" src="http://www.geocities.com/ridwanox/tabcontent.js"/>

  
  

Langkah kedua

• Klik Tata Letak/Layout

• Klik Elemen Halaman/Page Elements

• Klik Tambah Gadget/Add Gadget

• Copy Paste Kode Berikut :

  <ul id="countrytabs" class="shadetabs">
  <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
  <li><a href="#" rel="country2">Tab 2</a></li>
  <li><a href="#" rel="country3">Tab 3</a></li>
  <li><a href="#" rel="country4">Tab 4</a></li>
  <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
  </ul>
  
  <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
  
  <div id="country1" class="tabcontent">
  Tab content 1 here<br />Tab content 1 here<br />
  </div>
  
  <div id="country2" class="tabcontent">
  Tab content 2 here<br />Tab content 2 here<br />
  </div>
  
  <div id="country3" class="tabcontent">
  Tab content 3 here<br />Tab content 3 here<br />
  </div>
  
  <div id="country4" class="tabcontent">
  Tab content 4 here<br />Tab content 4 here<br />
  </div>
  
  </div>
  
  <script type="text/javascript">
  
  var countries=new ddtabcontent("countrytabs")
  countries.setpersist(true)
  countries.setselectedClassTarget("link") //"link" or "linkparent"
  countries.init()
  
  </script>
  
  <p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none"><img src="rhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKLNzPAM5O95wfBFmkDALKgYhhwDqkwbRPjjdtKWVG56kTn1CoWLL1_wCCF2iykV-DQ_WYZmHTIuFRMPbEfokmqJBgdoFX7N9ygzmPfm5_wuh5ft_CDQdXbbPp6J0A60w6tZJxg5NFQzo/s1600/roundleft.gif" border="0" /> Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVmkJS7C3SEiBJCMebMHoYF9PbgejKQNcn9NdK090T0-i4Mw9CUur4S7seko3BiMmy4U0IQLZySa7kO9BDcu_pcooEHju_z5lpBtvpQtIjPUGMyvSLW4NG2gtkoW3e3b1GgqkzmSHJlfo/s1600-h/roundright.gif" border="0" /> Forward</a></p>
  
  <hr />

  
  

• Simpan

Jika anda berhasil maka hasilnya akan begini :