Tutorial Cara Buat TabView Tanpa Mengubah Template

Hai all...Hari ini koz nak ajar korang cara hendak membuat Widget Tabview di blog...Tutorial ini ramai juga buat permintaan supaya koz dapat mengubah script asal yang jika di guna pakai ia juga memberi effect pada code HTML template...Alhamdulillah koz dapat juga mengubah scriptnya yang tidak akan mengganggu script/code template jika menggunakannya.

Widget ini dapat menjimatkan ruang sidebar sesebuah blog...ia juga turut dapat meringankan loanding sesebuah blog...Jika berminat memiliki widget ini, mari ikuti cara-cara atau langkah-langkah membuatnya:-

Langkah 1

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 2

Copy dan paste code di bawah

<div id="widget" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio98V2oipjDqw1DqdSHshmjeg3zx_W0V5fyM4fwG0Wp6Xuj_mDSuPTCRGlgj_qbeeleinTNT4LpMWWx6NI0TVET8wAkgNNJuU3Zt2bjKb1bEcHDkc4bwn3mfLphKLr27fEzEP6kIPCEJht/s1600/bg+widget.png) no-repeat left top; width:350px;height:406px;padding: 50px 10px 0px;text-align: center;line-height: 1 ">

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Main Menu Top Width */
text-align:center ; height: 30px; /* Top High Main Menu
*/
padding-top:8px; vertical-align:middle; border:2px solid #66CCFF; /* Top Menu border color */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Top Fonts Main Menu */
font-weight:bold; color:#000; /* Main Menu Font Color Top */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #CCF0FF; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:2px solid #66CCFF; /* Main Box border color */ overflow:hidden; background-color:#FFFFFF; /* Main Box background color */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Tajuk 1</a>

<a>Tajuk 2</a>

<a>Tajuk 3</a>
</div>
<div style="width:300px; height:310px; " class="Pages">
<div class="Page">
<div class="Pad">

ISI TAJUK 1(TEXT/CODE HTML)

</div>
</div>
<div class="Page">
<div class="Pad">

ISI TAJUK 2(TEXT/CODE HTML)

</div>
</div>
<div class="Page">
<div class="Pad">

ISI TAJUK 3(TEXT/CODE HTML)

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

</div>

Sedikit perubahan harus dilakukan pada code berwarna merah tetapkan tajuk dan code berwarna biru tetapkan isi kandungan mengikut tajuk masing-masing...

Jika ingin mengubah background widget ini,gantikan di code berwarna ungu dan tetapkan saiz gambar berkenaan ( width 350px height 406px )

Save dan lihat hasilnya...

Selamat mencuba^ ^...