Add Load More Posts or Infinite Scrolling to Blogger

You might have seen the implementation of infinite scrolling at Facebook, Twitter or Google+. Instead of showing <a href="http://helplogger.blogspot.com/2014/04/how-to-add-numbered-page-navigation-widget-for-blogger.html">Older / Newer posts links</a>, we can load posts dynamically whenever a "Load more posts" button is clicked, or by scrolling down the page. This tutorial will show you how to implement Ajax based loading script that will add Load More Posts or Infinite Scrolling to Blogger, so that visitors can easily navigate without reloading the page.<br /><br /><h3>How it works?</h3>- You have the option to add a 'Load More Posts' button or load automatically the older posts as visitors scroll down the page.<br />- Once implemented, Load More Posts / Infinite Scrolling applies to all Blogger posts on index pages (homepage, archive, label pages). It can't be added on individual posts.<br /><br /><h3>Demo</h3>To see it live, check out the demo below. When you scroll down to the bottom of the page, you will see the "Load More Posts" button. Once you click it, the next 3 posts set to display will load below.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="infinite scrolling, load more posts" border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDr1m0svwndNI0EXSpB33OgBmjhkvdmYULYkFh0WpK6iPuSdg1aDx5yaj7MWlf_Nl64oH5u0a0tPMPrX9PS_rZ6bOayhi-n7FeDpEXOIB7kYGiCPjYP2VRMUZVwDNb5X64I_X8aVvThH3X/s400/load-more-blogger-infinite-scrolling.png" title="Add Load More Posts (infinite scrolling) to Blogger" width="400" /></div><br /><div style="text-align: center;"><a class="demo-link" href="http://load-more-blogger.blogspot.com/" rel="nofollow" target="_blank">Demo </a></div><br /><br /><h2>Adding Load More Posts or Infinite Scrolling to Blogger</h2>1. Log into your <a href="https://blogger.com/" rel="nofollow" target="_blank">Blogger account</a> and click on your blog where you want to add it. <br />2. Go to 'Theme' and click the 'Edit HTML' button to open the Template editor > click anywhere in the code area and press CTRL + F keys (or Command + F) to open the search box.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="525" data-original-width="1087" height="309" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zGXosPQmxnRAMneotOQ_hxBiRzZ5_N5I9IwrjtAj3TdZE3CQy-hG17zhAgS1iyZT_Myybg4IbKcMEmeToY6g4lPAK1H2StTZVgk_PFFP7pkSbFSIHhWBd2mKXJ9Z1aO4P0Hh4wsijysZ/s640/add-infinite-scrolling-to-blogger.png" width="640" /></div><br />3. Type the tag below in the search box and press ENTER to find it:<br /><blockquote class="tr_bq"></body></blockquote>4. Just above the <span style="background-color: yellow;"></body></span> tag, add the script below:<br /><br />a. If you want to load posts with 'Load More Posts' button like in the demo blog, add this script:<br /><blockquote class="tr_bq"><span style="color: red;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/></span><br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><script type='text/javascript'><br />//<![CDATA[<br />function resizeThumb(e,n){for(var t=document.getElementById(e).getElementsByTagName("img"),a=0;a<t.length;a++)t[a].src=t[a].src.replace(/\/s72\-c/,"/s"+n+"-c")}window.labelfx=function(){var e=function(e){var n=e||{},t=n.url_blog||window.location.host,a=n.id_labelcontent||"#labelfxn";$.ajax({url:"http://"+t+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var n=e.feed.category,t="";if(void 0!==n){t="<ul class='labelx'>";for(var i=0;i<n.length;i++)t+='<li><a href="/search/label/'+encodeURIComponent(n[i].term)+'" target="_blank">'+n[i].term+"</a></li>";t+="</ul>",$(a).html(t)}else $(a).html("<span>No Label!</span>")},error:function(){$(a).html("<strong>Error Loading Feed!</strong>")}})};return function(n){e(n)}}(),resizeThumb("main",250),labelfx(),function(e){function n(n){e.getScript("http://"+n+".disqus.com/blogger_index.js")}function t(){s||(s=!0,o?(r.find("a").hide(),r.find("img").show(),e.ajax(o,{dataType:"html"}).done(function(t){var a=e("<div></div>").append(t.replace(l,"")),i=a.find("a.blog-pager-older-link");i?o=i.attr("href"):(o="",r.hide());var p=a.find(d).children(".date-outer");e(d).append(p),resizeThumb("main",250),window._gaq&&window._gaq.push(["_trackPageview",o]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&n(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),r.find("img").hide(),r.find("a").show(),s=!1})):r.hide())}function a(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(o=e("a.blog-pager-older-link").attr("href"))){var n=e('<a class="loadpost" href="javascript:;" style="text-decoration:none;font:11px Open Sans, sans-serif;letter-spacing:1px;padding:10px 20px;background:#000000;color:#ffffff;">LOAD MORE POSTS</a>');n.click(t);var a=e('<img src="'+i+'" style="display: none;">');(r=e('<div style="display:block;text-align:center;margin:20px auto;"></div>')).append(n),r.append(a),r.insertBefore(e("#blog-pager")),e("#blog-pager").hide()}}var i="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyNe-mynltBJYjx3IG8Vomui_i59KfNrs38XUllVz89xaMRH8El12GtYd-StH_zIu76PnmSzCf1YLJdrpKA9gdzmslT5_hPaF-sdn9DU2AYbJn5dwDo_L5YieiRzC9DvF2LCy7tTEY3da5/s1600/loader.gif",o="",r=null,d="div.blog-posts",s=!1,l=(e(window),e(document),/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi);e(document).ready(a)}(jQuery);<br />//]]><br /></script><br /></b:if></b:if></blockquote><br />b. If you want to add the infinite scrolling without button, paste this instead:<br /><blockquote class="tr_bq"><span style="color: red;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/></span><br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><style type="text/css">.status-msg-wrap{display:none;}</style><br /><script type='text/javascript'><br />//<![CDATA[<br />!function(i){function e(e){i.getScript("http://"+e+".disqus.com/blogger_index.js")}function t(){g||(g=!0,r?(w.find("a").hide(),w.find("img").show(),i.ajax(r,{dataType:"html"}).done(function(t){var n=i("<div></div>").append(t.replace(c,"")),o=n.find("a.blog-pager-older-link"),d=n.find(s).children();i(s).append(d),window._gaq&&window._gaq.push(["_trackPageview",r]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&e(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),o?r=o.attr("href"):(r="",w.hide()),w.find("img").hide(),w.find("a").show(),g=!1})):w.hide())}function n(){return Math.max(p.height(),l.height(),document.documentElement.clientHeight)}function o(){n()-(p.scrollTop()+p.height())<150&&t()}function d(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(r=i("a.blog-pager-older-link").attr("href"))){var e=i('<a href="javascript:;">Load more posts</a>');e.click(t);var n=i('<img src="'+a+'" style="display: none;">');p.scroll(o),(w=i('<div style="text-align: center; font-size: 150%;"></div>')).append(e),w.append(n),w.insertBefore(i("#blog-pager")),i("#blog-pager").hide()}}var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyNe-mynltBJYjx3IG8Vomui_i59KfNrs38XUllVz89xaMRH8El12GtYd-StH_zIu76PnmSzCf1YLJdrpKA9gdzmslT5_hPaF-sdn9DU2AYbJn5dwDo_L5YieiRzC9DvF2LCy7tTEY3da5/s1600/loader.gif",r="",w=null,s="div.blog-posts",g=!1,p=i(window),l=i(document),c=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;i(document).ready(d)}(jQuery);<br />//]]><br /></script><br /></b:if></b:if></blockquote><br />Note: This code uses jQuery library, so if you already have jQuery on your page, please remove the line in red highlighted above.<br /><br />5. Click 'Save template' button and check the 'Load More Posts' button / Infinite Scrolling in your Blogger blog.<br /><br /><h3>Conclusion</h3>That's it! So this is how we can easily add Load More Posts / Infinite Scrolling to Blogger. From now on, our visitors can stay in same page and navigate through infinite number of posts on the fly!

