.



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

.