Add | Put | Customize Bullet List Style With Colorfull Circle Hover Effect In Blogger Blogspot

In this tutorial i will show you how to add or customize Bullet List with amazing two Color Hover Effect in blog post. In normal position means without place mouse on bullet it looks blue but when you run mouse on bullet links then it is changes into green color which is very good looking and nice effect and reader of your blog post is also feel nice and good. It shows your post as a professional post or blog. These types of small changes in blogger make your blog better and good looking or professional blog.

Add | Put | Customize Bullet List Style With Colorfull Circle Hover Effect In Blogger Blogspot

How To Add Or Customize Bullet Style In Blogger With Simple Steps:

Now we are going to add this effect in our blog if you want to add in your blog then follow the below steps.

Go to Blogger.com.
Go to Template.
Click on Edit HTML.
Press Ctrl+F in HTML Body to appear search box.
When search box is appear in top right corner.
Paste below tag in search box and press enter.

]]></b:skin>

When you find this tag/code in HTML Body then copy below coding and paste above/before the ]]></b:skin> tag.

.post ul { list-style: none; } .post ul li { line-height: 1.4em; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXDNMdb6CUpsZRnY-MksJfDdmxcxIXNyJ1mHEdeai_EBJDpJ0Wf8UiYv1x6o9bv9-SwFaayOVGBRj_bwIHLJMZr6pUFl5XTnrxEg8_OvCzQe8gEr6nT0U2eqtRGR79SCGI61AZJyIP8B4/s1600/blue-bullet-icon.png) no-repeat scroll 0 10px; margin: 0.3em 0; padding: 0 0 0.8em 20px; } .post ul li:hover { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwJ6du7ne3-tgYsrshfscR73BZoDRPKce9b9eKlAiQCy5_DN5nsg3wk5rf_I5vKfHvzwEPslYdZ7kp3hDEd1dqWuc8PJzLgVZBcJA_1VFb9bN7w-0zc7wbLg88NR2O5kP2Ua1XjmtCrlc/s1600/green-bullet-icon.png) no-repeat scroll 0px 5px; } 

 

Customization In Above Coding:

If you want to increase the size of hover circle the change the value of 10px with your desire value.

Also if you want to add image by removing the colorful circle then just replace the URL'S (which is highlighted) with your image.

Related Articles:

How I Can Add Recent Post Moving In Down And Upward Direction  

How to Add Next Page Or Previous Page Navigation Number For Post In Blogger 

Add Flickr/Picasa Web/Photobucket/Other Albums Slideshow On Blog Easy Tricks  

How To Add | Put | Insert | Copyright Warning Message In Blogger Post To Prevent Content  

Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger  

Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot 

Add | Changes Labels Or Tags With CSS Button Beautiful Color With Hover Effect  

Best Social Sharing Tool Box With Share Post Count Below Every Blog Post 

Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot

In this tutorial i will give you some Beautiful and Good Looking Sharing widget/gadget code which you can easily add on your blog for Social Media Sites and also share you content or post on these social website for get visitors by sharing your content.

I am going to give you some HTML/Javascript Coding which you can easily install in your blog by visiting layout in blogger. First i show you small tutorial for adding these widget or gadget in blogger layout and after that we also install some sharing widget in blog post like Facebook Sharing icon in float right or left side or also add in below every post.

Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot

In this below tutorial i will give you only those code which is easily install in blogger just adding code in HTML Box.

Go to Blogger.com.
Go to Layout.
Find HTML/Javascript.
Click on it.
Now paste any of your desire coding in this box and check it out and also if you can not like it then replace with other code.

Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin
Easy | Best | Simple Tricks To Make Money From Youtube | Chitika


The Code are give below pick any one and add this by following above small tutorial.

The name of this Social Sharing Widget Is.
1) Touch Me Social Media Sharing Widget.

