thủ thuật blogspot » Tạo trình Menu thả xuống đơn giản

Written By Học viện đào tạo công nghệ trực tuyến on Thứ Năm, ngày 28 tháng 6 năm 2012 | 17:22

Có bao giờ bạn thấy Menu như hình dưới? Với Menu này bạn chỉ cần click chọn vào trình đơn thả xuống để chọn. Bạn hãy thử click vào để thử.

Tên của nó thường gọi là Trình đơn Menu thả xuống.

Để tạo trình đơn này bạn có thể thực hiện bởi mã sau:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> Tiêu đề do bạn ghi! </option>

<option value=" Đường link thể hiện tại đây "> Đoạn văn bản thể hiện </option> </select></form>

Ví dụ với các mã như sau:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option>- Blog Tutorial - </option>

<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html">Start to blogging</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html">Blog setting</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-backup-template.html">Backup template</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/12/how-to-backup-your-widgets_19.html">backup widget</option>

</select></form>

Bạn sẽ được kết quả:

Bây giờ bạn có thể tạo cho blog của mình 1 trình đơn Menu như trên, các bước thực hiện rất đơn giản.
Trước tiên, bạn làm các bước sau :

1. Đăng nhập vàoLogin to blogger

2. Sau khi đăng nhập, bạn vào Bảng điều khiển (dasboard page) , click chọn Bố cục (Layout).

3. Click chọn vào tab Phần tử trang (Page Element). Xem hình minh hoạ. Ở đây tôi minh hoạ cho các bạn bằng bẳng tiếng anh.

4. Click chọn vào Thêm tiện ích (Add a Page element).

5. Sau khi hiện ra cửa sổ popup window , click chọn Thêm tiện ích (add to blog) HTML/JavaScript. Như hình minh hoạ sau :

6. Bạn Copy và dán code bên dưới vào :

7. Click chọn

8. Hoàn thành và bạn hãy xem lại thành quả của mình.

Ok, bạn đã có 1 dropdown menu cho blog của mình. Nếu bạn vẫn lúng túng với các bước trên bạn hãy đăng nhập vào blog của bạn và thêm widget một cách tự động:

Click nút sau để tự động thêm vào Blog của bạn.

SAU DAY LA MOT VAI HINH TRONG MẠNG XÃ HỘI

}

ul.social_menu li.abfacebook {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixDWNd2rnI_N8QBwJPv-PJNMM95wRIk-wvE42ucTIL8QN2YBcIYEqdTxM_CNQRU6Ciuhn28kW-5kM7axkLidccCYWUjMwWTbdTp8cFoWjCLpOHMmjCds0DyrXkm-I2tFIYd_hsuRBwP6g/s320/facebook.png)

}

ul.social_menu li.abtwitter {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp8C8HhU1wPi50Yn1FBgCQ9jUeYpYxzuvt2q1BRhrG6xJmsaRY5VG-E0oLhm0Z5jepxe0xbp3meLyCmONENOJVIbzAqZ2F7JaAwpjopTW0REUabh-tNtTn4Xd2IIiBXW84yyXXlMAqp68/s320/twitter.png)

}

ul.social_menu li.abgoogleplus {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZ0rkxvpNLn0Rsa3dm74wT5TcQEuaJwjQJ_zUGIcuZ5c99vYqvSxhLF8l_Vk2p_3AASDSE_3yuen8tfcnXzxRevxLUF5ybibdUXeksgnqFMzzzz4lgopxYDbh7vb7pMueQeSW4wDYa8Y/s320/gplus2.png)

}

ul li.abpinterest {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY1HtrlRk9nAjOAGwyjY7Zo99r2xBzzbINuvKsUh4Qli9cIJ_AYOJt7bmLrXejmnXBqbQniu465HwxSPuQf9lc5Vsrlq-t-5KimyNUO8a6ZmwMYAcPtmQO96ZObOfy7faBy3LH-eoJYRY/s320/pinterest.png)

}

ul.social_menu li.abstumbleupon {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLB5ONYMKwwE7LAkg5W0vwIk2wdrm3Cr3C_BNnJjEZrYktjZVVhTV7O1Ym08CQ_cPbXomAYoFPXbSc9iGYJ_bZCGJ5G2P1SK_QvN2V3DM7SFomKvoYpNdVjcpWE9tEcqDTHQnkOt2yXvY/s320/stumbleupon.png)

}

ul.social_menu li.abdig {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1R1bPNnjByYm8yyqdwCZtf2E8X4cMjonh64NG3a3qGM3F4H5vyPUoRj584QkPUIgoA1K-9KOwrJcQgpMOfwFTdXQwZ8JmBQ-pVIzgv7E8ifcrGM-JoTwqFEJZYVWpnwfqjsDYT-yuIdw/s320/digg.png)

}

ul.social_menu li.ablinkedin {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Bm2-rBSJbxsCXaqZ7w-zqGfWjeMXnAKVHLrK_HViK2HOoyMeGw1042AHIYaD_jKc33l-Bukv8j-RjbWyjdOLUhUH9mqI1MldzyOvRCTguukm6iuSC8bfPeQVtKxS4U8Ju1cMPkrVbTY/s320/linkedin.png)

}

ul.social_menu li.abrdit {

background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV-mk9HMQhAGo0cLCmsUpQ6O9xUilkgtpfaflDAZbx3goQ2S9H7IrSrOwuoHnGkxkstrPoC-FypclJa9DmzKX57g8qZ8SwNsdaZ0DeAylqh4WfvbXz3-5wX7EcELa9RFqx6wqnW4l_MsM/s1600/redit.png")

}