วิธีสร้าง Tab Menu บน Blogger (แบบที่ 1 กำหนด กว้าง ยาว)

การใช้เมนูแบบ Tab จะมีข้อดีคือสามารถประหยัดเนื้อที่ของหน้า บล็อกของเราได้มาก และยังสามารถจัดรายการที่อยู่ในกลุ่มเดียวกันให้อยู่รวมกันได้ด้วย

สอนทำบล็อก

ขั้นตอนในการสร้าง Tab เมนู

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

2. ค้นหาโค้ด  ]]></b:skin> แล้วแทนที่ด้วยโค้ดด้านล่างนี้
    (โค้ดส่วนนี้จะเป็นการประกาศ css สามารถปรับแต่ง โค้ดบรรทัดสีม่วงได้ครับ)


div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu - Tab Buttons*/
text-align: center;
height: 24px; /* Height top main menu - Tab Buttons*/
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Helvetica", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #F4F4F4; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FBF1A4; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

]]></b:skin>


3. ค้นหาโค้ด </head> แล้วแทนที่ด้วยโค้ดด้านล่างนี้

<script src='http://hackublog.googlecode.com/files/tabview.js' type='text/javascript'/>
</head>


4. ให้เพิ่ม HTML/Javascript  Gadget โดยไปที่ รูปแบบองค์ประกอบของหน้า >> เพิ่ม Gadget ในตำแหน่งที่ต้องการ >> เลือก Gadget ชนิด HTML/Javascript
จากนั้นวางโค้ดนี้ลงไปโดยไม่ต้องตั้งชื่อ แก้ไขตามต้องการ และบันทึก


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Content 1.1 <br/>
Content 1.2 <br/>
Content 1.3 <br/>

</div>
</div>

<div class="Page">
<div class="Pad">
Content 2.1 <br/>
Content 2.2 <br/>
Content 2.3 <br/>

</div>
</div>

<div class="Page">
<div class="Pad">
Content 3.1 <br/>
Content 3.2 <br/>
Content 3.3 <br/>

</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>



แนวทางการแก้ไข :

ข้อความสีน้ำเงิน คือชื่อของ tab สามารถตั้งชื่อได้ตามใจครับ(อย่าให้ชื่อยาวมาก)
ข้อความสีเขียว คือ รายละเอียดที่จะปรากฎใน Tab ที่ 1 2 และ 3 ตามลำดับ สามารถแทนที่ด้วย โค้ด สไลด์ วีดีโอ ข้อความ รูปภาพ หรือลิงค์เชื่อมโยงอื่นๆได้ตามความเหมาะสม

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

  1. ไม่ได้นะครับลองแล้ว ลบกวนดูให้หน่อยครับ http://www.watlaokhwan.blogspot.com

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

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

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