DMCA.com Protection Status
Hiển thị các bài đăng có nhãn Menu. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Menu. Hiển thị tất cả bài đăng

Thứ Sáu, 7 tháng 2, 2014

Cách tạo menu hiển thi trên mobile cho blogspot

Cách tạo menu hiển thị trên mobile cho blogspot.Cách tạo menu hiển thị trên di động cho blogspot. Cách tạo menu cho blogspot hiển thị tốt mobile.Hướng dẫn cách tạo menu hiển thị trên mobile cho blogspot

Thấy có bạn hỏi về vấn đề này nên mình viết bài hướng dẫn cách tạo menu hiển thị trên mobile cho blogspot.Như các bạn biết blogspot có cái hay nà nó hiển thị khá tốt trên mobile cái mà nhiều website thông thường chưa có và muốn có thì lại phải thuê code về chỉnh sửa lại và nó cũng là điểm mạnh của Blogspot mà mình thấy thích ở nó.

Để thêm chức năng này cho blog thì các bạn cần check xem blog mình có menu khi vào di động chưa nhé để check các bạn đọc bài sau ==> Cách check giao diên blogspot trên mobile không cần dùng điện thoại

Vậy để hiển thị menu trên Mobile chúng ta phải làm gì các bạn làm theo hướng dân dưới đây:

Cách tạo menu hiển thi trên mobile cho blogspot

Bước 1: Đăng nhập Blogspot ==> Mẫu(Template) => Các nhìn sang phần Di động (Mobile) Click vào setting rồi tích vào phần cho phép hiển thị trên di động rồi lưu lại

Cách tạo menu hiển thi trên mobile cho blogspot


Bước 2:  Tiếp tục các bạn vào phần Mẫu(Template) ==> Chỉnh sửa HTML ==> Các bạn copy đoạn code lên trên thẻ ]]></b:skin>

#sidebaratas{display:none;}

Bước 3:  Tiếp tục các bạn vào phần Mẫu(Template) ==> Chỉnh sửa HTML ==> Các bạn copy đoạn code dưới xuống dưới thẻ <body>

<div id='sidebaratas'>
       <b:section id='navtop' preferred='yes'>
         <b:widget id='PageList1' locked='true' title='Pages' type='PageList'>
           <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <div></div>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
         </b:widget>
       </b:section>

</div>

Nhấn lưu lại.

Lưu ý : Cái phần <b:section id='navtop' preferred='yes'>  <b:widget id='PageList1' locked='true' title='Pages' type='PageList'> phần chữ màu đỏ phải là chưa tồn tại nếu thấy báo lỗi thì đổi tên nó đi để không bị trùng nhé. Nếu lưu dc ko lỗi là ok

Bước 4. Bắt đầu tạo menu cho di động

Để tạo các phần cho menu chúng ta sẽ làm như sau

Các bạn click vào phần Pages(Trang) ==> Trang mới (New pages) ==> Rồi chọn cái thứ 2 ở dưới ==> Rồi điền đầy đủ thông tin rồi nhấn lưu ,xem hình dưới

Cách tạo menu hiển thi trên mobile cho blogspot



Cách tạo menu hiển thi trên mobile cho blogspot

- Các bạn muốn tạo menu với nhiều chuyên mục thì các bạn cứ tạo thêm vài cái trang như ở trên là ok.
(Chú ý các bạn không nhấn vái cái lưu ở góc phải màn hình nhé,nhấn vào đó là nó sẽ thành không hiển thị nhé)

- Muốn sắp xếp các phần menu cho hiển thị trên dưới thì các bạn lại vào phần Bố Cục(Layout) ==> Tìm cái tên là Pages click vào chỉnh sửa rồi kéo nó vào vị trí bạn muốn vậy là ok.

Vậy rà xong bây giờ các bạn check thử xem nos hiển thị ra sao là ok

Chúc các bạn thành công !

Bài viết được viết bởi http://bittuot.blogspot.com/ -  Bít Tuốt Blog . Chú ý ghi rõ nguồn khi copy bài viết này

