Blogger Buzz: Navigation

How to Add an Admin Control Panel in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
A while ago I've posted some tutorials on how you can <a href="http://buzzblogger1.blogspot.com/2012/02/how-to-remove-blogger-navbar.html" rel="nofollow" style="color: blue;" target="_blank">remove the Blogger Navbar</a> or <a href="http://buzzblogger1.blogspot.com/2012/03/how-to-removehide-or-add-peek-boo.html" rel="nofollow" style="color: blue;" target="_blank">add a Peek A Boo Effect</a> so that it would show only when we mouse over on top of our page. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6si15Rh_VcFhBB5HgFR7k30tA8ORsLhQiw_vN4Ed3jpNJkJj5u2fk2CJCHkW11FoIQd7du9svnr4aWMK5QT1fjLggMtMBLMIy0D46TIVxWoWUgS4iWNohfoin6CCFcuhBWa8rjcG-at_/s1600/blogger-control-panel-for-admin2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Admin Comtrol Panel" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6si15Rh_VcFhBB5HgFR7k30tA8ORsLhQiw_vN4Ed3jpNJkJj5u2fk2CJCHkW11FoIQd7du9svnr4aWMK5QT1fjLggMtMBLMIy0D46TIVxWoWUgS4iWNohfoin6CCFcuhBWa8rjcG-at_/s1600/blogger-control-panel-for-admin2.png" title="Admin Comtrol Panel" width="320" /></a></div>
 
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. 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
 
So in this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions such as: 
 
- access to the Blogger's Homepage 
- create a New Page or Post 
- view all your posts 
- read your comments 
- access the Blog's layout to add or rearrange gadgets 
- edit the HTML of your Template 
- refresh current page or post 
- open a new tab with your blog's homepage 
- access the blog' settings 
- view your stats 
- ...and finally, log out 
 
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. 
 
The result will be something like this: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmq3X7zOcjjqLtGfgkykfquzY3pM3leeVez_5Kbju6UN7jrmqIslLTw3AM2azF02jpkAKA9bfMIZAMpuwnyqDmzBB-yzwb1hN8symPccIkyQWnIQvuPW0mMCID_JbN8GH0ZZ8O7DxaUoWu/s1600/how-to-add-admin-control-panel-on-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="admin control panel for blogger" border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmq3X7zOcjjqLtGfgkykfquzY3pM3leeVez_5Kbju6UN7jrmqIslLTw3AM2azF02jpkAKA9bfMIZAMpuwnyqDmzBB-yzwb1hN8symPccIkyQWnIQvuPW0mMCID_JbN8GH0ZZ8O7DxaUoWu/s1600/how-to-add-admin-control-panel-on-blogger.png" title="add control panel for blog administrator in blogger" width="640" /></a></div>
 
<h3>
Getting the Blog ID </h3>
The first thing we need to do is get the ID of our blog by clicking on any option from our <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blog Dashboard</a>, for example Settings. Once we have clicked there, take a look at the address bar in your browser: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgllLeUh4iFM_TsbVqiZBykvB2BWFnLvhpoQNK6tzQJAOJG7AFGMSu01C7rHRSuSlJq_B80gYzjioEvphBclGELtI88L7divQIqcqvdeBFJPVE3LxGZUH8EG1VuK9rK4veCdQm9Anh-iJax/s1600/blogger-id-number.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger id number" border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgllLeUh4iFM_TsbVqiZBykvB2BWFnLvhpoQNK6tzQJAOJG7AFGMSu01C7rHRSuSlJq_B80gYzjioEvphBclGELtI88L7divQIqcqvdeBFJPVE3LxGZUH8EG1VuK9rK4veCdQm9Anh-iJax/s1600/blogger-id-number.png" title="how to add an admin control panel in blogger" width="640" /></a></div>
 
Within the URL you will notice a string like this: 
<blockquote class="tr_bq">
blogID=XXXXXXXXX</blockquote>
Where XXXXXXXXX is the unique identifier (ID) for your blog. 
 
Copy the ID for the blog you wish to work with so we can add this in the links for your admin control panel. 
 
<h3>
Adding the admin control panel to Blogger template</h3>
 
The Admin Control Panel will only be visible when the blog author is logged in. It is invisible to blog readers, similar to the Edit post/widget pencil icons which are only visible to you while you are logged in. 
 
To add the control panel to your Blogger template, follow the steps below: 
 
Step 1. Go to Template and click on the Edit HTML button: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Admin Comtrol Panel" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="Admin Comtrol Panel" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVG1ZUrMm5r-4tRVKJL02cM8DT7kHGdqxRz6uDFRue0vwRl-FJ_t0hMykmqsCAVMegEt4Q70WeIRdLqcER9yUk91HBVuXSmg-x7RjhgLPWUP8R2BTIMUPadK6-5omAOdgSYoxJX_C-L6N/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Search" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVG1ZUrMm5r-4tRVKJL02cM8DT7kHGdqxRz6uDFRue0vwRl-FJ_t0hMykmqsCAVMegEt4Q70WeIRdLqcER9yUk91HBVuXSmg-x7RjhgLPWUP8R2BTIMUPadK6-5omAOdgSYoxJX_C-L6N/s1600/blogger-template-search-box.png" title="Blogger Search" width="320" /></a></div>
 
