chi se thu thuat

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

Home » Posts filed under Menu

Tạo menu bo tròn góc cho blogspot

Người đăng: chia se dam me on Chủ Nhật, 27 tháng 4, 2014

Bài viết này mình sẽ giới thiệu một style dropdown menu với hiệu ứng bo tròn góc cho Blogger bằng CSS3. Các bạn có thể xem hình minh họa bên trên.

Ảnh minh họa :

Các bước thực hiện:

1. Đăng nhập Blog

2. Chọn bố cục --> Thêm tiện ích HTML\Javascript và dán code bên dưới vào


<!--Round Corner Dropdown
Menu by QuangViet'Blog--> <style> #dtmenu { width:800px;
background:#0874fe; border-bottom: 5px solid #1A1A1A; border-top: 1px solid
#1A1A1A; clear: both; overflow: hidden; -moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000; box-shadow: 2px 3px 5px #000000;
border:none 5px #000000; -moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px; -moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px; -webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px; -webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px; border-top-left-radius:16px;
border-top-right-radius:16px; border-bottom-left-radius:16px;
border-bottom-right-radius:16px; } #dtmenu ul { float: left; width: 100%; }
#dtmenu li { float: left; list-style-type: none; } #dtmenu li a {
background:#0874fe; color: #fff; display: block; font-size: 14px; padding: 5px
17px 5px 15px; position: relative; text-decoration: none; } #dtmenu li a:hover
{ background:#0874fe; color: #fff; } #dtmenu li li a { background: none;
background-color: #c32751; border: 1px solid #1A1A1A; border-top-width: 0;
color: #fff; font-size: 14px; padding: 5px 10px; position: relative;
text-transform: none; width: 130px; } #dtmenu li li a:hover { background: none;
background-color: #111111; } #dtmenu li ul { height: auto; left: -9999px;
margin: 0 0 0 -1px; position: absolute; width: 160px; z-index: 9999; } #dtmenu
li:hover ul { left: auto; } </style> <a style=" font-size:2px;
color:#eeeeee; text-decoration:none;" href="http://www.đoàntrịnh.vn">Dropdown
Menu by đoàntrịnh.vn</a> <div id="dtmenu">
<li><a href="#">Home</a></li> <li><a
href="#">Sub Menu 1</a> <ul> <li><a
href="#"> Menu 1</a></li> <li><a
href="#"> Menu 2</a></li> <li><a
href="#"> Menu 3</a></li> </ul> </li>
<li><a href="#">Sub Menu 2</a> <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li> </ul>
</li> <li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li> <li><a
href="#">Menu 3</a></li> <li><a
href="#">Menu 4</a></li> <li><a
href="#">Menu 5</a></li> </div> <!--/Round
Corner Dropdown Menu by QuangViet'Blog-->

Điều chỉnh cho hợp với blog của bạn

3. Lưu lại và xem kết quả

More about →

Thanh menu có ô search ở đầu trang cho blog

Người đăng: chia se dam me on Thứ Năm, 22 tháng 8, 2013

Để trang trí đẹp hơn cho blog Menu giúp các bạn trình bày các danh mục một cách khoa học và chuyên nghiệp . Menu đẹp và hợp lý cho người xem theo dõi Blog của bạn tiện lợi,tìm kiếm thông tin cần tìm một cách nhanh nhất ! Hôm nay mình giới thiệu đến các bạn thủ thuật tạo menu có kèm ô search,dịch trang rất đẹp mắt

Ảnh minh họa :

Demo : Xem ngay

Các bước thực hiện :

1. Đăng nhập Blogger
2. Chọn mẫu -> Chỉnh sửa HTML
3. Dán code bên dưới vào trước thẻ : ]]></b:skin>


#topmenu{background:#545454; color:#fff;width:850px;margin:auto;padding:5px;height:20px;z-index:30;}
#topmenu1{width:650px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px;    text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu {    list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center;    position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto;    position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px;    }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.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:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}