Thứ Hai, 23 tháng 9, 2013

Dropdown Menu sổ dọc có ảnh cho website - Blogspot
Dropdown Menu sổ dọc có ảnh cho website - Blogspot . Code Css Dropdown Menu sổ dọc có ảnh cho website - Blogspot. Tạo Dropdown Menu sổ dọc có ảnh cho website - Blogspot

Sau đây Bít Tuốt Blog xin chia sẻ với các bạn loại Dropdown Menu sổ dọc có ảnh cho website - Blogspot cho những ai quan tâm cần tạo cho mình 1 thanh menu ngang đẹp cho website blogspot



Cách tạo Dropdown Menu sổ dọc có ảnh cho website - Blogspot

Bước 1: Thêm đoạn CSS dưới đây vào trước thẻ đóng </head>

<style type='text/css'>
.menu {
height: 40px;
width: 505px;

background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}

/* Links */

.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;

border-left: 1px solid #393942;
border-right: 1px solid #4f5058;

font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;

color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);

-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

/* Sub Menu */

.menu ul {
position: absolute;
top: 40px;
left: 0;

opacity: 0;

background: #1f2024;

-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;

-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
height: 0;
overflow: hidden;
padding: 0;

-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}

.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}

.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;

border: none;
border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }
/* Icons */
.menu a.documents { background: url(http://designmodo.com/demo/css3dropdownmenu/img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(http://designmodo.com/demo/css3dropdownmenu/img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(http://designmodo.com/demo/css3dropdownmenu/img/arrow.png) no-repeat 6px center; }
</style>

Bước 2 : Thêm đoạn code sau vào phần bạn muốn hiển thị menu này

<ul class="menu">

<li><a href="Link web">My dashboard</a></li>
<li><a href="Link web">Likes</a></li>
<li><a href="Link web">Views</a>

<ul>
<li><a href="Link web" class="documents">Documents</a></li>
<li><a href="Link web" class="messages">Messages</a></li>
<li><a href="Link web" class="signout">Sign Out</a></li>
</ul>

</li>
<li><a href="Link web">Uploads</a></li>
<li><a href="Link web">Videos</a></li>
<li><a href="Link web">Documents</a></li>

</ul> <!-- end .menu -->
Các bạn sửa lại link web và câu từ hiển thị theo ý bạn nhé
Chúc các bạn thành công !

Mega Dropdown Menu đẹp cho Webssite - Blogspot

Mega Dropdown Menu đẹp cho Webssite - Blogspot. Code CSS Mega Dropdown Menu đẹp cho Webssite - Blogspot. Tạo Mega Dropdown Menu đẹp cho Webssite - Blogspot

Mega Drop menu - Điểm đặc biệt của kiểu menu này là bạn có thể chèn cả một văn bản hay một tiện ích vào. Và kết hợp cả 2 đầu của thanh menu để tạo các sub menu. Thêm 1 điều là menu hoàn toàn bằng CSS do vậy các bạn yên tâm về tốc độ load của nó nha

Bạn xem Demo ngay tại Bít Tuốt luôn nhé vì hiện tại Bít Tuốt Blog đang sử dụng loại Mega Dropdown Menu
Download demo tại đây


Cách tạo Mega Dropdown Menu cho Webssite - Blogspot như sau

Bước 1: Vào phần sửa code của website hoặc Blogspot bạn thêm đoan code dưới đây vào trước thẻ </head>

Cách 1 thêm link trực tiếp tới file CSS

<link href='https://sites.google.com/site/tessssssssblog/menu.css' media='screen' rel='stylesheet' type='text/css'/>


Cách 2 thêm css trực tiếp vào code

body, ul, li {
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    text-align:left;
}

#menu {
    list-style:none;
    width:938px;
    height:43px;
    padding:0px 20px 0px 20px;

    /* Background color and gradients */
   
    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
   
    /* Borders */
   
    border: 1px solid #002232;
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
   
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 8px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;
   
    /* Background color and gradients */
   
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
   
    /* Rounded corners */
   
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #EEEEEE;
    display:block;
    outline:0;
    font-weight: bold;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
    padding-right:21px;
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5PpI16NYjQcN1Uu1EETYWKa1E6TwVeGsZO4EX1_4sJL4a061WmCHUC2zYiG5uG5t_f-DDYo5wU6OLE3ObynlmelyL6kZ-ors_s-m8K5HT3Tz-JzXSE1FWQkho5siC8SfVGuycaWMqJ0/s1600/drop.gif") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-yHzrZX0jDXOwIA6M358e-ynET5zQkx25WMKvwZ7nalt7NvCPpH-kogSgT11GsDJMy-V0qOo0A0u9R_KaspXm6z2O1PW9nuKpjmnG5Mf2rpYpCk-MGKNByhk87btsCTughX8bk4Jw2I/s1600/drop.png") no-repeat right 7px;
}

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;
    z-index: 1000;
    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,  #menu li:hover .dropdown_2columns,  #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}

