Showing posts with label how-to-guides. Show all posts
Showing posts with label how-to-guides. Show all posts

Monday, January 13, 2014

How to Create HTML Sitemap Page in Blogger

How to Create HTML Sitemap Page in Blogger
How to Create HTML Sitemap Page in Blogger
Sitemap of a blog helps search crawlers to crawl the entire blog properly. It helps to increase our blog crawling and indexing. Previously, I have shared a tutorial about How To Submit Blogger Sitemap To Google Webmaster Tools. That sitemap is in.XML format which we use to submit in Google Webmaster Tool which is only for search engines so that they can index all of our blog posts. Today in this tutorial I am going to share a trick by which you can create a HTML sitemap for your blog readers so that they can easily select a post to read. If you use HTML sitemap in your blog wisely then you can increase your blog page rank also. You can show all of your blog posts at single sitemap page or you can use sitemap for particular label. Whatever your need is, this tutorial will help you. So, let see how to add a sitemap page in blogger.

Creating sitemap page for particular labels

If you want to show all your blog post at same page then follow below steps:

Step 1

Log in into blogger dashboard.

Step 2

Now Go to Pages then New page and click on blank page as show in below picture.

Step 3

Switch this page to HTML mode.

Step 4

Copy and paste below code in body.
<script type="text/javascript">

var numposts = 100;

var standardstyling = true;

function showrecentpostsundefinedjson) {

for undefinedvar i = 0; i < numposts; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if undefinedi == json.feed.entry.length) break;

for undefinedvar k = 0; k < entry.link.length; k++) {

if undefinedentry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}}

posttitle = posttitle.linkundefinedposturl);

if undefinedstandardstyling) document.writeundefined'<li>');

document.writeundefinedposttitle);}

if undefinedstandardstyling) document.writeundefined'</li>');

}

</script>

<ul>

<script src="http://seo-bloggertemplates.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>







If you want to create Sitemap Page for particular Label than copy and paste below code in body.

<script type="text/javascript">var numposts = 100;var standardstyling = true;function showrecentpostsundefinedjson) {for undefinedvar i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if undefinedi == json.feed.entry.length) break;for undefinedvar k = 0; k < entry.link.length; k++) {if undefinedentry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}posttitle = posttitle.linkundefinedposturl);if undefinedstandardstyling) document.writeundefined'<li>');document.writeundefinedposttitle);}if undefinedstandardstyling) document.writeundefined'</li>');}</script><ul><script src="http://seo-bloggertemplates.blogspot.com/feeds/posts/default/-/Label%20Name?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>

Step 5

Replace seo-bloggertemplates.blogspot.com to your blog URL and Label%20Name to your label name.

Step 6

Click on Publish button.
If you like this post, please share and click like button for me. Thanks a lot !

How to submit sitemap blogspot to google webmaster tool

To be successful in your blogging career you must have to generate decent organic traffic to your blog. By the term “organic traffic” I mean the traffic which comes to your blog through search engines like Google. If you are a new blogger then you should be aware with the Google Webmaster Tools. This is a great tool which is provided by Google itself. It is useful for bloggers and webmasters to get their blog or website index by the Google and it also help to improve our blog’s crawling rate.
You just need to verify your blog ownership in Google Webmaster Tools and then submit a simple sitemap. It is very important to submit blogger sitemap to Googlein terms of SEO which tells Google about your blog and its content. Whenever you update your blog with new posts, your sitemap helps to index them easily in search engines. This is what we are gonna discuss in this post. Let see how to add blogger sitemap to Google Webmaster Tools.

Submit Blogger Sitemap To Google Webmaster Tools

Below are some easy steps you have to go through in terms to submit your blogspot blog sitemap.

  • Sign in to Google Webmaster Tools.
  • Click on the blog title for which you want to add sitemap.
  • Click on Sitemaps button as shown below.
  • At the top right corner of the page, press Add/Test sitemap button.
  • Once you click the button, a small box will appear as shown in the screenshot below.
  • Add the below code in the text field.
