Tutorial : Kotak chatbox macam ibu.




بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 


Salam petang semua, okey ari ni ibu nak cuba2 buat tutorial kotak chatbox macam ibu. Haaa suke tak??…suke tak??…ekekeke, kotak chatbox macam ibu tue masih ada shoutmix lagi kan?…takper2 ibu nak remove shoutmix tue nanti sebab2 shoumix dah start nak kena bayarkan?? ahaksss….tapi terima kasih lah pada shoutmix yang dah banyak berjasa pada blog ibu selama nie…jasamu tetap ibu kenang…
 

Okey kotak chatbox macam ibu tu ramai yang berkenan sebelum ni, mungkin sebab ada kolum “Waktu Solat” kat situ…senang kan nak refer waktu solat mengikut kawasan?…ada jugak yang mintak buat tutorial…tapi ibu mmg tak pandai nak buat tutor. Rasanya ibu copy paste tutorial ni dulu dekat blog http://teknikbuatblog.blogspot.com agaknya, tapi bila sampai jek kat ibu, HTML kod nie agak berterabur…ehehehe


Ibu sorang jek yang paham kadang2…sebab ibu suke godeh2 sendiri sebenarnya bila bermain ngan kod HTML nieh…Ibu takut orang tak faham kang tengok kod HTML ibu ekekeke…tapi untuk kebaikkan bersama, ibu cuba juga buat tutorial kotak chatbox & waktu solat nieh…harap ramai yang sudi guna ya!!



Tutorialnya :

1. “Design” dan terus ke “Page Elemen”
2. Kemudian click “Add Gadget”
3. Lepas tu pilih “HTML/JavaScript” dan copy/paste masukkan script dibawah ini :
 
<center>
<style type="text/css">
div.TabView div.Tabs
{height: 50px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 68px; /* Lebar Menu Utama Atas */
text-align:center ; height: 40px; /* Tinggi Menu Utama Atas */
padding-top:10px; vertical-align:center; border:1px dashed #000000; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Print Bold", Print Bold; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #000000; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px dashed #000000; /* Lebar background Kotak Utama */ width: 250px; /* Warna border Kotak Utama */  overflow:hidden; background-color: transparent; /* Warna background Kotak Utama */ -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px}
div.TabView div.Pages div.Page {height:100%; padding:2px; 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: 220px;" class="Tabs">
<a>MASUKKAN TITLE TAB 1</a>
<a>MASUKKAN TITLE TAB 2</a>
<a>MASUKKAN TITLE TAB 3</a>
</div>
<div style="width:208px; height:370px; " class="Pages">
<div class="Page">
<div class="Pad">
[MASUKKAN HTML KOD C/BOX]
</div>
</div>
<div class="Page">
<div class="Pad">
[MASUKKAN HTML KOD SHOUMIX]
</div>
</div>
<div class="Page">
<div class="Pad">
[MASUKKAN HTML KOD WAKTU SOLAT]
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<center><br>

4. Penerangan :

XXXXX = resize semula lebar dan ketinggian bahagian TAB MENU & size ketinggian kotak mengikut kesesuaian anda. (yang ni takyah tukar2 pon ok kalau nak ikut size kotak comel ibu)

XXXXX = style border sekeliling kotak Chatbox anda : solid, dashed, dotted.
XXXXX = background color bagi ruangan tajuk TAB MENU mengikut warna yang anda inginkan. macam ibu punya warna hitam Smile

XXXXX = masukkan nama bagi tajuk tab menu anda bagi setiap bahagian 1,2 & 3. Contoh macam ibu punya tajuk tab menu : S box, C Box, Solat.

XXXXX = masukkan HTML kod Shoutmix & Cbox diruangan yang disediakan. Kalau ikut size kotak tab ibu dari mula tadi, size bagi lebar dan ketinggian yang sesuai untuk kotak Cbox & Smix ialah Width : 190px dan height : 350px. Pandai2 kamu adjust ketinggiannya k Smile

XXXXX = untuk kod HTML waktu solat, sila dapatkan HTML kod nya dilink ini : http://www.al-azim.com/~roslan/solatv2.html ianya bagi mendapatkan waktu solat yang besesuaian dengan koordinat kod tempat tinggal anda. Kemudian masukkan HTML kod diruangan yang disediakan.


5. Kemudian click SAVE Gadget dan review.


Selamat mencuba ya!! kalau tak jadik tue cuba pergi tengok tutorial dekat blog http://teknikbuatblog.blogspot.com tau…mungkin tutorial dia korang lebih mudah nak faham Smile



P/S ku : pada sesiapa yang tak faham tutor ibu yang agak berserabut ni ibu nak mintak maaf banyak2 k. Ibu dah cakap ibu mmg tak pandai buat tutor nie. hehehe





kalau suka LIKE k... :D

4 cuties - nak komen? KELIK SINI pon boleh!!:

ajumohit berkata... Reply To This Comment

Tq for sharing ye Sheila, susah jugak kalau tak pandai IT ni hihi

Hanis Azla berkata... Reply To This Comment

mmg cantik.. tp akak mmg fail bab html coding ni.. he..he..

Shiela Latif berkata... Reply To This Comment

@ajumohit ala...shiela lagi tak pandai...men godeh2 jek...pastue berterabur...hahaha

Shiela Latif berkata... Reply To This Comment

@Hanis Azla tak kesah kak...akak ada kelebihan lain yang shiela susah lak nak buat...tulis novel. mmg hebat tau

Related Posts Plugin for WordPress, Blogger...