Wadah Madrasah Pengalaman: Tutorial wat horizontal menu tab (navigation bar) yang comel dan canggih


Thursday, March 3, 2011

Tutorial wat horizontal menu tab (navigation bar) yang comel dan canggih

.



Salam korang...

Hari nie nak wat Tutorial untuk Blog lak..Tutorial wat horizontal menu tab yang comel dan canggih..Canggih ke tak..tu Wan tak pasti..ehehhe..kira syok gak lah wat menu tab nie..Korang leh ke blog nie untuk tengok Review menu tab nie k..Wan hazel junior

Law korang tak nak g page tu.korang tengok bawah.. contoh law cursor korang sentuh kat icon tu..


Dah...dah tengok..Law dah jom tutorial..Law korang nak..

Tutorial nie untuk design template or layout k..Classic template tak leh..law korang terer koding HTML..korang godek godek sendiri..hehehe.

Jum kita mulakan Tutorial...

Mula mula

Dashboard>Design>Edit HTML

(tick Expand Widget Templates)
Korang copy kod bawah nie dan letak kat atas kod </head>

Bagi memudahkan pencarian tekan CTRL+F.

------------

<style type='text/css'>
border: none;
vertical-align: top;
}
</style>
<script src='http://sites.google.com/site/masdoyoksite/javascript/masdoyokexpando.js' type='text/javascript'>

/* http://wanhazel.blogspot.com/*/

</script>

-------------
Dah selesai tu..Korang save dan mulakan langkah yang seterusnya..


Dashboard>Design>Add Gadget>HTML

Lepas tu korang copy je kod bawah nie..dan isi tempat kosong..hahaha.Panjang sikit lah..

-------------------



<center>

<a href="LINK BANNER KORANG"><img class="expando" width="150" height="40"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Bi4242lHPJRK1WE9V5-ZdJTq_s1a0Tgk2gC9tUoK_kbZhIVDuIEDJoIt9acmUqxy80MNjPSrxwszQqaEZdIHUT_pZTJ_JcWnVmV2d3m53r96cRIJ3KWpDZP_hW1HBytt7cN1mcqfM7-A/s1600/banner+icon.png" /></a>


<a href="LINK MENU KORANG"><img class="expando" width="150" height="40"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu6qONVseTbhqBCDQS2CN4bbrjQCDqZBFopWcLosOKBkXfOMH_dIIcOuHvPiVJITq7MJtahE6HmlhbF292G7TyrbF3zqX-Z7f5_oEF231O7iar50AZsb5A7E2fYXnPvdwiaYZ_1DWJT3qe/s1600/menu+icon.png" /></a>


<a href="LINK BLOG KORANG" ><img class="expando"width="150" height="40"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpX4tZP5hu9xqsKOEY5bos1DDxM7BVWyAFiL65WkAArUR8pkIhCVJvPNgZe0cH9R0NByHKPXkRFWvvRoFWp1dDsTBy3tmyP4IkebcxaB423F2pLsUilA4-8irKna6z61NrOXoNSU_XMEd6/s1600/home+icon.png"/></a>

<a href="LINK TUTORIAL KORANG" target="_blank"><img class="expando" width="150" height="40"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQtMjPs-nss25pknSP1X6QfyRQBw6c1I6MHWH4V_PN0ySqgmXclW6ILQYgdxZeHbbSDQpiENASeHftTKenSy6oXJWVX81euG4XVupJ3EGlKhYtwAwEpWfvU854N0kH5RCkGyex2dKDQuH/s1600/tutorial+icon.png" /></a>

<a href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID KORANG"><img class="expando" width="150" height="40"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp8MC1g6HFXUj_IHmgDIPRJwmcAJVGM7W5XaSvUgtshngGz1SKUtJy1LEnDa8AiiKB10nDi6YaVb__f7pv8JfOKoySBa3TGL4bR_0N4kXE_Q4cj8yWQJ7dCzQ8BAGzF-iuuN0JFjkWwHj8/s1600/follow+icon.png" /></a>





<!-- Start Ajax Popup Shoutbox by -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>
img { border: none; }
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #wanhazelshoutbox {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyHDUZ7342JQ-CfwvXfAv2lnIP-QtDB7kgLqN0LSeJQu8VISRIFDn8DCVtLKXyjMbcI1OwQ4hp7MWh6JqW52deTre9S82w-WneReV8Ehhz3gsH-0vB1KwTMpyS2QxrIz8qssg84nWi5Jo/s1600/kak+yana+shout+frame+copy.png) no-repeat 0 0 transparent;
width:800px;
height:460px;
padding:56px 0 20px 5px;
}
#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<a href="#wanhazelshoutbox" name="modal"><img class="expando" width="150" height="40"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfY5UdRqesfF0qfo29AFKQPe3xhUoe6CRSMZ8uQsGIQu8pF4EzsoS6huJ9P_mAEJyurlQrFzkn9Th6cZeCu7uaQQPIMRQh2O6I2PV9S8WooAgn7abTJ26P9bYeEPR-q3PO1IiUvb9da37B/s1600/shout+icon.png" /></a>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="wanhazelshoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<br /><br />
<br /><br /><br /><br>




KOD SHOUTMIX/CBOX KORANG
tukar lebar shout korang ke 280 dan tinggi ke 280
Korang leh adjust sendiri ekot kesesuaian Frame shout korang