.col_1, .col_2, .col_3, .col_4, .col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
    float:right;
    margin-right:0px;
}
#menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
}
#menu h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
}
#menu p {
    line-height:18px;
    margin:0 0 10px 0;
}

#menu li:hover div a {
    font-size:12px;
    color:#015b86;
}
#menu li:hover div a:hover {
    color:#029feb;
}


.strong {
    font-weight:bold;
}
.italic {
    font-style:italic;
}

.imgshadow { /* Better style on light background */
    background:#FFFFFF;
    padding:4px;
    border:1px solid #777777;
    margin-top:5px;
    -moz-box-shadow:0px 0px 5px #666666;
    -webkit-box-shadow:0px 0px 5px #666666;
    box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
    width:auto;
    float:left;
    margin:5px 15px 5px 5px;
}

#menu li .black_box {
    background-color:#333333;
    color: #eeeeee;
    text-shadow: 1px 1px 1px #000;
    padding:4px 6px 4px 6px;

    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    /* Shadow */
    -webkit-box-shadow:inset 0 0 3px #000000;
    -moz-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}
#menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
}
#menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}

#menu li .greybox li {
    background:#F4F4F4;
    border:1px solid #bbbbbb;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width:116px;

    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
    background:#ffffff;
    border:1px solid #aaaaaa;
    padding:4px 6px 4px 6px;
    margin:0px 0px 4px 0px;
}



Bước 2: Thêm đoạn code dưới đây vào phần bạn muốn hiển thị

<ul id='menu'>
 
    <li><a class='drop' href='/'>Home</a><!-- Begin Home Item -->
 
        <div class='dropdown_2columns'><!-- Begin 2 columns container -->
 
            <div class='col_2'>
                <h2>Bít Tuốt Blog</h2>
            </div>
 
            <div class='col_2'>
                <p>Chào mừng bạn đã ghé thăm <b>Bít Tuốt Blog</b>. Nơi chia sẻ lưu trữ các thông tin hữu ích nhất</p>          
                <p><b>Bít Tuốt</b> nơi chia sẻ các Thủ thuật Blog - Các mẹo Làm đẹp - Kỹ năng - Các tin giải trí - Download tổng hợp ...</p>          
            </div>
       
        </div><!-- End 2 columns container -->
 
    </li><!-- End Home Item -->