<style>
/*--------TOB Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}

.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}

.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

</style>
<p style="display:none;">Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot<a href="http://trickofblogging.blogspot.com/2013/06/add-best-cool-social-bookmark-share-gadget-on-blogger.html">Beautiful Blogger Widgets</a></p>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/blogspot/LPkip" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/u/0/113224303869289827964/posts" rel='nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/pages/Trick-Of-Blogging/447187668684161" rel='nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/trickofblogging" rel='nofollow' target='_blank' ></a>
</div>

Now Change the Orange Highlighted Link with your RSS Feed link of your blog.
Change the Pink Highlighted Color Link with your Google+ Profile link or post of your blog.
Change the Red Highlighted Color Link with your Facebook Page link of your blog.
Change the Blue Highlighted Color link with your Twitter Page or Profile link.



2) Floating Social Media Social Sharing Widget For Blogger:


Just follow the small above tutorial and add this in your blogger blogspot easily.

<p style="display:none;">Floating Social Media Buttons for Blogger by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p> <style type="text/css">
* html #ss-box{
position: absolute;
}
#ss-box{
width: 70px;
background:#ffffff;border:1px solid #dedede;border-radius:px;-moz-border-radius:px;-webkit-border-radius:px;position:fixed;left:4%;
top: 20%;
height:200px;
height:auto;
}
#ss-box div{
padding:6px 6px 4px 5px;
}
#icon_twitter,#icon_digg{
margin-left:-2px;
}
#icon_linkedin{
margin-left:-5px;
}
#sfs{
margin-left:-5px;
}
#ss-get{
bottom: -20px;
clear: both;
color: #666666;
font-size: 9px;
left: 18px;
position: absolute;
text-align: center;
text-decoration: none;
}

</style>

<div id="ss-box">
<div id="ssl-box">

<div id="icon_facebook">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=235665053131744&href&send=false&layout=box_count&width=50&show_faces=false&action=like&colorscheme=light&font&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:60px; margin-left: 2px;" allowtransparency="true"></iframe>
</div>

<div id="icon_googleplus">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>

<div id="icon_twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div id="icon_digg">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div id="icon_linkedin">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
</div>

</div>
<a id="ss-get" href="http://beautifulbloggerwidgets.blogspot.com/2012/03/floating-social-media-buttons-for.html">Get This</a>
<div style="clear:both;"></div>
</div>

3) Spinning Social Icons Sharing Widget | Gadget For Blogger Template:

 

This Social Icons sharing buttons are formed in CSS3 Coding which you can install in HTML/Javascript Box and save and enjoy it.

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By TOB */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

/* Spinning Social Icons Widget By TOB */
</style>



<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvCYPlfJGfj1-nZ8TkxztHsbKtsVsboeUCtpRBCy_MrMquSHD3-Q84Lbp1DDDuwV3oTAUKtmlR5_Q58hPJuqmmAoTzhLWoT7LT6BXyWQBHlj6YZR8vSVhJCFWufjoJJvzp8psaXuVbly4/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAFINrnARsBpzttuafuuw8kOuOKKvwfGeF3hkMEqv-QpwKYMC__wbBurSqwX24ALxoAqpHzNCfSMy9DJxihewd1ayQ8_2eKMBm8AOUs_SCtQq2hM4Y9qJbsUY9TL0GPcAnmKT59WuyLqs/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBasW9QRKOldIa7GylUqizw7oa4DPc0qKl8Zu1mAPOUe6l862jwdbAHDlFZ-HiRVuTYbwUmM2o1EEz2PdbSu0fZ1egTTZ81a8vjSp9CMb3OdOy-tWWUaHTQMzOwAUItyqH-eQvNfcR1x4/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWFxWmveQ-pyHOWHZPMYnYnfzdueZ96A2Xl7qANzJ0EBhS1J10798FrsNh23nBSLkSkebhM-gRvD8AY9PdirvOOW0LxXlg7Ea50Yh2VP3unoJqr71jQsJrfdKEo4GJaXzNwBCu1ElE8g/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5wau5KCbpbuLcgT0hD_1pQB82ivV5Tx_UG8cnWRD6yUMpxncARaLzdk6itFh90TxEvj2kdbFM1zmbNXeOBVpMQ4B8NI1j92KAW0HZ5zWcHbNfUa1Xsr7wSSDZZ_wuFdh8aOgczXv9NE/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

4) "Add This" Widget For Blogger For Social Sharing:

This is the widget or gadget for blogger simple adding in HTML Box and choose your desire place where you want to add or put this widget for sharing easily.

<!-- Add This Code Starts -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ec4dd3d1e59e9dc' type='text/javascript'/>
<!-- Add This Code Ends -->

5) Social Bookmarking Or Sharing  Widget With Egg Sliding For Blogger Blog:

 

Go to Blogger.com.
Go to Template.
Click on Edit HTML.
Press Ctrl+F in HTML coding box.
Paste the </head> tag or code in this appear search box and press enter.
When you Find </head> and paste the following code just above it.

Use Best Blogger Settings Option Basic For SEO And Others Option Links
Customise Blogger Default Template To Make Professional Template

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Now find for </body> and place the following code just above it.

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;],{title:&#39;<data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>

Save Template.
Now click on View Blog and check this out left bottom the Egg Type sharing widget with beautiful effect is appear.

6) Cool Social Sharing Shareaholic Sassy Bookmarks Widget For Blogspot:

