How to add Videos/Images in Blogger/Blogspot Comments

Many of you may have wondered if it is possible to add Youtube videos and images into Blogger comments. Well, after going through this tutorial, we'll be able to do this!

To get these cool features, we just need to add some scripts to our template and use the right tags for the images. For adding youtube videos, pasting their URLs will be enough.

How to add videos/images in Blogger comments

Step 1. Go to Dashboard > Template > Edit HTML

Step 2. Find (using CTRL + F) the following tag:

</body>

Step 3. Just above/before the </body> tag, paste this code:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/youtubevideos.js'/>
<script src='http://helplogger.googlecode.com/svn/trunk/pics-comments.js'/>

Step 4. Save the changes by clicking on the Save Template button.

Instructions

Now each time you want to post youtube videos, just paste their urls in the comment box.
For adding images, use the tags below before and after the address of your image:

[img]your-image-url[/img]

Note: replace your-image-url with the URL

Settings

If you want to let your visitors know how to post images in blogger comments, then go to Dashboard > Settings > Posts and Comments and look for the Comment Form Message section, there you need to click on "Add" link and add your text. For example:

Need to add an image? Use this code <b>[img]IMAGE-URL-HERE[/img]</b>

After you have added your text, click on the Save Settings button on the top right corner. And you're done!

If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below.

How to Setup Feedburner Feed in Blogger?

Once you publish your blog post, first thing you need is the readers to read your content. Content Syndication is the best way to deliver the content directly to the readers inbox so that they get notified whenever you publish a new post. Google Feedburner is the top known service for content syndication. It is also known as RSS Feed syndication. In this tutorial I will tell you step by step way to enable feed syndication for your blog that will help to increase traffic to your blog and build your blog readership. Once you enable email subscription service in your blog, you will notice how your blog traffic is increasing. So. let start the tutorial.

Feedburner Tutorial Series

Part 1: How to Setup Feedburner Feed in Blogger?

Part 2: Feedburner Mybrand – Change Feed URL With Custom Domain

Part 3: How to Auto Tweet Blog Posts on Twitter?

Setup Feedburner to Blogger

1. First go to Feedburner and login with your Google Account.
2. Now type your blog URL in the burn a feed text field and click next button.


3. Again click on next button on the new page.


4. Enter your feed title and feed address as shown below and click next.


5. Now your feed is live. Click on next button.


6. On the next page you will get some options. Simply check those options which you want and press next button.


7. Now you have completed all the steps successfully. You will receive a congratulation message on your screen.

Redirect Blogger Feeds to FeedBurner

Once you setup feedburner for your blog you have to redirect your blog feed to the feedburner feed. To do this simply follow the below steps.

1. Go to your blogger dashboard.
2. Go to settings >> Other >> and then navigate to “Site Feed“
3. Click on edit link and enter your feedburner feed URL in the Post Feed Redirect URL text field.


4. Now click on Save Settings button.
5. You are done!

Your Turn!

This was all about how to setup feedburner feed to blogger blog. Now it’s your turn. Simply follow these steps and enable feed syndication in your blog so that your blog readers can be in touch with you.

How to submit your Blogger Sitemap to Google

What are Sitemaps?

Sitemaps are text files containing a list of all web pages that exist on your website and are accessible to crawlers and users. These helps visitors and search engine bots to find pages on website. Sitemaps are a way to help Google indexing pages on your site which otherwise might not be discovered.

If your blog is hosted on blogspot.com (or if you are using a self-hosted version of Blogger with a custom domain) you will be surprised to find out that the default sitemap file, contains only the 26 most recent pages of your blog which in normal case should contain all URLs of a website.

Many webmaster pretend to teach others how to drive traffic to blogs or websites yet leaving out the most important factors like sitemaps. There are still other websites who keep on providing the old methods of generating a sitemap for blogger which are not any effective.

How to add a complete Sitemap for your Blogger Blog

Step 1: If you haven't done this already, sign-in to your Google Webmasters account and add your blog.

Step 2: Once your blog is added to Google, go to Webmaster Dashboard  and click on your site address

Step 3:  On the left panel choose Site Configuration >> Sitemaps - then click on Add sitemap.

Add each of the following codes:

/atom.xml?redirect=false&start-index=1&max-results=500
/atom.xml?redirect=false&start-index=501&max-results=500
/atom.xml?redirect=false&start-index=1001&max-results=500

If your blog have lots of pages, add the sitemaps below:

