12/16/2009

Buat, Pasang, Desain "Tab View" kayak di blog ini

Sumber: Blog Komputer
Tab View merupakan sebuah Widget yang dapat meletakkan link atau gambar atau apapun juga kedalamnya, yang tentu akan memakan Sidebar jika ditampilkan semuanya sampai kebawah, dengan Tab View ini kita dapat menghemat pemakaian Sidebar. Dan banyak sekali cara pembuatan Tab View begitupun Bentuknya, caranya berikut ini :

Berikut langkah-langkahnya

1. Login ke blogger dengan ID anda

2. Lalu Klik Menu Templates


3. Klik Sub Menu Edit HTML

4. Pada Kotak Edit HTML cari Kode ]]></b:skin>

5. Lalu Copy Kode berikut dan Pastekan diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}


6. Lalu letakkan kode berikut dibawah kode <head>


<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

7. Save Template

8. Pergi ke halaman Element Halaman

9. Klik Add Widget Element

10. Pilih Menu HTML/Java Script

11.Lalu Copy kode berikut

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

12. Klik Save. (selesai sudah)

-------------------------------------------------------------------------------------------------------
Untuk Lebih paham ini saya kasih script tab view punya saya, anda/ kamu/ saudara/ saudari bisa mengotak - atik script berikut ini !!!!

<form action="tabateonsoft.html" method="get">
<div id="Tabateonsoft" class="Tabateonsoft">
<div class="TFs">
<a>Recent Post</a>
<a>Recent Comment</a>
<a>About Visitor</a>
<a>Top Post</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
<script style="text/javascript" src="http://sites.google.com/site/ruangsc/enes/rc-posts.js"></script>
<script style="text/javascript">
var numposts = 15;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://symoi.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<script style="text/javascript" src="http://sites.google.com/site/hostingfreesite/javascript/Recent_Comments.js"></script><script style="text/javascript">var numcomments = 7;var showcommentdate = true;var showposttitle = true;var numchars = 75;var standardstyling = true;</script><script src="http://symoi.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<script src="http://www.e-referrer.com/link.js" type="text/javascript">
</script>
<script type="text/javascript">
write_ref(53583);
</script>
<div style="border:0px;padding:0px;border-collapse:collapse;text-align:center;margin-left:auto;margin-right:auto;font-size:xx-small">
<a href="http://www.e-referrer.com/" target="new" title="Visit eReferrer and get your own FREE referrer list!">www.symoi.blogspot.com</a>
</div>

<center>
<!-- Site Meter -->
<script src="http://s26.sitemeter.com/js/counter.js?site=s26symoi" type="text/javascript">
</script>
<noscript>
<a href="http://s26.sitemeter.com/stats.asp?site=s26symoi" target="_top">
<img border="0" alt="Site Meter" src="http://s26.sitemeter.com/meter.asp?site=s26symoi"/></a>
</noscript>
<!-- Copyright (c)2009 Site Meter --></center>

<center>
<a href="http://whos.amung.us/stats/ido4jz1bs8hr/"><img border="0" width="81" src="http://whos.amung.us/widget/ido4jz1bs8hr.png" height="29" title="Click to see how many people are online"/></a></center>

<!-- Begin Shinystat Free MSN code -->
<div align="center">
<a href="http://www.shinystat.com" target="_top">
<img border="0" alt="Free hit counter" src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=symoi"/></a>
</div>
<!-- End Shinystat Free MSN code -->

<center>
<script language="JavaScript" src="http://xslt.alexa.com/site_stats/js/s/a?url=symoi.blogspot.com" type="text/javascript"></script></center>

<center>
<a href="http://www.ipnow.org"><img border="0" src="http://www.ipnow.org/images/1/00FF00/000000/newmyinfo.jpg"/></a></center>
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1db0519c1a1484330328c8c455a513c7&url=http%3A%2F%2Fsymoi.blogspot.com&num=10" type="text/javascript"></script>
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

PERHATIAN:
Bila Anda/ kamu/ saudara/ saudari merasa belum paham saya bersedia membantu anda sekalian, untuk meminta bantuan saya, anda bisa beri Komentar anda di Kotak komentar dibawah ini.
(Pake emotion-nya ya) Terima Kasih, Senang Membantu anda.

Read in Another Language : by

Share

Related Post:

1 komentar:

Surya26 mengatakan...

mass...saya paste kode di atas di blog saya mau, tapi gak bisa di klik tabnya. cuma muncul tab 1 aja. tab yang lain gak bisa di klik. mohon bantuannya.terimakasih

Dapatkan Buku Tamu Seperti Ini di
 

© Copyright by Belajar Blog Yuk. . . | Template by BloggerTemplates | Blog Trick at Blog-HowToTricks