Go to Blogger.com.
Go to Template.
Click on Edit HTML.
Press Ctrl+F to find the </body> tag.
When search box appear then paste </body> tag in it and press enter.
Now paste the below code just above/before of the </body> tag.

 <!-- Start Shareaholic Sassy Bookmarks HTML (trickofblogging.blogspot.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML (trickofblogging.blogspot.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End Shareaholic Sassy Bookmarks script (trickofblogging.blogspot.com) -->

Now Save your Template.
Click On View Blog and enjoy these amazing effects.

If you have any problem to adding these or other widgets then contact me and also leave your nice comment on my blog then i will definitely reply you with my best answers.

Related Articles:

How Easliy/Simple To Manage Page Layout In Blogger Blogspot
Add Flickr/Picasa Web/Photobucket/Other Albums Slideshow On Blog Easy Tricks
Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks
Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger
Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot
Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin
Add | Make About Us Page Widget | Gadget On Your Blog Footer Or Sidebar
Add | Put Three Tab Gadget/Widget In Blog Layout Sidebar On Blogspot

Add | Changes Labels Or Tags With CSS Button Beautiful Color With Hover Effect

In this tutorial i will show you how to Change or Replace simple labels with CSS Buttons with hover effect in blogger blogspot. This work is done in the CSS Coding and if you have proper knowledge using CSS then this trick is so simple for you and you can easily do that. If you have not familiar with CSS Language then don't worry i give simple and easy tutorial for doing this trick. Blogger platform is one of the best way to share your content to other peoples and also tell them about yourself with the help of your content. If you share your helpful and good stuff to people then they use your content and remember your to giving thanks. If you want visitors are come on your site and stay more time on your site then you should make Best and Good Looking Blog or Site for this means. I have publish many post on how to make blogger good looking and how you put SEO in your blogger blogspot, How you can Make money and how you can choose best template for your blogger blogspot. Now if you want to do these tricks then i give you some links after this CSS tricks first do that.


How I Can Use Webmaster Tools Properly For Blogger
How I Can Make Internal Links In The Blog Post To Increase Rank

Now Lets Start The Tutorial Add CSS Bricks To Replace Or Change Lables:

If you have not adding this trick in your template then ready now for doing it. I give you small tutorial which tell you in details what you do for having it.

Add | Changes Labels Or Tags With CSS Button Beautiful Color With Hover Effect 1

Go to Blogger.com.
Go to Template.
Click on Edit HTML.
Press Ctrl+F in the HTML Body Box.
When Search Box is appear in the HTML Body Box.
Then copy below code/tag and paste in this box and press enter.

]]></b:skin>

After appearing this tag copy the below CSS Coding for Labels and paste just before or above this code.

/*--- MBL Custom Label Cloud With CSS3 --- */
.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }

.Label a:hover{
color:#000 !important;
background:#ff0; }

Now Save your Template.


And now turn to active the labels to get effect.

How I Make My Blogger Good Looking Best Tricks

Add Labels By Going to Layout:

Go to Blogger.com.
Go to Layout.
Click On Add A Gadget.
Go to Labels.
Click on Labels.
Now select or tick same as below pic.

Add | Changes Labels Or Tags With CSS Button Beautiful Color With Hover Effect  2

Now click on Save Button.
And View your blog.
You have done your work easily and enjoy it.

I have also many widget or gadget to add in blogger and make blogger look like wordpress and also to make your blog Beautiful.

Related Articles:

Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks
Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger
Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot
Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin
Add | Make About Us Page Widget | Gadget On Your Blog Footer Or Sidebar
Add | Put 50 Flag Translator Widget | Gadget On Your Blogger Blogspot
Add | Put Three Tab Gadget/Widget In Blog Layout Sidebar On Blogspot
Create | Make | Add | Set 404 Error Page In Blogger Blogspot Easily

WordPress Best | Easy Plugins Installation List For SEO And Make Professional Wesbite After Blogger

This tutorial show you how you can easily Install Plugins for your WordPress website with easy use and make your Website Blog Good Looking with simple and easy tricks. If you have a WordPress Blog with .COM or any URL with WWW. then you can add these plugin listed below and make your website best and get also more Organic Traffic on your website by using these plugins. I have write many post on my blog about WordPress Search Engine Optimization. If you want to increase your WordPress Blog traffic then use these tricks and enjoy.

WordPress Best Easy Plugins Installation List For SEO And Make Professional Website After Blogger 1

 

These Below List Are The Main WordPress SEO Plugins:

I discuss these listed below plugins with detail and the best use of these plugins.

1. All-In-One SEO Pack.

2. WordPress SEO by Yoast.

3. SEO Ultimate.

4. SEO Friendly Images.

5. HeadSpace2.

6. Platinum SEO plugin.

7. SEO Slugs.

8. SEO Post Links.

9. Automatic SEO links.

10. WP Backlinks.

11. SEO Title Tag.

12. 404 SEO Plugin.

 

 

1) All-In-One SEO Pack:

All-In-One SEO Pack is one of the most common and best SEO plugin for WordPress. This plugin also count in one of the best plugin for website to ping in Search Engine Ranking. If you want to add this plugin in your site then it is very simple in use and easy to install i also give you a link of this plugin but you can install this plugin just go to your website admin. The link and the small tutorial is given below.

Download All-In-One-SEO-Pack Version 2.0.2   Download Verison 2.0.2 


Login in to WordPress Admin.
Go to Dashboard.
Go to Plugin.
Click on Add New. See in picture/image below.