atom.xml?redirect=false&start-index=1&max-results=500
This is the sitemap code for your blogger blog which you need to add.
  • Press “Submit Sitemap” button.
  • Refresh the page.
Congratulation! You have finished the process of submitting your blog sitemap.
Note: The above sitemap will work for 500 posts only. If you have more than 500 posts published in your blog, then you have to add one more sitemap. Whole procedure will be same but at this time you have to add this code.
atom.xml?redirect=false&start-index=500&max-results=1000
The sitemap which we submit to Google Webmaster Tools is a XML sitemap which is used by search engines to find our content easily. There is HTML sitemap too which is for our blog readers. We should add sitemap page to our blog so that our readers can easily view all of our blog posts at the single location. It’ll be easy for them to read post which they want to. If you don’t know how to add a sitemap page in blogger, then here is a tutorial for you.

Comments

This was the step by step guide on how to add blogger sitemap in Google Webmaster Tools. If you found it worth reading, then please share it with your social media friends. If you have any feedback, suggestion or any query then feel free to comment below this post. Your comments will be answered as soon as time allows. Happy Blogging! 
If you like this post, please share and click like button for me. Thanks a lot !

How to Get Your Blog Indexed Quickly

If you are having trouble to get your blog indexed by search engines or you are unaware of it, then you must be thinking to do something very quickly. Indexing by major search engine is really important to get visitors your blog if you want it to be read by others.
In this article I will tell you the simple steps that every blogger can do to get your blog indexed by Google, Yahoo and Bing as quickly as possible.
First of all, check whether your blog is already index by searching for site:www.example.com in search boxes of respective search engines. If you think you are not happy with the results then here is a check list.

Submit your Blog's Sitemap

It’s very important to submit your site or blog’s sitemap to search engines as it tells them about your blog. To start with you can visit Google Webmasters and Bing Webmaster Tool. If you are blogging on Blogger platform then read this tutorial to how to submit Blogger sitemap.


Start Commenting

Start commenting whenever you come across the blogs that are under your niche or you find the post very helpful or interesting. Sometimes it can help your blog to get indexed but most of the times it helps you to get traffic.
But don’t spam, every time you comment, be on topic and try to write something meaningful so that people reading your comments doesn’t get the wrong impression. Saying “Thanks” or “Cool” gives the comment no weight or adding your website addresses for no reason are always considered as spam comments.
So, don't just sit there, start doing what you need to do first to get you blog indexed as quickly as possible by following the above methods. Good luck.
P.S. This post has been rewritten.

How to Add Popular Posts Widget to Blogger

Show the popular stories and articles of your blog in your sidebar. Give your visitors a reason to stay on your blog. Add popular posts widget in Blogger. It work on the total number of comments a post gets. So we can also call it as 'Most Commented Widget'.


Many of you have expressed an interest in this widget, so I thought to give you the tutorial on it. 
You can get this widget form PostRank and Feedjit. Just register your blog and get the widget.
Otherwise there is also a JavaScript available for the popular posts widget for Blogger.
Go to Blogger's Design > Page elements tab and click “Add a Gadget” and select “HTML/JavaScript” and copy paste the following code:
<script language='JavaScript'>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "http://simplebloggertutorials.blogspot.com/";
</script>
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/popularpost/popularpostblogger-min.js' type='text/javascript'></script>
Now for a tutorial to how to customize this widget:
1. Change the link of home_page to your homepage name.
2. numposts is the number of posts you got.
3. maxshowresult is the maximum result that will be shown.
Change this accordingly.
You can also download the script and put it on your server or free JavaScript hosts:
  • http://sites.google.com/site/abufarhansite/home/popularpostblogger-min.txt
  • http://www.hotlinkfiles.com/files/2709999_xqhsi/popularpostblogger-min.js
  • http://dl.getdropbox.com/u/708209/scriptabufarhan/popularpost/popularpostblogger-min.js