Các bạn điều chỉnh các Width cho phù hợp với Blog của bạn
Width :850px : Chiều rộng của menu
Width : 652px : Chiều rộng phần chứa các Sub
Width : 200px : Chiều rộng ô tìm kiếm

4. Chèn đoạn code bên dưới trước thẻ <body>
Với các mẫu Simple của blogspot thì là thẻ: <body expr:class='"loading" + data:blog.mobileClass'> hoặc tương tựnhư vậy
- Chèn đoạn code bên dưới vào sau đoạn code vừa tìm được:

<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML92' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tìm kiếm bài viết ...&quot;;}' onfocus='if (this.value == &quot;Tìm kiếm bài viết ...&quot;) {this.value = &quot;&quot;}' tabindex='7' type='text' value='Tìm kiếm bài viết ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='http://viettin24h.com/'/>
</form></div>
<div style='clear:both'/>
</div>

Thay màu đỏ (Tìm kiếm bài viết...) và màu xanh (http://viettin24h.com)

5. Lưu lại
6. Vào bố cục trang bây giờ xuất hiện thêm tiện ích HTML92 =>Click vào vào thêm đoạn code bên dưới vào

<ul class="menu">
<li class="drop0"><a href="http://viettin24h.com/">Home</a></li>
<li class="drop0"><a href="http://www.viettin24h.com/p/so-o-trang.html">Site map</a></li>
<li class="drop0"><a href="#">About Me</a></li>
<li><a href="#" class="drop">Drop menu 1</a>
<div class="drop1">
<ul>
<li><a href="#">Drop menu 1.1</a></li>
<li><a href="#">Drop menu 1.2</a></li>
<li><a href="#">Drop menu 1.3</a></li>
<li><a href="#">Drop menu 1.4</a></li>
</ul>
</div></li>

<li><a href="#" class="drop">Drop menu 2</a>
<div class="drop2">

<div class="col">
<h3>Drop menu 2.1.1</h3>
<ul>
<li><a href="#">Drop menu 2.1.2</a></li>
<li><a href="#">Drop menu 2.1.3</a></li>
<li><a href="#">Drop menu 2.1.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.2.1</h3>
<ul>
<li><a href="#">Drop menu 2.2.2</a></li>
<li><a href="#">Drop menu 2.2.3</a></li>
<li><a href="#">Drop menu 2.2.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.3.1</h3>
<ul>
<li><a href="#">Drop menu 2.3.2</a></li>
<li><a href="#">Drop menu 2.3.3</a></li>
<li><a href="#">Drop menu 2.3.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.4.1</h3>
<ul>
<li><a href="#">Drop menu 2.4.2</a></li>
<li><a href="#">Drop menu 2.4.3</a></li>
<li><a href="#">Drop menu 2.4.4</a></li>
</ul>

</div></div></li></ul>

Các bạn điều chỉnh : # : link tới bài viết, nhãn...
drop...: Tên hiển thị

Các bạn có thể thêm các Sub bằng cách thêm các phần màu 1 và màu 2 vào trước thẻ </ul>

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

More about →

Tạo menu xổ ngang và dọc nhiều cấp rất đẹp mắt

Người đăng: chia se dam me on Thứ Ba, 23 tháng 7, 2013

Hiện nay việc tạo ra một trang Web/Blog với nội dung phong phú,nhiều người đọc...bên cạnh đó về phần giao diện bắt mắt tạo cảm giác thân thiện và dễ sử dụng cho người dùng cũng rất quan trọng! Một trong những điều giúp người đọc có thể quan sát và theo dõi tiện lợi đó là Menu ! Viettin24h cũng đã giới thiệu đến các bạn khá nhiều mẫu Menu đẹp ! Hôm nay mang đến thêm cho các bạn kiểu Menu xổ ngang sau đó dọc có thể tích hợp rất nhiều thông tin

Ảnh minh họa :

Bắt đầu thủ thuật :

1. Đăng nhập Blogger
2. Chọn mẫu--> Chỉnh sửa HTML
3. Đặt code bên dưới trước thẻ : </head>

<script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

4. Tiếp theo đặt code bên dưới trên thẻ : ]]> </ b: skin>

