สร้างเมนูแนวอาร์ทบนblogger
สร้างเมนูแนวอาร์ทบน blogger
เพื่อนๆ คงเคยเห็นเมนูรูปแบบนี้ผ่านตามาบ้าง เราจะเจอเมนูแนวนี้ได้จากเว็บ ซีรี้เกาหลีหรือเว็บแนวสาวๆวัยใส วันนี้ผมเลยเอามาประยุกต์ใส่ใน 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 ของเทมเพลที่เราต้องการ
<ul id="nav">
<li><a href="#" class="home">Home<span></span></a></li>
<li><a href="#" class="about">About<span></span></a></li>
<li><a href="#" class="rss">RSS<span></span></a></li>
</ul>