<li><a class='drop' href='#'>Chuyên Mục HOT</a><!-- Begin 4 columns Item -->
 
        <div class='dropdown_4columns'><!-- Begin 4 columns container -->
     
            <div class='col_4'>
                <h2>Chuyên mục Hot nhất tại Bít Tuốt</h2>
            </div>
         
            <div class='col_1'>
         
                <h3>Thủ Thuật</h3>
                <ul>
                  <li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Tin Học'>Thủ Thuật Tin Học</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Office'>Thủ Thuật Office</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Game'>Thủ Thuật Game</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Blogspot - Wordpress - Joomla'>Thủ Thuật Blog</a></li>
                </ul>
               
            </div>
 
            <div class='col_1'>
         
                <h3>Download</h3>
                <ul>
                  <li><a href='http://bittuot.blogspot.com/search/label/Download Game'>Download Game</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Download Phần Mềm - Crack'>Download Phần Mềm</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Download Phim'>Download Phim</a></li>
 <li><a href='http://bittuot.blogspot.com/search/label/Phần Mềm Khác'>Phần Mềm Khác</a></li>
                </ul>
               
            </div>
 
            <div class='col_1'>
         
                <h3>Giải Trí</h3>
                <ul>
                  <li><a href='http://bittuot.blogspot.com/search/label/Tin Tức Hot'>Tin Tức Hot</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Clip Hài - Video Hot'>Clip Hài - Video Hot</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Clip Shock'>Clip Shock</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Ảnh Vui'>Ảnh Hài</a></li>
                </ul>
               
            </div>
 
            <div class='col_1'>
         
                <h3>Danh Mục Hot</h3>
                <ul>
 <li><a href='http://bittuot.blogspot.com/search/label/Góc Làm Đẹp'>Góc Làm Đẹp</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Tình Yêu Giới Tính'>Tình Yêu Giới Tính</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Địa Điểm Hot'>Địa Điểm Hot</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Sức Khỏe - Đời Sống'>Sức Khỏe - Đời Sống</a></li>
                </ul>
               
            </div>
         
        </div><!-- End 4 columns container -->
 
    </li><!-- End 4 columns Item -->

    <li><a class='drop' href='#'>Nổi Bật</a><!-- Begin 5 columns Item -->
 
        <div class='dropdown_5columns'><!-- Begin 5 columns container -->
     
            <div class='col_5'>
                <h2>Danh mục nổi bật tại Bít Tuốt</h2>
            </div>
         
            <div class='col_1'>
                <ul class='greybox'>
                  <li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Tin Học'>Thủ Thuật Tin Học</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Office'>Thủ Thuật Office</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Game'>Thủ Thuật Game</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Blogspot - Wordpress - Joomla'>Thủ Thuật Blog</a></li>
                </ul>
            </div>
             <div class='col_1'>
                <ul class='greybox'>
                  <li><a href='http://bittuot.blogspot.com/search/label/Download Game'>Download Game</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Download Phần Mềm - Crack'>Down Phần Mềm</a></li>
                  <li><a href='http://bittuot.blogspot.com/search/label/Download Phim'>Download Phim</a></li>
 <li><a href='http://bittuot.blogspot.com/search/label/Bảng Giá'>Bảng Giá</a></li>
                </ul>
               
            </div>
             <div class='col_1'>
 
                <ul class='greybox'>
                    <li><a href='http://bittuot.blogspot.com/search/label/Mẹ Và Bé'>Mẹ và Bé</a></li>
                    <li><a class='drop' href='http://bittuot.blogspot.com/search/label/Góc Kỹ Năng'>Góc Kỹ Năng</a></li>
                    <li><a href='Tư Vấn Tiêu Dùng'>Tư Vấn Tiêu Dùng</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Luật Pháp'>Tìm Hiểu Luật</a></li>
                </ul>
 
            </div>

            <div class='col_1'>
 
                <ul class='greybox'>
                    <li><a href='http://bittuot.blogspot.com/search/label/Học Nấu Ăn'>Học Nấu Ăn</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Hợp Tác Kinh Doanh'>Hợp Tác Kinh Doanh</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Tuyển Dụng'>Tin Tuyển Dụng</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Góc Sinh Viên'>Góc Sinh Viên</a></li>
                </ul>
 
            </div>
         
            <div class='col_1'>
 
                <ul class='greybox'>
                    <li><a href='http://bittuot.blogspot.com/search/label/Mẹo Vặt'>Mẹo Vặt</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Ảnh Vui'>Ảnh Hài</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Truyện Hay'>Truyện Hay</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Thơ Vui'>Thơ Vui</a></li>
                 
                </ul>
 
            </div>
     
            <div class='col_5'>
                <h2>Bài quảng cáo - Tin Nổi Bật tại Bít Tuốt</h2>
            </div>
         
            <div class='col_3'>
         
                <img alt='Vieskin Collagen' class='img_left imgshadow' height='70' src='http://collagenvh.com/wp-content/uploads/2013/06/vieskin-collagen1.jpg' width='70'/>
              <p><b>Tinh Chất Vieskin Collagen S</b> - Dược mỹ phẩm cao cấp làm mờ nếp nhăn, vết sẹo trứng cá sau mụn,vết nám,vết thâm,vết tàn nhang ...Liên hệ Hotline: 0912 351 166 để được tư vấn chi tiết..<a href='http://goo.gl/Lw6uBt'>Xem chi tiết...</a></p>
     
                <img alt='' class='img_left imgshadow' height='70' src='http://root.vn/up/download-idm-full-crack-2013.jpg' width='70'/>
              <p><b>Key IDM - Crack IDM mới nhất cập nhật liên tục dùng vĩnh viễn cho mọi phiên bản</b> - Click ngay để biết thêm chi tiết về : Key IDM,Crack IDM - Dùng vĩnh viễn cho mọi phiên bản tại <a href='http://bittuot.blogspot.com/2013/05/key-idm-crack-idm-dung-vinh-vien-cho-moi-phien-ban.html'>Read more...</a></p>
         
            </div>
         
            <div class='col_2'>
         
                <p class='black_box'>Mục đích ra đời của Blog Bít Tuốt là để Bít Tuốt ghi lại những gì mình đã tìm hiểu được,những gì Bít Tuốt biết để chia sẻ cho mọi người cùng biết.<br/><br/><b>  Bít Tuốt Blog trang thông tin tổng hợp</b>.Nơi chia sẻ những kinh nghiệm hot - Thủ thuật hay. Blog Bít tuốt nơi chia sẻ lưu trữ các thông tin hữu ích nhất</p>
         
            </div>
     
        </div><!-- End 5 columns container -->
 
    </li><!-- End 5 columns Item -->

 
 
<li class='drop'><a class='drop' href='http://bittuot.blogspot.com/search/label/Góc Làm Đẹp'>Góc Làm Đẹp</a>
 
<div class='dropdown_1column align_right'>
     
                <div class='col_1'>
             
                    <ul class='simple'>
                        <li><a href='http://bittuot.blogspot.com/search/label/Làm Đẹp Da'>Làm đẹp da</a></li>
                        <li><a href='http://bittuot.blogspot.com/search/label/Trang Điểm'>Trang Điểm</a></li>
                        <li><a href='http://bittuot.blogspot.com/search/label/Làm Đẹp Tóc'>Làm Đẹp Tóc</a></li>
                        <li><a href='http://bittuot.blogspot.com/search/label/Mặc Đẹp'>Mặc Đẹp</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Mẹo Làm Đẹp'>Mẹo Làm Đẹp</a></li>
                        <li><a href='http://bittuot.blogspot.com/search/label/Video Làm Đẹp'>Video làm đẹp</a></li>
                    </ul>
                   
                </div>
             
</div>
     
</li>

<li class='drop'><a class='drop' href='http://bittuot.blogspot.com/search/label/Góc Kỹ Năng'>Góc Kỹ Năng</a>
 
<div class='dropdown_1column align_right'>
     
                <div class='col_1'>
             
                    <ul class='simple'>
                        <li><a href='http://bittuot.blogspot.com/search/label/Kỹ Năng Bán Hàng'>Kỹ năng bán hàng</a></li>
                        <li><a href='http://bittuot.blogspot.com/search/label/Kỹ Năng Xin Việc'>Kỹ năng xin việc</a></li>
                        <li><a href='Kỹ Năng Giao Tiếp'>Kỹ năng giao tiếp</a></li>
                        <li><a href='http://bittuot.blogspot.com/search/label/Kỹ Năng Làm Việc Nhóm'>Kỹ năng làm việc nhóm</a></li>
                        <li><a href='http://bittuot.blogspot.com/search/label/Kỹ Năng Thuyết Trình'>Kỹ năng thuyết trình</a></li>
                        <li><a href='Kiếm Tiền Qua Mạng'>Kiếm tiền qua mạng</a></li>
                    </ul>
                   
                </div>
             