WordPress Best Easy Plugins Installation List For SEO And Make Professional Wesbite After Blogger 2

In the Search Plugins Box.
Type the same name of plugin which you want to install link. All-In-One SEO Pack and press enter.
When you press enter the plugin list are shown click the All-In-One SEO Pack plugin to install and return to back plugin page. Now your plugin is install and it works when you write your first post below the post writing page it will show and you add Title Tags, Description, or Significance Keywords.

SEO Tips How Keyword Take Your Website On Rank

2) WordPress SEO by Yoast:

It is also the Second Best SEO plugin for WordPress website it has also extensive features. To install this plugin in your WordPress website also very easy tricks. Follow the same above tutorial and paste the plugin name in the Plugin Search Box and install it in your website. I give you also the link of this plugin which redirect you on the plugin site.

Download the WordPress SEO By Yoast  Version 1.4.7    Download Version 1.4.7

 

3) SEO Ultimate:

SEO Ultimate also one of the best SEO plugin this plugin quickly ping your website in search engine and increase your website in search engine ranking. In early days of WordPress All-In-One-SEO-Pack is reigning King of WordPress SE O Plugin but now a days it is also the best plugin for WordPress. This features packed with lot of SEO related modules.

Use Google Better Keywords Search Engine Friendly For Wordpress

Download the SEO Ultimate Version 7.6.1      Downlaod Version 7.6.1

 

4) SEO Friendly Images:

By SEO Friendly Images you can give ALT relation to your images and Meta tags and increase your website traffic with Google Images Traffic. Install this plugin same as above tutorial and also by visiting the redirect link which is given below.

Download the SEO Friendly Images Version 2.7.5   Download Version 2.7.5

5) HeadSpace2:

HeadSpace2 is very powerful plugin to manage Meta-Data and handle a wide range of SEO tasks.This plugin allow Admin to manage the Title Tags of their blog post and the custom description of every post. This plugin also increase or improve the search engine ranking. For download or install this plugin visit below link or use the above tutorial.

Download the HeadSpace2 Version   3.6.38         HeadSpace2 3.6.38

6) Platinum SEO Plugin:

This Platinum SEO Plugin work with a host of features like automatic 301 redirects for permalink changes and it also generate the automatically META Tags of your blog post and also Avoid Duplicate Content, it has Search Engine Optimized post and page titles and this plugin contain many other features. For download or install this plugin click below link or install this plugin according to above tutorial.

Download the Platinum SEO Plugin Version 1.3.7   Download Version 1.3.7

7) SEO Slugs:

This SEO Slugs plugin work very well it optimize your post link with better search engine ranking and also make automatically your post permalink search engine friendly because this plugin remove the all these word which is not such important for search engine like in, is, my, you, what, the, or and many more words like these. For download this plugin or install this plugin visit below link.

Download the SEO Slugs Plugin Version 1.0   Download Version 1.0

  

8) SEO Post Links:

This SEO Post Links plugin work same as SEO Slugs Plugin it also shorten the permalinks of your post and make necessary keywords for search engine friendly for your post. For download or install this plugin on your website visit below link or work according to above small tutorial in first plugin details.

Download the SEO Post Links Plugin Version 1.0  Download Version 1.0

9) Automatic SEO Links:

Automatic SEO Links is the plugin which is use to internal linking for search engine ranking. When you install this plugin on your website blog then your same keywords make linking and you can also select or adjust the Anchor Text, Title or (relation) means rel "nofollow" or "dofollow". For adding this plugin in your website visit or click below link or install this plugin easily.

Download the Automatic SEO Links Version 2.0.1   Download Version 2.0.1

10) WP Backlinks:

WP Backlinks is the plugin which is used to make backlinks for our site and we can not put or do so much work to  make our website backlinks. This plugin work like when you install WP Backlinks plugin in your website it make a button link in sidebar widget and this allow webmaster and bloggers to submit a link for link exchange. If also has the best option in it if you want to display different link on different pages then this plugin is better than other.

11) SEO Title Tag:

This SEO Title Tag plugin is very easy to use and install it also optimize the Title Tags in your WordPress blog post. It allow to override a page's title with custom one, and you can easily editing of title tags, title tags for 404 Error pages.

Download the SEO Title Tag Version 3.4.1      Download Version 3.4.1

12) 404 SEO Plugin:

This plugin is one of the best plugin in my view because if visitor come on your blog and if they found 404 Error on your blog page they instantly left your blog and visit another. Therefore add this awesome plugin in your WordPress because they customized your blog 404 Error easily and give the other post links of your blog according to Search Queries which visitor want to find. For download and install this plugin in your WordPress site visit below link or follow above tutorial.

Download 404 SEO Plugin Version 1.3.2      Download Version 1.3.2

The Best And Most Important Plugins Having SEO:

 

