Thêm Menu Mega với hình ảnh / hình thu nhỏ trong Blogger

Nội dung trực quan giữ một sức hấp dẫn nhất định rằng các trang web tích hợp hình ảnh vào mọi trang hoặc thậm chí chỉ hoạt động thông qua ảnh. Bây giờ, với tiện ích menu điều hướng AJAX mới, hình ảnh cũng có thể được thêm vào trình đơn thả xuống.

Menu điều hướng AJAX dành cho blogger là một tiện ích được thiết kế riêng cho nền tảng Blogger. Nó được lấy cảm hứng từ trang web Mashable từ lâu trước khi nó được tạo ra. Mặc dù cảm hứng đơn giản và đơn giản, trình đơn thả xuống với hình ảnh là một cuốn hút lớn.

Nó hoạt động dựa trên thư viện jQuery và API nguồn cấp dữ liệu JSON của Blogger. Chức năng, nó hoạt động giống như một trình đơn thả xuống bình thường khi JavaScript bị vô hiệu hóa. Để nó hoạt động trực tuyến, blog phải dành cho khách truy cập công khai, vì vậy API nguồn cấp dữ liệu JSON của Blogger sẽ hoạt động như được thiết kế.

Tính năng, đặc điểm

Hỗ trợ Menu đa cấp
Menu AJAX là trình đơn thả xuống nhiều cấp dựa trên danh sách HTML không theo thứ tự tiêu chuẩn. Khi trình đơn chứa menu phụ, trình đơn sẽ tải nhanh khi người dùng cuộn qua menu chính. Điều tuyệt vời về điều này là nó tiết kiệm lưu lượng gửi đi, đặc biệt là trên trang web sử dụng điều hướng lớn.
Khả năng tương thích giữa các trình duyệt
Hầu hết các ứng dụng AJAX sẽ hoạt động trên các trình duyệt khác nhau ngay cả với các plugin khác hoặc công nghệ độc quyền đã được cài đặt. Menu có hình ảnh hoạt động trong cùng một tiền đề, thay vì được thiết kế cho một trình duyệt cụ thể. Bởi vì không có trình duyệt nào bạn hoặc trình đọc blog của bạn sẽ sử dụng, trình đơn mega thả xuống AJAX mới với hình ảnh là lựa chọn lý tưởng.
Một số trình duyệt Windows được hỗ trợ bao gồm IE5 +, Firefox, Google Chrome, Safari Netscape 7+ và Opera 8+. Khi bạn đang sử dụng máy Mac, menu AJAX được hỗ trợ trên Firefox, IE và Safari. Tuy nhiên, nếu JavaScript bị tắt, trình đơn vẫn có thể truy cập được, nhưng chỉ như trình đơn CSS thuần túy.
Hiển thị menu phụ tự động
Với menu AJAX mới, bạn chỉ cần cuộn qua một mục menu và các menu phụ sẽ tự động tải. Không cần phải bấm vào một trình đơn để có được menu phụ để thả xuống. Điều này không chỉ tiết kiệm thời gian điều hướng có giá trị của người dùng mà còn tiết kiệm lưu lượng truy cập.
Tạo kiểu menu
Các menu AJAX có thể được tạo kiểu bằng cách thay đổi megamenu.js và kiểu CSS. Trước đây được sử dụng khi javaScript được bật, trong khi sau này là khi nó được tắt. Bạn có thể điều chỉnh các thông số menu theo cách thủ công hoặc bạn có thể sử dụng các mẫu sẵn sàng để sử dụng.
Có rất nhiều tính năng khác, nhưng bạn sẽ không thể sử dụng hoặc trải nghiệm chúng nếu bạn không cài đặt menu mega mới với hình ảnh. Bạn cần làm gì để thực hiện nó trong blog hoặc trang web của bạn?

Thêm Menu Mega với hình ảnh / hình thu nhỏ trong Blogger

• Bước 1. Đăng nhập vào tài khoản Blogger của bạn, sau đó đi đến Bảng điều khiển. Chọn blog nơi bạn muốn cài đặt menu mega mới.

CSS

• Bước 2. Nhấn vào Template, sau đó nhấn nút Edit HTML. Nhấn bất kỳ nơi nào trong vùng mã và sử dụng chức năng CTRL + F để giúp tìm kiếm của bạn nhanh hơn và dễ dàng hơn. Nhập thẻ sau và nhấn Enter để tìm thẻ:

[]]></b:skin>]

Khi bạn tìm thấy thẻ, hãy thêm mã bên dưới ngay trên / trước thẻ:

