Recomended
Sunday, July 6, 2014
How To Submit Blogger Sitemap To Google 2014
Saturday, July 5, 2014
How To Add Blogger Contact Form Into A Page 2014
Hiding Contact Form From Your Sidebar
Add Contact form widget on a Static Page
Now we’re going to add the contact form widget to a stand-alone page. Follow below steps and make customization in the bottom of the steps.
1: Click on ‘Pages’ tab on the left hand side.
2: Now click on New page >> Blank page.
3: Switch to HTML mode and click on ‘options’ tab on the right side. Then select the “Use <br> tag” option in the Line Breaks section like below.
4: Now paste below code on the empty Edit HTML field.
<form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
- Change highlighted words with relevant your own words.(i.e: for Your Email,Type your Email address)
- Replace Required message instead of red color star symbols(*)( i.e: (required) )
- Change Send with wished text to be shown on Submit button.
Replace Newer,older and Home navigation Links with Image in Blogger 2014
Replace the newer, older and home navigation links on your blogger blog with an beautiful image and catch the eyes of viewers, As Blogger's default Older, newer and Home navigation links are not so creative, almost all the Bloggers are using images for post navigation in their Blog. To do so you should first prepare 3 images with Good Creativity because this is a one time process and their is no need of altering it in future. If you wish to change it, you can as usual change it at any time. I hope you are ready with your images and now lets step into the coding part. In this tutorial i am going to explain simple steps on how to replace these navigation links(which is at the bottom of each posts) with an image of your own.
Replace Blogger Navigation Links with customized Images
1. Go to your Blogger dashboard --> Design-->Edit HTML(Tick the expand widget option).
2. Find(CTRL+F) The Below code.
NOTE:
You may get two codes with same name, so watch the changes after replacing a particular code
<data:olderpagetitle>
Replace it with the below code.
<img src="YOUR IMAGE URL FOR VIEWING YOUR NEXT POST" />
3. Now Find the below code.
<data:newerpagetitle>
Replace it with the below code.
<img src="YOUR IMAGE URL FOR VIEWING YOUR PREVIOUS POST" />
4. Now Find the below code.
<data:homemsg>
Replace it with the below code.
<img src="YOUR IMAGE URL FOR VIEWING YOUR HOME PAGE" />
Add Paypal Donate Button to Blogger blogs 2014
Paypal is one of the trusted company from many years for doing online money transactions. If you want to receive some online money or sell your items online, kindly register with Paypal for doing your online transactions which is more secure and safe. But in this post i am posting about adding Donate button of paypal to your blogger blog. To do so, you must first register your account with paypal and verify your email address and then verify one of your bank account or debit/credit cards so that The online funds received will be directly deposited to your bank account and the online purchases done will be deducted from your paypal account balance.Paypal is one of the major resource that every webmasters should have for their secure online transactions.
Add Paypal Donate Button to your Blogger Blog
1. Register an account with Paypal with your exact details.
2. Verify your Email address by clicking on confirmation link sent to your Email Id.
3. Attach your Debit/credit card or you can also attach your Bank account with paypal.
Paypal will do a two small deposits to your bank account, check your bank transactions and enter the two amounts that paypal have deposited to your bank account and this confirms your bank account and gives you complete access for online transactions like sending and receiving money.
4. Now Copy The Below Code.
<!– begin paypal donations by www.Bloggertricks.biz–> <div align="center"><form method="post" action="https://www.paypal.com/cgi-bin/webscr"> <div class="paypal-donations"><input type="hidden" value="_donations" name="cmd"/> <input type="hidden" value="YOUR PAYPAL EMAIL" name="business"/> <input type="hidden" value="YOUR BLOG URL" name="return"/> <input type="hidden" value="You found the information helpful and want to say thanks? Your donation is enough to inspire us to do more. Thanks a bunch!" name="item_name"/> <input type="hidden" value="USD" name="currency_code"/><input type="image" alt="PayPal – The safer, easier way to pay online." name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif"/> <img width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt=""/></div></form> </div><!– end paypal donations –>
5. Replace YOUR PAYPAL EMAIL with the Email Addres of your Paypal account(Email Address which you used to register with Paypal) and Replace YOUR BLOG URL with the URL of your Blogger Blog.
6. Paste the Altered Code where you want your paypal donate button to appear.
NOTE:- Adding donate button on your sidebar(Using html/javascript widget) or At the footer of your blog post is recommended.
That’s It. . . !!!!!
How To add Disqus Comment System for Blogger 2014
Disqus comment system have now taken advanced changes recently. Yes, I Was just amazed To look over the new user interface of the Disqus comment system on one of my blogger blog. One Of the most inspired comments plugin called Disqus have adopted a new user interface which is more flexible and convenient and it is mainly a spam protected comments system for bloggers. In earlier days i was using blogger's default comment section with some customization of my own, but when i came through the flexibility of Disqus, i adopted the Disqus comments plugin for all my blogs and just left struggling with Blogger's default comment section.
Disqus provides various types of login features for commentators to comment on a blog. If you are still not aware of Disqus comment system, just don't waste your time in customizing blogger's comment section and register with Disqus right now and follow the simple steps to have a powerful comments system installed on your blogger blog within few minutes.
Disqus Comment System for Blogger
Installing Disqus comment system
1. Go to Disqus official website and register for an free account.
2. After completing the registration, go to Disqus comment system installation page and choose your blogging platform.
Note:-
If you have multiple blogs, you will notice a switch site? option on the Disqus comment system installation page, click on it and choose the blog you want to add this comment system on.
3. Follow the simple step by step instructions and click on the installation button in the 3rd row.
4. You will be taken to widget importing page on blogger, select the blog you choosed in Disqus and then click on the Add widget button.
5. Finally Save your blogger layout.
Importing Blogger comments into Disqus comment system
6. If you have lot of existing comments on your blogger blog, then nothing to worry. Just go to the Disqus comments importing page which is denoted by tools>>import at the bottom of the installation page.
7. Choose the platform and you will notice import from [platform name] button, click on it and follow the simple procedure. You can also enable synchronization by clicking on the enable sync button below the import button to keep your Disqus comments synchronized with blogger.
Conclusion
Disqus comment system is one of the favorite choice and it is being used by lot of users today. Give it a try and let me know if you face any issue at any moment. Kindly leave your feedback and opinions in the comment section below. Happy blogging pals :)
Optimize your Blog for Search Engines 2014
Optimizing a blogger blog for search engines deals with in depth process of optimization in various aspects. There are few one time optimization techniques which you must really spend some time for. So I am covering some of the better optimizing tactics which every blogger should be aware of. In This post i am going to help you in optimizing your Comments, Labels and Archive links for better SEO. This involves a small one time process and your blogger blog will be set for better optimization than your present Seo(Search Engine Optimization) status.
Writing a search engine optimized blog post may be quite easy task after adopting various strategies of writing a SEO friendly blog post. But when we think about optimizing a blog for search engines, it makes a big deal. But however we need to optimize our blog step by step apart from getting messed up on a single day. So here is 3 easy optimization techniques which you must look over.
Optimize your Blog for Search Engines
1. Go to your Blogger Dashboard --> Template--> Edit HTML(Tick the Expand widget template option).
Comments Optimization:
2. Search(CTRL+F) for the following code
expr:href='data:post.createLinkUrl'
2(a). Replace the above code with the following code.
expr:href='data:post.createLinkUrl' rel='external nofollow'
3. Now search for the following code
a expr:href='data:comment.authorUrl'
3(a). Replace the above code with the following code.
a expr:href='data:comment.authorUrl' rel='external nofollow'
This completes optimization of your comments section..
Archive optimization:
4. Now search for the following code
<a class='post-count-link' expr:href='data:i.url'>
4(a). Replace the above code with the following code.
<a rel="archives" class='post-count-link' expr:href='data:i.url'>
This completes optimization of your blog archive section..
Label Optimization:
5. Now search for the following code
a expr:href='data:label.url'
5(a). Replace the above code with the following code.
a expr:href='data:label.url' rel='tag'
6. Finally Save your template.
Add Google Adsense ads Below Post Titles in Blogger 2014
Google Adsense is the top most ads publishing network throughout the web today. Maximum earnings of almost all the bloggers are being obtained from none other than Google adsense ads and that is why every bloggers represent Google adsense as the maximum revenue generator. That doesn't mean that placing the adsense ads everywhere on your blog gets you maximum revenue. Adsense ads must be placed officially and elegantly to gain more clicks, thus generating more income.
One of the best ad slot choosed by each and every bloggers is, placing the adsense ads just below the post title and before the post body thus ensuring maximum exposure and more attraction towards it. In this post, I am going to give you the tutorial on how to place your adsense ads just below the post titles.
Google Adsense ads placement below Post Titles in Blogger
1. Go to your Google adsense dashboard and create an new ad unit with dimensions corresponding to your blog and finally copy the html code of your ad unit.
2. Open HTML Encoder Tool Online
3. Paste your adsense code inside the box provided and copy the Encoded code.
4. Now Go to your Blogger Dashboard --> Design --> Edit Html(Tick Expand widget template option) .
5. Now Find(CTRL+F) The Below Code.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
6. Paste your Google adsense encoded code just below it like this.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<div style='float:left; margin-right:5px;'>
YOUR GOOGLE ADSENSE ADS</div>
Now You can View your Google adsense ad unit appearing inside your blog posts and below your post titles when you visit a post of your Blog.
That's It. . . . .!!!!!
Domain Forwarding : Redirect Old Blog to New Blog Address 2014
Domain forwarding is one of the most important concept to be learnt in blogosphere. A time comes in every newbie blogger's life when we really wants to shift from a old blog address to new blog address. Closing the old blog and starting to blog with new address may not be a difficult task at all. But, what if your old blog is a pretty popular one with lots of regular visitors and so much of readership!!?. At such a moment, you will really have to take a small step before moving from your old blog to new blog address to avoid losing visitors of your old blog. The step to be taken here is named as nothing but domain forwarding.
Domain forwarding is nothing but redirecting your old blog to your new blog address thus allowing your blog visitors to get rid of your new blog address and stay updated with your new blog. So today i am going to guide you on how to add redirection meta tag to your old blog so that it takes your visitors to your new blog automatically thus keeping your blog readership safe and secure. Here is the simple and easy tutorial on it.
Domain Forwarding
Adding the Meta Redirection tag
1. Go to your Blogger dashboard --> Template --> Edit Html.
2. Find(Ctrl+F) <head> and paste the below code just below it.
<meta equiv="refresh" content="0;url=http://NEW_BLOG_URL"></meta>
3. Note:: If You are using a classic template, then paste the below lines.
<meta equiv="refresh" content="0;url=http://NEW_BLOG_URL">
4.Change The NEW_BLOG_URL with the Url Of Your new Blog.
5. Save The Template.
Conclusion
The very important point to be noted in this tutorial is, you must keep your old blog active and should not delete it. Once after the existing readers of your blog gets aware of your new blog address, you can then delete your old blog. Whenever a visitor visits your old blog address, the browser will automatically refresh and takes your blog visitor to your new blog address.
That's It Pals. . . . .. !!!!!!
Blogger Layout: Change Width of Header,Footer,any Section 2014
The structural blogger layout will be as shown above. Blogger layout is divided into 5 parts namely header, outer wrapper, main wrapper, sidebar wrapper and footer as shown in the figure above. To edit/modify the style of a part, you must first identify the layout you want to modify and then modify the style code of that particular section. In this post, i am giving you the tutorial on modifying various sections in the blogger layout and the codes explained below may be of slight change with respect to your blogger template.
Let me consider that you identified the section you want to edit in your blogger layout. Let me illustrate the style codes of these 5 sections. Before going to modify the width of any section, you must be aware that - width can be declared in % form or in px(pixels) and if you specify the width in % form, then your blog will start displaying width depending on the Screen resolution of the pc the visitor is viewing from. As the main concept of this blog post is to guide you on editing the width of various sections of your blogger layout, i will be concentrating on only the width modification here. You can however learn basic Css and modify the style of any section as you wish.
Modifying the Width of Blogger Layout Elements
Go to your blogger dashboard --> Template --> Edit Html ( tick the expand widget template option).
To Change Width Of Outer Wrapper
Find This Code:
body{background:#111 url(); width:980px; color:#333;
font-size:12px; font-family:Arial,Tahoma,Verdana;
margin:0 auto 0; padding:0}
OR
#outer-wrapper{background:#111 url(); width:980px;
color:#333; font-size:12px; font-family:Arial,Tahoma,
Verdana; margin:0 auto 0; padding:0}
Change 980px to your desired width and you are done!!..
To Change Width Of Header::
Find This Code:
#header{background:#000 url(); width:960px; height:155px;
color:#fff; font-size:11px; margin:0; padding:0;
overflow:hidden; margin-top:-4px;}
Change 960px to your desired width and you are done!!..
To Change Width Of Sidebar Wrapper::
Find This Code::
#sidebar-wrapper{float:right; width:320px;
margin:0; padding:0 0 10px; display:inline}
Change 320px to your desired width and you are done!!..
To Change Width Of Footer Wrapper::
Find This Code::
#footer{width:660px; clear:both; margin:0 auto;
padding-top:15px; line-height:1.6em; text-transform:uppercase; letter-spacing:.1em; text-align:center}
Change 660px to your desired width and you are done!!..
Hint:-
If you are unaware of finding a particular code in your blogger template html. There is nothing to worry. Just press Ctrl and F buttons together and you will notice a search bar on your browser, enter the code to be searched in it and press enter.
Backup the Template before modifying!!!
Before doing any modifications in your template Html, make sure to backup your template i.e.,
go to your blogger dashboard --> Template, you will find the backup/restore option. Just click on it and download your template before doing modifications.