These plugin which i discuss below is most important plugins about SEO and it is also the best for setting WordPress SEO. If your website not index by any search engine then how traffic comes on your site. That's why use this plugin and get a lot of visitors form search engine by Submitting Sitemap of Website/Custom Domain, Adjust Robot Meta Tags (for blog also) and also verify your domain in Google Webmaster Tools and Add Google Analytic on your website using your Gmail account.  

• Google XML Sitemaps:

• Robots Meta:

• Google Webmaster Tools:

• Google Analytics:

 

 

Google XML Sitemaps:

This plugin is one of the best and more reliable plugin to generate the Sitemap in XML file of our website. Google XML Sitemap generate the XML Sitemap which supported by the Google, Bing, Yahoo, Ask, AOL and many other major search engine. If you should get traffic from these main search engine then submit your website sitemap to major search engine. Google XML Sitemap is the plugin which make your website structure and Google Bot, Bing Bot, and other search engine can easily access the data of your website because they get your website structure means keywords, post, internal linking, meta tags, and many more things. I have also a best plugin to share with you which ping your website to major search engine Pingomatic it increase the visibility of your blog in search engines. You just add the homepage URL and RSS Feed URL in this form and ping it. Now to Install or add this plugin in your site or blog visit below link or also type this Google XML Sitemap Generator in Search Plugin Box.

How I Submit Sitemap of My Website In Google Search Engine

Download the Google XML Sitemaps Version 3.2.9     Download Version 3.2.9

Robots Meta:

Robots Meta Tags plugin is best for SEO because this plugin allow us to Add Meta Tags to individual post and pages. It is also very easy to use and install. It allow to webmaster to block comment indexing in search engine also login or admin page. For installation of this plugin is same procedure.

Download the Robots Meta Plugin Version 3.3.1       Download Version 3,3,1

Google Webmaster Tools:

Google Webmaster Tools is the best way to keep Website Health Good because in webmaster tool we work on every thing behind our website. Website Health is very important for any blog or website like Crawler Errors, Crawl Stats, Blocked URL, Index Status and most important is Malware check daily. Sitemap, Remove URL, Content Keywords and many more. I have write many tutorial on Google Webmaster Tools i give you some link below by using this you can easily access or control Webmaster tools properly.

Add Or Verify Site/Domain With HTML File Or Meta Tags In Webmaster Tools 
Sitemap of Your Blog Is Submitt to Major Search Engines
How I Can Use Webmaster Tools Properly
WordPress SEO Tips and Trick You Need
How To Increase Index Status In Webmaster Tools Tricks For Better SEO

Google Analytics: 

Google Analytic is the best tool powered by Google by using this tool we can easily check how many visitors comes on our blog or website and also how many from search engine how many from referrals, how many direct. They have lot of features but now my post is to much long that's why i want to finish this post now. To add this Google Analytic Tools  on your website for verification and also for tracking your visitors. Now after few days i will write post about Google Analytic all features discuss one by one in details. Now you just add this Analytic on your website and enjoy.

How To Verify Or Add Custom Domain With Analytic Code In Webmaster Tools

If you want to ask me any thing about Webmaster Tools, Google Analytic, Blogger SEO, Blogger To Make Money, Best SEO Tips, Increasing Traffic Using Social sites and many more about SEO and bloggers then feel free and comment to me and also contact us using Contact Us page write your message and feel free and wait for reply.

Related Articles:

How Use Social Website To Increase Your Website Traffic
How To Make Sitelink For Better SEO
Get Google Page Rank With In 1 Month By Simple And Easy Tricks
How To Easily Make Money With Affiliate Marketing Blogger /Website
How To Make Website Like My Blogger Tricks To Get Best Alexa Rank
Simple | Easy Tutorial For Transfer Blogspot To Website
How I Can Use Crawlers And Indexing Tool In Blogger
http://trickofblogging.blogspot.com/2013/02/how-to-increase-website-ranking-from.html 

Customise Blogger Default Template To Make Professional Template

This tutorial tell you how to Customize Blogger Default Template in Professional Template to make good looking blog and easy to upload the other third party template in your blog. Blogger Blogspot is one of the biggest platform for bloggers to keep blogging and write good stuff on our blog. If you have choose the blogspot for publish your Quality Stuff/Quality Content then i like your choice for choosing this platform. I really appreciate those people who make blog on blogspot or choose Custom Domain after blogspot. I have write many post to make your blog Good Looking to attract more visitors on blog or also write post to make your blog User-Friendly. I give you some tips to make blog better for Search Engine or User-Friendly.

First i start my post with customization of blogger template to changes in professional template then i give you some tips and techniques to make it Search Engine Friendly or User-Friendly.

Customization Of Blogger Blogspot Default Template Into Professional Template:

