สร้าง Side Menu ง่ายๆ ด้วย CSS

 

 

CSS MEnu

บทความนี้เป็นการฝึกสร้างเมนูของบล็อกเพิ่มเติม ด้วย CSS โค้ด ซึ่งมีขั้นตอนการทำง่ายดายมากหากสนใจลองลงมือสร้างกันเลยครับ

 

วิธีการสร้าง

 

ขั้นที่ 1 ไปที่แผงควบคุม >>รูปแบบ >> แก้ไข HTML  >> ไม่ต้องขยายแม่แบบเครื่องมือ

และค้นหาโค้ด ]]></b:skin> แล้ววาง CSS โค้ดต่อไปนี้ไว้ก่อนหน้า


/* A Cool CSS Menu by Hackublog*/
#navcontainer{ background:#EDEDEF; width:200; margin:0 auto; padding:1em 0; font-family:Lucida Sans Unicode,georgia,serif; font-size:13px; text-align:center; text-transform:uppercase}
ul#navlist{ text-align:left; list-style:none; padding:0; margin:0 auto; width:70%}
ul#navlist li{ display:block; margin:0; padding:0}
ul#navlist li a{ display:block; width:100%; padding:0.5em 0 0.5em 2em; border-width:1px; border-color:#ffe #aaab9c #ccc #fff; border-style:solid; color:#777; text-decoration:none; background:#E8E8E8}
#navcontainer>ul#navlist li a{width:auto}
ul#navlist li#active a{ background:#9A9A9A; color:#800000}
ul#navlist li a:hover,ul#navlist li#active a:hover{ color:#800000; background:transparent; border-color:#aaab9c #fff #fff #ccc}


ขั้นที่ 2 ค้นหาโค้ด <div id='sidebar-wrapper'>แล้ววางโค้ดด้านล่างนี้ถัดจากโค้ดดังกล่าว



<!--A Cool CSS Menu by Hackublog Start-->

<div id='navcontainer'>
<h2>FREE BLOGGER TEMPLATES</h2>
<br/>
<ul id='navlist'>
<!-- CSS Tabs -->
<li id='active'><a href='http://btemplates.com/' id='current' target='_blank'>B TEMPLATES</a></li>

<li><a href='http://www.deluxetemplates.net/' target='_blank'>DELUXE TEMPLATES</a></li>

<li><a href='http://www.bloggertemplateplace.com/' target='_blank'>BLOGGER TEMPLATEPLACE</a></li>

<li><a href='http://www.forfreebloggertemplates.com/' target='_blank'>4FREE B.G.TEMPLATES</a></li>

<li><a href='http://www.webtemplatesblog.com/' target='_blank'>WEBTEMPLATESBLOG</a></li>

<li><a href='http://www.wordpresstoblogger.com/' target='_blank'>WP2BLOGGER</a></li>

<li><a href='http://icons.mysitemyway.com/' target='_blank'>MYSITE MYWAY</a></li>
                        </ul>
                </div>
<br/>

<!--A Cool CSS Menu by Hackublog Start End-->


1. URL สีแดงเป็นสิ่งที่ที่ต้องเชื่อมโยง แก้ได้ตามใจครับ

2. อักษรสีน้ำเงินเป็นชื่อของลิงค์ แก้ได้ตามใจอีกเช่นกันครับ



และเมื่อแก้ไขเสร็จแล้วทำการบันทึกแม่แบบก็ถือว่าจบขั้นตอนแล้วครับ

ตอนนี้มีความคิดเห็น : 6 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ผมลองทำแล้วมีปัญหาอะครับ พอใส่โค้ดตามขั้นตอนที่2แล้วมันขึ้นแบบนี้อะครับ

    เราไม่สามารถแสดงตัวอย่างแม่แบบของคุณ
    โปรดแก้ไขข้อผิดพลาดด้านล่าง และส่งแม่แบบของคุณอีกครั้ง
    ไม่สามารถแยกวิเคราะห์แม่แบบของคุณเนื่องจากมีรูปแบบไม่ถูกต้อง โปรดตรวจสอบว่าองค์ประกอบ XML ทั้งหมดมีการปิดอย่างถูกต้อง
    ข้อความแสดงข้อผิดพลาดของ XML: The string "--" is not permitted within comments.

    ช่วยด้วยครับ ขอบคุึณครับ

  1. @ Goemon : ขอโทษทีครับผมเขียนโค้ดพลาดไป ให้ลบบรรทัดสุดท้ายทิ้งได้เลยครับ รับรองได้แน่ครับ

    ปล.ตอนนี้ผมได้แก้โค้ดบรรทัดสุดท้ายไปแล้วนะครับ ลองใหม่ได้เลยครับ

  1. ได้แล้วครับ ขอบคุณครับ

  1. @ Goemon : ยินดีครับผม

  1. ผมไม่พบโค๊ตที่พี่ว่าเลยครับ

  1. ผมไม่พบโค๊ตที่พี่ว่าเลยครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel