Chia sẻ thủ thuật blogspot - blogger

luat1x1

10/16/2011

Tạo Menu Ngang Cho Blog Hiệu Ứng Thu Gọn,Kéo Dài Khi Rê Chuột

Như Cả Nhà Đã Biết,Blog 360 Plus của chúng ta,ở Modun Bài Viết chỉ hiện tối đa 10 bài viết ! Nhưng lại có quá nhiều thứ để ta đăng lên,đến một khi nào đó,những thông tin ấy đã nằm ở tận đẩu tận đâu ! Ta sẽ rất mất thời gian để tìm lại được nó,chưa kể đến việc muốn  ai đó đọc được nó  thì sẽ thật khó khăn phải không nào ?

Người ta đã nghĩ ngay đến việc tạo Menu ! Một thanh Menu tóm tắt các bài viết cũ,những bài viết hữu ích,có kèm đường link,mỗi khi cần xem,ta chỉ cần click vô đó,là sẽ hiện ra ! Ta không cần phải tốn thời gian lật từng trang blog mới tìm lại được thứ gì đó,thật có ích phải không nào 

Hôm nay tớ sẽ hướng dẫn cả nhà Cách Tạo Menu Ngang Cho Blog___Hiệu Ứng Thu Gọn,Kéo Dài Khi Rê Chuột

 ra thì cái này mình thấy ở blog bác Noa từ lâu rùi,nhưng không thể làm được theo bác đó ! Hôm qua vì  Khoảng Trời Của Tui có hỏi,nên Khóc Thầm quyết định mần lại cái này,tìm kiếm trên trang này http://www.izwebz.com/category/css/ cũng được khá nhiều thứ về Css ! 

Thôi  sẽ không dài dòng nữa,tớ đi thẳng vào vấn đề chính nha  :

Bước 1 :Đầu tiên

Copy và Paste Code này Vào " Css " trong blog nha,nhớ là paste tiếp vào css ý,đừng paste đè lên css cũ,kẻo lại mất theme ,tớ sẽ không chịu trách nhiệm 

Code :

#khoc_tham_2506_love, #love_quy {font-size:0px;}#love_kt, #love_quy {height:0px;}#khoc_tham_2506_love, #khoc_tham_2506_love:hover #love_quy {height:15px;}#khoc_tham_2506_love:hover, #love_kt, #khoc_tham_2506_love #love_quy:hover {height:auto;font-size:12px;}

Bước 2 :Tạo một Modun Tự Tạo và sử dụng dạng Code dưới đây chèn vô " Modun Tự Tạo " nha :

Code :

<div id="khoc_tham_2506_love">
<div style="text-align:left;">
<table cellpadding="0" cellspacing="0" border="0" style="vertical-align:top;"><tr>
<td valign="top" style="width:200px;padding:0px 50px 0px 0px;">
    <div id="love_quy" style="">
      <div id="love_kt" style="padding:0px 0px 0px 5px;"> Chủ Đề 1</div><div style="padding:5px 5px 5px 15px;color:#FFFFFF;">

         * <a href="Thay_Link_Bài_Viết 1_Vô_Đây">Tên Bài viết 1</a><br>        * <a href="Thay_Link_Bài_Viết 2_Vô_Đây">Tên Bài viết 2</a><br>         * <a href="Thay_Link_Bài_Viết 3_Vô_Đây">Tên Bài viết 3</a><br>         * <a href="Thay_Link_Bài_Viết 4_Vô_Đây">Tên Bài viết 4</a><br>                                 * <a href="Thay_Link_Bài_Viết 5_Vô_Đây">Tên Bài viết 5</a><br>                  * <a href="Thay_Link_Bài_Viết 6_Vô_Đây">Tên Bài viết 6</a><br>                   * <a href="Thay_Link_Bài_Viết 7_Vô_Đây">Tên Bài viết 7</a><br>                   * <a href="Thay_Link_Bài_Viết 8_Vô_Đây">Tên Bài viết 8</a><br>
<td valign="top" style="width:200px;padding:0px 50px 0px 0px;">
    <div id="love_quy" style="">
      <div id="love_kt" style="padding:0px 0px 0px 5px;">Chủ Đề 2</div><div style="padding:5px 5px 5px 15px;color:#FFFFFF;">
      * <a href="Thay_Link_Bài_Viết 1_Vô_Đây">Tên Bài viết 1</a><br>       * <a href="Thay_Link_Bài_Viết 2_Vô_Đây">Tên Bài viết 2</a><br>        * <a href="Thay_Link_Bài_Viết 3_Vô_Đây">Tên Bài viết 3</a><br>        * <a href="Thay_Link_Bài_Viết 4_Vô_Đây">Tên Bài viết 4</a><br>        * <a href="Thay_Link_Bài_Viết 5_Vô_Đây">Tên Bài viết 5</a><br>         * <a href="Thay_Link_Bài_Viết 6_Vô_Đây">Tên Bài viết 6</a><br>          * <a href="Thay_Link_Bài_Viết 7_Vô_Đây">Tên Bài viết 7</a><br>          * <a href="Thay_Link_Bài_Viết 8_Vô_Đây">Tên Bài viết 8</a><br>
<td valign="top" style="width:200px;padding:0px 50px 0px 0px;">
    <div id="love_quy" style="">
      <div id="love_kt" style="padding:0px 0px 0px 5px;">Chủ Đề 3</div><div style="padding:5px 5px 5px 15px;color:#FFFFFF;">
<td valign="top" style="width:200px;padding:0px 50px 0px 0px;">
    <div id="love_quy" style="">
      <div id="love_kt" style="padding:0px 0px 0px 5px;">Chủ Đề 4</div><div style="padding:5px 5px 5px 15px;color:#FFFFFF;">
        <br></div></td></table></div> /*Code tham khảo Noa's blog */

Trong đó :
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top