atom.xml?redirect=false&start-index=1001&max-results=500
atom.xml?redirect=false&start-index=1501&max-results=500
atom.xml?redirect=false&start-index=2001&max-results=500
atom.xml?redirect=false&start-index=2501&max-results=500
atom.xml?redirect=false&start-index=3001&max-results=500

Add Your Blogspot Blog to Google

1) Log in to your Google Webmaster Tools account.

2) Click on the “Add a site” button at the top of the screen.

3) Enter the URL address of your blog (for example http://my-site.blogspot.com/) and press Continue

4) Select the method you would like to use to verify ownership.
You can either upload an HTML file with a name we specify (which is not possible with Google Blogger account), or you can add a META tag to your site's index file.

Choose Alternate Methods:

5) Under Alternative Methods Click Add a meta tag to your site’s home page.

6) Copy the Meta tag Code generated.

7) Open a new tab and login into your blogger account.

8) Go to Template > Edit HTML

 ...and search (CTRL + F) for the following tag:

<head> 

9) Just below of it, paste the META code and then click on the Save Template button.

10) Switch to Google Webmaster Tools tab and press on the "Verify" button.

Now your site is added to sitemap account and the verification is done.

6 Tips To Optimize Images For SEO To Increase Blog Traffic

We all know that we should optimize our blog posts to rank well in search engine that help us to increase our blog traffic but today I will tell you how to use images for better search engine visibility. Every blogger either using blogger platform or wordpress platform, they must optimize their images while using them into their blog posts before publishing the post. Image optimization really works to improve blog traffic. Lots of webmasters search images from Google Image Search to use them into their blog posts. So, if you have well optimized images into your blog post then it will give you two benefits. One is bring traffic from image search and second is it help web crawlers to better understand your post topic hence higher SERP (Search Engine Result Position). Let’s go to the tutorial to learn some helpful tips about image optimization for SEO.

Image Optimization Tips

Below are some very important tips to optimize images before uploading them into blog posts. These tips will improve your blog SEO
1# Use Keywords in Image Name
Have you download an image from internet or click them from your camera to use them into your blog posts? Yes! Wait buddy don’t use them directly into your blog. First change their name into a keyword rich image name. By default image name look like this image1432.jpg or photo123.jpg. Always rename them with your post keyword. For example if I use any image for this post then I’ll rename my image like this image-optimization.jpg.
2# Hyphen in Image Name
Remember when naming your images with your keywords neither use blank space nor underscore ( _ ) between them. Always use hyphen to separate the keywords like I have done in the first example. Because when your use blank space it will automatically convert to ‘%20‘ which have no meaning. In result web crawlers found difficulty to understand the image. Hyphen is always a better option for optimizing the image.
3# Use Best Format
There are lot of formats of images like JPG, PNG, GIF and others. But always use that image format which suits better for web. JPG image format is the most preferable image format by the webmasters because it uses less size memory as compare to other formats. Less image size will help you to reduce blog load time and hence better search engine ranking means more traffic.
4# Compress Images
Before uploading the images into your blog post, first remember that you have compressed them. Compressing the image also help to make your blog loading speed faster and reduce blog bounce rate. You can compress your images in Photoshop. To compress your image in Photoshop go to file menu and click on save for web. It will reduce image size by maintaining the image quality.
Also you can use online tools to compress your image files. One of the best tool is Yahoo Smush it. Go for it and compress your images for free.

How to Use Images in Blog Post for Better Search Engine Visibility?

Now you have optimized your images. It’s time to use them into your blog posts. Below are some advance tips that also come under image optimization in SEO. Read them carefully and follow the instructions.
5# Proper Dimension
When you upload your images into blog post, always give them proper dimensions. Mentioning the dimensions help in faster page loading. Web crawlers don’t get confuse to assume its width and height. If you already give dimensions to your image, then it will be easier for web crawlers to better crawl your content. Use below format to give dimensions to your image.

<img alt=”" width=”320″ height=”210″ src=”URL of image”/>

Change above highlighted values according to your need.
6# Title Tag and Alt Tag
Title tag and Alt tag works as a description for your images. Web crawlers can’t read images. They only understand them by their name, title tag and Alt tag. Always choose your best keyword to give title and alt tag for your image. To use these tags see the below example.

<img alt=”" src=”Image URL” title=”Keyword” alt=”Keyword”/>

