วันพุธที่ 20 สิงหาคม พ.ศ. 2557

การสร้าง Menu ใน Blogger...

การสร้างเมนูใน blogger.com

ขั้นตอนการทำเมนู
1.เข้าสู่ระบบของ Blogger.com และไปยังส่วนจัดการของ blog ที่เราจะทำเมนู
2.ทำการเพิ่มโค้ด html ดังรูปด้านล่าง
    2.1 ไปยังเมนู รูปแบบ
    2.2  ทำการ เพิ่ม Gadget


    2.3  เลือก Gadget ที่ชื่อว่า HTML/จาวาสคริปต์ จากนั้น ไม่ต้องใส่ชื่อ นำโค้ด html ด้านล่าง เพิ่มในส่วน เนื้อหา 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="menu">
 
<ul>
 
<li><a href="#" >Home</a></li>
 
<li><a href="#" id="current">Products</a>
 
<ul>
 
<li><a href="#">Drop Down CSS Menus</a></li>
 
<li><a href="#">Horizontal CSS Menus</a></li>
 
<li><a href="#">Vertical CSS Menus</a></li>
 
<li><a href="#">Dreamweaver Menus</a></li>
 
</ul>
 
</li>
 
<li><a href="/faq.php">FAQ</a>
 
<ul>
 
<li><a href="#">Drop Down CSS Menus</a></li>
 
<li><a href="#">Horizontal CSS Menus</a></li>
 
<li><a href="#">Vertical CSS Menus</a></li>
 
<li><a href="#">Dreamweaver Menus</a></li>
 
</ul>
 
</li>
 
<li><a href="/contact/contact.php">Contact</a></li>
 
</ul>
 
</div>
       2.4  กดปุ่มบันทึก 
3.ทำการเพิ่มโค้ด CSS ดังรูปด้านล่าง

    3.1 ไปยังเมนู แม่แบบ
    3.2  ทำการ เพิ่ม แก้ไข HTML

    3.3  กดปุ่ม ดำเนินการ
    2.4  ค้นหาคำว่า ]]></b:skin> (กด Ctrl-F เพื่อค้นหา) นำโค้ด CSS ด้านล่าง เพิ่มก่อนหน้าคำว่า  ]]></b:skin> จากนั้นก็กดปุ่ม บันทึกเทมเพลต
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
.widget-content .menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.widget-content .menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.widget-content .menu li{
float:left;
padding:0px;
}
.widget-content .menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlVtjleONIuSUHGDQ6zbAUFN1C6Oa65au_wVqowOv7WNMZvMgC56acjnmrPD-jSuDrSYDQhOs-4sNr_eMmOTFkOwhR9KYxG_M0yVmSgMT9lDau-9H5ro1PV3ak4NDAo2LCx1hnWWF2bz-g/s1600/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.widget-content .menu li a:hover, .widget-content .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWu00nYk35kW2xchI28rUolI1eM0po4uxqgkcp66JgCg4wlI2W58B30_Pjg0k4QPAbgEIP3g3yF63lBR1y0bZOL9einTsRRV8-T2ealtTBs9B0F5csKj3HahvHFDwmlk0DgYm9c5AF6lIJ/s1600/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.widget-content .menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.widget-content .menu li:hover ul{
display:block;
}
.widget-content .menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinserEKK-2LNMKT09NfJ1jYrNFCG1KOhRLaIw_gxqv0MYdJr_buc6b_u6bQmaKk1Q40qLGnF9snxl9aMoFLhINYp0loCqsQt4EJrD2G1p0JHoRkQH9POjP26kE0_RbWotwL_5utU0w3-Rq/s1600/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.widget-content .menu li:hover li a{
background:none;
}
.widget-content .menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.widget-content .menu li ul a:hover, .widget-content .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn21cmow7E-fHgTvP_IHmk_5sPeqpLnq8zfGlzM0G4EfVTdolPN3YswiOgS3cYjfl3bWgvZJPUgQH8rQuQRUaI0bu7TlcWQWhFPkXcOIUFUFJKar4C5Kmx4dO8tuBRjvtieh1z9x2gmxcR/s1600/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.widget-content .menu p{
clear:left;
} 

เขียนโดย ที่

ไม่มีความคิดเห็น:

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

สมัครสมาชิก: ส่งความคิดเห็น (Atom)