Before customization you should select the best and more beautiful template which blogger platform provide us by signing up in Blogger.com. If you select the third party template for your blog then you can not customize your blog with your choice that's why always use the blogger default template it has lot of benefits like if you want to run Google Adsense Account on your blog means you want to show Google Ads on your blog then first you apply for it and after approval you put ads on blog and if you can not use User-Friendly Template for blogger or not make your blog Search Engine Friendly then you never get Adsense account because Google Adsense like those template which is user friendly or search engine friendly.

Customise Blogger Default Template To Make Professional Template

Start Customization In Blogger.com:

First Make blog on blogger blogspot if you not already make then click below link to make blog on blogspot with simple steps start to end. Now when you make blogspot then ready to customization of your blog.

Make Your Own Free Blog At Blogger.Com

Go to Blogger.com.
Go to Template.
Click the Orange Button with Customise link.
Here you can see these below five heading for customization of your blog.

1. Templates
2. Background
3. Adjust widths
4. Layout
5. Advanced 

 

Customization With Template In Blogger Blogspot: 

First choose your desire Template for blogger by just one click. But my suggestion is always choose these two template for blogger first Simple or second is Awesome Inc.

Simple Template Option:

In Simple Template Option there are many option for customization and you also select to many design by click on Simple and many template appear in simple template option. You should choose any one of them.

Awesome Inc Template Option:

By selecting Awesome Inc Template you also choose any one of design for your blog in this template option your blog background is transparent and it also user friendly but not like Simple template. Simple Template is best option in my view. I discuss these template having big reason if you want to join Adsense or want a title of Adsense Publisher because when you apply for Adsense and submit your application Adsense Engineer first look Blogger Template does it is User-Friendly or not.

Customization With Background In Blogger Blogspot:

For customization in Background of template is so simple. You can just Add or Remove background image by choosing this option and also select the main background theme color. This option is not very important you can choose your desire image for background.

Customization With Adjust Widths In Blogger Blogspot:

This option is very important in blogger customization template because if you can not fit your blog in your browser page then it is not looks good looking blog and visitors of your blog can not understand your blog template and may be they left your blog immediately/quickly. If you want to customize it then first you customize the fourth option Layout and then we adjust our blog width.

Customization With Layout In Blogger Blogspot:

Layout is one of the best option in blogger we can easily add Page Layout or Page Element with our choice. I have also select the third option of layout for my blog. For understand it view below headings.

Third Layout Option:

One Header.
One Post Body Page.
Two Right Sidebar.
Two Footer Layout.

But i customize my blog later by adding new Three Column Footer for better results or add more gadget to make my blog beautiful or user friendly.

Start Layout Tutorial:

Click on Layout link and select which Page Layout want to add on your blog template to make your blog user friendly my suggestion is choose simple layout like Header, Post Body or just one right or left side bar for adding gadget and just two or three footer layout. Now go in 3rd Option Width and adjust your width according to your new Page Layout option. Make your blog width which is fit on your browser and check your blog in all browsers means in Firefox, Google Chrome, Internet Explorer or Opera.

Customization With Advanced In Blogger Blogspot:

In Advanced option you can see to many option for make your blog user friendly or good customization of your blog. Like below you can see these main headings in advance option.

1. Page Text.
2. Backgrounds.
3. Links.
4. Blog Title.
5. Blog Description.
6. Tabs Text.
7. Tabs Background.
8. Post Title.
9. Date Header. 
10. Post Footer.
11. Gadgets.
12. Images.
13. Accents.
14. Mobile Button Color.
15. Add CSS. 

These are the fifteen option in Advanced Setting. We can easily make our blog which one we find.

Page Text:

 

First Option in advanced is Page Text by using this option we can customize the Page Text Font or also the Color or text. We make text also in Bold option and select the size of our blog post text.

Backgrounds:

We easily customize or select the Outer Background Color, Main Background Color and Header Background Color by using this option. Outer Background Color means the border line of text page. Main Background color option means text background or blog post background color. Header Background color means your Blog Title Background color which one of you select.

Links:

Links option is use for any type of link you make on your blog like your Blog Archive, Tags, Labels, RSS feed  or any one of them. Link color is use to select the color of text link, Visited color is the option which tell blog reader this links or this post is already read by him means if you visited a blog or you click one post link and then you visit this blog again the this option tells you it is already read you. Hover Color means if some one drag his mouse one post or any link then it will highlighted by your selected color.

Blog Title:

Blog Title color is easily change by just using this option. If you want to change the blog title font then go to Font and select your desire font. After that go to Title Color and change color of your blog title with your desire color and also select the size of color upto 80px.

How Manage Blogger Title Tags to Improve SEO

Blog Description:

In Blog Description option you can easily change the color of your  blog description.

How To Added Meta Tag In Your Blogger For Better Optimization

Tabs Text:

Tabs Text is the option if you want to change the color of tab text then use this option and change the tab text color with your desire color option.You can also select the desire font of the tabs.

Add Manually CSS Jqeury Drop Down Menu On Blogger

Tabs Background:

Tabs Background option is for change the color of tab background.

Post Title:

 

