MyHelpBlogger

How To Create Sitemap Page in Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOyks4gQjb5NTV2qIvFfwp11pGv6rckTIn5Fbrd5Wmp-4mGof92S1LCbD7IaRpAMWlvvm3HRd9GtNoM0jMjGl02WcIh4pEg7PUz1BsW6AkygxW8rAvf_3Xa62z74quBE66dKvpKO_fm5c/s1600/untitled.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOyks4gQjb5NTV2qIvFfwp11pGv6rckTIn5Fbrd5Wmp-4mGof92S1LCbD7IaRpAMWlvvm3HRd9GtNoM0jMjGl02WcIh4pEg7PUz1BsW6AkygxW8rAvf_3Xa62z74quBE66dKvpKO_fm5c/s1600/untitled.jpg" width="400" /></a></div>
The most recent widget which we shared in the "<span style="color: blue;"><a href="http://myhelpblogger.blogspot.com/search/label/Widgets">Widgets</a></span>" category was Horizontal Social Sharing Widget and today we're back with another widget. While surfing My HelpBlogger, you might have seen <span style="color: blue;"><a href="http://myhelpblogger.blogspot.com/p/site-map.html">Sitemap Page</a></span> here. If you've not seen before then have a look on it now. Sitemap page is not much necessary for blogs but from some sides it's better to have a sitemap page in menu. Sitemap page basically helps you to make the navigation easier and it also improves page rank of our blog due to make internal linking of our blog. Yeah! That's awesome thing to improve internal linking because in that page, you'll see all the published posts on your blog. Other than this, it also helps search engine's crawler to index the content and webpage easier. So, in this post we're going to share this sitemap page for blogger.<br />
<h2>
Sitemap Page - How It Works</h2>
<div>
Before we get started in doing tweaks with our blog for implementing that sitemap page, I would like to describe you that how it works actually or in other words, I'm going to explain it's feature in this passage. First of all, This is neat and clean sitemap page which is well coded specially for blogger blogs. It's color scheme is only blue which you can see in the demo page. This is automated sitemap page which automatically adds the latest posts in itself without touching it so it's even better for us that we don't need to touch it just after implementing in blog, it will do all the task itself. In this sitemap page, you can see that posts are categorized by labels which is better for readers that they can find the things in that page easily. This sitemap page is developed with JavaScript and CSS which actually takes the post links of our blog through Feeds of our blog. This is created by Abu Farhan so all the credits goes to them.</div>
<h2>
Create Sitemap Page in Blogger</h2>
<div>
Don't worry buddy! You might be thinking that it will be little tough to implement this kind of page in blogger but that's not true as you're thinking! Though, It's the most easiest task to insert this in our blogs. Just follow the simple steps given below.</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvlAUWBR6yrHEdhQCl44gFdptnKsCRsIvdKrpwv-awD_jZe4z8YNbcGLj8TvFRIAk6mHeVBaf90Lg01-IqkSBj4IAK6gtV3FgXI8SDPqFasiLmiwEQFfR-v-okOk8l4bcZ2vQuE6Ddgo/s1600/html%252Btab.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvlAUWBR6yrHEdhQCl44gFdptnKsCRsIvdKrpwv-awD_jZe4z8YNbcGLj8TvFRIAk6mHeVBaf90Lg01-IqkSBj4IAK6gtV3FgXI8SDPqFasiLmiwEQFfR-v-okOk8l4bcZ2vQuE6Ddgo/s1600/html%252Btab.png" /></a></div>
<ul>
<li>Go To Blogger >> Dashboard >> Pages </li>
<li>Create New Page >> Blank Page</li>
<li>Insert Page Title of Yours Choice.</li>
<li>Go To HTML Tab</li>
</ul>
</div>
<div>
<ul>
<li>Copy The Code Below and Paste There in The HTML Tab.</li>
</ul>
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<style type="text/css"></blockquote>
<blockquote class="tr_bq">
#toc{</blockquote>
<blockquote class="tr_bq">
width:99%;</blockquote>
<blockquote class="tr_bq">
margin:5px auto;</blockquote>
<blockquote class="tr_bq">
border:1px solid #2D96DF;</blockquote>
<blockquote class="tr_bq">
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);</blockquote>
<blockquote class="tr_bq">
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);</blockquote>
<blockquote class="tr_bq">
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
.labl{</blockquote>
<blockquote class="tr_bq">
color:#FF5F00;</blockquote>
<blockquote class="tr_bq">
font-weight:bold;</blockquote>
<blockquote class="tr_bq">
margin:0 -5px;</blockquote>
<blockquote class="tr_bq">
padding:1px 0 2px 11px;</blockquote>
<blockquote class="tr_bq">
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);</blockquote>
<blockquote class="tr_bq">
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));</blockquote>
<blockquote class="tr_bq">
border:1px solid #2D96DF;</blockquote>
<blockquote class="tr_bq">
border-radius:4px;-moz-border-radius:4px;</blockquote>
<blockquote class="tr_bq">
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;</blockquote>
<blockquote class="tr_bq">
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
.labl a{</blockquote>
<blockquote class="tr_bq">
color:#fff;</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
.labl:first-letter{t</blockquote>
<blockquote class="tr_bq">
ext-transform:uppercase;</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
.new{</blockquote>
<blockquote class="tr_bq">
color:#FF5F00;</blockquote>
<blockquote class="tr_bq">
font-weight:bold;</blockquote>
<blockquote class="tr_bq">
font-style:italic;</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
.postname{</blockquote>
<blockquote class="tr_bq">
font-weight:normal;</blockquote>
<blockquote class="tr_bq">
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);</blockquote>
<blockquote class="tr_bq">
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
.postname li{</blockquote>
<blockquote class="tr_bq">
border-bottom: #ddd 1px dotted;</blockquote>
<blockquote class="tr_bq">
margin-right:5px</blockquote>
<blockquote class="tr_bq">
}</blockquote>
<blockquote class="tr_bq">
<br></blockquote>
<blockquote class="tr_bq">
</style></blockquote>
<blockquote class="tr_bq">
<br /></blockquote>
<blockquote class="tr_bq">
<br /></blockquote>
<blockquote class="tr_bq">
<div id="toc">
</div>
</blockquote>
<blockquote class="tr_bq">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script></blockquote>
<blockquote class="tr_bq">
<script ff="" src="http://www.<b><font color=">YOURBLOGDOMAIN</font></b>.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></blockquote>
<blockquote class="tr_bq">
</script></blockquote>
</blockquote>
</div>
<br />
<ul>
<li> Replace <span style="color: blue;"><b>YOURBLOGDOMAIN</b></span> With Your Blog Domain.</li>
<li>Click "Publish" Button.</li>
<li><span style="color: blue;"><b>Thats it.......!!!!!!!!!!!!!</b></span></li>
</ul>
<h3>
<span style="font-weight: normal;">Final Words</span></h3>
<div>
I hope you will like is <span style="color: blue;"><b>Happy Blogging....!!!!!!!!!!!!</b></span></div>

How To Create Sitemap Page in Blogger

The most recent widget which we shared in the " Widgets " category was Horizontal Social Sharing Widget and today we're back...

Blue Color Social Subscription Widget for Blogger

In this post im gonna explain how to add Rss feed subscribe box for  blogger with social icons.hope<br />
you will like it. By using this users can subscribe your blog. So, it will  help to get the new updates<br />
by emails. Im using CSS and HTML for this widget.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittMCenwQZoMGa359FIp14mj4pEzOKOVbjjQJ5YCsLvUiRi66yUrEUHD7dyF3xl3XyPwcKWct6qfkKwJCZt_iu8_HgqrIHHzIrN_gYQfc28yaLotirn2j19mIavab3NRdglDJGzwb-kTc/s1600/Blue+Color+Social+Subscription+Widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittMCenwQZoMGa359FIp14mj4pEzOKOVbjjQJ5YCsLvUiRi66yUrEUHD7dyF3xl3XyPwcKWct6qfkKwJCZt_iu8_HgqrIHHzIrN_gYQfc28yaLotirn2j19mIavab3NRdglDJGzwb-kTc/s1600/Blue+Color+Social+Subscription+Widget.png" /></a></div>
<h2>
Add Blue Color Social Subscription Widget</h2>
<b>1</b>. Log in to blogger account and select blog.<br />
<br />
<b>2</b>. Now select "Layout" Like Below.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRi1JORiCNlP5VnRx_rKY8phUBnPjL9OwqvEfvJ31UdpypLkp-KNfSxJza7-HvdPdRIMjgKYyJPcbBCrurrIsvfrWxKh7ZOH1Ku7T6JlFQ3VBssvNBj79V6XYbGbVX2icCjZLHKKzmio/s1600/layout.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRi1JORiCNlP5VnRx_rKY8phUBnPjL9OwqvEfvJ31UdpypLkp-KNfSxJza7-HvdPdRIMjgKYyJPcbBCrurrIsvfrWxKh7ZOH1Ku7T6JlFQ3VBssvNBj79V6XYbGbVX2icCjZLHKKzmio/s1600/layout.jpg" /></a></div>
<b>3</b>. Click Add Gadget and select 'HTML/Javascript<br />
<br />
<b>4</b>. Paste below code.<br />
<blockquote class="tr_bq">
 <style><br />
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}<br />
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctPWaYSwXJmw6NqZYAfLBDS1I19FS-6gGNNBhDoWadv4gKJaAiCoVoMEq5jJyUze_L7VUEKVJ7mlMgYsvzU7ZkH8zGgYkkYfovUDjmQbn_IEkA6hPwCTP_zyxKNzAPIxA8mpsEo6dUJE/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}<br />
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}<br />
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9AJAknog2IKoEQMHDigRXDqiPXHKpJFoHfXJKi6HOq34iarIxYkQbafkgivI_oDTXWdxnsH5NYAVzSgbnpIIBvyTi5cnLcAJ37_qedpVF79wHQ6NDqa185X9joCGfbV3ZaZ3pCMXiI5U/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}<br />
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}<br />
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}<br />
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}<br />
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}<br />
a.social-icons{margin-right: 1px;height:45px;width:45px;}<br />
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}<br />
</style><br />
<br /><br />
<div id="sidebar-subscribe-box"><br />
<div class="sidebar-subscribe-box-wrapper"><br />
<br /><br />
<a class="social-icons" href="https://facebook.com/<span style="color: blue;">MyHelpBlogger</span>"><img src="http://i.imgur.com/b5STXos.png" /></a><br />
<a class="social-icons" href="https://twitter.com/<span style="color: blue;">MyHelpBlogger</span>"><img src="http://i.imgur.com/aVMf3bW.png" /></a><br />
<a class="social-icons" href="https://plus.google.com/+<span style="color: blue;">MyHelpBlogger</span>"><img src="http://i.imgur.com/z75Hrtv.png" /></a><br />
<a class="social-icons" href="http://www.feedburner.com/<span style="color: blue;">MyHelpBlogger</span>"><img src="http://i.imgur.com/SVkK5Uz.png" /></a><br />
<br /><br />
Subscribe To Our Email Newsletter &amp; Receive Updates Free<br /><br />
<div class="sidebar-subscribe-box-form"><br />
<form action="http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: blue;">MyHelpBlogger</span>" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=papublogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><br />
<input name="uri" type="hidden" value="papublogger" /><br />
<input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="Enter your email address here" /><br />
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form><br />
</div><br />
</div><br />
</div><br />
</div></blockquote>
* Replace <span style="color: blue;">MyHelpBlogger </span>with your facebook username<br />
* Replace <span style="color: blue;">MyHelpBlogger</span> with your  twitter Username<br />
* Replace <span style="color: blue;">MyHelpBlogger</span> with Googleplus<br />
* Replace <span style="color: blue;">MyHelpBlogger</span> with feedburner username<br />
* Replace <span style="color: blue;">MyHelpBlogger </span>with your Feedburner ID<br />
Happy <span style="color: blue;">Disigning...!!!!</span>

