Grid List
Showing posts with label menu-blogspot. Show all posts
Showing posts with label menu-blogspot. Show all posts

Friday, June 19, 2015

Simple Responsive menu bar

Posted by dientudieukhien at 8:33 PM 0 Comments
Responsive menu bar rất phù hợp với các blog đơn giản, phù hợp với pc và mobile, sau đây là một số hình ảnh thực tế:
simple responsive menu bar
Menu khi ở độ phân giải màn hình lớn
Read More »

Tuesday, June 16, 2015

Menu 2 cấp responsive cho blogger

Posted by dientudieukhien at 3:44 AM 0 Comments
Như tiêu đề, loại menu này có 2 cấp và tự động thay đổi giao diện khi độ rộng màn hình thay đổi. Ngày nay, dạng menu responsive rất phổ biến và rất thân thiện với thiết bị di động.
2 sub responsive menu
Giao diện menu ở chế độ bình thường

2 sub responsive menu
Giao diên menu ở chế độ thu gọn
Giao diện menu ở chế độ thu gọn, duyệt chuyên mục

  • Khi tải source code về bạn giải nén ra ta được 3 file: style.css, script.js, index.html
  • Cách cài đặt menu cho blogspot như sau:
          + Copy đoạn code sau pase phía trên </head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
          Đối với file "script.js" bạn nên upload lên host lưu trữ miễn phí như dropbox.com, sau đó lấy link thay vào.

          + Đối với file "Style.css", bạn dùng một chương trình notepad để mở nó ra và copy toàn bộ code trong đó, sau đó pase phía trên </b:sink>
          + Bước cuối cùng là copy đoạn code sau vào nơi bạn muốn menu xuất hiện
<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active'><a href='#'>Products</a>
      <ul>
         <li><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

Bạn có thể thay đổi và thêm nhiều nội dung cho menu.

|| Tải source code 2 sub responsive menu
Read More »

Wednesday, June 3, 2015

Tạo Jump Menu như thế nào

Posted by dientudieukhien at 7:34 PM 1 Comment
Jump menu rất thích hợp trong việc giúp bạn tăng thêm nhiều nội dung liên kết trên một không gian nhỏ. Chúng thật hiệu quả với những website có nhiều chuyên mục nhưng không gian hạn hẹp. Jump menu giúp cho website của bạn trông gọn gàng và chuyên nghiêp hơn. Sau đây dientudieukhien sẽ giúp bạn từng bước tạo một jump menu nhé!

Giao diện thu gọn của jump menu
Giao diện thu gọn của jump menu
Jump menu khi mở rộng
Jump menu khi mở rộng

  • Trước tiên bạn tạo một Widget HTML/JAVASCRIP
  • Bạn dán đoạn mã sau vào và Save lại thế là xong.


<script type="text/javascript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>

<body>
<form name="form" id="form">
  <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
    <option>Chọn trang xem phim</option>
    <option value="http://phimmoi.net">Phim Mới</option>
    <option value="http://phimnhanh.net">Phim Nhanh</option>
  </select>
</form>

  • Bạn có thể thay đổi các liên kết ở trên hoặc thêm nhiều liên kết khác.

|| Xem Demo tại đây
Read More »

Friday, January 30, 2015

Tạo drop down menu kích thước phù hợp với PC và mobile cho blogspot

Posted by dientudieukhien at 10:24 AM 0 Comments
Trên một trang web hay blog thì menu là một thành phần quan trọng, nó giúp điều hướng nội dung của blog được tốt hơn, menu tốt sẽ giúp góp phần làm tăng lượng truy cập blog. Mình rất thích loại menu có kích thuớc tự động điều chỉnh cho phù hợp  màn hình của nhiều loại thiết bị khi truy cập trang, sau đây là hình ảnh của menu khi truy cập bằng máy tính và điện thoại.
drop down menu tu dong dieu chinh kich thuoc
Drop down menu khi hiển thị trên PC

Khi hiển thị trên mobile
Menu khi xổ xuống

Các bước thực hiện như sau:
  • Trước tiên bạn đăng nhập vào trình điều khiển của Blogspot, vào Mẫu, chỉnh sửa HTML
  • Tiếp theo bạn tìm đoạn code giống, hoặc gần giống đoạn code sau:

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
  • Thay thế đoạn code trên bằng đoạn code dưới đây:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
  • Tiếp theo tìm code </b:skin>, sao chép và dán đoạn code phía dưới đây trên nó:
/*-----Responsive Drop Down Menu by MBT ----*/
body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}

#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}
}


  • Sao chép và dán đoạn code sau, nơi bạn muốn hiển thị menu nhé:

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>My&#160;Blogger&#160;Tricks</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
       </ul>
    </nav>


  • Save template lại và xem kết quả nhé, đôi khi những template khác nhau thì những đoạn code phải tìm và thay thế hơi khác nhau, bạn nên có chút hiểu biết về css để dể dàng tùy biến, chúc các bạn hành công.
code: mybloggertricks.com
Read More »

    tab

back to top