Tạo menu ajax dropdown tự động cập nhật tin mới cho blogspot

Tạo menu ajax dropdown tự động cập nhật tin mới cho blogger.

Đây là một menu mình sưu tầm từ một trang nước ngoài nhưng giờ không nhớ là ở đâu để ghi lại nguồn nữa.
Mời mọi người xem Demo menu này để hiểu thêm:

DEMO Menu Mashable

Đây là một Menu Dropdown tuyệt đẹp. Và tuyệt vời hơn là nó có thể cập nhật tin theo Label.

Dưới đây là hướng dẫn để bạn Add menu này vào trong web blog của mình.

Đầu tiên là CSS: Add vào trước ]]></b:skin>

/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !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.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu 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.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu 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.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .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.w2bajaxmenu .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;}

Tiếp theo là toàn bộ code của Menu add vào nơi bạn muốn đặt menu này:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://myjectpro.googlecode.com/files/ajaxbloggermenu.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
});
});
</script>
<ul class='w2bmenu' id='w2bajaxmenu'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Example 1</a>
<ul>
<li><a href='http:/www.erhay.com/search/label/H3.HD làm blog'>Sample Label</a></li>
<li><a href='http:/www.erhay.com/search/label/H3.HD làm blog'>Label w/ Search</a></li>
<li><a href='http:/www.erhay.com/search/label/H3.HD làm blog'>Search Query</a></li>
<li><a href='http:/www.erhay.com/search/label/H3.HD làm blog'>Unknown Search</a></li>
</ul>
</li>
<li>
<a href='#'>Example 2</a>
<ul>
<li><a href='http:/www.erhay.com/search/label/H3.HD làm blog'>Design</a></li>
<li><a href='http:/www.erhay.com/search/label/H3.HD làm blog'>Facebook</a></li>
<li><a href='http:/www.erhay.com/search/label/H3.HD làm blog'>Templates</a></li>
<li><a href='http:/www.erhay.com/search/label/H3.HD làm blog'>Guest Posts</a></li>
</ul>
</li>
<li><a href='http://www.erhay.com'>Erhay</a></li>
</ul>

Đổi lại link vào tên label trên web blog của bạn cho phù hợp.

Cảm ơn bạn đã quan tâm theo dõi bài viết. Nếu bạn không làm được có thể để lại Comment, mình sẽ cố gắng giúp đỡ.

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn