Hôm nay mình xin giới thiệu cùng các bạn một thủ thuật khá hay và cũng rất đơn giản để thực hiện. Đó là tạo một thư mục dạng drop down (thả xuống), điều này sẽ làm cho bạn có thể tiếc kiệm được không gian khi có nhiều liên kết bạn muốn hiển thị trên blog. Tuy nhiên, bạn cũng có thể ứng dụng điều này cho các việc khác mà bạn muốn. Thủ thuật đơn giản với cá bước như bên dưới:Live demo
☼ Thực hiện:
1. Đầu tiên đăng nhập vào blogger
2. Vào bố cục và thêm một HTML/Javascript
3. Dán code bên dưới vào HTML/Javascript vừa thêm đó
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> Tên của menu </option>
<option value=" {link 1} "> Tên của link 1 </option>
<option value=" {link 2} "> Tên của link 2 </option>
<option value=" {link 3} "> Tên của link 3 </option>
<option value=" {link 4} "> Tên của link 4 </option>
<option value=" {link 5} "> Tên của link 5 </option>
</select></form>
<option value=" {link 1} "> Tên của link 1 </option>
<option value=" {link 2} "> Tên của link 2 </option>
<option value=" {link 3} "> Tên của link 3 </option>
<option value=" {link 4} "> Tên của link 4 </option>
<option value=" {link 5} "> Tên của link 5 </option>
</select></form>
☼ Tùy chỉnh:
- Code màu đỏ đậm ở trên chính là tên hiển thị của menu, chính là "Thủ thuật" trong demo ở trên.
- Code màu cam là đường link bạn muốn dẫn đến
- Code màu xanh dương là tên hiển thị cho đường link tương ứng
Ở đây mình chỉ giới thiệu cho các bạn 5 tùy chọn trong menu, bạn có thể thêm hoặc bớt đi theo ý bạn. Bạn có thể thêm các link 6, link 7... tương tự như code màu xanh lá như bên dưới.
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> Tên của menu </option>
<option value=" {link 1} "> Tên của link1 </option>
<option value=" {link 2} "> Tên của link 2 </option>
<option value=" {link 3} "> Tên của link 3 </option>
<option value=" {link 4} "> Tên của link 4 </option>
<option value=" {link 5} "> Tên của link 5 </option>
<option value=" {link 6} "> Tên của link 6 </option>
<option value=" {link 7} "> Tên của link 7 </option>
</select></form>
<option value=" {link 1} "> Tên của link1 </option>
<option value=" {link 2} "> Tên của link 2 </option>
<option value=" {link 3} "> Tên của link 3 </option>
<option value=" {link 4} "> Tên của link 4 </option>
<option value=" {link 5} "> Tên của link 5 </option>
<option value=" {link 6} "> Tên của link 6 </option>
<option value=" {link 7} "> Tên của link 7 </option>
</select></form>
Giờ hãy chọn vị trí đặt HTML/javascript đó là hoàn tất.
Chúc bạn thành công
Bài đăng
0 nhận xét