Add Load More Posts or Infinite Scrolling to Blogger

You might have seen the implementation of infinite scrolling at Facebook, Twitter or Google+. Instead of showing Older / Newer posts links ,...

Read more »

Mega Menu with Images or Thumbnails for Blogger

Visual content holds a certain appeal that websites integrate images to every page, or even operate solely through photos. Now, with the new AJAX navigation menu widget, images can be added to the drop-down menu as well.<br /><br />The AJAX navigation menu for blogger is a widget designed specifically for the Blogger platform. It is inspired from the Mashable website long before it was given a makeover. Despite the plain and simple inspiration, the drop down menu with images is a huge hit.<br /><br />It works based on the jQuery library and Blogger JSON Feed API. Function-wise, it works just like a normal drop-down menu when JavaScript is disabled. For it to work online, a blog must be for public visitors, so the Blogger JSON Feed API will function as designed.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFu77BOOItovp6iQy816hXf8JRE_LjdZfU0R9kPIlBYW7FZNmYFr5YUuFoCeTEk_5hSyY5JuUhoZc9B8mb0MlI2zUIqgg41LDWc-fDiuaDDvGcXAgabCs_yIlyDSv-SV2aqwrAzAx6jkw/s320/mega-menu-with-images-or-thumbnails.png" width="320" /></div><br /><h3>Features</h3><h4>Multi-Level Menu Support</h4>The AJAX menu is a multi-level drop-down menu that is based on the standard unordered list of HTML. When a menu contains a sub-menu, it loads on the fly when a user rolls over the main menu. What is great about this is that it saves outgoing traffic, especially on a website that uses a large navigation.<br /><br /><h4>Cross-browser Compatibility</h4>Most AJAX applications will work across different browsers even with other plugins or proprietary technology already installed.  The menu with images works in the same premise, instead of being designed for a specific browser. Because there is no telling which browser you or your blog readers would use, the new AJAX drop-down mega menu with images is the ideal option.<br /><br />Some of the Windows browser supported includes IE5+, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. When you're using a Mac, the AJAX menu is supported on Firefox, IE and Safari. If JavaScript is disabled, however, the menu is still accessible, but only as pure CSS menu.<br /><br /><h4>Automatic Sub-Menu Display</h4>With the new AJAX menu, you only need to roll over a menu item and sub-menus will automatically load. No need to click on a menu to get the sub-menu to drop down. This not only saves users' valuable navigation time, but also outgoing traffic.<br /><br /><h4>Menu Styling</h4>AJAX menus can be styled by simply changing the megamenu.js and the CSS style. The former is used when javaScript is turned on, while the latter is when it is turned off. You can adjust the menu parameters manually or you can use ready-to-use templates.<br /><br />There are plenty of other features, but you would not be able to use or experience them if you do not install the new mega menu with images. What do you need to do then to implement it in your blog or website?<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFxNNUpF5k88H-xQBFG7IivPCvWKgm8n4i55HuL9-H9z9WQC9idja4AHCwAv7Nw4jms3YgiLqBsGppZMzpht3yHjQnuzuJpwqjaBUJoTe0UXlL_iL9sJjO-17KCaiBgm059wTU1XZ2klM/s1600/mega-menu-with-images-thumbnails-blogger.png" /></div><div style="text-align: center;"><a class="demo-link" href="http://bloggermegamenu.blogspot.com/" rel="nofollow" target="_blank">DEMO </a></div><br /><h2>Adding Mega Menu with Images/Thumbnails in Blogger </h2>Step 1. Log in to your Blogger account, then go to the Dashboard. Select the blog where you want to install the new mega menu.<br /><br /><h5><span style="font-size: large;">CSS</span></h5><br />Step 2. Click on <b>Template</b>, then press the <b>Edit HTML</b> button. Press anywhere inside the code area and use the CTRL + F function to make your search quicker and easier. Type the following tag and hit Enter to find it:<br /><blockquote class="tr_bq">]]></b:skin></blockquote>Once you find the tag, add the code below just above/before it:<br /><blockquote class="tr_bq">.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/AVvXsEhBuOJizTcYOJ9h_ZoAniPe4ZLvB1zOOgnguxBnBCLLAyUwjwmC7qe0dA98cH92qMl0Jj5HBF6X3yO1XxPqU_7wzKcFPo1FmOZ2JJrwVyz-Pn4lZ0_ocsmspEHzxBuI7fojhpHyRT-QYDU/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/AVvXsEjfbkWStnCN1YDUqcr92QdWC55VIwIGodL1YwR4aldEoIpI7sl3k1x_A0SaxCxgXEIRZ2B_KYf-Dhe_isNjRAxHOk7lBWTaKO7wWlr88USdHFJY5m5T0IwoqxoR60fJLhpdb2ZLE2DV2ps/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/AVvXsEhn9jxrhAdNhc-cpYeRjQH5Xr8lTDbOn4rLnHXm-7aGPXV0k4RfrFHb9gjPxYJHmcK9z5Fo0AoZ4zh2OH-xYkBJBcwf4ieGgeeFo7ErjZoAcDQHQGE-KY-VLwbBUIeRk4ySIX1GAaFLwGE/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}</blockquote><br /><h5><span style="font-size: large;">JavaScript</span></h5><br />Step 3. Check if your blog has the jQuery plugin already installed. If not, you need to add a few lines of code before the <span style="background-color: yellow;"></head></span> tag (CTRL + F to find it). See the code below:<br /><blockquote class="tr_bq"><span style="color: red;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></span><br /><script type='text/javascript'><br />//<![CDATA[<br />(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);<br />//]]><br /></script><br /><script type='text/javascript'><br />jQuery(document).ready(function($) {<br /> $(&#39;#megamenuid&#39;).megaBloggerMenu({<br />  <span style="color: red;">postsNumber : 4</span>, <br />  noThumbnail : &#39;<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXcdGjbN0d7ZhtUabK3QPLQwtgWTf31n6HcitJhRlcjJ1UQY0QkcQLUBnnaH-aeXTn_z788CcCXFJLKqHbBPDGGSakmMC_ssIh2hgH90i3395zNFwnoAMYMXaAbLym85s-RuFPzjbL54c/s1600/no_image_available.png</span>&#39; <br /> });<br />});<br /><br />$(function(){<br />  $(&#39;.search-here&#39;).submit(function(e){<br />    if($(&#39;.search-box .search-field&#39;).val().length==0){<br />       $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);<br />      e.preventDefault();<br />    }<br />  });<br />});<br /></script></blockquote><br /><span style="font-size: large;">Note</span><br /><br />- If jQuery plugin already exist, remove the line in red.<br />- To change the number of posts, change the 4 value from:<br /><blockquote class="tr_bq"><span style="color: red;">postsNumber : 4</span></blockquote>- To add a different thumbnail when a post has no image, replace the url in blue from:<br /><blockquote class="tr_bq">noThumbnail : &#39;<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXcdGjbN0d7ZhtUabK3QPLQwtgWTf31n6HcitJhRlcjJ1UQY0QkcQLUBnnaH-aeXTn_z788CcCXFJLKqHbBPDGGSakmMC_ssIh2hgH90i3395zNFwnoAMYMXaAbLym85s-RuFPzjbL54c/s1600/no_image_available.png</span>&#39; </blockquote><br /><h5><span style="font-size: large;">HTML</span></h5><br />Step 4. Carefully add the HTML code to ensure that the drop down menu with images will work as designed. There are only three types of URLs that the AJAX Menu accepts and they must be used accordingly.<br /><br />Label URL: <i>http://yourblogurlblogspot.com/search/label/LABELNAME</i><br />Search Query: <i>http://yourblogurl.blogspot.com/search?q=SEARCHQUERY</i><br />Label w/ Search Query: <i>http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY</i><br /><br />Among the three URLs, the Search Query has to be URL encoded using a specific tool.<br /><br />Step 5. Search the following line using CTRL + F:<br /><blockquote class="tr_bq"><div class='main-outer'></blockquote>Just above this line, add the following HTML code:<br /><blockquote class="tr_bq"><ul class='megamenu' id='megamenuid'><br /><li><a href='/'>Home</a></li> <br /><li><a class='menu-target' href='#'><span style="color: #cc0000;">MENU TITLE</span></a><br /><ul><br /><li><a href='<span style="color: blue;">http://ADDURLHERE.com</span>'><span style="color: #cc0000;">LABEL NAME</span></a></li><br /><li><a href='<span style="color: blue;">http://ADDURLHERE.com</span>'><span style="color: #cc0000;">LABEL NAME</span></a></li><br /><li><a href='<span style="color: blue;">http://ADDURLHERE.com</span>'><span style="color: #cc0000;">LABEL NAME</span></a></li><br /></ul><br /></li><br /><li><a class='menu-target' href='#'><span style="color: #cc0000;">MENU TITLE</span></a><br /><ul><br /><li><a href='<span style="color: blue;">http://ADDURLHERE.com</span>'><span style="color: #cc0000;">LABEL NAME</span></a></li><br /><li><a href='<span style="color: blue;">http://ADDURLHERE.com</span>'><span style="color: #cc0000;">LABEL NAME</span></a></li><br /><li><a href='<span style="color: blue;">http://ADDURLHERE.com</span>'><span style="color: #cc0000;">LABEL NAME</span></a></li><br /></ul></li><br /><li><a href='<span style="color: blue;">http://ADDURLHERE.com</span>'><span style="color: #cc0000;">Normal Link</span></a></li><br /><li class='search-box'><br /><form action='/search' class='search-here' method='get'><br /><input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/><br /><input class='search-button' type='submit' value=' '/><br /></form><br /><p class='search-alert'>Search form is empty!</p><br /></li><br /></ul><br /><div class='clear'/><br /><div class='clear'/></blockquote>Note: replace the text in blue with the label url and the text in red with the name of the label. This is the label that you have added to the Labels settings of your post editor:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCSEdocg7gmamalkiW1o_y8B1eKzlIrWl0I5EvGpDPv17j22zvaRNfjnNg7SCZulsh6Oi-T_Yu-5Wpnc2cbdsFQve_S72dT7NUL76uvxK4j8veEY6Gl7HZ70UDz6igTOm9FRFWq55qh5ym/s1600/blogger-labels-post-settings.png" /></div><br />Step 6. Click on <b>Save template</b> for all the changes to take effect.<br /><br />If you can't find the line from step 5, access the <b>Layout</b> tab, click on <b>Add Gadget</b>, and then choose <b>HTML/JavaScript</b> Gadget. Copy the HTML code and paste it inside the box... then press the <b>Save</b> button.<br /><br /><b><span style="font-size: large;">That's it!</span></b><br /><br />Once that is done, your AJAX menu with images will be implemented and ready for you to use. Make sure to choose photos that are relevant to the menu and sub-menus so your website will have cohesive look and appeal. Research shows, however, that text accompanied by any image, even if completely irrelevant, can grab attention. 