[.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbYT2cWVmWWJ8K89aJqcf74M0ZNonscrR4_ubmxJkSGZdKh9hKqdmkqq_p5BmxHebRkugHSfDBukU94kM7JvQ8y88oYTt-f1KCs3-08rdgdV6b_XQGVEseFwSIfST3S9qQeWYl1mWO6Y0/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0n6uN-CZ9lay60JuOCl33jQHgPoG9bT9EVLTLZhFIhndwcTHm4g_1l0TFVS-8AWwr2xla7AOlKepRhkC08TpC7RzQgo-17H6rSABp3GMAlDvQApvJWOWIPs4kJ18BCOEWMobmQvd9_8g/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh10py3ZuFpeiqXHoQzo7vUwL2_DFnbin-5yac4lNzEur1z9GMyRJOmJrwX2GCUAz7c856G-6fXFg3GLaPyJr31Y0nK4RMLJyqkPTOiw1gWjmAAdbrMZyv_FZc2AdooUt1gw8jmySeazWU/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}] 

JavaScript

• Bước 3. Kiểm tra xem blog của bạn đã cài đặt plugin jQuery chưa. Nếu không, bạn cần phải thêm một vài dòng mã trước thẻ </ head> (CTRL + F để tìm nó). Xem mã bên dưới:

[<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/&gt;<script type='text/javascript'> //<![CDATA[(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s200-c/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);//]]></script><script type='text/javascript'>jQuery(document).ready(function($) { $('#megamenuid').megaBloggerMenu({  postsNumber : 4,   noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMneylOSrD_mdeeefZUi_LMJVE-N7hazsBmO0lpifp6GyC7vdygjUTMnAnf_Oz5oJWcNjze7VGOdp2zYGbk8ae4GqWpkQ5Uvm78iOfPXV_I4fesA7xizBKameuQV7YxLgQJV2i7Y_Byio/s1600/no_image_available.png'  });});$(function(){$('.search-here').submit(function(e){    if($('.search-box .search-field').val().length==0){$('.search-box .search-alert').fadeIn().css('display','inline-block');      e.preventDefault();}});});</script>] 

Lưu ý:

- Nếu plugin jQuery đã tồn tại, hãy xóa dòng màu đỏ.
- Để thay đổi số lượng bài đăng, thay đổi 4 giá trị từ:
postsNumber : 4
- Để thêm hình thu nhỏ khác khi bài đăng không có hình ảnh, hãy thay thế url bằng màu xanh lam từ:
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMneylOSrD_mdeeefZUi_LMJVE-N7hazsBmO0lpifp6GyC7vdygjUTMnAnf_Oz5oJWcNjze7VGOdp2zYGbk8ae4GqWpkQ5Uvm78iOfPXV_I4fesA7xizBKameuQV7YxLgQJV2i7Y_Byio/s1600/no_image_available.png'

 HTML

• Bước 4. Cẩn thận thêm mã HTML để đảm bảo rằng trình đơn thả xuống có hình ảnh sẽ hoạt động như được thiết kế. Chỉ có ba loại URL mà Menu AJAX chấp nhận và chúng phải được sử dụng tương ứng.

Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME
Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Trong số ba URL, Truy vấn tìm kiếm phải được mã hóa URL bằng một công cụ cụ thể.

• Bước 5. Tìm kiếm dòng sau bằng CTRL + F:

[<div class='main-outer'>]

Ngay phía trên dòng này, thêm mã HTML sau:

[<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://ADDURLHERE.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>]

Lưu ý: thay thế văn bản màu xanh lam bằng url nhãn và văn bản màu đỏ có tên nhãn. Đây là nhãn mà bạn đã thêm vào cài đặt Nhãn của trình chỉnh sửa bài đăng của mình:

• Bước 6. Nhấn vào Save template để tất cả các thay đổi có hiệu lực.

Nếu bạn không thể tìm thấy dòng từ bước 5, hãy truy cập tab Bố cục, nhấp vào Thêm tiện ích, sau đó chọn Tiện ích HTML / JavaScript. Sao chép mã HTML và dán vào bên trong hộp ... sau đó nhấn nút Lưu.

Kết quả!

[Demo##eye##]

Khi đã xong, menu AJAX của bạn với hình ảnh sẽ được triển khai và sẵn sàng để bạn sử dụng. Đảm bảo chọn ảnh có liên quan đến trình đơn và menu phụ để trang web của bạn sẽ có giao diện và sự hấp dẫn gắn kết. Tuy nhiên, nghiên cứu cho thấy rằng văn bản đi kèm với bất kỳ hình ảnh nào, ngay cả khi hoàn toàn không liên quan, có thể thu hút sự chú ý.