.jqueryslidemenu{ 
font: bold 12px Verdana; 
background: #414141; 
width: 100%; 
} 

.jqueryslidemenu ul{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 

/*Top level list items*/ 
.jqueryslidemenu ul li{ 
position: relative; 
display: inline; 
float: left; 
} 

/*Top level menu link items style*/ 
.jqueryslidemenu ul li a{ 
display: block; 
background: #414141; /*background of tabs (default state)*/ 
color: white; 
padding: 8px 10px; 
border-right: 1px solid #778; 
color: #2d2b2b; 
text-decoration: none; 
} 

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ 
display: inline-block; 
} 

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ 
color: white; 
} 

.jqueryslidemenu ul li a:hover{ 
background: black; /*tab link background during hover state*/ 
color: white; 
} 

/*1st sub level menu*/ 
.jqueryslidemenu ul li ul{ 
position: absolute; 
left: 0; 
display: block; 
visibility: hidden; 
} 

/*Sub level menu list items (undo style from Top level List Items)*/ 
.jqueryslidemenu ul li ul li{ 
display: list-item; 
float: none; 
} 

/*All subsequent sub menu levels vertical offset after 1st level sub menu */ 
.jqueryslidemenu ul li ul li ul{ 
top: 0; 
} 

/* Sub level menu links style */ 
.jqueryslidemenu ul li ul li a{ 
font: normal 13px Verdana; 
width: 160px; /*width of sub menus*/ 
padding: 5px; 
margin: 0; 
border-top-width: 0; 
border-bottom: 1px solid gray; 
} 

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ 
background: #eff9ff; 
color: black; 
} 

/* ######### CSS classes applied to down and right arrow images  ######### */ 

.downarrowclass{ 
position: absolute; 
top: 12px; 
right: 7px; 
} 

.rightarrowclass{ 
position: absolute; 
top: 6px; 
right: 5px; 
}

5. Dán code bên dưới sau : <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu"> 
<ul> 
<li><a href="http://Viettin24h.com/">Item 1</a></li> 
<li><a href="#">Item 2</a></li> 
<li><a href="#">Folder 1</a> 
  <ul> 
  <li><a href="#">Sub Item 1.1</a></li> 
  <li><a href="#">Sub Item 1.2</a></li> 
  <li><a href="#">Sub Item 1.3</a></li> 
  <li><a href="#">Sub Item 1.4</a></li> 
  </ul> 
</li> 
<li><a href="#">Item 3</a></li> 
<li><a href="#">Folder 2</a> 
  <ul> 
  <li><a href="#">Sub Item 2.1</a></li> 
  <li><a href="#">Folder 2.1</a> 
    <ul> 
    <li><a href="#">Sub Item 2.1.1</a></li> 
    <li><a href="#">Sub Item 2.1.2</a></li> 
    <li><a href="#">Folder 3.1.1</a> 
        <ul> 
            <li><a href="#">Sub Item 3.1.1.1</a></li> 
            <li><a href="#">Sub Item 3.1.1.2</a></li> 
            <li><a href="#">Sub Item 3.1.1.3</a></li> 
            <li><a href="#">Sub Item 3.1.1.4</a></li> 
            <li><a href="#">Sub Item 3.1.1.5</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Sub Item 2.1.4</a></li> 
    </ul> 
  </li> 
  </ul> 
</li> 
<li><a href="http://Viettin24h.com/">Item 4</a></li> 
</ul> 
<br style="clear: left" /> 
</div>

6. Lưu lại và xem kết quả

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

More about →

Menu tự động lấy bài viết của link nhãn hay link tìm kiếm cho Blogger

Người đăng: chia se dam me on Thứ Sáu, 17 tháng 5, 2013