By using Post Title option you can easily Text, Size or effect of the font for post title.

How I Can Optimize the Post Title Mean My Post Show First

Date Header:

By using Date Header Option you can change the color of Date Text or Date Background.

How To Set | Change Desire Blog Post Date And Time In Blogger

Post Footer:

By using Post Footer option you can highlight the footer of your every blog post and also highlight the labels or link to this post. See in below picture/image.

Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot

             

Customise Blogger Default Template To Make Professional Template 2

You can make changes in post footer by changing Text Color, Background Color and Shadow Color.

Text Color:
Text Color means link, labels, or date and time color which you can setup with your own choice easily.

Background Color:
Here you can easily change the background color just selecting your desire color like my post footer color is grey you can adjust with your own color.

Shadow Color:
It is same as border color which give the effect of shadow. It is normally black in color and give the good effect of shadow.

Gadgets:

In the Gadgets option you can changes the fonts and the size of Heading or Title of gadgets. Also you can changes the alternate color of the gadgets title.

Gadget For Blogger To Make Perfect Blog

Images:

In the Images option you set easily the Border Color/Border Lines of images which is in your blog post and also you give the color of Caption Text Color with you desire color easily. Like i give Caption Text Color in my blog post images black.

How I Remove Or Change Blogger Post Image Border In Blogspot

Accents:

In Accents option you can give the Separate Line Color and also give the desire color of Tabs Borders.

Mobile Button Color:

Mobile Button Color is new option in blogger template customization here you select the color of button for mobile device.

Add CSS:

Add CSS option is now not use in add css option it is already done in Blogger Template by going Template > Edit HTML > Here we can easily add our CSS coding. If you also use then this is so simple.

Now Click on Orange Button locate on top right side corner Apply To Blog.
Save Blog and view your Customize Blog.

Related Articles:

Best Blogger Tips And Tricks For My Blog SEO Instantly
Quantity | More | Best Tricks To Use Custom Robots Tags Selection Blogger
How I Can Use Crawlers And Indexing Tool In Blogger
How I Can Make One Most Important Tip For SEO In My Blog
How to Remove 404 Errors in Blogger Blogspot
How Can I Make Earning With My Blogger Blogspot
How to Verify My Blogger Blogspot in Webmaster Tools
You Put Chitika Ads to Blogger Blogspot with Simple Steps

Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot

In this tutorial i will show you how to easily add Three Column Footer Gadget in blogger. Best blogging tricks are always easy and customize or make many changes easily. To make Blogger beautiful or Good Looking we should spend a lot of time on our blog or website. If you want a lot of visitors daily on your blog or in these visitors you want some visitors are returning people then put all your focus on your blog looking means make best and stunning blogger. When some one visit your blog then he/she just shocked to see your blog and say "What a Nice Blog". Now i am going to tell you how you can easily add the footer widget/gadget in your blog bottom easily with simple tricks. When ever you start blogging your focus should be on SEO, Good Looking Blog, Best Internal Linking, Best Google Page Rank, Good Strength Of Backlinks and Best Alexa Ranking. I have write many post on Manage Page Layout for better blog looking. If you want to also make beautiful blog then start with first adding widget or gadget in blog then add this below footer widget in blog it is the last step of manage page layout.

How Easliy/Simple To Manage Page Layout In Blogger Blogspot
How I Make My Blogger Good Looking Best Tricks
How To Make Website Like My Blogger Tricks To Get Best Alexa Rank

Widget And Gadget For Blogger Add Easily:

First Adding Widget In Layout.

1) Add Manually CSS Jqeury Drop Down Menu Blogger
2) Add Facebook Page On Blogger
3) Make Blogger Header Image
4) Add Categories Link Blogger
5) Add Recent Post Moving In Down And Upward Direction
6) Add Twitter Updates Gadget To Blogspot Blogger
7) Add PayPal Donate Button To Blogger To Make Money
8) Add Flickr/Picasa Web/Photobucket/Other Albums Slideshow
9) Live Traffic Counter Feed To See Visitors
10) Run And Float Text Line On My Blog For News Or Other Thing

Second Adding Widget Or Gadget In Template:

 

First If you can't work before with New HTML Interface then first introduce yourself with this new feature and then work easily.  Handle New Interface Of Blogger HTML Editor

1) Social Bookmarking Button Add To Blogger 
2) Read More Button In Blogger Post With Jump Break Feature
3) Add Next Page Or Previous Page Navigation Number In Blogger
4) Add Facebook Like Button in Blogger Post
5) Reduce My Blog Page Loading Time
6) Add Blog Table In Blog Post Blogger
7) Add Copyright Warning Message In Blog Post To Save Content
8) Add Put HTML Color Code Generator Tool To Your Blogger

                             

Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot

Now Let's Start The Four Column Footer Adding:

If you want to add the four column footer in blog layout by adding gadget then work according to below tutorial.