Blue Color Social Subscription Widget for Blogger

In this post im gonna explain how to add Rss feed subscribe box for blogger with social icons.hope you will like it. By using this users c...

How To Remove Blogger Navbar

<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoaCr80_5FV58ZHYXwNTrPEVrieppDlRD7U6q0q0vzQr66GaqrAS43p2IKEREbujfjw24rRc_CSYqdNBkEIyazjxkQCUKPRFiy7i1GS4TqoIbTnam7kU1am2cSGh8iLjrusfDnGrXa2K4/s1600/Blogger+Help1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoaCr80_5FV58ZHYXwNTrPEVrieppDlRD7U6q0q0vzQr66GaqrAS43p2IKEREbujfjw24rRc_CSYqdNBkEIyazjxkQCUKPRFiy7i1GS4TqoIbTnam7kU1am2cSGh8iLjrusfDnGrXa2K4/s1600/Blogger+Help1.jpg" width="320" /></a></div>
<h2>
WHAT IS BLOGGER NAVBAR?</h2>
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.<br />
The advantages of it are the following:<br />
<br />
- when you click on the B icon, it will take you to blogger.com<br />
- a quick link to your Dashboard and "Sign in /Sign out" dialog<br />
- you can easily search for other blogs<br />
- you can "Flag Blog" (if you consider content of a blog objectionable)<br />
- NextBlog - takes you to a random, recently-updated Blogger blog<br />
<br />
The only disadvantage is visual. If you have customized design, Navbar just doesn't fit in.<br />
So how we get rid of it? It is very simple. Just follow the next steps...<br />
<h2>
Removing The Blogger Navbar:</h2>
1. Login to your Blogger account, click on your blog name and navigate to Layout;<br />
<br />
2. Look for the Navbar text and click on the <span style="color: orange;">Edit</span> link as shown in the picture below:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrIRz0W9fCqgT2Ssz7Am0UKwl6djp5V1wcVV2QVKQF88bTm5HZNvxSOv6lfH8hcPSe_ND7BSpQNjdWCLn2YOxCiX5jlOeBcv5OkNyGDnAkn6ifLgJgKZ3nefiBYoA1vjZ_H_bJSpi-TbU/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrIRz0W9fCqgT2Ssz7Am0UKwl6djp5V1wcVV2QVKQF88bTm5HZNvxSOv6lfH8hcPSe_ND7BSpQNjdWCLn2YOxCiX5jlOeBcv5OkNyGDnAkn6ifLgJgKZ3nefiBYoA1vjZ_H_bJSpi-TbU/s1600/1.png" width="400" /></a></div>
3. When the pop-up window appears, scroll down and select Off, then click on Save button:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_KlujOozSuiI98haOnOTyMlTgQJXdW1J51gKOKkqxhUG_lFrVqe_pWXAUmWfS1qLt4rtvXCAsyHMQ877Z2zaexf_kc66_JlBFX-pMc9RdR2AdjlurD9E4krHNZHSBSVlknBIWTYn4gk/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_KlujOozSuiI98haOnOTyMlTgQJXdW1J51gKOKkqxhUG_lFrVqe_pWXAUmWfS1qLt4rtvXCAsyHMQ877Z2zaexf_kc66_JlBFX-pMc9RdR2AdjlurD9E4krHNZHSBSVlknBIWTYn4gk/s1600/2.png" width="375" /></a></div>
You Are Done...!!! <b><span style="color: orange;">Cheers..!!!!</span></b>

How To Remove Blogger Navbar

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