Bài viết hôm nay mình JM(quangvietmkt) 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.
Ả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://quangvietmkt.blogspot.com//files/ajaxmenu.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/Advanced%20blogger">Blogger nâng cao</a></li>
<li><a href="http://quangvietmkt.blogspot.com//search/label/SEO">Thủ thuật SEO</a></li>
<li><a href="http://www.vncongnghe.com/search?q=Blogger co ban">Blogger cơ bản</a></li>
<li><a href="http://quangvietmkt.blogspot.com//search/label/Kiem%20tien">Kiếm tiền</a>
</li>
</ul>
</li>
<li>
<a href="#">Danh mục menu 2</a>
<ul>
<li><a href="http://quangvietmkt.blogspot.com//search/label/Kinh%20nghiem%20song">Kinh nghiệm</a></li>
<li><a href="http://quangvietmkt.blogspot.com//search/label/Dieu%20y%20nghia">Ý nghĩa cuộc sống</a></li>
<li><a href="http://quangvietmkt.blogspot.com//search/label/Marketing">Marketing</a></li>
<li><a href="http://quangvietmkt.blogspot.com//search/label/Kien%20thuc%20IT">Kiến thức IT</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
Chúc bạn thành công!