วิธีการสร้าง Menu แนว Art บนBlogger

         

วิธีการสร้าง Menu แนว Art บน Blogger

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

เรามาลงมือสร้างเมนูแนวArt กันเลย

    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/AVvXsEjwPuhVQbcbGLRDzwzKThm9VHnVBvVPU3eAzapQoTB_57xJvKkNeC3mLB8esIH5k6hsbDqKqHyzxisOMpXLEyA-B_a3Zno1zIXsReoiWXSCTN5RgrrR9llR0D8-OOJrO7YLwGFfPS4zH_dH/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/AVvXsEjZAKLECpWnznJhr4X2SRrhgqPzz4ojeh8_ytFE5PSvoLGkIjdoROrfYdf-3JWVxJin7FzYU3lkE6XjA3qcEpvQjPCrAxDnYiNWmjJ3za5S78TMfYONmfV1krV_2pQmBB-oEzdFJhJMx2z9/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/AVvXsEgxwH2MP1bvB3_FJE2EzqAtGauQpv99n2vkQh7abEDRy0exNVkVISPSJ-agez4Z7NQY_uemRg6KT2ccXFUNbb3G3kIfoc88tqjbCfbDsTg5T-SP3HMLDByFNsWDMCgeDXI8AgZ3tOw3QdFr/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/AVvXsEhYHgB5Td5JRyZiOSPqll2KWqXRQCsCfdXZqWM5OfI15BjDoeF686RNZSUpGlK7CWhYnTeOwrHijiL6WEuWB-RlvD1eCLTqe6YaPybwXmQ9DGpe-PpbU_4M1cWohhRxPDiPGn_vf5D54zpp/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/AVvXsEhEdD32tNBlBU7ojd8AkqzspJm2_IfX27Uzhmkyu0XX1bAI1jQ1lbtXOLUNsFa07gcogtu5ibs14Ds0O7wrzPhDBYG66Qp5xz5q5eH5v6QEOVGpb4bFc-dTISA11ZtQ1YLi9M_YmrdICrjW/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/AVvXsEgOAwYSX5ty1d7cDzsLyf5WXGqyRKVphtHrwQKySPtlAoMaCVl4CeaF8ygkUi-sD_7FbLMazrfjDKhKgTtyrMi13wnY1IgcIUwp68Uzu73t4IyluliX56dyIAlT_mOvY3gI8WvE8Wnbz3Qr/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/AVvXsEgFHksYpAYcSGO81Mc8uaAnsXdUoLyti9Sm61atOHvFgf0c0QLO0ZYNVKVVRUMdV0NTXc1wKmXlfYq1SvrPwXxY2IRnsk0Sqz8HfCqgz4DYi8Wxv-NfpiYjQRyal88XgUWp4iPZzhz2FMIu/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>

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

<< Back