เพื่อนๆ คงเคยเห็นเมนูรูปแบบนี้ผ่านตามาบ้าง เราจะเจอเมนูแนวนี้ได้จากเว็บ ซีรี้เกาหลีหรือเว็บแนวสาวๆวัยใส วันนี้ผมเลยเอามาประยุกต์ใส่ใน blogger เพิ่มความน่าสนใจให้กับบล็อกของเราเท่าเทียมกับเว็บอื่นๆ ได้ ออกแบบโดย webdesignerwall
ตัวอย่าง >> เมนูแนวอาร์ทน่ารัก

---

1. ไปที่ Blogger >> การออกแบบ >> แก้ไขHTML
2. ติ้กถูกที่ "ขยายเทมเพลตวิดเจ็ต" Ctrl + F แล้วให้ค้นหาโค้ด <![CDATA[
3. เมื่อเจอแล้วให้นำโค้ดด้านล่างนี้ใส่ลงไปก่อนหน้า

#nav {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 774px;
    height: 210px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmCQ5xWCyYaEkK7BTvXpna3RTg2EDSEGbolSflyyu4WN5A8NqG5GyZQ_CQLOx_4cdTno4zt4w0kIBhYpzag5QWGDwIw4OSe4V6O7Snw0I-iJW27zojitp86uGT99uShOdFRQwrr5KwGE-u/s1600/menu-bg.jpg) no-repeat;
    position: relative;
}
#nav span {
    display: none;
    position: absolute;
}
#nav a {
    display: block;
    text-indent: -900%;
    position: absolute;
    outline: none;
}
#nav a:hover {
    background-position: left bottom;
}
#nav a:hover span{
    display: block;
}
#nav .home {
    width: 144px;
    height: 58px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiog-81KCwN1SmLmidjI5bE1RhxJe-K0Jqa_IgbrRtvLS2pn_-1xlyrSreNQIyphULS5QJi3dQme4d_0qfP7rudmq-kq1Esd2HCUQ6mzoNtX9KVFkMYzFBk31jk099ALR0GE0GPxmX3HfjE/s1600/home.gif) no-repeat;
    left: 96px;
    top: 73px;
}
#nav .home span {
    width: 86px;
    height: 14px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1vynrNXJ85J4NFBD8GTepvI4M_lrsP2dGV4RX8E6twUhfJDWpT0tvklsaNkZtX7IA4Zc5UgF5nhnf3c4W2AuxSBm7voLNFxKykvweGksAuyNGqM2Ikoc3ZJovWQB2FHgJcjVyv9W0H8N_/s1600/home-over.gif) no-repeat;
    left: 28px;
    top: -20px;
}
#nav .about {
    width: 131px;
    height: 51px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9V_Lsl3On5LVmF_BWVpvgp0U0694t86CmzOP_hzcO3bMCLeTeG4KYwr1BLKs7oyUwz5z8v-joJbdx25t6j-SEAlHNs8fDOPdFnkmxoFqqq2K7LDJulfKdg30LByFtMS3SfMMXtWdXBXP/s1600/about.gif) no-repeat;
    left: 338px;
    top: 97px;
}
#nav .about span {
    width: 40px;
    height: 12px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqd-VY009-yy2WJ4jAKsX7DE_vU0UeygIEmfWe5OkkRKDUsyrYrV6ECt6r5gey4gYcBDGBSp9VEbDm8HLW6OVq8LwL3_Z8Z8Tan_CqP4jYj1jWK7CSJ9PlyjvCTVYv1Vezu2ZsQyzGrTd_/s1600/about-over.gif) no-repeat;
    left: 44px;
    top: 54px;
}
#nav .rss {
    width: 112px;
    height: 47px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aJMz3ObGphmCc_2LbYAKLDWNm5vazggpy6xK8WhBqVXh6e8GDeZvVTRp8-YrWSQGK_LpyVdeAPSmAGiyHdapLeHpUUrO-j10w9DOiBBxahSZ5SKc0Nz_y-kOeoePx8M3oi2YDB14FWPD/s1600/rss.gif) no-repeat;
    left: 588px;
    top: 94px;
}
#nav .rss span {
    width: 92px;
    height: 20px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYpYfzyiaUwLqCUREJN-PB5YcUqiyj66G4sTJZS3Kl0Le1hCwsUZnum2xelq-C0ynQA45pTThJjuEfsMb67z5kJVLI3uDMuj4JMIy4cyWR_5nNW6qc9Ae12l3hgTxHQzy0OmTAhpt3GkgH/s1600/rss-over.gif) no-repeat;
    left: 26px;
    top: -20px;
}

4. กด "บันทึกแม่แบบ" ไว้ก่อน
5. ต่อไปเราต้องสร้างโค้ดที่ทำให้เมนูแสดงขึ้นมาโดยนำโค้ดข้างล่างนี้ไปใส่ใน HTML ของเทมเพลที่เราต้องการ
อย่าลืมกดบันทึกแม่แบบ แค่นี้เราก็ได้เมนูสวยๆ แนวอาร์ทบนblogger ไม่เหมือนใครแล้ว เราสามารถนำไปประยุกต์ใช้ได้อีกหลายแบบ หรือใครเก่งเรื่องการออกแบบก็สามารถใช้ Photoshop เข้ามาช่วยสร้างสรรค์สิ่งใหม่ๆ มากขึ้น