การสร้างเมนูใน blogger.com

ขั้นตอนการทำเมนู
1.เข้าสู่ระบบของ Blogger.com และไปยังส่วนจัดการของ blog ที่เราจะทำเมนู
2.ทำการเพิ่มโค้ด html ดังรูปด้านล่าง

    2.1 ไปยังเมนู รูปแบบ

    2.2  ทำการ เพิ่ม Gadget

    2.3  เลือก Gadget ที่ชื่อว่า HTML/จาวาสคริปต์ จากนั้น ไม่ต้องใส่ชื่อ นำโค้ด html ด้านล่าง เพิ่มในส่วน เนื้อหา 

<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

       2.4  กดปุ่มบันทึก 
3.ทำการเพิ่มโค้ด CSS ดังรูปด้านล่าง

    3.1 ไปยังเมนู แม่แบบ

    3.2  ทำการ เพิ่ม แก้ไข HTML

    3.3  กดปุ่ม ดำเนินการ

    2.4  ค้นหาคำว่า ]]></b:skin> (กด Ctrl-F เพื่อค้นหา) นำโค้ด CSS ด้านล่าง เพิ่มก่อนหน้าคำว่า  ]]></b:skin> จากนั้นก็กดปุ่ม บันทึกเทมเพลต

.widget-content .menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.widget-content .menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.widget-content .menu li{
float:left;
padding:0px;
}
.widget-content .menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbSXF0i4zSD78PvY-9pBvbGw_N_Af0SVfABPY_f_XGrGGmuDD-zZvkB0LuuBJWZgUyDcHqOlk4eO814bEzzAsG1sWWe4JZqVX3k2WhkYBmq9da8ayairuGsTzZu_VUuF0l-NT_3kwbmABI/s1600/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.widget-content .menu li a:hover, .widget-content .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUPJ8VYrB2zALM2PgfqnTe2De5gqKTDghscFkckLlvAJVe1bu5dl6R3rD0VM2XtORZDsJ8WJSd6wrXApheSUf5Phvp66JXyVH_kD9WD8Ll-6H3HCpekfZRcdfF2wwjJwB4dyq31paSuFOX/s1600/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.widget-content .menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.widget-content .menu li:hover ul{
display:block;
}
.widget-content .menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDwOyXXAIagoXNc9YiIZx8P8zwNsi1m2kFriTcyqP_GTk28lk1BFb2PeZ5CLk6sLubnUD__RncpkT9dbyXbYlA6rqUR6ffQsYYWRxssR-JmzGG85WLuFsnAl4L6cPe2vOzYfS_cTDZ49o/s1600/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.widget-content .menu li:hover li a{
background:none;
}
.widget-content .menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.widget-content .menu li ul a:hover, .widget-content .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZcp0faFq5AwuFULGn61noBlcyQgXcL_YyPlDfmYM1a5xdrGy1Fk62SvhIQ9ivVD55He_9P_FYQD-imKD0EtDckXcmkeKDeA2IFtBte9FDZ22y0CFZ45aw0B1WcH1iViGrWbzwcfnNBi1/s1600/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.widget-content .menu p{
clear:left;
}