<!-- End ShoutMix -->
<div id="author">
<a href="http://wanhazel.blogspot.com/">Get this widget</a><br />
</div><div id="closesb"><input type="button" value="CLOSE" class="close" />
</div></div><!-- End of Ajax Shoutbox -->
<!-- Mask to cover the whole screen -->
<div id="mask"></div></div>
<!-- End of Ajax Popup Shoutbox-->
</center>

.


Yang BLOG ID KORANG tu korang leh tengok tuto nie k.Tutorial letak Button Follow

LINK BANNER KORANG
LINK MENU KORANG
LINK TUTORIAL KORANG..

Korang wat lah page baru untuk blog korang..Law tak taw cara nya senang je.

G kat new post . sebelah tuh ada edit post ...korang klik je dan create new page korang.lepas tu publish dan pilih No gadget k..Dan korang ambik link tu..



.

Mana icon yang korang tak guna..Korang buang je k..

Ok tu je..Selamat mencuba.

Papai

.



32 comments:

Mr. N said...

blog ko pye design mkin kemas.. :)

Wan_hazel said...

tengs..ehehhe

NADIA RAJAMI said...

mun nkah bloglist dapat ka??..:)

Wan_hazel said...

Dea

dapat juak...ktk tuka icon nya lak...

Unknown said...

blik nti nk cube buat lah,,,,

wan, nape ngan blog,,,??yg wan jerit kt box tu,,,??
takut plak aku wan ckp cm tu,,

Apit said...

yg kod ajax float shoutbox tuh untuk ape lak ? :)

magnoliapert said...

Wan, boleh tak wan buat tutorial nak buat template macam blog wan hazel junior. Maksud kte, tuto macam mana nak bulatkan setiap bucu blog tu, comel lah. Dah lama cari tuto tu, tak jumpe2 :'(

Wan_hazel said...

miz ruha

ruha tadi wan tgk blog ruha cam ade tak kene je..side bertimpa

Wan_hazel said...

apitrawrr

yang tu utk shoutbox

Wan_hazel said...

magnoliapert

yang tu kene wat kat adobe photoshop lepas tu ganti masuk kan blog...

kay_are said...

mane r dapat tutorial ni ye.. rajin nye search.. cane nak jadi rajin macam bro wan ?? huu

Wan_hazel said...

senang je kay..godek2 je..dulu slalu godek classic template skang nie dah de wanhazeljunior tu..wan godek lak design template..ehehhe

Proud Mommy said...

salam wan..sha dah try tuto ni..jadik..oh yer klu sha nak tkr button tu guna background sndri bolehkan?

Wan_hazel said...

boleh je..silakan..ehehe

Unknown said...

wan.. kalau nk tukar word banner, tutorial, menu tu boleh tak? contohnya nk tukar kepada facebook ke twitter ke?

Unknown said...

wan, yg shoutbox tu cane nk tukar shoutbox kite? my xfhm lorh

Wan_hazel said...

mynameismy

letak je kod shout kat situ..law nak tuka woed tu..kene ubah icon tu....

Unknown said...

letak je? meaning buang code yg wan buat tu then gantikan dengan code shoutbox my? pjg sgt code yg wan bg tu


kena tukar icon? meaning that my xboleh tukar sndiri la kan?

Wan_hazel said...

bukan..my masuk kat bhgian nie k..

KOD SHOUTMIX/CBOX KORANG
tukar lebar shout korang ke 280 dan tinggi ke 280
Korang leh adjust sendiri ekot kesesuaian Frame shout korang



ade je kat situ..a ah my..my kene tuka icon maksudnye..

Unknown said...

tukar icon? cane tu? tak faham..T_T

Wan_hazel said...

kene war sendri icon...so tka dengan kod yg nie nanti..

http://3.bp.blogspot.com/-IE4hUSdDZBI/TW8gqO8peZI/AAAAAAAAFaI/q2lLJJ0-58U/s1600/menu%2Bicon.png

ambek kod icon yg my dah wat..ganti masuk je

SFM said...

wan, npe tulisan nye mengecil?

Wan_hazel said...

mengecil??/aiyo..plik lak..

MaisarahSidi said...

tq manyak2 for dis tutorial :)
mintak izin gune kat blog sy yer...

Wan_hazel said...

ok boleh je..ehehhe

Wan_hazel said...

copy kod dan lepas tu ade kan ruang tempat nak letak kod shoutbox..paste je kod shoutbox kat situ

Zatie Anuar said...

Wan . Kami tak wat shoutbox . Nak kena wat jugak ke .? Eemm . Banyak benda la kena wat ni . Haiyaa ;D

Wan_hazel said...

kalau tak wat tu..delete je koding shout tu..

asmirul mikoto ueki-san said...

background blakang button tu tak ley wat transparent ke bro??

Cik Tipah said...

salam.hye..ciktipah bru kat sini. suke sgt tgok tutorial wan nih.mekasih kongc ilmu.
ciktipah nk tnye..mcmne ye nk tukr menu, home, banner pe sume tu..nk tukar my recipes ke, my profiles ke..ciktipah dh wat byk kali...tpi asyik kuar cmtu gak...waaaa....tulun ye wan..

Wan_hazel said...

kalau yg blogspot sediakan tu caranya tukar nama je...kalau yg lain2 terpksa tukar image

Unknown said...

salam.. nak tanya.. link menu macam mana nak dapat ? serius tak tau.. dah godak2, tetap tak tau :'(