Go to Blogger.com.
Go to Template.
Go to Edit HTML.
Now first download your full template in your computer before make changes any time.
Press Ctrl+F in HTML body box. Like i tell in article of Handle New Interface Of Blogger HTML Editor.
Paste this below Code in the search box and press enter.

]]></b:skin>

Now paste the below CSS Code just above/before this code.

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
} 
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; 
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc
}

Save Template.
You have done.

Improve Content Keywords Significance
Use Custom Robots Tags Selection Blogger For SEO
Best Blogger Tips And Tricks For My Blog SEO Instantly

Add Lower Wrapper Lower Bar Widget From Lowerbar1 to Lowerbar 3 or 4:

By adding Lower Wrapper and Lower Bar we see three or four Add A Gadget Links in the page layout where you can easily add which you want like Blog Author Info, Blog Followers, Google+ Followers and many more option. Now we are going to add this Gadget in template and then go to Layout to check this out.

Go to Blogger.com.
Go to Template.
Paste below tag in search box and find.

</body>

When you find this above tag then copy below code.
Paste below code just above/before this </body> tag.

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div> 

Again Save Template.
Your Work is finished and your three column footer is ready for work and if you want to four footer then simply add below code above last two highlighted red background lines correctly.

Make Money Form Links of Amazon Product to Blogger Posts
You Put Chitika Ads to Blogger Blogspot with Simple Steps
Easy | Best | Simple Tricks To Make Money From Youtube | Chitika

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

And give the lowerbar4 name with your choice number.

Changes And Customization For Footer Column Widget By Color:

If you want to customize or change the color of background text and width and many more then generate the color by using below Color Code Generator Tools and use according to above tutorial.


Color Code Generator Tool:




Change the Background color of your desire by replace the #333434
Change the Widget Width with your desire by replace the  960px 
Change the Background 2 color by replace the  #fff
Change the Widget Width 2 by replace the  32%
Change the of Text by replace the #0084ce 
Change the  Font of Widget just add desire font font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce 
Change the Bottom Border Dotted by replace the #ccc.

Now save template and go to layout and check in the footer of your Page Layout you will see three or four column just add which you want and your blog make perfect and beautiful.

Related Articles:

Ready to Make Money With Adsense Keywords and Blogger
Affilate Banner Put Below in your Blogger Post
The Best Placement of Adsense On Your Blogger Blogspot
How To Increase The Website Ranking From Social Bookmarking Sites
How to Verify My Blogger Blogspot in Webmaster Tools
How Use Social Website To Increase Your Website Traffic
How to Remove 404 Errors in Blogger Blogspot
Why I Make More Pages On My Blog To Increase Organic Traffic

How I Remove Or Change Blogger Post Image Border In Blogspot

Blogger post image border is big problem remove/delete this images border line or box easily with simple tricks. Some times you see border line with post image in blogger its not good looking this tutorial show you how you can easily change it or remove. If you have good looking blog and you get daily hundred of visitors on your blog then you should make it perfect for looking beautiful. Below paragraph easy tutorial is given on this problems to solve it.

If your are using latest template Like Simple and Awesome Inc Black then read below link tutorial.

How Remove Photos/Images Border In Simple Or Awesome Inc Templates Blogger

When we start blogging then some times we want to remove, delete or changes then image border of a custom blogger template. I will show you how it is easy to make changes to your templates so that you can get rid of useless image borders around all the images which is appear on your all blog posts or images.

Remember this tutorial is for those blogger which are custom templates and the previous blogger templates. But if you are using now new Blogger Templates with New Interface then my above post is about those templates which is new interface. You can easily manage and done this tutorial in 3 minutes.

How You Can Remove/Delete and Get Rid of Image Borders in Blogger Posts:

Now start tutorial with most and very helpful tricks and simple steps.

Go to Blogger.com.
Go to Templates.
Go to Edit HTML.
First Download your template in your computer. By click download template.
Find the following code which i given below in your blogger templates.
Remember that Blogger templates queries varies but this code is only that which you will find on a Blogger Minima Template and most other default Blogger templates.

 .post img {

padding:4px;

border:1px solid $bordercolor;

}

If you can't find this above code in your blogger templates then you should find the below code.

 img{

padding: 4px;

border:1px solid $bordercolor;

}

There are two ways to get rid of the unwanted border image code. You can either:

Remove the following line:

 border:1px solid $bordercolor;

                                                     or
Change it the following:

border:0px;

Click on the Save Template Button. 
Now you have done your work. 

If you want to change the border line of your blog post image then i have post a tutorial about this on next day how to change.

Related Articles:

Now You can Replace Old Style Templates in Blogger in new one

How I Can Remov Or Fix Broken URL For Google Adsense Crawler

How to Remove 404 Errors in Blogger Blogspot

Now Next Step To Add Webmaster Tools And Google Analytics to a Blogger Blog

Social Bookmarking Button Add To Blogger 

Live Traffic Counter Put In Your Blogger Blogspot