Note: Don’t add too many keywords in these tags. Only put your best keyword there which better explain your post topic.
I had shared a detailed tutorial to add title and alt attribute in images for Blogger.com users. Please check the below post.

Style blogspot blogger date header

This can be a really cool addition to your blog and something that can be customized to suit your layout and design. What we are going to do in this tutorial is changing the Blogger date header background color with some simple CSS adjustments that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.

Customize the Blogger Date Header of a Blogspot Blog

Step 1. Log in your Blogger Dashboard, go to Template > Edit HTML (don't forget to make a back-up of your current template by clicking on the Backup/Restore button)

Step 2. Click anywhere inside the code area and search (CTRL + F) for the following code:

.date-header span

Below this code you should see a few lines like these:

.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

Screenshot

Step 3. You need to replace the code above with this one:

.date-header {
margin: 0px 0px -50px -190px;
}
.date-header span {
background-color: #DDEDAA;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px solid #bada55;
}
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px solid #FFBD54;
border-radius: 100%;
bottom: -50px;
content: "";
display: block;
height: 30px;
position: absolute;
width: 30px;
z-index: 10;
margin-left: 140px;
}
.date-header:after {
background: none repeat scroll 0 0 #F9F9F9;
border: 7px solid #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;
}

Customization

- to change the background color of the date header, replace #DDEDAA with the hex code of your color
- to change the date font color, replace #444;
- to change the border color of the bigger circle below the date header, replace #FFBD54

- to change the border color of the smaller circle, replace #bada55

- to set the distance between date and post, change the -190px from margin-left

Step 4. Click on the Save template button to save the changes.

So this is how you can add a new style to the blogger posts date header. Please keep in mind that codes vary from template to template - if you're having a customized template, then you might have a different CSS selector for the date header. 

Display post author, date, labels and comments with icons below post titles

In this tutorial I will show you how to add more info on your Blogger posts like blog author's name, a time stamp for published posts, labels and comment count links. Firstly, let's see how the comments link behave - when there are no comments on your posts, there would be a link that says 'Be the First to comment!' and if your post gets one comment, it will appear as '1 comment so far'. On the left side, we'll see the blog author's name, a clock showing when posts have been published and finally, the post labels.

If you want to make your blog more eye-catching by adding these details with some cute small icons along with the Blogger Author's Name, Post Date, Labels and Comments... then follow these steps below.

Screenshot:

How to Add Author, Date, Labels and Comment Bubbles to Blogger

Step 1. From your Blogger Dashboard, select your blog > go to Template > Edit HTML

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the blogger' search box

Step 3. Type or paste the below code inside the search box in order to find it:

<div class='post-header-line-1'>

If you can't find the code above, look for this one:

    <div class='post-header'>

Step 4. After this code add the following HTML:

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBsNshsf6ibLVwMUD9ETXIlt51fWFFwxSEC7qhlLUibTRHRPji1p1_MpDgkCeqW0ehIY33xpQhGPZCZI4fvHnMso0WJJAwgcCzOey9BVbwE_sgHB57XTHkraADMQR8x2WSclB3_rZoEirj/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_O8uJPETMdRzbR_R62BwVtLjCwPqZhhSfDnclYxc95Snjh15tqElTLR6xW6CgCRnTMKjrD2jK-PxN95ScR7NV5HXXraW20GP7kD32mGNseObOkx7eFb629NpSnQxIZTKJR1sfpS0LrWFY/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZTOG8oNRSAL1EONmQiG9d6HxrMnkCLDwzqKh4jG1Ap1bJcU5DmUspGGinkzBcB0o8gCdQ9uGB8EmEx2LOpvy15XFbdtIwOPbQUz6ufZU2LeQAgUZw1v-DZgwM7S0i7S85vV_J5l5saa0-/s1600/tag.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
    <span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiuKVTCBpMzBXPwlR7rktBtdhqCHjzYWjOlGr2IhxtemK4ZI3jeUoxeIFUq-DFzo8dY2lEYO4bSQ1tBrojVG4ihWWI4khfnBhe1NdMmEPU3-1hBtv2Z83iyF4rBAFNwurdxxECVkiBLup/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
    </span></div>

How to customize:

If you want to change the icons, just replace the URL addresses in blue from above with your images URLs:

1. First one is the icon for the Author
2. 2nd one is the Clock icon
3. The 3rd one is the icon near the Labels
4. And the last one is for the comment bubble
Step 5. Save template... and you're done!