RSS Feed
TwitterThứ Hai, 2 tháng 12, 2013
01:18
nhultmart
Trước đây, tôi có đăng bài Menu sổ dọc kiểu 1, với kiểu này thì menu chỉ có một màu đen, chữ trắng và các bạn không thể đổi màu được.Do có một số bạn hỏi: Sao không đổi màu cho menu được? Vì vậy hôm nay mình xin giới thiệu đến các bạn kiểu 2, menu này cũng giống với menu kiểu 1 nhưng thay vào đó các bạn có thể dễ dàng đổi màu cho menu, đổi màu cho chữ trên menu...
Hình ảnh minh họa:
» Cách tạo Menu ngang xổ dọc xuống nhiều cấp style 2 cho blogger:
1- Bạn đăng nhập vào Blog
2- Chọn Mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Tìm thẻ <head> (Mẹo: bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào khung dòng lệnh <head>). Dán đoạn code bên dưới thẻ <head> vừa tìm được:.
<style type='text/css'>
html .jqueryslidemenu{height: 1%;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot-menu-xo-doc-2/drop_menu.js' type='text/javascript'/>Do hiện tại host goole code của mình bị ban từ nhà cung cấp do vậy các bạn chịu khó Download 2 File JS về TẠI ĐÂY sau đó Upload lên Hosting riêng để dùng.
5- Save template lại
6- Tìm thẻ </header>, Dán đoạn code vào trước thẻ </header> vừa tìm được
<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E; /* màu nền của menu*/
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;z-index:30;
}
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{
display: inline-block;
}
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/
.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul{
top: 0;
}
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Cuộc sống</a></li>
<li><a href="#">Học tập</a></li>
<li><a href="#">Thủ thuật</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="#">Giải trí</a></li>
<li><a href="#">Blogspot</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="#">Vườn thơ</a></li>
<li><a href="#">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>
<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>
</ul><br style="clear: left" />
</div>» Tùy Chỉnh code:
- Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn
- Những dòng màu đỏ đậm trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn.
- Thay chữ màu xanh dương là tên của những thư mục con cấp 1 của menu chính
- Thay chữ màu xanh nhạt là tên của thư mục con cấp 2 của thư mục chính
- Thay chữ màu cam là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn.
- Thay các dấu "#" thành những đường dẫn tương ứng với tên của thư mục
¤ Trong đoạn code sau:
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}- Bạn chỉnh padding: 5px; để điều chỉnh độ rộng cuả Menu
- Chỉnh margin: 0px; để điều chỉnh khoảng cách giữa các Sub menu. Có thể lấy các giá trị âm và dương. Nếu khoảng các giữ các Menu con lớn thì lấy giá trị âm (Ví dụ: margin: -3px;), Nếu các Menu con chồng lên nhau thì lấy giá trị dương (Ví dụ margin: 5px;), Nếu khoảng cách giữ các Menu con là sát nhau thì giữ nguyên margin: 0px; (Xem hình)
¤ Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.
Cách tạo menu con: ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục "Download" tại thư mục Sub Item 2.2 thì bạn làm như bên dưới:
<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.2.2</a></li>
</ul>
</li>
</ul></li>Bạn muốn tạo cho các thư mục khác thì làm tương tự, chú ý các thẻ <li>, <ul> đóng chúng cho phù hợp.
¤ Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục "Cộng cụ" vào sau thư mục "Học tập" bạn làm như sau:
<li><a href="#">Học tập</a></li>
<li><a href="#">Công cụ</a></li>Chúc thành công!
Nguồn: namkha.blogspot.com
00:28
nhultmart
Nếu blog của bạn có quá nhiều trang riêng lẻ, các nhãn, các chủ đề thì các menu đơn giản hoặc menu drop 1 cấp không thể đáp ứng được do vậy vấn đề đặt ra là ta phải có một menu chứa được tất cả các chủ đề đó nhưng vẫn đảm bảo blog gọn gàng đẹp mắt.Mẫu Menu ngang xổ dọc hôm nay mình giới thiệu sẽ giúp bạn làm cho blog của bạn trở nên khoa học hơn. với việc từ một menu chính sẽ xổ ra rất nhiều Sub menu con làm cho blog của bạn đẹp hơn và bắt mắt hơn.
☼ Cách tiến hành:
1- Đầu tiên, bạn đăng nhập vào Blog2- Chọn Mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Dán đọn code sau vào trước thẻ: ]]></b:skin> (Mẹo: bấm Ctrl+F để mở hộp tìm kiếm và gõ vào)
/* ddsmoothmenu */
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*Màu nền của thanh menu phần khi chưa có Menu con*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*Màu nền của thanh menu khi chứa menu con*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;/*Màu chữ */
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu 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;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
/* ddsmoothmenu-v */
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 1px solid #ccc;
}
.ddsmoothmenu-v ul li{
position: relative;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #414141; /*background of menu items (default state)*/
color: white;
}
.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu-v ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
- Để đổi màu Menu bạn đổi mã màu mà mình đã tô màu đỏ (#414141) ở bên trên nha. bạn có thể lấy các mã màu Tại đây.
5. Bạn dán đoạn code bên dưới vào trước thẻ </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://namkna-tratt.googlecode.com/files/ddsmoothmenu-namkna.js' type='text/javascript'></script>
<script type='text/javascript'>
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>6- Tiếp theo tìm thẻ </header> rồi copy tất cả các code bên dưới dán vào trên dòng lệnh đó như hình này:
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://mmoforfun.blogspot.com/">Home</a></li>
<li><a href="#"> Tên menu </a>
<ul>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
</ul>
</li>
<li><a href="#"> Tên menu </a>
<ul>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu </a></li>
<li><a href="#"> Tên menu </a>
<ul>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href="#"> Tên trang </a>
<ul>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href="#"> Tên trang </a>
<ul>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
</ul>
</li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
</ul>
<br style="clear: left" />
</div>
Tùy chỉnh code Menu:
- Thay http://mmoforfun.blogspot.com/ thành địa chỉ trang chính của bạn.
- Dòng Địa chỉ trang thành liên kết đến các trang, bài viết hoặc nhãn của bạn.
- Dòng Tên trang là tên hiển thị ở các Menu con mà khi bạn Click chuột vào tên đó thì trang của bạn xẽ load đến trang bạn gắn cho liên kết màu đoe ở trên.
7- bấm Lưu mẫu và trở lại Blog để "thưởng thức" thành quả.
Nguồn: namkha.blogspot.com
Chủ Nhật, 1 tháng 12, 2013
19:13
nhultmart
Hôm nay mình xin chia sẽ các bạn chức năng phân trang dạng bấm vào để tải thêm (Load more posts) cho Blogger (Blogspot).Xem trước tại Hình Ảnh Vui
Chức năng này chỉ hoạt động tốt đối với những Blog sử dụng chức năng Read more sẵn có của Blogger (dùng dấu ngắt), hoặc Trích dẫn Blogger không sử dụng JS.Cách thực hiện:
Vào phần Bố cục và thêm mới 1 tiện ích HTML/Javascript nằm ở vị trí ngay dưới Bài đăng trên Blog.
Bạn copy đoạn mã dưới đây vào phần nội dung tiện ích này, sau đó bấm lưu lại là hoàn thành.
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" >BẤM VÀO ĐÂY ĐỂ TẢI THÊM</a>');c.click(h);var e=a('<img src="https://raw.github.com/techirsh/infinite-scroll-css-styles/master/images/fb-style-loader.gif" style="display: none;">');f.scroll(k);b=a('<div class="techirshloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>
<style>
.techirshloader a{text-decoration:none;display:block;width:100%;color:#3772AB;}
.techirshloader{font-family:arial, helvetica, sans-serif; padding: 8px 8px 8px 8px; font-weight:bold; text-align: center; color: #3772AB; font-size: 24px;}
.techirshloader a:hover{color: #000000;}
</style>
Nguồn code: http://www.techirsh.com/
Đăng ký:
Bài đăng (Atom)