Bài viết hôm nay mình chia sẻ cho các bạn 1 thủ thuật tạo menu với nhiều điểm khác biệt so với các menu mình đã giới thiệu cùng các bạn trước đây. Menu này hoạt động chủ yếu dựa vào thư viện JQuery và JSON feed API của blogger.
Với menu này ngoài việc bạn chỉ dừng ở chỗ đặt tên và link cho các menu thì ở đây đối với các link là link của trang nhãn hay link của trang tìm kiếm của blogger thì các bài viết của nhãn đó hay của từ khóa tìm kiếm đó sẽ được hiển thị ra trên menu của bạn, đúng thư mục bạn đã đặt. Để thấy rõ hơn bạn có thể xem qua demo bên dưới.

Hình ảnh minh họa

» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau trước thẻ </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://traidatmuidata.googlecode.com/files/ajaxmenu.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#ajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Số bài viết hiển thị
defaultImg : 'http://bit.ly/hGWr7r' 
});});</script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.menu *{font-size:12px;margin: 0;padding: 0;}
ul.menu {list-style: none;line-height: 1;overflow: visible !important;}
ul.menu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #333 !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.menu li a:hover,ul.menu li a.hoverover{background: #f5f5f5 !important;}
ul.menu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menu li:hover > ul{display: block;}
ul.menu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.menu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menu ul li a:hover,ul.ajaxmenu ul li a.hoverover{background: #fff !important;}
ul.menu ul ul{display: none;left: 100%;top: 0;}

ul.ajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.ajaxmenu li:hover div.submenu {display: block;}
ul.ajaxmenu ul ,ul.ajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.ajaxmenu ul li{background: none !important;float: none !important;}
ul.ajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.ajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.ajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.ajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.ajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.ajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.ajaxmenu ul.postslist li a{color:#444;display: block;line-height: 1.4;padding: 0 !important;}
ul.ajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.ajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#ajaxmenu {border-radius:5px;background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới


<ul class="menu" id="ajaxmenu">

<li> <a href="/">Trang chủ</a></li>

<li><a href="#">Danh mục menu 1</a>
<ul>


  <li><a href='http://quangvietmkt.blogspot.com/search/label/Website'>Website</a></li>









<li><a href='http://quangvietmkt.blogspot.com/search/label/S%E1%BB%AD%20d%E1%BB%A5ng%20internet'>Sử dụng internet</a></li>


  <li><a href='http://quangvietmkt.blogspot.com/search/label/S%E1%BB%AD%20d%E1%BB%A5ng%20software'>Sử dụng Software</a></li>


<li><a href='http://quangvietmkt.blogspot.com/search/label/Tin%20h%E1%BB%8Dc%20v%C4%83n%20ph%C3%B2ng'>Tin học văn phòng</a

</li>
</ul>
</li>
<li>
<a href="#">Danh mục menu 2</a>
<ul>

<li><a href='http://quangvietmkt.blogspot.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20office'>Office</a></li>


  <li><a href='http://quangvietmkt.blogspot.com/search/label/Gmail'>Gmail</a></li>




  <li><a href='http://quangvietmkt.blogspot.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20m%C3%A1y%20t%C3%ADnh'>Máy tính</a></li>


<li><a href='http://quangvietmkt.blogspot.com/search/label/Yahoo%20Messenge'>Yahoo Messenge</a></li>


  


<li><a href='http://quangvietmkt.blogspot.com/search/label/H%E1%BB%87%20%C4%90i%E1%BB%81u%20h%C3%A0nh'>Hệ điều hành</a>

</li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
<li><a href="#">Menu 8</a></li>
<li><a href="#">Menu 9</a></li></ul>

Lưu ý:

- Bạn chú ý ở trên mình chỉ đặt Danh mục menu 1 và Danh mục menu 2 là link dạng lấy bài viết tự động lên menu. Bạn có thể làm tương tự cho các menu khác.
- Đối với các link dạng thông thường thì bạn chỉ cần đặt tương tự từ Menu 3 (Thay # thành link)
- Đối với các link muốn lấy bài viết tự động ra menu thì bạn đặt link dạng trang nhãn hay trang tìm kiếm của blogger. Có 3 loại link được chấp nhận lấy bài viết tự động lên menu

Ví dụ: Link trang nhãn: http://yourblogdomain.blogspot.com/search/label/Tên nhãn
Link trang tìm kiếm: http://yourblogdomain.blogspot.com/search?q=Từ khóa
Link trang nhãn và tìm kiếm: http://yourblogdomain.blogspot.com/search/label/Tên nhãn?q=Từ khóa

8. Cuối cùng save tiện ích lại

theo traidatmui.com

More about →

Tạo menu dạng cây thư mục

Người đăng: chia se dam me on Thứ Bảy, 11 tháng 5, 2013

"Thủ thuật tạo menu dạng cây thư mục"

Trước đây mình đã có dịp giới thiệu đến các bạn một số dạng menu dành cho blog, hôm nay cũng xin chia sẽ thêm cùng các bạn một thủ thuật tạo menu cho blog. Ở đây chúng ta sẽ cùng tìm hiểu việc tạo menu dạng cây thư mục, dạng này cũng hiển thị tương tự như

cách bố trí các cây thư mục của máy tính. Để dễ dàng hình dung bạn có thể xem phần demo ở bên dưới, thủ thuật này cũng khá đơn giản chúng ta bắt đầui tến hành.

1. Đăng nhập tài khoản
2. Vào thiết kế chọn chỉnh sửa HTML
3. Thêm code sau vào bên dưới thẻ <head>

<script src='http://data-traidatmui.appspot.com/scripts/treemenu.js' type='text/javascript'>
</script>

4. Tiếp theo bạn thêm code bên dưới váo trước thẻ ]]></b:skin>

.treeview ul{
margin: 0;
padding: 0;
}
.treeview {
color:#000066; /*màu text*/
font-weight:bold;
font-size:12px; /*kích cở text*/
}
.treeview a{
font-weight:normal;
color:#ff0000; /*màu của linktext*/
}
.treeview a:hover{
color:#0000ff; /*màu của linktext khi rê chuột*/
}

.treeview li{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih1Nlqz4JfCVRNmSjeUyfoILNknE9PcTNDd2-FfGTYjXttsEZujqfMuOluGzVaifmPO5gnwxVPNoN2Rg4zSnLwUdvqula3HWeWIaVc6xK-LIT9jb_5AMwIS1lI_w_ovtwQFhyw33zdXJNK/) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
cursor: hand !important;
cursor: pointer !important;
}

