การสร้างเมนูใน 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> |
3.ทำการเพิ่มโค้ด CSS ดังรูปด้านล่าง
3.1 ไปยังเมนู แม่แบบ
3.2 ทำการ เพิ่ม แก้ไข 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
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;} |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น