STATUS UPDATED!
FEEL FREE TO ASK~
Tutorial Blog ^_^: TUTORIAL: MULTITAB WIDGET

Sekiranya anda berminat untuk membaca artikel Islam, info semasa, kisah nabi, kisah pengajaran dan lain-lain, bolehlah pergi ke Khaleefah Allah ^_^ Followlah blog ini dan blog itu sekiranya berbaloi untuk difollow. Sebarang ulasan adalah amat amat amat amat diharapkan.
Any Requests or Questions?

Jom, tukar link~

TUTORIAL: MULTITAB WIDGET

11041432H
Assalamualaikum...
Mohon bebanyak kemaafan. Lama tak update blog ini dengan tutorial baru atau freebies dll. Tutorial kali ini adalah multitab widget ala-ala blogskin. Terjumpa di sebuah blog, dan copy (dah edit sikit) di sini untuk rujukan akan datang serta untuk anda~

Contoh:











Dashboard> Design> Add a gadget> HTML/JavaScript

Copy kod di bawah dan paste pada ruangan tersebut.

<div id="polkajoker" style='width:300px;'>
<style type='text/css'>
#sedba {background:#CCF2FF;color:#151515;padding:7px;border-radius:15px;}
#sedba .menu .navi:hover {background:#66D9FF;border-radius:5px;}
#sedba .menu {border-bottom: 5px solid #66D9FF;}
#sedba .menu:hover {border-bottom:5px dashed #66D9FF;}
#sedba .menu .navi {
cursor:crosshair;
font: normal 8pt "Calibri", sans-serif;
color: #151515;
border-top: 1px solid #66D9FF;
letter-spacing: 3pt;
margin: 0;
padding: 8px 5px;
text-align: center;
text-transform: uppercase;
}
</style>
<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('content').innerHTML=document.getElementById(id).innerHTML}
</script>
<div id="sedba">
<div class="menu" >

<div class="navi" style="border-top:none;" onClick="changeNavigation('polska1')">Nav1</div>
<div class="navi" onClick="changeNavigation('polska2')">Nav2</div>
<div class="navi" onClick="changeNavigation('polska3')">Nav3</div>
<div class="navi" onClick="changeNavigation('polska4')">Nav4</div>
</div>

<div id="content">
</div>

<div id="polska1" style="display: none;">

Masukkan kod widget sini 1

</div>

<div id="polska2" style="display: none;">

Masukkan kod widget sini 2

</div>

<div id="polska3" style="display: none;">


Masukkan kod widget sini 3

</div>

<div id="polska4" style="display: none;">

Masukkan kod widget sini 4

</div></div></div>

Nota kaki:
ABC: lebar multitab widget
ABC: warna background
ABC: warna tulisan
ABC: warna background hover
ABC: kalau nak tukar cursor, gantikan kod tersebut jadi begini cursor:url(image URL), auto;
ABC: tukar tajuk dan kod widget
dapatkan kod warna di sini

*Boleh juga tukar ketebalan border, saiz lengkukan border, jenis border, jenis tulisan dll.

0 comments:

Berkatalah dengan akal dan jiwa, kerana itu anugerah Pencipta dan ternyata natijahnya akan lebih bahagia. ^_^

Post a Comment

 
Copyright © 2009-2012 Tutorial Blog ^_^: TUTORIAL: MULTITAB WIDGET
Design by a.a.ghariib