How to Add Blog Posts Automatically to Twitter

You can automatically add links of your blog’spost updates on your Twitter profile whenever you publish a new post. If you didn’t knew about this then let’s see how to do it.


First of all you need a Google FeedBurner account to enable this feature. Most bloggers use this service to manage their feeds. If you use Blogger and have not done it yet then set-up FeedBurner first. Next, sign in and go to “Publicize” tab.
FeedBurner Twitter settings
Under it, find and go to “Socialize” tab as shown in the image below.
Fedburner Socialize tab
Now all you have to do is add you Twitter Username and select the proper “Formatting Options” that you like to have for your automatically tweeted blog posts.
Customize to tweet posts automatically
At last, scroll down to the bottom of the page and click “Save” to activate the service. After this, whenever you publish a new blog post, it will get added to your Twitter account.
Note:
This method uses the URL shortener service by Google.

How to Add Blog Posts Automatically to Twitter

You can automatically add links of your blog’spost updates on your Twitter profile whenever you publish a new post. If you didn’t knew about this then let’s see how to do it.


First of all you need a Google FeedBurner account to enable this feature. Most bloggers use this service to manage their feeds. If you use Blogger and have not done it yet then set-up FeedBurner first. Next, sign in and go to “Publicize” tab.
FeedBurner Twitter settings
Under it, find and go to “Socialize” tab as shown in the image below.
Fedburner Socialize tab
Now all you have to do is add you Twitter Username and select the proper “Formatting Options” that you like to have for your automatically tweeted blog posts.
Customize to tweet posts automatically
At last, scroll down to the bottom of the page and click “Save” to activate the service. After this, whenever you publish a new blog post, it will get added to your Twitter account.
Note:
This method uses the URL shortener service by Google.

How to add Google +1 Button to Blogger

After the introduction of Google +1 button (Plus One), it has become a trend for the publishers to add it to their websites and blogs, whether it is hosted on Blogger or WordPress. So the general question that will pop up in our minds is what is so popular about this +1 button?


Well, the answer is, when you finds a web content to be useful and click Google +1 button to share it on Google+, it will not only help your friends and contacts on Google+ Circle to get to know about the interesting content but will also help them to find more relevant search results on Google.
Now let us start the discussion about why you are here, that is, to add Google +1 button to Blogger posts. It can be done by two ways, first is a very simple way where you have to only enable some settings and you are ready to use it and next is the advance way where you have to edit Blogger template to include Google Plus One button.

Easy Way

If you want an easy way then Blogger has already enabled it for us, all you need is to turn on the official share buttons which includes Google +1 button. It can be found under Layout tab; click the “Edit” link under “Blog Posts” gadget, select “Show Share Buttons” and save it; but I must say that you cannot customize or can choose any other sizes.
Blogger official share buttons

Advance way

It comes handy when you are thinking to add Google +1 button within Blogger posts with a different size and/or type on your desired position manually.
Step 1: Login to Blogger and go to your blog’s Template tab.
Step 2: Click “Edit Html” and check “Expand Widget Templates”.
Step 3: Configure the the below options to generate Google +1 button code for Blogger and copy it.

Button options

Size: 
Annotation: 
  pixels (?)
Language: 

Float: 
Show on: 

Preview and code


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='float: none;'>
<div class='g-plusone' data-size='tall' data-annotation='bubble' expr:data-href='data:post.canonicalUrl'></div>
</div>

</b:if>