Mega Menu with Images or Thumbnails for Blogger

Visual content holds a certain appeal that websites integrate images to every page, or even operate solely through photos. Now, with the new...

Read more »

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can <a href="http://helplogger.blogspot.com/2012/02/how-to-remove-blogger-navbar.html">remove the Blogger Navbar</a> or <a href="http://helplogger.blogspot.com/2012/03/how-to-removehide-or-add-peek-boo.html">add a Peek A Boo Effect</a> so that it would show only when we mouse over on top of our page.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_M5FINv-NGvrLgbxFIVHiX2_fZ_puDipEpdaLsxNQDAV2fpNVgxkzw7PsecM58D0tkpJGhEvpvqYNnW8TDd7QYtw-gzsaC0lecbxwXNxqUqwwJ8dhrzFZzsGDaNef2cciedcBlpaPeUD/s1600/blogger-control-panel-for-admin2.png" width="320" /></div><br />However, customizing or removing the Blogger Navbar also has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible and navigating through the blog functions could be really frustrating sometimes. When the navbar is visible, blog administrators can easily create a new post or customize their template with just one click; however, when the navbar is hidden, many more clicks are required to access the Blogger dashboard panel again.<br /><br />In this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions such as: <ul><li>access to the Blogger's Homepage</li><li>create a New Page or Post</li><li>view all your posts</li><li>read your comments</li><li>access the Blog's layout to add or rearrange gadgets</li><li>edit the HTML of your Template</li><li>refresh current page or post</li><li>open a new tab with your blog's homepage</li><li>access the blog' settings</li><li>view your stats</li><li>log out</li></ul>We will put all these options on the top of your page as a menu and we will make it visible only to the administrator of the blog, so our blog visitors will not be able to see it.<br /><br />The result will look something like this:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="admin control panel for blogger" border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjNhj9UVQ8UlLJFQNHyFm9eTt3yckeUhzIN1eF127oXNYL02EPW2iIo5Oy9EggyXJH0_HGZ90oVikP5Maw4zciiZZa4rXFhlBvkq28Xogm3_QD6uDtJxZzlYkd9CscR3HF3OQGZz8sYy5/s1600/how-to-add-admin-control-panel-on-blogger.png" title="add control panel for blog administrator in blogger" width="640" /></div><br /><h3>Adding Admin Control Panel to Blogger template</h3>The Admin Control Panel will only be visible when the blog author is logged in and will not display to blog readers, same with the Post Edit or widget pencil icons which are only visible to you while you are logged in.<br /><br />To add the admin panel to Blogger, follow the steps below:<br /><br />Step 1. Go to "Template" and click on the "Edit HTML" button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box<br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLfZGUz_ltJYtwZLmfazCzdUex_IySNW6zDN9Lq9CauxFlnf7EoNV3E3I5oJnHsxyn0q2Ksi8p8Tw6jONo64_6L8GMVc8fez7XlLTZtBjT4tozFpgmL5bGa3uM8hUd6MdB8njrwHz77udf/s1600/blogger-template-search-box.png" width="320" /></div><br />Step 3. Paste this line inside the search box then hit Enter to find it:<br /><blockquote class="tr_bq"><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote>Note: if you can't find this line, try to find the <span style="background-color: yellow;"><body></span> tag.<br /><br />Step 4. Just below that line or tag, add the following code:<br /><blockquote class="tr_bq"><span class='item-control blog-admin'><br /><style><br />.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }<br />.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}<br />.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}<br />.control-panel a:hover {text-decoration:none; color:#FC8F44;}<br /></style><br /><div class='control-panel'><br /><ul><br /><li><a href='http://www.blogger.com/home'>My Blogs</a></li><br /><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;' rel='nofollow'>New Post</a></li><br /><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;' rel='nofollow'>New Page</a></li><br /><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;' rel='nofollow'>All Posts</a></li><br /><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;' rel='nofollow'>Comments</a></li><br /><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;' rel='nofollow'>Layout</a></li><br /><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;' rel='nofollow'>Edit HTML</a></li><br /><li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li><br /><li><a href='/' target='_blank'>New Tab</a></li><br /><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;' rel='nofollow'>Settings</a></li><br /><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;' rel='nofollow'>Stats</a></li><br /><li><a href='http://www.blogger.com/logout.g'>Logout</a></li><br /></ul><br /></div><br /></span></blockquote>Step 4. Click on the "Save template" button to save the changes.<br /><br />Now take a look on your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy!<br /><br />With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog page and the Blogger homepage at the same time.

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we...

