-->

Slick Tabbed Content Area

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<style type="text/css"> body {  background-image:url(images/background.jpg);  background-repeat:no-repeat;  background-position:top center;  background-color:#000;  margin:40px; }  #tabbed_box_1 {  margin: 0px auto 0px auto;  width:400px; } .tabbed_box h4 {  font-family:Arial, Helvetica, sans-serif;  font-size:23px;  color:#ffffff;  letter-spacing:-1px;  margin-bottom:10px; } .tabbed_box h4 small {  color:#e3e9ec;  font-weight:normal;  font-size:9px;  font-family:Verdana, Arial, Helvetica, sans-serif;  text-transform:uppercase;  position:relative;  top:-4px;  left:6px;  letter-spacing:0px; } .tabbed_area {  border:1px solid #494e52;  background-color:#636d76;  padding:8px;  }  ul.tabs {  margin:0px; padding:0px;  margin-top:5px;  margin-bottom:6px; } ul.tabs li {  list-style:none;  display:inline; } ul.tabs li a {  background-color:#464c54;  color:#ffebb5;  padding:8px 14px 8px 14px;  text-decoration:none;  font-size:9px;  font-family:Verdana, Arial, Helvetica, sans-serif;  font-weight:bold;  text-transform:uppercase;  border:1px solid #464c54;  background-image:url(images/tab_off.jpg);  background-repeat:repeat-x;    background-position:bottom; } ul.tabs li a:hover {  background-color:#2f343a;  border-color:#2f343a; } ul.tabs li a.active {  background-color:#ffffff;  color:#282e32;  border:1px solid #464c54;   border-bottom: 1px solid #ffffff;  background-image:url(images/tab_on.jpg);  background-repeat:repeat-x;  background-position:top;  } .content {  background-color:#ffffff;  padding:10px;  border:1px solid #464c54;    font-family:Arial, Helvetica, sans-serif;  background-image:url(images/content_bottom.jpg);  background-repeat:repeat-x;    background-position:bottom;  } #content_2, #content_3 { display:none; }  .content ul {  margin:0px;  padding:0px 20px 0px 20px; } .content ul li {  list-style:none;  border-bottom:1px solid #d6dde0;  padding-top:15px;  padding-bottom:15px;  font-size:13px; } .content ul li:last-child {  border-bottom:none; } .content ul li a {  text-decoration:none;  color:#3e4346; } .content ul li a small {  color:#8b959c;  font-size:9px;  text-transform:uppercase;  font-family:Verdana, Arial, Helvetica, sans-serif;  position:relative;  left:4px;  top:0px; } .content ul li a:hover {  color:#a59c83; } .content ul li a:hover small {  color:#baae8e; } </style><br /> <script src="http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/scripts/jquery-1.2.3.min.js"></script><br />     <script>      // When the document loads do everything inside here ...    $(document).ready(function(){      // When a link is clicked   $("a.tab").click(function () {            // switch all tabs off    $(".active").removeClass("active");        // switch this tab on    $(this).addClass("active");        // slide all content up    $(".content").slideUp();        // slide this content up    var content_show = $(this).attr("title");    $("#"+content_show).slideDown();        });      });   </script>

Markah Html

<div id="tabbed_box_1" class="tabbed_box">
<h4>Browse Site <small>Select a Tab</small></h4>
<div class="tabbed_area">


<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Topics</a></li>
<li><a href="#" title="content_2" class="tab">Archives</a></li>
<li><a href="#" title="content_3" class="tab">Pages</a></li>
</ul>

<div id="content_1" class="content">
<ul>
<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
<li><a href="">CSS Styling <small>32 Posts</small></a></li>
<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
<li><a href="">Site News <small>6 Posts</small></a></li>
<li><a href="">Web Development <small>8 Posts</small></a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
<li><a href="">December 2008 <small>6 Posts</small></a></li>
<li><a href="">November 2008 <small>4 Posts</small></a></li>
<li><a href="">October 2008 <small>22 Posts</small></a></li>
<li><a href="">September 2008 <small>12 Posts</small></a></li>
<li><a href="">August 2008 <small>3 Posts</small></a></li>
<li><a href="">July 2008 <small>1 Posts</small></a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contribute</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>

</div>

</div>

Browse Site Select a Tab

Selamat Mencoba

credit: d2o0t5hpnwv4c1.cloudfront

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

© Tips&Tricks, AllRightsReserved.

Designed by ScreenWritersArena