Step 4: Find <data:post.body/> and before or after it (or if you want you can add it in both places to show Google +1 button above and below Blogger posts) add the above code.
Step 5: Find </body> and immediately before it add the below script.
<script type="text/javascript">
window.___gcfg = {lang: '<data:language/>', parsetags: 'onload'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Step 6: Save your template.

Attributions

  • Size - Google +1 button is available in four sizes.
  • Annotation - If you select ‘inline’ you will get to set the width. The default width is ‘450’ pixels while the minimum recommended is ‘120’. Only your friends’ faces will be seen if they have +1ed the post.
  • Language - It will get to your blog’s default language but you can always set it to your locale language.
Points to note:
  • I have gone with the asynchronous script in step 5. I have found out that sometime it fails to load if it’s not placed immediately above the closing body tag. If you are facing such problems then add the simple onload version instead.
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {lang: '<data:language/>'}
    </script>
  • For more information, visit Google +1 button documentation page.
  • Create Google Plus page for you blog to gain more exposure.

How to add Google +1 Button to Blogger

After the introduction of Google +1 button (Plus One), it has become a trend for the publishers to add it to their websites and blogs, whether it is hosted on Blogger or WordPress. So the general question that will pop up in our minds is what is so popular about this +1 button?


Well, the answer is, when you finds a web content to be useful and click Google +1 button to share it on Google+, it will not only help your friends and contacts on Google+ Circle to get to know about the interesting content but will also help them to find more relevant search results on Google.
Now let us start the discussion about why you are here, that is, to add Google +1 button to Blogger posts. It can be done by two ways, first is a very simple way where you have to only enable some settings and you are ready to use it and next is the advance way where you have to edit Blogger template to include Google Plus One button.

Easy Way

If you want an easy way then Blogger has already enabled it for us, all you need is to turn on the official share buttons which includes Google +1 button. It can be found under Layout tab; click the “Edit” link under “Blog Posts” gadget, select “Show Share Buttons” and save it; but I must say that you cannot customize or can choose any other sizes.
Blogger official share buttons

Advance way

It comes handy when you are thinking to add Google +1 button within Blogger posts with a different size and/or type on your desired position manually.
Step 1: Login to Blogger and go to your blog’s Template tab.
Step 2: Click “Edit Html” and check “Expand Widget Templates”.
Step 3: Configure the the below options to generate Google +1 button code for Blogger and copy it.

Button options

Size: 
Annotation: 
  pixels (?)
Language: 

Float: 
Show on: 

Preview and code


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='float: none;'>
<div class='g-plusone' data-size='tall' data-annotation='bubble' expr:data-href='data:post.canonicalUrl'></div>
</div>

</b:if>

Step 4: Find <data:post.body/> and before or after it (or if you want you can add it in both places to show Google +1 button above and below Blogger posts) add the above code.
Step 5: Find </body> and immediately before it add the below script.
<script type="text/javascript">
window.___gcfg = {lang: '<data:language/>', parsetags: 'onload'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Step 6: Save your template.

Attributions

  • Size - Google +1 button is available in four sizes.
  • Annotation - If you select ‘inline’ you will get to set the width. The default width is ‘450’ pixels while the minimum recommended is ‘120’. Only your friends’ faces will be seen if they have +1ed the post.
  • Language - It will get to your blog’s default language but you can always set it to your locale language.
Points to note:
  • I have gone with the asynchronous script in step 5. I have found out that sometime it fails to load if it’s not placed immediately above the closing body tag. If you are facing such problems then add the simple onload version instead.
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {lang: '<data:language/>'}
    </script>
  • For more information, visit Google +1 button documentation page.
  • Create Google Plus page for you blog to gain more exposure.

Add Pinterest Pin it Button to Blogger


Pinterest have launched their sharing buttons, why not have it for Blogger. “Pin it” buttons has counters and comes in three different sizes. But before you add it to Blogger posts, let’s see what you have to do first.

For those who don’t know about it yet, Pinterest allows you to organize and share your interests on a virtual pin board. It has become famous because not only this site is beautiful but also is very easy to share and manage your “pins”. You need to use it to believe it.

Step 1: Login, go to your blog’s dashboard > Template tab.
Step 2: Click “Edit HTML”, check “Expand Widget Templates” and find </body>. Before it add the below script:
<script type="text/javascript" src='//assets.pinterest.com/js/pinit.js'></script>
Step 3: Find <data:post.body/> and before/after it (or on both places) add the following code after generating it.

Button options

Layout: 
  (?)

Float: 
Show for: 

Preview and code


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='float: none;'>
<b:if cond='data:post.firstImageUrl'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title'><img border='0' src='//assets.pinterest.com/images/PinExt.png' title='Pin It' /></a>
<b:else/>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=http://your-image.jpg&amp;description=&quot; + data:post.title'><img border='0' src='//assets.pinterest.com/images/PinExt.png' title='Pin It' /></a>
</b:if>
</div>

</b:if>

Step 4: Preview your template whether it has been added correctly or not and then save it.

Attribution

  • I have found out that the Pinterest share buttons will not work if the image file source is not mentioned. So to resolve this, you need to specify a default image source by changing http://your-image.jpg. It can be your blog’s logo or anything. If the button gets the image from the post then it’s good otherwise it will load the default one.
  • Update - Now you can get the actual size of the images after clicking the Pin it button but there's a condition that it should be uploaded from Blogger post editor or should be hosted on Picasa/Google+ album.

Pinterest Follow Buttons

If you are a member of this famous site then you can add follow buttons to your blog to grow audience. It’s very simple, just visit Goodies page and select the type that you want to add, copy the code and paste it into a “HTML/JavaScript” gadget from Layout tab. Here’s an example.

Labels

1 column 2 column 3 column 4 column aaSolah Accessories add button subscrise for blogger Add Digg Button to Blogger add feedburner for blogger add like button facebook to blogger Add Pinterest Pin it Button to Blogger add sitemap blogger to google add stumbleUpon badge to blogger Ads Ready afghan afghan stitch AGULHAS AMIGURUMI Anchor text Ảnh đẹp Ảnh vui Animasi applique Art artikel Árvore de Natal em croche Aulia baby crochet Baby Dress baby knitting Baby learn bag Bags Bài viết BAKTUS Ballet Bun Cover balloons BARRADOS Bayi Bead Beads Bear Ear Hat BEBÊS belts Berita Berry Best WP Theme 2014 Better Blogger Seo Biologi Black blanket Blogal Template Blogger Codex Blogger Images Slider blogger navbar Blogger Rating blogger template 2014 Blogger Templates Blogger Tool Tip Blogger Tutorials Blogger Widgets Blogger-Template Blogspot Blogspot Templates Blue BLUSAS BOINA BOLEROS BOLSAS books BORBOLETAS Bounce Rates bows boxes bracelet Brown Browse Business Butterfly Button Counter Button Facebook CACHECOL CACHECOLAR cake candles candy Candy Cane Cards carving carving fruit carving fruits CASACO INFANTI CASACOS CASAQUINHO EM CROCHE CASAQUINHO EM TRICO CASAQUINHO PARA BEBÊ Cerpen CHAPEU clay COLAR COLAR DE FLORES COLETE coloring Competitor Research Contact Form for Blogger CORDÃO CORUJUINHAS crafts CROCHE COM SAQUINHOS PLASTICOS CROCHE IRLANDES Crochet Crochet Geek crochet pattern cross stitch Curtain customize cutting paper DECORAÇAO Design blogger template Dicionário de Trico - Inglês/Portugues Digg button Dijual Documentation Doily Domain dress dwell time earring ECHARPE Ecommerce Embroidery ENXOVAL PARA BEBÉ ESTOLAS Event Exit Rates facebook facebook button facebook like in blogger facebook share button facebook share button with counter FAIXA PARA CABELOS fashion Favicon for blogger feed rss Felt Fisika Flat News Templates FLORES Flower flower arrangement flowers crochet Folding paper FOLHAS food food decor Foto Free Blogger Templates Free Download Blogger Templates FREE FORM Free Premium frustration Funny Galaxy Stitch Gallery Games garden Gaya Hidup gel grips Geografi gift Gifts Girl glass Go Green GOLINHAS Google Google Analytics Google Merged All Accounts into One google plus button Google SERPs Google Webmaster Tools Google+ Google+ comment GORRO GRÁFICOS Granny Square Gray Green hair clip Haji Hama hats Heart Hexagon hide blogger navbar holiday craft holiday crafts home and garden Hook how to how to add favicon for blogger how to add feedburner How to install flat news how to turn off google plus comment how-to-guides Hunian Iklan Baris Ilmu Pertanian Image Thumbnail for Blogger imam Indexed Quickly for blogspot iNews 2014 Blogger Template Info Kontes Installing Blogger Template Internet Iseng Islam Itunes jewelery jewelry Karma Blogger Template Kata Bijak Kata Mutiara Kesehatan Kewarganegaraan Keyword Research Kiếm tiền kirigami Knit knitting knitting pattern knot Kuliner Landing Page Blogger Templates Lập trình Blogspot Latent Semantic Indexing LEAVES Like button facebook Lirik Lagu LirikNasyid Log Cabin Square LSI LUMINÁRIAS LUVAS LUVINHAS PARA BEBÊ Magazine Magazine Blogger Template make up making flower making flowers Making toys Manta MANTA PARA BEBÊ MANTA PARA SOFÁ Mashable MEUS MOMENTOS MEUS TRABALHOS mittens motif Motivasi Movie Multiples Music Nail art Nature necklace News News blogger template News Google News Pro Blogger Template Nivo image slider Olah Raga On page seo Online store Orange Organik Origami Pagerank painting PANTUFAS PAP Paper Patchwork PELERINE Penyakit Tanaman Peribahasa Personal Phần mềm pictures Pilihan Pillows Pink plastic POLAINA PONCHO Popcorn Popular Posts Popular Posts Code For Blogger Portfolio post automatically to twitter Premium Blogger Teamplates professional blogger templates Profil puff stitch Puisi pumpkin cap QUADRADO Quilling paper Quilt RECEITA RECEITA CULINÁRIA RECEITA DE PONTOS recycle recycling Red redirected to FeedBurner Related Post Widget remove navbar blogger RENDA DE PELO DE CABRA repair work Responsive Blogger Template retweet button ribbon rings rss for blogger rugs SACOLAS SAIAS DE CROCHE SANDÁLIAS EM CROCHÊ SAPATINHOS SAPATINHOS PARA BEBÊ Sastra Scarf scarves search engine optimization Search engine users seo Seo Blogger Template SEO Course Outline Seo For Blogger SEO Friendly Seo in 2014 Seo tips Seo Tutorial Seo Tutorial 2014 Seo With Blogger Serba Info Serba Tips serps sewing share button share twitter button shawls shoes and sandals Simple Singing sitemap blogspot sitemap page skirt Slider for blogspot snood Snowflake soap socks SQUARE steps to design a nice blogger template Strawberry subscrise button SUÉTER sweater Swiffer Sweeper Cover Syahira blogger theme TABELAS DE MEDIDAS DE TRICO E CROCHE tablecloths Tanaman Padi TAPETES. RECEITA Template TENIS PARA BEBÊ Thank you the panda update Thủ thuật Tien Nguyen tip tips Tips and Tricks TOALHAS TOUCAS TOUCAS PARA BEBÊ Travel TRICO Từ điển Blogspot TÚNICA tunisian turn off google plus comment Tutorial Tutorial Blog Tutorial video twitter button Twitter follow button twitter for blogspot underwear Valentine's day Vegeta Blogger Templates Video VÍDEO Video Blogger Templates video tutorial weaving Web 2.0 wedding Wedding Mag what is a bounce What Is Anchor Text what is bounce rate What is Seo White WIDGET Widget For Blogger wood Wordpress Look WordPress Themes XALE Yellow Youtube