Read more »

Fading Box With Newer/Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLTOIpjnvc5QxVXR2IlP7DGhdGvD5yNBg7vEByS_Wq98LPafmp7VyDqfJ8TIQV_VaoQt1NxRp2KaEE5plNxXtl265fflGf-VX9IPS1tFLmip0N3MzKiIwZJwLq4jKu44MTN9XtMwstSzS9/s1600/fading_box_older_newer_posts_titles_blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, navigation for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLTOIpjnvc5QxVXR2IlP7DGhdGvD5yNBg7vEByS_Wq98LPafmp7VyDqfJ8TIQV_VaoQt1NxRp2KaEE5plNxXtl265fflGf-VX9IPS1tFLmip0N3MzKiIwZJwLq4jKu44MTN9XtMwstSzS9/s1600/fading_box_older_newer_posts_titles_blogger.png" title="older posts and newer posts links in a fading box for blogger" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><br />You can see it in action on this <a href="http://helploggerdemo.blogspot.ro/2013/05/the-imaginarium-of-doctor-parnassus.html">demo blog</a> - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.<br /><br />This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.<br /><br /><h2><span style="color: #3d85c6;">How to Add Navigation Box with Newer & Older Posts on Blogger</span></h2><span style="color: #3d85c6;"><span style="color: #6fa8dc;"><b>Step 1.</b></span> </span>From your Blogger Dashboard, go to <b>Template </b>> <b>Edit HTML</b>, click anywhere inside the code area and search - using CTRL + F - for this line:<br /><br /><blockquote class="tr_bq"><b:include name='nextprev'/></blockquote><br /><i>Screenshot:</i><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsMlQwlBiyi2JcDLMfzTc_1rnIpNJlsRa3ikhrRygy9ITTrBc3aKINcRPWhLrO3qS6bK4Nem3E-dW4kWmVRa234dlMrzT1Unn5yP4aiWVwVyG6QirhtpTvXuwGhkpEN40zA5AeIAyOk1b7/s1600/blogger_navigation_links_older_newer_posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsMlQwlBiyi2JcDLMfzTc_1rnIpNJlsRa3ikhrRygy9ITTrBc3aKINcRPWhLrO3qS6bK4Nem3E-dW4kWmVRa234dlMrzT1Unn5yP4aiWVwVyG6QirhtpTvXuwGhkpEN40zA5AeIAyOk1b7/s1600/blogger_navigation_links_older_newer_posts.png" width="640" /></a></div><br /><span style="color: #6fa8dc;"><b>Step 2.</b></span> REPLACE the code above with this one: <br /><br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><b:include name='nextprev'/><br /></b:if><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='blog-pager-box'><br /><h4><u><span style="color: #444444;"><b>Other posts published:</b></span></u></h4><br /><b:include name='nextprev'/><br /></div><br /></b:if></blockquote><br />Note: you can change the "<u><span style="color: #444444;"><b>Other posts published</b></span></u>" title with your own <br /><br /><span style="color: #6fa8dc;"><b>Step 3.</b> </span>Now add just above <b></head></b> the following code:<br /><br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><b><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></b><br /><script><br />// <![CDATA[<br />$(function() {<br />$('#blog-pager-box').toggle()<br />.css({<br />width: '520px',<br />height: '150px',<br />position: 'fixed',<br />padding: '1em',<br />bottom: 0,<br />right: 0,<br />background: 'url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjunLfDe8CS88d2Z501q35IAlH1bZjuK_Kvq73GDjmZFA9URD3ud3wTsYuc36_HsLqo8SZM1j-x5nt-dngGEprmveLuHQnTDFdHenyJKYKGHTdrX7RIG149rLXGsgyp72MeYDlPqW7xO2jy/s1600/paper.jpg</span>)'<br />});<br /><br />$(window).scroll(function() {<br />if($(this).scrollTop() > <span style="color: red;"><b>100</b></span>) {<br />$('#blog-pager-box').fadeIn();<br />} else {<br />$('#blog-pager-box').fadeOut();<br />}<br />});<br />});<br />$(document).ready(function(){<br />var newerLink = $("a.blog-pager-newer-link").attr("href");<br />$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {<br />var newerLinkTitle = $("a.blog-pager-newer-link:first").text();<br />$(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);<br />});<br />var olderLink = $("a.blog-pager-older-link").attr("href");<br />$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {<br />var olderLinkTitle = $("a.blog-pager-older-link").text();<br />$(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);<br />});<br />});<br />// ]]><br /></script><br /><br /><style type='text/css'><br /><!--<br />#blog-pager-box {<br />box-shadow: 0 0 3px #AEAEAE;<br />z-index:9;<br />}<br /><br />#blog-pager-box h4 {<br />margin:0;<br />padding:0;<br />color:#4898B9;<span style="color: #6aa84f;"><i> /* Widget's title color */</i></span><br />font-size:16px; <span style="color: #6aa84f;"><i>/* Title font size */</i></span><br />} <br /><br />#blog-pager-newer-link {float:left;clear:both;line-height:30px;}<br />#blog-pager-older-link {float:left;clear:both;line-height:30px;}<br />.home-link {display:none;}<br />.blog-pager-older-link, .blog-pager-newer-link {<br />background-color: transparent !important;<br />background-image: none !important;<br />border:0 !important;<br />color: #4B4B4B !important; <i><span style="color: #6aa84f;">/* Color of the links */</span></i><br />float: left;<br />width: 500px;<br />clear:both;<br />}<br /><br />a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {<br />text-decoration:none !important; <br />}<br />  <br />a.blog-pager-newer-link:before {<br />content: url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwWj61rkUCLWTeXFF16iXHJXsFCVw_1dArxyBAWFUsLAiNOn7dykEGOXkl-hAqsGpzThtTpfgCrWOa6Hkmn-devnixOmUba_cEfKYM9SWxN6W3Nj-baxBiQ4R3cYR-0zweiAHtr1RnNXw/s1600/back.png</span>);<br />float:left;<br />}<br />a.blog-pager-older-link:before {<br />content: url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBS8V8q2eJh1qbzSFvQJAi4Nc4LHYQCWUzW_lM32gLtx-3FP34pyjb8uDydzblO_NLfTusyiugWT92_tp26ip2UQtFSshbF9kiivHBPV8Cdv8BWg313jOdBPAma9q7tEJwKvyiTBWzG_0/s1600/forward.png</span>);<br />float:left;<br />}<br />#blog-pager {<br />width:500px;<br />background-color: transparent !important;<br />background-image: none !important;<br />border:0 !important;<br />text-align:left;<br />}<br />  <br />#blog-pager div {<br />color:#0577AB; <span style="color: #6aa84f;">/* Color for the "Newer Posts" and "Older Posts" text */</span><br />font-weight:bold;<br />margin-bottom: -5px;<br />}<br />a#blog-pager div:hover {<br />text-decoration:none !important;<br />color:#4898B9; <span style="color: #6aa84f;">/* Color for the "Newer Posts" and "Older Posts" text */</span><br />}<br />--><br /></style><br /></b:if></blockquote><br />Note that this gadget uses jQuery, so try to have only one version.<br /><h4><br /><b>Customization: </b></h4><br />- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own. <br />- In green you can see where to change the text colors.<br />- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.<br /><!-- adsense --><b><span style="color: #6fa8dc;">Step 4.</span> </b>Now, Save the Template and that's it! <br /><br />You can also change the <a href="http://helplogger.blogspot.ro/2012/04/how-to-replace-older-posts-and-newer.html">"Older Posts" and "Newer Posts" links with posts titles</a> or <a href="http://helplogger.blogspot.ro/2012/04/how-to-replace-older-posts-and-newer.html">images</a>.

