Các
bạn đi dạo bỗng dưng thấy một blogger có bộ giao diện cực đẹp,bao gồm AJAX
Navigation menu được trau chuốt cực mượt với cơ chế dropdown ,bạn cũng muốn có
cái AJAX Navigation menu đấy ?
Cái menu trên cùng ấy nhé
Nào cùng bắt tay vào thực hiện :
Tới
Blogger Dashboard > chọn Blog > Template
Click
Edit HTML button
Tiếp
tục,cần thêm đoạn CSS 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;overflow: hidden;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;} #w2bajaxmenu {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;}
The
JavaScript
Đặt
code vào trước thẻ </head>
<span style="background-color: #ffff99;"><code class="xml" data-second_best="[object Object]" data-result="[object Object]"><span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"</span>></span><span class="tag"></<span class="title">script</span>></span><span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>></span><span class="javascript">jQuery(document).ready(<span class="function"><span class="keyword">function</span><span class="params">($)</span> {</span> $(<span class="string">'#w2bajaxmenu'</span>).ajaxBloggerMenu({ numPosts : <span class="number">4</span>, <span class="comment">// Number of Posts to show</span> defaultImg : <span class="string">'http://url-to-image.com/default-image.jpeg'</span> <span class="comment">// Default thumbnail Image</span> });});</span><span class="tag"></<span class="title">script</span>></span></code></span>
Phần
này ,bạn nên cẩn thận,sao lưu code ra rồi hãy làm nhé.Thanh AJAX Menu này chỉ
nhận 3 loại url đó là Label, Search
Query và Label w/ Search Query.
VÍ
DỤ :
Label
URL: http://yourblogdomain.blogspot.com/search/label/LABELNAME
Search
Query: http://yourblogdomain.blogspot.com/search?q=SEARCHQUERY
Label
w/ Search Query: http://yourblogdomain.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY
Ghi
chú : Với Search Query cần dùng chút ít
thủ thuật để chuyển đổi mới dùng được
Công
cụ đây : this tool
VÍ
DỤ :
<ul id="w2bajaxmenu" class="w2bmenu"> <li> <a href="#">Home</a> </li> <li> <a href="#">Example 1</a> <ul> <li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li> <li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a> </ul> </li> <li> <a href="#">Example 2</a> <ul> <li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li> <li><a href="http://yourblogdomain.blogspot.com/search/label/<a title="Facebook" href="http://www.way2blogging.org/category/facebook">Facebook</a>?q=Like+Button">Facebook</a></li> <li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li> </ul> </li> <li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li></ul><ul id="w2bajaxmenu" class="w2bmenu"> <li> <a href="#">Home</a> </li> <li> <a href="#">Example 1</a> <ul> <li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li> <li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a> </ul> </li> <li> <a href="#">Example 2</a> <ul> <li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li> <li><a href="http://yourblogdomain.blogspot.com/search/label/<a title="Facebook" href="http://www.way2blogging.org/category/facebook">Facebook</a>?q=Like+Button">Facebook</a></li> <li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li> </ul> </li> <li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li></ul>
0 Bình luận:
Đăng nhận xét
Khi các bạn đóng góp ý kiến nhớ chú ý ngôn từ cho phù hợp với thuần phong ,mỹ tục văn hóa nước ta. Cảm ơn!