.treeview li.submenu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuHLAxNfniQ5xveuLbpEhCwgDuySGshM3zhyy6Vu20b9Vic2kesVd2eHazZP6DvQ0wuPkO0Olr1KMrZUg4ikZH-LCcHJJ0zDnO-e4puMHeRjpem8HcDymb1gprf9r38AO789BjNQ3XdmUh/) no-repeat left 1px;
}
.treeview li.submenu ul{
display: none;
}

5. Save template lại và trở về phần tử trang thêm 1 HTML/Javascript
6. Thêm code bên dưới vào phần tử HTML đó

<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Mở tất cả</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Thu tất cả</a>

<ul id="treemenu1" class="treeview">
<li><a href="URL menu 1">Tên menu 1</a></li>
<li><a href="URL menu 2">Tên menu 2</a></li>
<li>Tên menu 3
<ul>
<li><a href="URL submenu 3.1">Tên submenu 3.1</a></li>
<li><a href="URL submenu 3.2">Tên submenu 3.2</a></li>
</ul>
</li>
<li><a href="URL menu 4">Tên menu 4</a></li>
<li>Tên menu 5
<ul>
<li><a href="URL submenu 5.1">Tên submenu 5.1</a></li>
<li>Tên menu 5.2
<ul>
<li><a href="URL submenu 5.2.1">Tên submenu 5.2.2</a></li>
<li><a href="URL submenu 5.2.3">Tên submenu 5.2.3</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="URL menu 6">Tên menu 6</a></li>
</ul>

<script type="text/javascript">
ddtreemenu.createTree("treemenu1", true) //nếu bạn muốn khi load vào trang menu ở dạng thu gọn bạn thay TRUE thành FALSE
</script>

Chỉnh code:
- Các code màu cam là tên hiển thị của các thư mục, bạn thay thành các tên mục bạn muốn đưa vào menu.
- Các dòng màu đỏ trong code chính là đường dẫn của các thư mục, thay chúng thành đường dẫn tương ứng với tên của thư mục đó.
- Dòng màu xanh đậm là những thư mục có chứa các thư mục con ở bên trong.

7. Sau khi hoàn thành công việc chỉnh sửa bạn save lại để xem kết quả.

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

theo traidatmui.com

More about →

Menu ngang với hiệu ứng bắt mắt bằng CSS3

Người đăng: chia se dam me on Thứ Năm, 9 tháng 5, 2013

Bài viết hôm nay mình chia sẻ cùng các bạn một menu với hiệu ứng cũng khá đẹp mắt dành cho blogspot, đặc biệt menu này chỉ dùng CSS3 và HTMl đơn giản nên không làm ảnh hưởng đến tốc độ của blog bạn nhiều. Với menu này bạn có thể tự mình phối màu lại để có 1 menu ưng ý cho blog của mình và cách thực hiện cũng đơn giản bạn theo dõi các bước bên dưới.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.ribbon span{font-weight:bold;background:#A81B6A;display:inline-block;line-height:3em;padding:0 1em;margin-top:0.5em;position:relative;-webkit-transition:background-color 0.2s,margin-top 0.2s; -moz-transition:background-color 0.2s,margin-top 0.2s; -ms-transition:background-color 0.2s,margin-top 0.2s; -o-transition:background-color 0.2s,margin-top 0.2s; transition:background-color 0.2s,margin-top 0.2s}
.ribbon a:hover span{background:#FFD204;color:#000;margin-top:0}
.ribbon span:before{content:"";position:absolute;top:3em;left:0;border-right:0.5em solid #9B8651;border-bottom:0.5em solid #fff}
.ribbon span:after{content:"";position:absolute;top:3em;right:0;border-left:0.5em solid #9B8651;border-bottom:0.5em solid #fff}
.ribbon a:link,.ribbon a:visited{color:#fff;text-decoration:none;float:left;height:3.5em;overflow:hidden}
.ribbon:after,.ribbon:before{margin-top:0.5em;content:"";float:left;border:1.5em solid #A81B6A}
.ribbon:after{border-right-color:transparent}
.ribbon:before{border-left-color:transparent}

5. Save template lại và trở về bố cục (Layout)

6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<a href='#'><span>Trang chủ</span></a>
<a href='#'><span>Tên menu 1</span></a>
<a href='#'><span>Tên menu 2</span></a>
<a href='#'><span>Tên menu 3</span></a>
<a href='#'><span>Tên menu 4</span></a>
<a href='#'><span>Tên menu 5</span></a>
<a href='#'><span>Tên menu 6</span></a>

Bạn thay đổi Tên menu lại thành tên thư mục bạn muốn cho lên thanh menu này (màu xanh lá) và thay dấu # thành link dẫn tương ứng với từng tên menu bạn đặt.

7. Cuối cùng save tiện ích lại

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

theo vncongnghe.vn

More about →

Menu ngang co kèm hình ảnh bên cạnh rất đẹp

Người đăng: chia se dam me on Thứ Sáu, 26 tháng 4, 2013

Chào các bạn !
Bài viết hôm nay xin giới thiệu cùng các bạn cách tạo menu ngang có kèm theo hình ảnh rất đẹp với hiệu tạo bóng khi click chuột vào. Hiệu ứng này thích ứng với tất cả cá trình duyệt internet hiện nay. Tiện ích sử dụng CSS và HTML rất dễ dàng thêm vào blog của bạn.

ảnh hiển thị

* Cách thực hiện:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

/* The CSS Code for the menu starts here bloggertrix.com */

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 687px;
margin:0 auto;
}
.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; 
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; 
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shadowblockmenu li:nth-of-type(1) a{
border-left: 1px solid #BBB;
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4YP0HI8rDI2id7OlfjRYPkHtz4uKWNpzMBvJPX7Uxb4nx1gjFdRf4Z_X2ayC_gi7iWnucffGvRfe1lmzYOYSVLgrpE4ICoCNhtBqePqJ6ijt-D59PG3nn-WyGoz4eeNn4JAWYtf_ld0/s1600/bt_home.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(2) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ZPsuXAFnzmk2yIO8tXxScuk_lXis5E4xa9JlY0GDe130J4gaAALkALxLZ8m2ZNFQpraGn-3w8S3zg91ePVI86I7lAQxkLcUnwXEHHYEgpTJ-6fF2LiO9o7CmiVCEQ-8sMBQV4AyaoTE/s1600/bt_bulb.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(3) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIK6MBj4zCtzdBd4C-GZ6SetZ1gGnA-nyNSvkYyHEe7Logewnq0Vs0z0Jzrd3GS9QW7EyrmPhDhclIxvJtgC7mLIBTRGDwVLkZTDxzkGREZG8p5nHuRMvWC3kjlnyOFK84K5qor0TbKE/s1600/bt_database_add.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(4) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI1sU9h0HBgLkPw8f0DP8JXhjSy5fRQEHPJqReWTVfck0XX2U8ch1GRpOjl3wDP4ANYA8Unj22yG0uFBH72H8DoNCQv9dUsZquNw8LsKqE1C155EZZn6TESpnUlhVkHk5ym9lKXhZVlq4/s1600/bt_films.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(5) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrymZPfgn9c58UlgBxjWYsMaR_sNH8ThuMtWuTMjqbR2eRSpMC5dstxFasPmhlqhs7RdZI7WDI8BA2BclasPAnrOH6E5c7LMU_aaqAwv4LzSCgpvGKkPfWpkvOZyAIAoO2X8WV3gdXwtE/s1600/bt_mobile-phone.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(6) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEqvlIfeNncO3j7MIDO48kELBvfhZmfDH3TjFvnDD7eVX5474iFAYv2k8tcFSJ66IMn36_vE9wRDpbIL7Q7zPIvbSBSoR2sZOBugB0b2G_k1Ub33fXDko8TApcLk1yLjLdT_1YVJB-tVk/s1600/Bt_Help_Circle_Blue.png) 1px center no-repeat; 
}
.shadowblockmenu ul li a:hover{color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}


<div class="shadowblockmenu">


<ul>





<li><a href="#">Trang chủ</a></li>


<li><a href="#">Thủ thuật máy tính</a></li>


<li><a href="#">Thủ thuật Web</a></li>


<li><a href="#">Phim hay</a></li>


<li><a href="#">Ứng dụng Mobile</a></li>


<li><a href="http://www.viettin24h.com/">Trợ giúp</a></li>



</ul>


</div>

* Ở đây các bạn lưu ý các dòng sau:

<li><a href="#">Trang chủ</a></li>

<li><a href="#">Thủ thuật máy tính</a></li>

<li><a href="#">Thủ thuật Web</a></li>

<li><a href="#">Phim hay</a></li>

<li><a href="#">Ứng dụng Mobile</a></li>

<li><a href="http://www.viettin24h.com/">Trợ giúp</a></li>

Thay # bằng link liên kết, thay các dòng chữ màu xanh bằng tên menu của bạn.

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

theo buivansum

More about →

Hướng dẫn tạo bảng trong bài viết trên blogspot

Người đăng: chia se dam me on Thứ Năm, 18 tháng 4, 2013

1: Cấu trúc bảng.

1 Bảng trong HTML được định nghĩa bằng cặp thẻ <table>...</table> Trong một bảng thì được chia thành nhiều cột và hàng. Mỗi hàng được giới hạn hoặc ngắt hàng bởi cặp thẻ <tr>...</tr>, và trong mỗi hàng lại có nhiều Ô tùy theo trường hợp sử dụng cặp thẻ giới hạn giữa các ô là <td></td>

Ví dụ: 1 bảng gồm 2 hàng, 3 cột và mỗi hàng gồm có 3 ô.

<table border="1" cellpadding="10">
 <tr>
  <td>Ô 1</td>
  <td>Ô 2</td>
  <td>Ô 3</td>
 </tr>
 <tr>
  <td>Ô 4</td>
  <td>Ô 5</td>
  <td>Ô 6</td>
 </tr>
 
</table>

Như vậy là chúng ta đã tạo được 1 cái bảng đơn giản, nhìn thì hơi thô thôi. Còn nếu các bạn muốn gộp Hàng hoặc Cột lại thì Bạn sẽ thêm các thuộc tính như
rowspan="Số hàng muốn gộp lại"
colspan="Số cột muốn gộp"
Chẳng hạn như bạn muốn gộp Ô 1 và Ô 4 cột lại thành 1 cột thì sẽ dùng rowpan="2" để hợp lại.

<table border="1" cellpadding="10">
 <tr>
  <td rowspan="2">Ô 1</td>
  <td>Ô 2</td>
  <td>Ô 3</td>
  <td>Ô 3-3</td>
 </tr>
 
 <tr>

  <td>Ô 5</td>
  <td>Ô 6</td>
  <td>Ô 7</td>
 </tr>
 
</table>

Hoặc nếu không muốn hợp 2 hàng thành 1 cột như thế thì mình hợp 2 Ô trên cùng một hàng lại

<table border="1" cellpadding="10">
 <tr>
  <td colspan="2">Ô 1+</td>
  <td>Ô 2</td>
  <td>Ô 3</td>
 </tr>
 
 <tr>
  <td>Ô 4</td>
  <td>Ô 5</td>
  <td>Ô 6</td>
  <td>Ô 7</td>
 </tr>
 
</table>

Như vậy là việc Hợp các Cột hoặc Hàng lại cơ bản đã xong. Bây giờ bạn muốn đổ màu cho Ô , Cột hoặc là Hàng mà mình thích thì làm sử dụng thuộc tính bgcolor="#ee8018"
#ee8018 Các bạn thay thế Mã màu phù hợp theo trường hợp hoặc sở thích của bạn. Để lấy được mã màu các bạn thử sử dụng sof jcpicker. Ví dụ đổ màu cho các Ô như sau:


<table border="1" cellpadding="10">
 <tr>
  <td colspan="2" bgcolor="#ee8018">Ô 1+</td>
  <td bgcolor="#dddddd">Ô 2</td>
  <td bgcolor="#544754">Ô 3</td>
 </tr>
 
 <tr>
  <td bgcolor="black">Ô 4</td>
  <td bgcolor="red">Ô 5</td>
  <td bgcolor="blue">Ô 6</td>
  <td>Ô 7</td>
 </tr>
 
</table>

Và Dưới đây là một số thuộc tính dùng để giúp tạo bảng tốt hơn. Các bạn tham khảo và áp dụng nha.
Thẻ dùng cho <Table>:
- border: Xác định độ dày của khung bao quanh bảng
- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.
- cellspacing: Xác định khoảng cách giữa các ô trong bảng.
- width: Xác định độ rộng của bảng
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng
- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).
Thẻ dùng cho <td>
- width: Độ rộng của ô
- height: Chiều cao của ô
- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)
- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô
- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).
Về cơ bảng thì Một cấu trúc của bảng đơn giản là thế Nếu các bạn hiểu biết về CSS thì có thể tùy chỉnh cho đẹp hơn nữa.

theo http://www.dvt.com.vn

More about →

Tạo menu bo tròn góc cho blogspot

Thanh menu có ô search ở đầu trang cho blog

Tạo menu xổ ngang và dọc nhiều cấp rất đẹp mắt

Menu tự động lấy bài viết của link nhãn hay link tìm kiếm cho Blogger

Tạo menu dạng cây thư mục

"Thủ thuật tạo menu dạng cây thư mục"

Menu ngang với hiệu ứng bắt mắt bằng CSS3

Menu ngang co kèm hình ảnh bên cạnh rất đẹp

Hướng dẫn tạo bảng trong bài viết trên blogspot

shares

Like

menu

Category

Popular Posts

About Me

Labels

Recent Posts

Categories

Subscribe

Recent Comments

Popular Posts

Connect With Us

Popular Posts