</div>
     
</li>

    <li class='drop'><a class='drop' href='#'>Chuyên Mục Khác</a><!-- Begin 3 columns Item -->
 
        <div class='dropdown_3columns align_right'><!-- Begin 3 columns container -->
         
            <div class='col_3'>
                <h2>Danh sách các danh mục</h2>
            </div>
         
            <div class='col_1'>
 
                <ul class='greybox'>
                    <li><a href='http://bittuot.blogspot.com/search/label/Mẹ Và Bé'>Mẹ và Bé</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Tin Khuyến Mãi'>Tin Khuyến Mãi</a></li>
                    <li><a href='Tư Vấn Tiêu Dùng'>Tư Vấn Tiêu Dùng</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Luật Pháp'>Tìm Hiểu Luật</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Bảng Giá'>Bảng Giá</a></li>
<li><a href='http://bittuot.blogspot.com/'>Thủ Thuật Blogger</a></li>
                </ul>
 
            </div>
         
            <div class='col_1'>
 
                <ul class='greybox'>
                    <li><a href='http://bittuot.blogspot.com/search/label/Học Nấu Ăn'>Học Nấu Ăn</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Hợp Tác Kinh Doanh'>Hợp Tác Kinh Doanh</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Tuyển Dụng'>Tin Tuyển Dụng</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Góc Sinh Viên'>Góc Sinh Viên</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Góc Phụ Nữ'>Góc Phụ Nữ</a></li>
<li><a href='http://bittuot.blogspot.com/'>Thủ Thuật Blog</a></li>
                </ul>
 
            </div>
         
            <div class='col_1'>
 
                <ul class='greybox'>
                    <li><a href='http://bittuot.blogspot.com/search/label/Mẹo Vặt'>Mẹo Vặt</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Giải Trí'>Giải Trí</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Widget Blogspot'>Widget Blogspot</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Truyện Hay'>Truyện Hay</a></li>
                    <li><a href='http://bittuot.blogspot.com/search/label/Thơ Vui'>Thơ Vui</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Dịch Vụ Hot'>Dịch Vụ Hot</a></li>
                 
                </ul>
 
            </div>
         
<div class='col_3'>
                <h2>Bài viết nổi bật</h2>
            </div>
         
            <div class='col_3'>
                <img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-b7eTixdlVBiMs6D6zidEncqdunoiSj1Z4xOTkJwZdDo_7hkX16f2Jj2ewC1hTkZRGyzmM36kYXCgY4sR5xcE3RYlXi7rwAXn9of0V3fLeOxiZTuQq_tXi6TUnykJq5oAr8ViUqnIRZU/s640/template+01.png' width='70'/>
              <p><b>Tổng hợp Các trang web cung cấp Theme Blogspot miễn phí</b>. Website cung cấp Theme Blogspot - Template Blogspot Free cho những ai cần tìm 1 theme blogspot đẹp<a href='http://bittuot.blogspot.com/2013/08/theme-blogspot-free-web-cung-cap-template-blogspot.html'>Read more...</a></p>
 
                <img alt='' class='img_left imgshadow' height='70' src='http://doctruyenhay.vn/uploads/news/images/truyen-cuoi2.jpg' width='70'/>
              <p><b>Ảnh bìa Facebook siêu độc - siêu đẹp và hài hước nhất</b> cho các bạn cần trang trí cho Timeline Facebook do Bít Tuốt sưu tầm và chia sẻ<a href='http://bittuot.blogspot.com/2013/06/anh-bia-facebook-doc-dep-hai-huoc-nhat.html'>Read more...</a></p>
            </div>

         
     
        </div><!-- End 3 columns container -->
     
    </li><!-- End 3 columns Item -->


</ul>

Các bạn sửa theo ý thích của các bạn nhé. Lời Khuyên : Các bạn nên down demo về để xem chi tiết hơn
Chúc các bạn thành công !