Tutorial : February 2013

Mungkin ada yang berminat dengan Tab Menu yang shida pakai bersertakan drop down menu-menu lain. Disini secara ringkasnya shida beri tutorial dia. Slowly buat insyallah berhasil, nampak memang macam susah sebab banyak koding sana sini tapi hasil dia superb! kalau korang pandai ubah warna dan image lagi awesome!. Sebelum tu tutorial ini shida kredit kan kepada Blogger Indonesia ni sebab tutorial dia paling mudah dan cepat shida buat, kira mudah faham selama shida cuba tutorial yang lain semua tak menjadi.

ikut langkah-langkah berikut :

dashboard >> template >> editHTML >> tick expand widget
cari kod ini >> ]]></b:skin>
dah jumpa terus copy kod bawah ni dan paste diatas kod yang dicari tadi (langkah.2)

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRbrJSTVO-1mJZgzep6F3KhPIHuviDI0AyTaoAOF4193bd09llB8WIsG4BAt_EckKyRDBmbMcImGxci8oBVCMwc4ZsG0E6d1EmJrUFtcpMEevDHdppEu2dhqpVrJdxapUwi8z0j4MAcw0/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

langkah seterusnya :

cari pula kod ini >> </header> atau pun bagi yang pakai denim cari kod ini >> <div id='crosscol-wrapper'>
copy kod Menu Bar dibawah dan pastekan di bawah kod yang kita cari tadi (langkah.1)

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJR5YWBWGSctsfl8YEQKmpFtvLXfE9t9Fk7gLXP-UgVAqcNjwjISXS2f4U6SE0ZEt3wQOt9CTAkxvu7GRid-H7yYu73EnQVD63-zbDH-C1wROB5fpai4dwW4iuZomP_6x6NEaLtTKw28w/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/masukkan ID' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/masukkan ID' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/masukkan ID' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/masukkan ID' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/masukkan ID' target='new'>Contact on Facebook</a></li>
</ul>
</li>
<li><a href='Link Anda' target='new'>Owner Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='Link Anda'>Komputer</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Blogspot</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='Link Anda'>TV Online</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Komputer</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Game</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Microsoft</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Software APP</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='Link Anda/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='Link Anda'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKT7WEYLK7PTd2AzHfDD5zRo_ld2PjoO-Wqa8-js9WfqlMhuG_mRsS-AlD6dxJkiUam2tOnrwJCG6sxuLxBdob-1bvfyAv1gqt24qVo8nVaQUS2VasP-mtIurek-_27GsDukSStzeeGoY/s1600/field-bg.gif) no-repeat;' type='text' value='search me'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3w5R-8R5G9kJw-zhWqGOFdTVg41_YgB-G52qw_I_XhOmay7e_2uP3EjiWHSiFwsK-bYq89qHBe0BLouHHXPTwn38pkQAXUWWhhcfXPfsEOBV0yx9hB_8IvFFJGrmqupxUbTZTuNPn9c0/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

korang dah siap paste semua preview dulu tengok hasilnya ambil gambaran dan fikir apa yang korang nak letak warna dan menu drop down korang ok.
bila dah siap letakkan warna mengikut citarasa korang dan dah masukkan ID dan Link Anda preview lagi sekali.
tak semestinya korang kena ikut link yang tersedia ada tu korang boleh ubah ok. Ini dari asal tutor so shida tak ubah pun.
jika semua ok tiada cacat cela boleh SAVE. :)

Kredit By Shida

TERIMA KASIH SUDI BACA DAN KOMEN

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Denim
Designer: Darren Delaye
URL:      www.DarrenDelaye.com
Date:     11 Jul 2006
-----------------------------------------------
*/

/* Variable definitions
   ====================
<Variable name="bgColor" description="Page Background Color"
           type="color" default="#efefef" value="#efefef">
<Variable name="textColor" description="Text Color"
           type="color" default="#333333" value="#333333">
<Variable name="linkColor" description="Link Color"
           type="color" default="#336699" value="#336699">

<Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="#336699" value="#336699">
<Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="#ffffff" value="#ffffff">
<Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="#528bc5" value="#528bc5">

<Variable name="mainBgColor" description="Main Background Color"
           type="color" default="#ffffff" value="#ffffff">
<Variable name="borderColor" description="Border Color"
           type="color" default="#cccccc" value="#cccccc">
<Variable name="dateHeaderColor" description="Date Header Color"
           type="color" default="#999999" value="#999999">

<Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
           type="color" default="#ffd595" value="#ffd595">
<Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
           type="color" default="#333333" value="#333333">

<Variable name="bodyFont" description="Text Font"
           type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
<Variable name="headerFont" description="Page Header Font"
           type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">

   <Variable name="startSide" description="Start side in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
             type="automatic" default="right" value="right">
*/

body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;
}

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

/* Content
----------------------------------------------- */

.clear {
clear: both;
}

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-$startSide: 14px;
width: 464px;
float: $startSide;
background-color: $mainBgColor;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

/* Headings
----------------------------------------------- */
h2, h3 {
margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
.post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $textColor;
font-weight: bold;
}
.post div {
margin: 0 0 .75em;
line-height: 1.3em;
}

.post-footer {
margin: -.25em 0 0;
color: $textColor;
font-size: 87%;
}

.post-footer .span {
margin-$endSide: .3em;
}

.post img, table.tr-caption-container {
padding: 4px;
border: 1px solid $borderColor;
}
.tr-caption-container img {
border: none;
padding: 0;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: $textColor;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}

.sidebar .widget-content {
margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 78%;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}


/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align: center;
color: $textColor;
}

#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 85%;
line-height: 1.5em;
text-align: $startSide;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

    
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NOM DU BLOG (en-tête)' type='Header'/>
</b:section>
    </div>

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'/>
      </div>

      
      <div class='clear'> </div>

    </div> 

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

</div></div> 
</body>
</html>

TERIMA KASIH SUDI BACA DAN KOMEN

Tutorial : Cara nak buat Drop Down Menu Bar / Tab Menu Drop Down

Freebies : Template Denim Original 2 Colum ( Non Edit )

Blog Archive

Followers

Labels