Step 3. Paste this line inside the search box then hit Enter to find it: 
<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 <body> tag. 
 
Step 4. Just below this line, add the following code: 
<blockquote class="tr_bq">
 
<style> 
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; } 
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;} 
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;} 
.control-panel a:hover {text-decoration:none; color:#FC8F44;} 
</style> 
<div class='control-panel'> 
<ul> 
<li><a href='http://www.blogger.com/home'>My Blogs</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar'>New Post</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/target=page'>New Page</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts'>All Posts</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments'>Comments</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements'>Layout</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'>Edit HTML</a></li> 
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li> 
<li><a href='/' target='_blank'>New Tab</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'>Settings</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'>Stats</a></li> 
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li> 
</ul> 
</div> 
</blockquote>
Change XXXXXXXXXXXXX with your unique Blog ID previously copied, and be careful not to delete anything, like quote or any other character. 
 
Step 4. Click on the Save template button to save the changes. 
 
Now take a look at your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy! 
<div>
 
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.</div>
</div>

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

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 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. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7KBAhad1b87RSj5PNeSbY-hGM8KNs-QNUcm6HX9VF_sR1ZrtUpLI__K0EaQUyIDpGOzPy8ixxUUm8WzN2uBZXGZ2ySgWMnf7PlYhMwEGQrMq1NQ7g4q-fg5UVGOijlcEQiA1RnUia0ah/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/AVvXsEjh7KBAhad1b87RSj5PNeSbY-hGM8KNs-QNUcm6HX9VF_sR1ZrtUpLI__K0EaQUyIDpGOzPy8ixxUUm8WzN2uBZXGZ2ySgWMnf7PlYhMwEGQrMq1NQ7g4q-fg5UVGOijlcEQiA1RnUia0ah/s1600/tabbed-navigation-for-grouping-various-widgets.png" /></a></div>To add this widget to your blog, just follow the steps below: Step 1. From your <a href="http://www.blogger.com/home">Blogger Dashboard</a>, go to Template and click on the Edit HTML button Step 2. Expand the style of the template, by clicking on the sideways arrow before <b:skin> ... </b:skin> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQOPzdY765lQjDPRDJbtad7oHLa-dPMIgDmXbWE0JlUOIRr0YPZZp7ayR8BGLsQEC-5sn3rtbOA7l1xJlJkrzRtk6lFtuIi1Zo62QNRn6q3re8IgBYTeyIKjEPCiI6d2gcKW1pvXPzC9w4/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/AVvXsEgQOPzdY765lQjDPRDJbtad7oHLa-dPMIgDmXbWE0JlUOIRr0YPZZp7ayR8BGLsQEC-5sn3rtbOA7l1xJlJkrzRtk6lFtuIi1Zo62QNRn6q3re8IgBYTeyIKjEPCiI6d2gcKW1pvXPzC9w4/s1600/click-on-the-sideways-arrow-on-blogger-template.png" /></a></div> Step 3. Search using CTRL + F for the following tag: <blockquote>]]></b:skin></blockquote> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAzG0IZn9BJCn2XyK4M7rAZs0kGcBDhbvosrHjLnPq2sjdX0LXztJrqkZZDiEdKDdM9QjV0qtzX7EmLzfLJnyeBxGLgcdpJ-tM8h2yt8RHK5cycrKeftsLrxRmNaGzhYl_Z8hHALNE1GyJ/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/AVvXsEhAzG0IZn9BJCn2XyK4M7rAZs0kGcBDhbvosrHjLnPq2sjdX0LXztJrqkZZDiEdKDdM9QjV0qtzX7EmLzfLJnyeBxGLgcdpJ-tM8h2yt8RHK5cycrKeftsLrxRmNaGzhYl_Z8hHALNE1GyJ/s1600/how-to-search-inside-the-new-blogger-template-editor.png" width="640" /></a></div> Step 4. Just above it, add the following code: <blockquote class="tr_bq">/* Tabview for Blogger ----------------------------------------------- */ .tabviewcont{ margin:15px 0; padding:0; clear:both; } .tabviewnav { margin: 0 0 0 14px; padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */ font-size:12px; /* Font size of text inside tabs */ font-weight:bold; } .tabviewnav li { list-style:none; margin:0; display:inline; } .tabviewnav li a { padding:3px 6px; margin-right:1px; background:#F6F6F6; /* The background color of the tabs */ border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; text-decoration:none; color:#222222; } .tabviewnav li a:hover { color:#222222; background:#EBEBEB; /* Background color of the tab on mouseover */ text-decoration:none; } .tabviewnav li.tabviewactive a, .tabviewnav li.tabviewactive a:hover { background:#EBEBEB; /* Background color of the active tab */ color:#222222; } .tabviewcont .tabviewtab { padding:5px; border:1px solid #EEEEEE; /* Border around the container */ background:#fff; /* The background color of the gadget */ } .tabviewcont .tabviewtab h2, .tabviewcont .tabviewtabhide { display:none; } .tabviewtab .widget-content ul{ list-style:none; margin:0 0 10px 0; padding:0; } .tabviewtab .widget-content li { border-bottom:1px solid #ccc; margin:0 5px; padding:2px 0 5px 0; }</blockquote> Step 5. Find the </head> tag and just above it, paste this script: <blockquote class="tr_bq"><script type='text/javascript'> // Tabview for grouping gadgets //<![CDATA[ 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(/ /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)}} //]]> </script></blockquote> Step 6. Finally, look for this line: <blockquote><div class='column-right-inner'></blockquote> Or if you use an old template of Blogger, search this line: <blockquote><div id='sidebar-wrapper'></blockquote> Step 7. Paste below one of these two lines, this code: <blockquote class="tr_bq"><div class='tabview'> <b:section class='tabviewtab' id='Tab1' maxwidgets='1'/> <b:section class='tabviewtab' id='Tab2' maxwidgets='1'/> <b:section class='tabviewtab' id='Tab3' maxwidgets='1'/> </div></blockquote> Step 8. Save changes, and go to Layout and there you will see the new areas to add gadgets. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiODYGRQD8_wFA3plmUjNJlDJ_tr-6APW0oep9OHjfDX-4jMW9feNPVotnjdk14jPFo6t_mXSy44VOGJbQ_p-TEWKMpWLlBkTRZtWYnHQk9sRbIPxkZuipqmcr_tntY6IFllFnosZFCvUPk/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/AVvXsEiODYGRQD8_wFA3plmUjNJlDJ_tr-6APW0oep9OHjfDX-4jMW9feNPVotnjdk14jPFo6t_mXSy44VOGJbQ_p-TEWKMpWLlBkTRZtWYnHQk9sRbIPxkZuipqmcr_tntY6IFllFnosZFCvUPk/s1600/add-a-gadget-blogger.png" /></a></div> <div class="separator" style="clear: both; text-align: center;"></div>You just have to click on Add a Gadget to add the gadget to the tab that corresponds, or drag a gadget you already have to that section. If you want to add more tabs, then just add before the last </div> a line like this: <blockquote><b:section class='tabviewtab' id='Tab4' maxwidgets='1'/></blockquote> Note that each line you add should have a different ID, for example Tab5, Tab6, etc.. You can add multiple tabs, just repeat the last step and likewise remember to change the name of the IDs. Remember that if your sidebar is too narrow, then you should not put a lot of tabs, or tab titles that are very long. 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 Navigation Widgets 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...

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text. <div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvoDxVuIlJdD4NLW81R0EsQpn2PXrsvUplmyR-F_Kdx2Ph1cHA2_PAgiMnHDwhzTc1r2ucYbG1t1zC8AH0pGAertQV4s14dvo_g2Q2QQACG1X2HAJ41MG7UA3kVKcftoFTZ1SpqeJIcrhyphenhyphen/s1600/add+a+drop+down+menu+for+blogger+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery menu, menu blogger" border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvoDxVuIlJdD4NLW81R0EsQpn2PXrsvUplmyR-F_Kdx2Ph1cHA2_PAgiMnHDwhzTc1r2ucYbG1t1zC8AH0pGAertQV4s14dvo_g2Q2QQACG1X2HAJ41MG7UA3kVKcftoFTZ1SpqeJIcrhyphenhyphen/s200/add+a+drop+down+menu+for+blogger+blogspot.png" title="beautiful jquery drop-down menu for blogger blogspot" width="200" /></a></div> Steps Adding the jQuery Drop-Down menu <div class="ssmainhide" style="clear: both; text-align: center;"></div> Step 1. Go to Dashboard - Template - Edit HTML - Proceed <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" /></a></div> Step 2. Expand Widget Template (make a backup) <ul></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHB5UtkpHNSs5zVs7GYJzHdu2XdZIQTinJbrf278R6dKZ_MsFo0wmh_WgeJXeuc5fZR5Z69yjnRZTrU5cwXqH2pRWrySI_HzNEV1cQISJBUsc454erP4p6zU6Li6MLdOIYQy4JXmK3-Cjb/s1600/blogger-expand-widget-templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery drop-dowm menu" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHB5UtkpHNSs5zVs7GYJzHdu2XdZIQTinJbrf278R6dKZ_MsFo0wmh_WgeJXeuc5fZR5Z69yjnRZTrU5cwXqH2pRWrySI_HzNEV1cQISJBUsc454erP4p6zU6Li6MLdOIYQy4JXmK3-Cjb/s1600/blogger-expand-widget-templates.png" title="expand widget templates" width="320" /></a></div> Step 3. Search for the following code: <blockquote class="tr_bq">]]></b:skin></blockquote><div> </div>Step 4. Add the following CSS code before/above it: <blockquote class="tr_bq">#jsddm { height: 40px; margin: 0; overflow: visible; z-index: 2; padding: 15px; position:relative; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; white-space: nowrap; margin:1px 3px; border: 1px solid #AAAAAA; background: #cccccc; background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc)); background: -moz-linear-gradient(top, #ebebeb, #cccccc); padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: #ffffff 0 1px 0; color: #363636; font-size: 15px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } #jsddm li a:hover { background: #C8C8C8; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #CAE8FA; } #jsddm li ul li a:hover { background: #A3CEE5; }</blockquote> Step 5. Now find this piece of code: <blockquote class="tr_bq"></head></blockquote> Step 6. Add this code immediately before/ABOVE it: <blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>   <script type='text/javascript'>   //<![CDATA[ var timeout    = 500;   var closetimer = 0;   var ddmenuitem = 0; function jsddm_open()   {  jsddm_canceltimer();   jsddm_close();   ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close()   {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer()   {  closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer()   {  if(closetimer)   {  window.clearTimeout(closetimer);   closetimer = null;}} $(document).ready(function()   {  $('#jsddm > li').bind('mouseover', jsddm_open)   $('#jsddm > li').bind('mouseout',  jsddm_timer)}); document.onclick = jsddm_close;   //]]>   </script></blockquote> Step 7. Click on Save Template button. Step 8. Go to Layout > click on "Add a gadget" link <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2H4lqlJpI8_6T6QkBqj3kHiUgAtGyzOXHdUSVMnYkouKjNuY5OqKik32ERlYwwLC9vjLEYma2DYIfrb308oXcigHeEa4OvnpIxYnn8sngN9I1i8cBjx-oTphqOOTSRZUcURJ3Yp58EyGd/s1600/add-a-gadget-blogger-layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2H4lqlJpI8_6T6QkBqj3kHiUgAtGyzOXHdUSVMnYkouKjNuY5OqKik32ERlYwwLC9vjLEYma2DYIfrb308oXcigHeEa4OvnpIxYnn8sngN9I1i8cBjx-oTphqOOTSRZUcURJ3Yp58EyGd/s1600/add-a-gadget-blogger-layout.png" width="640" /></a></div> Step 9. Choose HTML/JavaScript from the pop-up window <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD6yYRlxsLNAvxfHwEXtc9LOrSn6K71PaKhoWCqG5RuzH8EbETMgOJlGpKNNQSpJfbxrc7uM_MvwrOPF20MUnNszqFuDr5hzqaXJL3-HIye0z52kUe-6hsOHSn06edDcvyaHvJXByBDqum/s1600/html-javascript-blogger-gadgets-widgets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD6yYRlxsLNAvxfHwEXtc9LOrSn6K71PaKhoWCqG5RuzH8EbETMgOJlGpKNNQSpJfbxrc7uM_MvwrOPF20MUnNszqFuDr5hzqaXJL3-HIye0z52kUe-6hsOHSn06edDcvyaHvJXByBDqum/s1600/html-javascript-blogger-gadgets-widgets.png" /></a></div> Step 10. Paste the following code in the empty box: <blockquote class="tr_bq"><ul id="jsddm">   <li><a href="#">Home</a>   <li><a href="#">Link 1</a>   <ul>   <li><a href="#">Drop 1-1</a></li>   <li><a href="#">Drop 1-2</a></li>   <li><a href="#">Drop 1-3</a></li>   </ul>   </li>  <li><a href="#">Link 2</a>   <ul>   <li><a href="#">Drop 2-1</a></li>   <li><a href="#">Drop 2-2</a></li>   </ul>   </li>  <li><a href="#">Link 3</a>   <ul>   <li><a href="#">Drop 3-1</a></li>   <li><a href="#">Drop 3-2</a></li>   <li><a href="#">Drop 3-3</a></li>   <li><a href="#">Drop 3-4</a></li>   </ul>   </li>  <li><a href="#">Link 4</a></li>   <li><a href="#">Link 5</a></li>   <li><a href="#">Link 6</a></li>   </li></ul></blockquote> Note : You must change links titles and replace the # symbol with the URL address of each of your links Step 11. Click on Save <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_uhv8hnx0eIjGpYMMTtNNZZBUX4DSsWfpdFdHf07c5VfgFf6tez13bl6TUr96vuSN90TH64Brszf0E56hZkUOAxrn4N_ktjYMv6NkbbzQt_Y0P5QOnhhM4Halj1QcV38FV2CSqe_xWB3/s1600/save-html-javascript-blogger-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_uhv8hnx0eIjGpYMMTtNNZZBUX4DSsWfpdFdHf07c5VfgFf6tez13bl6TUr96vuSN90TH64Brszf0E56hZkUOAxrn4N_ktjYMv6NkbbzQt_Y0P5QOnhhM4Halj1QcV38FV2CSqe_xWB3/s1600/save-html-javascript-blogger-widget.png" /></a></div>Important: - if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again. - if drop down links are not showing, do the following: Go back to Template > Edit HTML and search (CTRL + F) for this code: <blockquote class="tr_bq"><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></blockquote><div> </div><div>You should change 1 with 3 and no with yes like this:</div><div> </div><div><blockquote class="tr_bq"><b:section class='header' id='header' maxwidgets='3' showaddelement='yes'></blockquote></div> Save the Template. Next thing to do is to go to Layout and drag your menu immediately below your header <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCXzUVC6gJz7NJrhLGeDnrKEzMFMPmvhlDqdHyyquha7uCTAZq-Sr5PeJ-OCIbDHwy49O3UaFINJDZvQlvfQg6BQlvE9nxErN1YE_C-8NMZHfPowA93gc3NWBaCZ5iYzRbsrWPyHr-MJb0/s1600/drag-widget-below-blogger-header-jquery-drop-down-menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCXzUVC6gJz7NJrhLGeDnrKEzMFMPmvhlDqdHyyquha7uCTAZq-Sr5PeJ-OCIbDHwy49O3UaFINJDZvQlvfQg6BQlvE9nxErN1YE_C-8NMZHfPowA93gc3NWBaCZ5iYzRbsrWPyHr-MJb0/s1600/drag-widget-below-blogger-header-jquery-drop-down-menu.png" width="640" /></a></div> Then click on Save Arrangement <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01ifZAnxDdkSRIgzsd7cHpsHpsppY8nXV8bvrD0p5qrlfjKGTOf51lgYL3tvrcc3eXOQ6luYfcUHRELzIBjdP4E5X-A9PcrdsEJpbHlS6-H3IoQmcktOLpLU8jqb3sxoCvGtVuQ_Rt2LE/s1600/save-arrangement-blogger-widgets-page-elements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01ifZAnxDdkSRIgzsd7cHpsHpsppY8nXV8bvrD0p5qrlfjKGTOf51lgYL3tvrcc3eXOQ6luYfcUHRELzIBjdP4E5X-A9PcrdsEJpbHlS6-H3IoQmcktOLpLU8jqb3sxoCvGtVuQ_Rt2LE/s1600/save-arrangement-blogger-widgets-page-elements.png" width="320" /></a></div> Here you can see the <a href="http://drop-down-menu1.blogspot.com/">DEMO</a>. Enjoy! :)

menus Navigation Widgets A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible,...

How to Replace Older Posts and Newer Posts Links with Blogger Post Titles

If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts of the so-called blog pager which helps readers navigate between pages and posts. If you want to increase your page impressions, one of the ways is to replace the older/newer posts links with the Blogger post titles. <div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjymTyYModdwTFetr6A5CU1PlIhfjfEW-XEMr7470NJzGp2j2jzDnKUp2CqzYdvQvFQdMXQ4gpn8TnuXDebIRZA7iznKkIrg98gKKizAlrpn_ymTOhWCJfOPjsAvhwGCwzV2JXDvhyWJNh2/s1600/add+blogger+blogspot+post+titles+instead+of+newer+older+posts+links+increase+page+impressions+blogger+tricks+tips.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjymTyYModdwTFetr6A5CU1PlIhfjfEW-XEMr7470NJzGp2j2jzDnKUp2CqzYdvQvFQdMXQ4gpn8TnuXDebIRZA7iznKkIrg98gKKizAlrpn_ymTOhWCJfOPjsAvhwGCwzV2JXDvhyWJNh2/s200/add+blogger+blogspot+post+titles+instead+of+newer+older+posts+links+increase+page+impressions+blogger+tricks+tips.png" width="200" /></a></div>How To Add Post Titles Instead of Older Post/Newer Post Link Step 1. Log in to Blogger, go to Layout and click on "Add A Gadget" link <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6ExHDmqoHAd_QydvyIO-ZY_SSN557W4eJL6sX_16J7bxzb7XH2JAkwTEG5XFmUpNz0fPkNWhm638Zz7Qx15XNrYrT2722r509Ezi6N0HRbFZ0H0nyL6CktlX5ndUogGY7X5JsCUbFtDw/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6ExHDmqoHAd_QydvyIO-ZY_SSN557W4eJL6sX_16J7bxzb7XH2JAkwTEG5XFmUpNz0fPkNWhm638Zz7Qx15XNrYrT2722r509Ezi6N0HRbFZ0H0nyL6CktlX5ndUogGY7X5JsCUbFtDw/s1600/blogger-layout-add+a+gadget-how-to.png" width="640" /></a></div> Step 2. From the pop-up window, choose "HTML/JavaScript" <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-vzXy3N-z9ovc2wKWyOyRKKtpcX9J_UnBSGALgE_5xKevzcSILX-jxpIN3XenHXOi_oHFzsU7uh_pWvIvdG1D5czhULgQebt9G1NnEuKza0YG4qQmKWi4WZy0Qu_orgNvM63GYQmWh9u/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-vzXy3N-z9ovc2wKWyOyRKKtpcX9J_UnBSGALgE_5xKevzcSILX-jxpIN3XenHXOi_oHFzsU7uh_pWvIvdG1D5czhULgQebt9G1NnEuKza0YG4qQmKWi4WZy0Qu_orgNvM63GYQmWh9u/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400" /></a></div>  Step 3. Paste the following code into the empty field of the HTML/JavaScript gadget: <blockquote class="tr_bq"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> var olderLink = $("a.blog-pager-older-link").attr("href"); $("a.blog-pager-older-link").load(olderLink+" h3:first", function() { var olderLinkTitle = $("a.blog-pager-older-link:first").text(); $("a.blog-pager-older-link").text(olderLinkTitle); }); var newerLink = $("a.blog-pager-newer-link").attr("href"); $("a.blog-pager-newer-link").load(newerLink+" h3:first", function() { var newerLinkTitle = $("a.blog-pager-newer-link:first").text(); $("a.blog-pager-newer-link").text(newerLinkTitle); }); </script></blockquote> Note: The line in red is for acquiring jQuery framework. If you have acquired jQuery in your template, then you can just delete this part. Step 4. Now Save the Widget and drag it under the Blog Posts section. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1RQlekrlczMM_ctXupgNCYOlR0DEquhjPK5sAY4y4YZlKVnX_90oIyDeGRWGj5oK7O12-xZ-vagsWpC0EMFfEpjFfiC1sItsOJwAKFYbtbmZHHodoV6sycvZ4kstWynAtlusyeqdhHgJ/s1600/replace-older-newer-posts-with-post-titles-blogger-tutorials.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1RQlekrlczMM_ctXupgNCYOlR0DEquhjPK5sAY4y4YZlKVnX_90oIyDeGRWGj5oK7O12-xZ-vagsWpC0EMFfEpjFfiC1sItsOJwAKFYbtbmZHHodoV6sycvZ4kstWynAtlusyeqdhHgJ/s1600/replace-older-newer-posts-with-post-titles-blogger-tutorials.png" width="640" /></a></div> Step 5. Click on Save arrangement. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwdbGXp6XwyQ_hnGx_VBUBYQFd4de21LYQlgJqZPJe0eFqmEcK0TJyuaV9sUK9TFz_z4r73RyyG9rtVSjVPEAQ4xA24jHOwjNsC6FEg1oiXb_YaFq063eYjFw3WB0Zh_C29zlT8umpXo9/s1600/save-arrangement-blogger-widgets-page-elements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwdbGXp6XwyQ_hnGx_VBUBYQFd4de21LYQlgJqZPJe0eFqmEcK0TJyuaV9sUK9TFz_z4r73RyyG9rtVSjVPEAQ4xA24jHOwjNsC6FEg1oiXb_YaFq063eYjFw3WB0Zh_C29zlT8umpXo9/s1600/save-arrangement-blogger-widgets-page-elements.png" width="320" /></a></div> Now view your blog and see the older/newer posts link, replaced with your post titles. For any questions, leave a comment below.

Navigation posts How to Replace Older Posts and Newer Posts Links with Blogger Post Titles

If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not ju...

Replace Older, Newer And Home Blogger links with an image or text

Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts. The number of the posts on these pages will be the same as the number of the posts on your main page. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMb424fcegjYoJKZ2p1vb9C4x0sq7H_wIj7-Oz1UMv9L0XKxQ-BcVMvupZCUIWFMjglGlZ5T-MPnvUPdAi_Eh-Kr8z8mpunVCRcOEdgudtNvVYOmZKLADHbmSEEUSgQ824ZqVuaXcXErds/s1600/how+to+replace+older+newer+posts+and+home+links+in+blogger+blogspot+with+images+picture.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMb424fcegjYoJKZ2p1vb9C4x0sq7H_wIj7-Oz1UMv9L0XKxQ-BcVMvupZCUIWFMjglGlZ5T-MPnvUPdAi_Eh-Kr8z8mpunVCRcOEdgudtNvVYOmZKLADHbmSEEUSgQ824ZqVuaXcXErds/s1600/how+to+replace+older+newer+posts+and+home+links+in+blogger+blogspot+with+images+picture.png" /></a></div> What we can do: <a href="#gotoA" style="color: #0000ee; text-decoration: none;">A. Change the text of Newer, Older, Home links</a> <a href="#gotoB" style="color: #0000ee; text-decoration: none;">B. Place a picture beside them (a small icon, arrow, or whatever...)</a> <a href="#gotoC" style="color: #0000ee; text-decoration: none;">C. Add an image instead of the links</a> So let's start customizing them... 1. Log in to your <a href="https://www.blogger.com/home">Blogger Dashboard</a>, go to Template > Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s400/blogger_blogspot_template_edit_html_tutorial.png" width="400" /></a></div> 2. Click anywhere inside the code area and find - using CTRL + F keys - the following code: <blockquote class="tr_bq">    <b:if cond='data:newerPageUrl'>             <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>           </b:if>     <b:if cond='data:olderPageUrl'>             <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>           </b:if>     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></blockquote>Or find in this code the following fragments which corresponds to each page links <ul><li><data:newerPageTitle/> represents Newer Posts link</li><li><data:olderPageTitle/> represents Older Posts link</li><li><data:homeMsg/> represents Home link</li></ul> Now change these fragments of codes as it follows: <h3><div style="color: #4992DC; text-decoration: none;" id="gotoA">A. Change the text of Newer Posts, Older Posts and Home Links</div></h3> You need to REPLACE following parts in original code with ANY TEXT you like: <ul><li>replace <data:newerPageTitle/> with, for example NEXT POST </li><li>replace <data:olderPageTitle/> with, for example PREVIOUS POST</li><li>replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE</li></ul><ul></ul> <h3><div style="color: #4992DC; text-decoration: none;" id="gotoB">B. Place a picture beside Newer Posts, Older Posts and Home links </div></h3> Add the below code just at the beginning of each of the colored fragments of codes from step 2. <img src="URL Address"/> So it should look like this: <blockquote class="tr_bq"><img src="URL Address"/><data:newerPageTitle/> </blockquote>Note: Replace URL Address text with the url address of the image you want to appear <h3><div style="color: #4992DC; text-decoration: none;" id="gotoC">C. Replace Older Posts, Newer Posts and Home links with an image/picture</div></h3> You can place any kind of picture you want All you have to do is use this code for the pic: <blockquote><img src="URL ADDRESS"/></blockquote>...just replace URL ADDRESS, with the URL of your hosted picture ...and in code, REPLACE the original link code for text with picture code <ul><li>replace <data:newerPageTitle/> with the pic for newer (next) posts</li><li>replace <data:olderPageTitle/> with the pic for older (previous) posts</li><li>replace <data:homeMsg/> (only the first one) with the pic for homepage</li></ul><div style="text-align: center;">Screenshot</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSbGycfksRcsGLzxRRZ9vn0zwvjor3HVFBk_TWfEE_z9PNzWjdIlzg-pT5zKx5PT-xtslUVMo9MpOcf-e5XnPath7VpbIGBTigAWx574h6Eihnp8OAwb5qxTeI8qdaCbV1qhmvtqbOuCVK/s1600/replace-blogger-older-newer-posts-with-an-image-icon-or-text.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tricks, older posts, newer posts" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSbGycfksRcsGLzxRRZ9vn0zwvjor3HVFBk_TWfEE_z9PNzWjdIlzg-pT5zKx5PT-xtslUVMo9MpOcf-e5XnPath7VpbIGBTigAWx574h6Eihnp8OAwb5qxTeI8qdaCbV1qhmvtqbOuCVK/s400/replace-blogger-older-newer-posts-with-an-image-icon-or-text.png" title="how to add an image or text to older, newer posts in blogger" width="400" /></a></div> 3. That's it! Preview and Save the Template.

Blog Design Navigation posts Replace Older, Newer And Home Blogger links with an image or text

Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take...

Add Css/Jquery fixed horizontal menu to blogger blog

This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again. Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page. <div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="http://helplogger.googlecode.com/svn/trunk/html/%5Bhelplogger.blogspot.com%5DFixed%20Fade%20Out%20Menu.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtIYv98CVhCSBviP-qVHO46MWuIR-L5yn5UEz046e7l7xmLENTkuSzWtPlgObG8w_4uEgkj8i_pyMFCetN9j8R_5kxtRKuxVI6I5wmEb8y4jZE2C_KLoq1sj-r-u4KwIGRHB0CX0myd86/s400/fixed+fade+out+menu+for+blogger.png" width="400" /></a></div><div style="background-color: #ffd966; color: #3d85c6; font-family: Verdana,sans-serif;"><a href="http://helplogger.googlecode.com/svn/trunk/html/%5Bhelplogger.blogspot.com%5DFixed%20Fade%20Out%20Menu.html">-> SEE DEMO <-</a></div></div> Let's start adding it... 1. Go To Blogger - Template - Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" width="320" /></a></div>  ....and select the "expand widget templated" box: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmak8_EJ1vAGJDseuaWQf8_zHDw59qKUbdu5oblyzvqOzlyaVu7Tre2SEcvfFNcO94GNzrXlQ2Qgnx7pZBbP615fvj_Fnqgj2Jpgn6yhzOhyaKtjQWJh-PnTIENnZ97ZJONnBptP-rDq5/s1600/blogger-expand-widget-templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmak8_EJ1vAGJDseuaWQf8_zHDw59qKUbdu5oblyzvqOzlyaVu7Tre2SEcvfFNcO94GNzrXlQ2Qgnx7pZBbP615fvj_Fnqgj2Jpgn6yhzOhyaKtjQWJh-PnTIENnZ97ZJONnBptP-rDq5/s1600/blogger-expand-widget-templates.png" width="320" /></a></div> 2. Search (using CTRL + F) for this piece of code: <blockquote class="tr_bq"></head> </blockquote>3. Just above/before the </head> tag, add this code: <blockquote class="tr_bq"><link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/> <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>  <script type="text/javascript">             $(function() {                 $(window).scroll(function(){                     var scrollTop = $(window).scrollTop();                     if(scrollTop != 0)                         $('#nav').stop().animate({'opacity':'0.2'},400);                     else                            $('#nav').stop().animate({'opacity':'1'},400);                 });                                 $('#nav').hover(                     function (e) {                         var scrollTop = $(window).scrollTop();                         if(scrollTop != 0){                             $('#nav').stop().animate({'opacity':'1'},400);                         }                     },                     function (e) {                         var scrollTop = $(window).scrollTop();                         if(scrollTop != 0){                             $('#nav').stop().animate({'opacity':'0.2'},400);                         }                     }                 );             });         </script></blockquote>4) Now search for this tag: <blockquote class="tr_bq"><body>  </blockquote>If you can't find it, search for this one: <blockquote class="tr_bq"><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote>5) Just below/after this code, copy and paste the following code: <blockquote class="tr_bq"><div id="nav"> <ul> <li><a class="top" href="#top"></a></li> <li><a class="bottom" href="#bottom"></a></li> <li><a href='URL address'>Link 1</a></li> <li><a href='URL address'>Link 2</a></li> <li><a href='URL address'>Link 3</a></li> <li><a href='URL address'>Link 4</a></li> <li><a href='URL address'>Link 5</a></li> <li><a href='URL address'>Link 6</a></li> <li class="search"> <form method="get" action="/search"> <input name="q" type="text" placeholder="Search..."/><input type="submit" value="" class="searchbutton"/>   </form> </li> </ul> </div> <div id="top"></div> <div class="desc"></div> <div id="bottom"></div> <div class="scroll"></div></blockquote>Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link that will appear in the menu. 6) Now click on the Save Template button and you're done ;) Credit goes to the<a href="http://tympanus.net/"> original author</a>. This widget was inspired by <a href="http://davidwalsh.name/" target="_blank">David Walsh�s</a> top navigation bar.

jQuery menus Navigation Widgets Add Css/Jquery fixed horizontal menu to blogger blog

This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transpa...

How To Remove Navbar From Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
WHAT IS BLOGGER NAVBAR? 
Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way. The Blogger navbar is usually hidden in most of the third party templates. 
 
The advantages of it are the following: 
 
- when you click on the B icon, it will take you to blogger.com 
- a quick link to your Dashboard and "Sign in /Sign out" dialog 
- you can easily search for other blogs 
- you can "Flag Blog" (if you consider content of a blog objectionable) 
- NextBlog - takes you to a random, recently-updated Blogger blog 
 
The only disadvantage is visual. If you have customized design, Navbar just doesn't fit in. 
So how we get rid of it? It is very simple. Just follow the next steps... 
 
Removing The Blogger Navbar: 
 
1. Login to your Blogger account, click on your blog name and navigate to Layout; 
 
2. Look for the Navbar text and click on the Edit link as shown in the picture below: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQqTX4rTWEOtVy7cHAXOka3UIFOrFURewb8qY1WTde3VEK4zhFdxCzl9DurLqbheFpLxMsY37WrBx522vBBuO7MS9JLkGbs62MkvJsYQw6pXRvwU-VhcEbsFXRJO4_TdwcMqzUzWU21yI/s1600/blogger-navbar-navigation-bar-how-to-remove.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger navigation bar, blogspot tricks" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQqTX4rTWEOtVy7cHAXOka3UIFOrFURewb8qY1WTde3VEK4zhFdxCzl9DurLqbheFpLxMsY37WrBx522vBBuO7MS9JLkGbs62MkvJsYQw6pXRvwU-VhcEbsFXRJO4_TdwcMqzUzWU21yI/s1600/blogger-navbar-navigation-bar-how-to-remove.png" title="How to remove blogger navigation bar" width="400" /></a></div>
 
3. When the pop-up window appears, scroll down and select Off, then click on Save button: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ3sU5BviYrSw49fsGWzCEnwKEFbEMxyIWK3b3uT6HDveWsKiENNRnBZwlhPYviodmJtrADZCCUHyJHr8ixnmCQ5wBaum7R-e8Bo331wPysPE1Cbojm4RJJWoCi9HjcnwCgQG_CPu5UpG9/s1600/blogger-navbar-configuration-how-to-hide.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger navbar, navigation bar, blogger" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ3sU5BviYrSw49fsGWzCEnwKEFbEMxyIWK3b3uT6HDveWsKiENNRnBZwlhPYviodmJtrADZCCUHyJHr8ixnmCQ5wBaum7R-e8Bo331wPysPE1Cbojm4RJJWoCi9HjcnwCgQG_CPu5UpG9/s1600/blogger-navbar-configuration-how-to-hide.png" title="How to hide Blogger Navigation Bar" width="375" /></a></div>
 
You're done. </div>

Blog Design how to Navigation How To Remove Navbar From Blogger

WHAT IS BLOGGER NAVBAR? Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. T his navigatio...