Fading Box With Newer/Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Ho...

Read more »

How To Add A Tabbed Navigation Widget to Blogger

The tabviews are elements that allow us to group in a single container various gadgets and these can be selected via tabs.<br />Its main function is to save space on the blog to avoid scattered gadgets in the same category so you can group multiple gadgets into one. There are several methods for creating tabviews, some require jQuery, other MooTools, or any other script.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivhKGCJKbkVA1cUGbX-bR_sS1ngmIZvYrVTQjqaVgwINNt84NhbxTXyCFzutw6VGHmiLpvA43T-sr5AwQt8kBDfdPL25Jx-Cq3_GSSgT8Hp2c6S5ZnP8tP2rZNmvwnHQgo-6YDzqAkpH_i/s1600/tabbed-navigation-for-grouping-various-widgets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivhKGCJKbkVA1cUGbX-bR_sS1ngmIZvYrVTQjqaVgwINNt84NhbxTXyCFzutw6VGHmiLpvA43T-sr5AwQt8kBDfdPL25Jx-Cq3_GSSgT8Hp2c6S5ZnP8tP2rZNmvwnHQgo-6YDzqAkpH_i/s1600/tabbed-navigation-for-grouping-various-widgets.png" /></a></div><span style="color: #3d85c6;"><b>To add this widget to your blog, just follow the steps below:</b></span><br /><br /><span style="color: #3d85c6;"><b>Step 1. </b></span>From your <a href="http://www.blogger.com/home">Blogger Dashboard</a>, go to <b>Template</b> and click on the <b>Edit HTML</b> button<br /><br /><span style="color: #3d85c6;"><b>Step 2.</b></span> Expand the style of the template, by clicking on the sideways arrow before <span style="color: #93c47d;"><b:skin> ... </b:skin></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeKy5pXHiysOpudhM7WIt0D0TRJXpXodpsE6v_fMVo_KfdYAxN5FGNEMbKjgqzl8ItH4rSKD1Kj_KQMmL_o2ukZSvb_onW2NE89pb53VGbwdJalR2SKOZEwoQcIzTypTfQnSHBPf01CXfG/s1600/click-on-the-sideways-arrow-on-blogger-template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeKy5pXHiysOpudhM7WIt0D0TRJXpXodpsE6v_fMVo_KfdYAxN5FGNEMbKjgqzl8ItH4rSKD1Kj_KQMmL_o2ukZSvb_onW2NE89pb53VGbwdJalR2SKOZEwoQcIzTypTfQnSHBPf01CXfG/s1600/click-on-the-sideways-arrow-on-blogger-template.png" /></a></div><span style="color: #3d85c6;"><br /></span><span style="color: #3d85c6;"><b>Step 3.</b></span> Search using CTRL + F for the following tag:<br /><br /><blockquote>]]></b:skin></blockquote><span style="color: #3d85c6;"><b><br /></b></span><br /><div class="separator" style="clear: both; text-align: center;"><b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJfqzLMixjGWZ6XByu4Evoaud7Ci4CNp0Hd_bc3oE12w0GXHuzBX103BOa14YWGfJZKwFcRzks3dE-FnzmmnqmQt0H0EMBNJDThiuWJiPQiX5ByK-iCq1R7CInqIBEIlpmt6Do8pbezKJ/s1600/how-to-search-inside-the-new-blogger-template-editor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJfqzLMixjGWZ6XByu4Evoaud7Ci4CNp0Hd_bc3oE12w0GXHuzBX103BOa14YWGfJZKwFcRzks3dE-FnzmmnqmQt0H0EMBNJDThiuWJiPQiX5ByK-iCq1R7CInqIBEIlpmt6Do8pbezKJ/s1600/how-to-search-inside-the-new-blogger-template-editor.png" width="640" /></a></b></div><br /><br /><span style="color: #3d85c6;"><b>Step 4.</b></span> Just above it, add the following code:<br /><br /><blockquote class="tr_bq">/* Tabview for Blogger<br />----------------------------------------------- */<br />.tabviewcont{<br />margin:15px 0;<br />padding:0;<br />clear:both;<br />}<br /><br />.tabviewnav {<br />margin: 0 0 0 14px;<br />padding:3px 0; <span style="color: #93c47d;">/* If you are using a Blogger Template change 0 with 15px */</span><br />font-size:12px; <span style="color: #93c47d;">/* Font size of text inside tabs */</span><br />font-weight:bold;<br />}<br />.tabviewnav li {<br />list-style:none;<br />margin:0;<br />display:inline;<br />}<br />.tabviewnav li a {<br />padding:3px 6px;<br />margin-right:1px;<br />background:#F6F6F6;<span style="color: #93c47d;"> /* The background color of the tabs */</span><br />border-radius:5px 5px 0 0;<br />-moz-border-radius:5px 5px 0 0; <br />-webkit-border-radius:5px 5px 0 0; <br />text-decoration:none;<br />color:#222222;<br />}<br />.tabviewnav li a:hover {<br />color:#222222;<br />background:#EBEBEB; <span style="color: #93c47d;">/* Background color of the tab on mouseover */</span><br />text-decoration:none;<br />}<br />.tabviewnav li.tabviewactive a,<br />.tabviewnav li.tabviewactive a:hover {<br />background:#EBEBEB; <span style="color: #93c47d;">/* Background color of the active tab */</span><br />color:#222222;<br />}<br />.tabviewcont .tabviewtab {<br />padding:5px;<br />border:1px solid #EEEEEE; <span style="color: #93c47d;">/* Border around the container */</span><br />background:#fff; <span style="color: #93c47d;">/* The background color of the gadget */</span><br />}<br />.tabviewcont .tabviewtab h2,<br />.tabviewcont .tabviewtabhide {<br />display:none;<br />}<br />.tabviewtab .widget-content ul{<br />list-style:none;<br />margin:0 0 10px 0;<br />padding:0;<br />}<br />.tabviewtab .widget-content li {<br />border-bottom:1px solid #ccc;<br />margin:0 5px;<br />padding:2px 0 5px 0;<br />}</blockquote><br /><span style="color: #3d85c6;"><b>Step 5.</b></span> Find the <b></head></b> tag and just above it, paste this script:<br /><br /><blockquote class="tr_bq"><script type='text/javascript'> <br />// Tabview for grouping gadgets <br /><br />//<![CDATA[ <br />document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}<br />//]]> <br /></script></blockquote><br /><span style="color: #3d85c6;"><b>Step 6.</b></span> Finally, look for this line:<br /><br /><blockquote><div class='column-right-inner'></blockquote><br />Or if you use an old template of Blogger, search this line:<br /><br /><blockquote><div id='sidebar-wrapper'></blockquote><br /><span style="color: #3d85c6;"><b>Step 7.</b></span> Paste below one of these two lines, this code:<br /><br /><blockquote class="tr_bq"><div class='tabview'><br /><b:section class='tabviewtab' id='<b>Tab1</b>' maxwidgets='1'/><br /><b:section class='tabviewtab' id='<b>Tab2</b>' maxwidgets='1'/><br /><b:section class='tabviewtab' id='<b>Tab3</b>' maxwidgets='1'/><br /><span style="color: #cc0000;"></div></span></blockquote><br /><span style="color: #3d85c6;"><b>Step 8</b></span>. Save changes, and go to <b>Layout</b> and there you will see the new areas to add gadgets.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAs9KPR6MqYfUTfm-AmF6qXYzehyphenhyphen4pF7yx4tgGwhv4kKwUI3i18f_gyq7ei5IUC3BAiCBT163fQbu9FYtrQHiH1CvQvLa9jQwa2vWNlGldlJ57_GFm3Ij3zvzzX9FUAjCxyRXY1UnOtmxU/s1600/add-a-gadget-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAs9KPR6MqYfUTfm-AmF6qXYzehyphenhyphen4pF7yx4tgGwhv4kKwUI3i18f_gyq7ei5IUC3BAiCBT163fQbu9FYtrQHiH1CvQvLa9jQwa2vWNlGldlJ57_GFm3Ij3zvzzX9FUAjCxyRXY1UnOtmxU/s1600/add-a-gadget-blogger.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"></div>You just have to click on <span style="color: blue;">Add a Gadget</span> to add the gadget to the tab that corresponds, or drag a gadget you already have to that section.<br /><br />If you want to add more tabs, then just add before the last <span style="color: #cc0000;"></div></span> a line like this:<br /><br /><blockquote><b:section class='tabviewtab' id='<b>Tab4</b>' maxwidgets='1'/></blockquote><br />Note that each line you add should have a different ID, for example <b>Tab5</b>, <b>Tab6</b>, etc..<br /><br />You can add multiple tabs, just repeat the last step and likewise remember to change the name of the IDs.<br /><br />Remember that if your sidebar is too narrow, then you should not put a lot of tabs, or tab titles that are very long.<br /><!-- adsense -->You should also note that this gadget does not speed up the loading speed of the blog, is only to group gadgets into one, even, depending on the blog-may take a while to load the tabview.

How To Add A Tabbed Navigation Widget to Blogger

The tabviews are elements that allow us to group in a single container various gadgets and these can be selected via tabs. Its main function...

Read more »