Change Read More to Button in Blogger.

Today I'm going to teach how you can insert read more link in your blogger posts.

After inserting your read more links in your blogger posts you can change them to stylish buttons of your choice.
Now first we will see how to insert read more links in the blogger posts.

How to Insert 'Read More' links in Blogger Posts.

While writing a post in blogger post editor there is an option called "Jump Break" which can be used to insert the read more link anywhere you want in the post. See the image below.

That option is actually used to insert the Read More link inside a post in blogger. Click this option where you want to insert the Read More link. Usually people insert it after the first paragraph.

Inserting this Link will only show that part of the post that is above the "jump break" on the home page. In place of the remaining post it will show a link as 'read more' to read the full post.

You can actually change this text link to an image link or stylish button link.Now let us see how to change this link to buttons.

Change "Read More" Text link to Button.

Follow these steps to change the text with a button.

1. Go to Design tab >> click "Edit html" >> Tick "Expand widget Templates" checkbox
2. Find below text from search (Ctrl + F)

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

3. Now remove these words from the above code.

 + &quot;#more&quot;

4. After removing these codes your html will look like this.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

5. Now look for these words

<data:post.jumpText/>

Replace it with your Text which you want to appear in the place of 'read more' or with your image url

 <img src="http://image-URL.png"/>

Inseert this Stylish Read More Button 6. If you want to insert this picture as your jump break button then put this code.

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnEGHkd0mF_SG1WHbw1gTuxbxHv6pL2ge-_Pyqx7lYKRxva6RVeGfsk14fmfmuqXwuayxk914foW0Uy97A1Wrzztaa4y6UcF_GAA0hits7nUXG-Th3cv2pz5JrGvRU2TcGViUZn9Vfv75M/s1600/read+more+in+blogger.gif" width="87" height="47"/>

7. Now save your template ,everything is done. View your blog and see the button Working.

Read More

Recent/Latest Posts Widget For Blogger/Blogspot

You surely have seen on many blogs and websites a Recent Posts Widget in the sidebar that shows the recent or newest or latest posts of the certain blog or website. This widget shows the best posts title for SEO, date of post and an image of the post and even a snippet of the post. So today we are going to learn how to make this widget for your blog with some very easy steps. So let's start now.

How to add Recent Posts Widget to Blogger

Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link
Step 2. From the pop-up window, scroll down and choose HTML/JavaScript.
Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 1;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://www.blogtipsuk.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://www.blogtipsuk.com/2013/12/recent-latest-posts-widget-for-blogger-blogspot.html" target="_blank" title="Grab this Recent Posts Widget" alt="Recent Posts Widget for blogger">Recent Posts Widget</a> by <a href="http://www.tonyisright.blogspot.com/" title="Recent Posts Widget"
alt="Blogger and SEO Tips and tricks">Blogger SEO Tips</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUYUQYkhtRYdb_BJnV1uJwLR3AiDGUVYW4jNEMicmPywwltfkGjHSZHwLGrpy8SN3AabXqaUpclkpmDoC6uaFRBNHHyxHhIK8HTt9QeA-vNb0Eq5XjauTNDn5xEZvL7c5aq8Ucs-SVSlj/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 1;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://www.blogtipsuk.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://www.blogtipsuk.com/2013/12/recent-latest-posts-widget-for-blogger-blogspot.html" target="_blank" title="Grab this Recent Posts Widget" alt="Recent Posts Widget for blogger">Recent Posts Widget</a> by <a href="http://www.tonyisright.blogspot.com/" title="Recent Posts Widget"
alt="Blogger and SEO Tips and tricks">Blogger SEO Tips</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUYUQYkhtRYdb_BJnV1uJwLR3AiDGUVYW4jNEMicmPywwltfkGjHSZHwLGrpy8SN3AabXqaUpclkpmDoC6uaFRBNHHyxHhIK8HTt9QeA-vNb0Eq5XjauTNDn5xEZvL7c5aq8Ucs-SVSlj/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Step 4.

Change 5 (option 1) and 10 (option 2) with the number of posts you want to display.
Change false to true if you want the posts dates to appear
Change 100 (option 1) if you want more characters to be displayed.
To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
To change the style of posts summary, modify the values in green (color) and orange (font size)
Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address.

Step 5. Save your widget. And that's it! Enjoy!

Read More

Related Posts Widget for Blogger/Blogspot with Images

Related posts Widget will probably produce list of related posts. This specific Widget can be added often in homepage (under every single posts) or perhaps inside the post. By putting this specific related posts Widget, there is possible opportunity to distribute the other articles to visitors and they also may well will usually get that post in the listing, it will reduce the inflatable bounce rate of one's blog all of which will keep your visitors by suddenly stop from the blog. I will tell you how to add related posts widget to your Blogger.

How to add Related Posts Widget to Blogger

Step 1. Log in to your Blogger Dashboard, then go to Template and click Edit HTML.
Step 2. Find below text from search (Ctrl + F)

]]></b:skin>

Step 3. Copy and paste the given code above this line.

<!--Blogger Tricks Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> /* remove this */
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPgtvyKucO-VDtfZ4mfq6dLkpWVJ1EX3f3oaKQPEynpbrZv7IfaSUOFqoqCiocW-e_K4mlY1C6-2-ANHCOMGpvnbkSSFnyblq1nT8nIrRn7Tn7BvK1C342fZ1-mLF9P5-CP_-s8RGmd0/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://www.tonyisright.blogspot.com/" style="font-size:0pt">Blogger Tricks</a>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
</b:if> /* remove this */
<!--Blogger Tricks Related Posts with thumbnails End-->

Change the red value to show number of posts.
Change the green color to change color of splitter line between posts.
Change the blue color to change Name of title.

Step 4. Find below text from search (Ctrl + F)

<div class='post-footer'>

Step 5.  Copy and paste the below code above this line.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://tonyisright.blogspot.com/2014/05/related-posts-widget-for.html' style="font-size:20%">Related Posts Widget</a></b:if></b:if>

Change red color to change number of posts displayed in widget.

Read More

How To Customize Blogger Slideshow Gadget

You know blogger blogs let you to use Blogger Slideshow. But Blogger slideshow gadget does not give the user many options like adjusting the size and style. Google AJAX Feed API provides the full code behind the slideshow gadget and also the opportunity to customize it as you like.

The Slideshow Gadget Code:

The gadget code loads the slideshow using AJAX Feed API and Javascript. Within the code a location on your page is defined to show the slideshow and style the dimensions. Lastly Javascript is used to create a slideshow control on your page. The full Slideshow code is shown below :

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
<style type="text/css">
#picasaSlideshow {
width: 250px;
height: 200px;
margin-bottom: 5px;
padding: 5px;
}
</style>
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feed = "PUT FEED URL HERE";
var options = {
displayTime:2000,
transistionTime:600,
numResults : 8,
scaleImages:true,
fullControlPanel : true
};
var ss = new GFslideShow(feed, "picasaSlideshow", options);
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="http://tonyisright.blogspot.com/">Custom Slideshows.</a>

In the above code replace "PUT FEED URL HERE" with the link of the RSS feed of your pictures album at Flickr/Photobucket/Picasaweb as shown below.

Feeding The Slideshow:

The next step is to provide a stream of pictures to the slideshow. To provide this first create an account at Flickr.com or Photobucket.com or Picasaweb.google.com. Then upload all the photos you want to show to this account.

After uploading pictures you will get the RSS feed from the album created at Flickr :

http://api.flickr.com/services/feeds/photos_public.gne
?id=USERID&lang=en-us&format=rss_200

Replace USER ID with your actual user id at Flickr.com.
RSS Feed from Photobucket.com :

http://feed266.photobucket.com/albums/ii244/USERNAME/feed.rss

Replace 'USERNAME' with your actual username.
RSS Feed from Picasaweb :

http://picasaweb.google.fr/data/feed/base/user/NAME/
albumid/NUMBER
?kind=photo&alt=rss&authkey=KEY&hl=en

Replace NUMBER, KEY and NAME with actual values.

Then copy the full feed url and paste in the code given for the slideshow gadget instead of "PUT FEED URL HERE".

Customizing Slideshow

To customize the slideshow modify the gadget code as shown below :

To Change Number of Images modify this line in gadget code and change the number to what you want :numResults : 8,

To resize images add this line immediately below the numResults line :scaleImages : true,

The images will be resized according to original aspect unless you add this line also : maintainAspectRatio : false,

To change how long images are displayed modify the number in :displayTime : 2000,

To link the images to their source add this line : linkTarget : google.feeds.LINK_TARGET_BLANK,

To show images in medium thumbnail size use this line :thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM,

For small size thumbnail images : thumbnailSize : GFslideShow.THUMBNAILS_SMALL,

Lastly to increase width and height change this code :

#picasaSlideshow {
width: 250px;
height: 200px;
.....
}

Decrease width number to fit in your sidebar width. You can get the width of the sidebar from your blog template code :

#sidebar-wrapper {
width: 220px;
...
}

Installing Slideshow

After modifyng and customizing the slideshow code as shown above :

Login at Blogger.com> Click Layouts link on Dashboard.
Click Add Gadget link on Layouts---> Page Elements.
In Popup window scroll down and click on HTML gadget.
Paste the modified code in Contents window.
Save gadget.

Read More

How to add Blogger Share Buttons to Custom Blogger Templates

Blogger has released their new Share Buttons feature through which makes we can now easier bookmark, tweet, fshare, email ,etc your post of a website. It is associated with the blogger templates (given templates). But, if you're using any custom blogger template, you may not see the widget appearing in blog even though you activate it. In this fact you have to customize your blog a little. Follow the instructions below.

How to add Blogger Share Buttons to Custom Blogger Templates?

Note: before making any changes..first backup your template

Step: 1  Sign into Blogger > Design > Edit HTML

2. Add this line anywhere you want the widget to appear.

<b:include data='post' name='shareButtons'/>

Normally, in most templates, you can add it after this line..

<data:post.body/>

and add this code after that line..

<p><data:post.body/></p>
<div style='clear:both; padding: 10px 10px 10px 10px;'> <b:include data='post' name='shareButtons'/> </div> 

Note: If you're using Magazine style blogger template, You can find the data:post.body line TWO TIMES.. So, try in both ways and find out which one is working..and remove the other one.

Be aware: If you still don't see it in your Blog, Make sure..you activated it by going to
Blogger Dashboard > Design > Click the 'edit' button of the Blog post section.

You have done if you need more info please hit a comment below thanks for reading this article.

Read More

How To Add Facebook Like and Share Button in Every Posts

Adding a facebook like and facebook share button in each and every posts of blogger blogspot has become a common task of the professional blogger. In this post i am going to tell you “How to add facebook like and share button in all posts of blogger blog?”. If you add the like and share button below the blogger posts then the visitor of your blog will able to know the popularity of your post and will be more effective to read your posts and stay your site for long time. So your bounce rate will be decreased and your traffic will be increased. You may think that the coding knowledge such like HTML, CSS, JavaScript will be needed to add facebook like and facebook share button with the blogger posts. If you are more serious about that then the declaration for you that you

do not need the coding knowledge to add the buttons to your blogger blog. Just follow the tricks provided below and win to add facebook like and share button into every posts of your blogger blog. :)

Let's See The Simple Trick

Step 1 Html Tag

• Go to Blogger.com
• Choose your Blog where you want to add Facebook Like & Share Button
• Click on Template on Left Side Menu
• Now Click Edit Html
• You will see the HTML tags in the beginning of the template coding Like this

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

• Now add the below code at the end of the <html> tag. As shown in the image

 xmlns:fb='http://ogp.me/ns/fb#'

Step 02: Editing Body Tag

Now find out the <body> tag [Click anywhere in the code box then press Ctrl+F]. Now type <body in the box and press “Enter” then you will get the <body> tag
Now add the below code just under the <body> tag. As shown in the picture.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Now find out the <div class='post-footer'> tag [Click anywhere in the code box then press Ctrl+F. A Now write the code <div class='post-footer'> in the box and press “Enter” then you will get the <div class='post-footer'> tag ]

Now add the below code just after <div class='post-footer'> As shown in the picture

<div class="fb-like" expr:data-href='data:post.canonicalUrl' data-send="true" data-width="450" data-show-faces="true"></div>

Now Click on “Save template”

You have done if you need more help please let me know i will help you.

Read More

Widgets Need To add After Create a Blog

After a long time research on important Blogger Widgets today i decided to share my some blogger widgets post which a new blogger have to add this after creating their new blog.

If you use blogspot/blogger because your current blogging program then you definately have got positive aspects to work with google own widget/product and add them to your blog. It is a Its more safe practices, therefore I suggest you always use Blogger official widget. On the other hand, not all widget you will need hear upon Blogger widget. You should use 3rd party widget, however always be the code source is trusted and harmless. After all, you never want virus or even spyware on the design, would you?.: D.

Some Import Blogger Widgets List are as Follow:

Add Google+ RSS Feed Widget For Blogger

Contact Us Form In Blog Embed code

Add Social Media Share Button Below Post In Blogspot

Embed Google+ Posts in Blogger

Best Stylish Design for Label and Categories Widget

Stylish Subscription Widget In Blogger

Author-Box with Social Connection

Add Page Navigation To Blogger Blog

Add Multipul Related Post Widget & LinkWithin For Blogger

These are some important widget you need to install after create a new blog i am researching on more widgets when i got more widget i will update this post accordingly please hit a comment for my appreciate. :)

Read More

Floating Social Media Widget for Blogger

After my previous articles about Css Animated Menu Widget for Blogger today i am going to share A beautiful and distinctive custom Widget for who have Blogs with limited space. Sensitive to touch the mouse, after automatically opens that touched a category.

So let's See The Tutorial How to add Floating Social Media Widget For Blogger 

LIVE DEMO

• Go to Blogger Dashboard
• Click on Drop & Down Menu of your blog
• Click layout >> and click Add a Gadget >> Html/Javascript 
• Then paste the below code on it

<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;  
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitB_HFivOjRVHQxlu-iM-VywqahyphenhyphenyDv5zdykB-ij5V0ep1UmCNkw2oGPRJ2MJgiTi-bWw6k4hRSbMsnm2bZhwHBAZ53NNOJ4KrQc2efy_-csCNKm18ytrXdJN2_iW7WtlDDiu35wuyBPQ/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHmCURbgaG0YYqlezwBksTEPrcVD9niozBkpRqsNV3zVorN2m7Cp6H8diQKNmbYHIjtsUfhGPMoyO3Cq7aUhAhSIu0QDMoQqmhvwJQHVy2Vyohl8jjAhrFyMz6SoGtJdtxswCLHzscNo/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx_Ox00f26MsY-B13LRF3lJnDEpe-OjesXmJkPgfH_hqXBpzzcqNpEZEdvLXoDNOucHqu3bCTUZ15b6vwX-lBfoTJsFIoZ1hym4OJ6la_UN7kA68cEBGOlsShVAzs43OLCfnAVsibiaGg/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij7T6LoCBthPxwKAuTwV_HqspOC1ZQ2RrOae9bukOFudA0tvZUjLQckjuphTXl7Mhb7TvT4b-M97Lene7rC_0I4VPLiyDiiNu_ECzxm3YHxPL0oUzJtYt1hoa3vaICkTff0hjDsIPEbXo/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLRWH-OBdSnQnDxLeyva3wNIv8XZYY07fvw2qP20RLAvXCTmvWAZaNfRaJggu0PaKp06dDo09LrJKi5Maieer-pPNMu2r_J4PTcJ1RMwnsbX22PrJLjC3TBJHqC-sgoQgwQwUHYPXbow/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);

    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<br />
<ul id="social">
<li class="twitter"><a href="#" title="Twitter"></a></li>
<li class="googleplus"><a href="#" title="Google Plus"></a></li>
<li class="facebook"><a href="#" title="Facebook"></a></li>
<li class="rss"><a href="#" title="Rss"></a></li>
<li class="pinterest"><a href="#" title="Pinterest"></a></li>
</ul>

• Save It. 

View your blog this widget will appear correctly if you facing some problem then leave a comment below.

Read More

Social Buttons With Hover Effect for Blogger

Give your readers a chance to show you how much you care about the Blog desing, or how good your article is, to raise the social media likes.

You may also read my previous article about Css Animated Menu Widget for Blogger.

Live Demo 

Just Follow These Simple Steps

• Go to Blogger Dashboard
• click on your blog drop & down menu
• Click layout >> Add a gadget >> Html/Javascript
• Then paste the following code in Html box

<style>
.social-contain {
 float: left;
 margin-bottom: 20px;
 text-align: center;
 width: auto;
 }

ul#social {
 position: relative;
 margin:0 auto;
 }

ul#social li {
 float: left;
 margin-right: 2px;
 list-style:none;
 }

ul#social li:last-child {
 margin-right: 0;
 }

ul#social li a {
 display: block;
 }

.soc-fb {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) 0 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-fb:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) 0 -58px;
 }

.soc-twi {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -58px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-twi:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -58px -58px;
 }

.soc-gp {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -116px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-gp:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -116px -58px;
 }

.soc-pin {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -174px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-pin:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -174px -58px;
 }

.soc-rss {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -232px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-rss:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -232px -58px;
 }
</style><br />
<br />
<div class="social-contain">
<ul id="social">
<li><a class="soc-fb" href="#" target="_blank"></a></li>
<li><a class="soc-twi" href="#" target="_blank"></a></li>
<li><a class="soc-gp" href="#" target="_blank"></a></li>
<li><a class="soc-pin" href="#" target="_blank"></a></li>
<li><a class="soc-rss" href="#"></a></li>
</ul>
</div>

• Save It.

You have done if you need more info please let me know i will help you.

Read More

Css Animated Menu Widget for Blogger

Blog navigate is very important. Readers loves to stay those blog that's have easy navigate Menu and if you put cool CSS Animated Menu to your blogger its attract the user mind totally in your blog.

You also read my previous article about Simple settings for Firefox and Internet Explorer on Blogger

Let's see how to add CSS Animated Menu in Blogger

Just Follow These Simple Steps

• Go to Blogger Dashboard
• Click on Drop & Down Menu of your blog
• Click layout >> and click Add a Gadget >> Html/Javascript 
• Then paste the below code on it

<style>
#fbt-nav {margin:0 auto;list-style: none;width: 965px;height: 86px;overflow-y: hidden;}
#fbt-nav li {float: left;}
#fbt-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;}
#fbt-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#fbt-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#fbt-nav li a:hover {cursor: pointer;}
#fbt-nav li a:hover img {top: -85px;}
#fbt-nav li a:hover .aname {top: 85px;}
#fbt-nav li:nth-child(1) a {background: #150517;border-radius: 5px 0 0 5px;}
#fbt-nav li:nth-child(2) a {background: #3E3535;}
#fbt-nav li:nth-child(3) a {background: #4A4344;}
#fbt-nav li:nth-child(4) a {background: #595454;}
#fbt-nav li:nth-child(5) a {background: #616D7E;}
#fbt-nav li:nth-child(6) a {background: #5E5A80;}
#fbt-nav li:nth-child(7) a {background: #2B60DE;}
#fbt-nav li:nth-child(8) a {background: #38ACEC;border-radius: 0 5px 5px 0;}
</style>

<div id="fbt-nav">
<li> <a href="/"><span class="aname">Homepage</span> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Places-user-home-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Archive</span> <img src="http://icons.iconarchive.com/icons/kearone/comicons/48/zip-software-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">About me</span> <img src="http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/48/About-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Our Blog</span> <img src="http://icons.iconarchive.com/icons/scoyo/badge/48/My-Blog-icon.png" /> </a> </li>

<li> <a href="#"><span class="aname">Science</span> <img src="http://icons.iconarchive.com/icons/iconshock/real-vista-education/48/technology-icon.png" /> </a> </li>

<li> <a href="#"><span class="aname"> Sports  </span> <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Games-Soccer-icon.png" /> </a> </li>

<li> <a href="#"><span class="aname">Photos</span> <img src="http://icons.iconarchive.com/icons/apathae/satellite/48/2-Pictures-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Contact</span> <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Email-Download-icon.png" /> </a> </li>
</div>

• Then Click Save
• View Your blog.

You have done!

If you need more help please hit a comment below i will reply you by same :)

Read More

How To Add SEO friendly Meta tags for blogger

After my previous article about How To Add Favicon in Blogger Tutorial today i am going to share How To Add SEO Friendly Meta Tag For Blogger (Blogspot) Blog.

Meta tags are very important factor for blogger. It's provide our blog details to search engines crawler.It is like as a SEO work.

Lets See How To Put Meta Tags in Blogger For SEO

Step 1.
Login to Blogger >> Go to Dashboard >> Template >> Edit Html

Step 2.
Find the following code [Tip: Press  Ctrl+F anywhere in template editor]

<head>

Step 3.

After this tag paste the following code.

<meta content='Your Blog Description' name='description'/>
<meta content='Keyword1,Keyword2,Keyword3' name='keywords'/>
<meta content='Author Name' name='Author'/>
<meta content='Author Email Address' name='Email'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='Language Name' name='language'/>
<meta content='Country Name' name='country'/>
<meta content='blogger' name='generator'/>

Step 4.
Replace all the RED words with your own need.
Click on Save Template .

You have done if you face any problem to intall this tag in your blogger blog please let me know in comment i am glad to see your comments here. :)

Read More

How To Add Favicon in Blogger Tutorial

After my previous articles about How To Add Author Bio Below Post in Blogger today i am going to share How to Add Custom Favicon in Blogger

Favicon is simply put a Icon or trademark that represents your blog or website. It is a unique logo that represents you and your brand all across the internet.

Lets See How To Add Custom Favicon in Blogger

• Go to blogger dashboard.
• Click the Drop-Down arrow and go to the layout of your blogger blog.
• Now in upper left corner layout you can see favicon button click on edit button.

• The new box appear and click on the brows button to insert the favicon to website.

Now you have to remember these things while adding favicon

Favicon site is not greater then 100kb

And your favicon sized should be square in pixel like 16x16 or 32x32

           (If the setting is not the same as i said then it may cause the problem in installing the icon)

• Now click on save.
• And next the box will close.

You must restart the browser to see the effect, if you still now seeing favicon the you must clear the firefox, google chrome or internet explorer history to see the changes you made.

You have done if you faced any problem to add favicon in your blog just hit a comment below i am glad to see your responses here. :)

Read More

How To Add Author Bio Below Post in Blogger

After my previous article TechPress Blogger Template today i am going to share how to add author bio below post in very simple step.

Author bio below post is very important because most of reader see author name first then read their article but you have to create your author ranking some of people only reads their favorite author post. i am researching in how to create author ranking when i got it complete i will share it to my readers.

So let's see how to put author bio below post in blogger

Follow these simple steps

• Go to Blogger dashboard >> Template >> Edit HTML and find below HTML code (to find code, just click anywhere on the HTML editor and press ctrl+f).

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

Note: if you are seeing this code two time just see this code (<div class='post-footer-line post-footer-line-1'>) which is seen below this code - <div class='post-footer'>: 

• Now you need to the place the following code below the code that I have mentioned earlier. 

<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Admin Name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Your Image Link Here"/></div>
<div class="author-description">
Author Bio Here Write something about yourself.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>
<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.tonyisright.blogspot.com">blogger widgets</a></p>
</div>
<style>
.entry-social {
    margin-bottom: 20px;
    overflow: hidden;
}
.entry-social a {
    color: #FFFFFF !important;
    display: block;
    font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;
    font-weight: 600;
    padding-left: 20px;
}
.entry-social div {
    float: left;
    margin-right: 10px;
    width: 138px;
}
.entry-social .fb a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivDX6Jz9HSmdl1PvsGjDFyiUhSyqNiIG5RTjTBqaHOnS5T3vuIqIlOiK2JBgBHh7C4wervx-9QDJyBvcaIvnrfR6ma7-LZzXuN3ZrBjaPUHxZ9F3H3ps88rBII6I3OkBsR8fkLSupDwAKO/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
    padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivDX6Jz9HSmdl1PvsGjDFyiUhSyqNiIG5RTjTBqaHOnS5T3vuIqIlOiK2JBgBHh7C4wervx-9QDJyBvcaIvnrfR6ma7-LZzXuN3ZrBjaPUHxZ9F3H3ps88rBII6I3OkBsR8fkLSupDwAKO/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5-4-U_BQA_g-EHJNCNVdZdHBfWHGQtbrdJ4xLG5RNBFewPNVK4SmRTBm9v1cV89BiHuKlwivbJtOMfm0P7CaO-afs4c3TeaPr88HWCjDfekohFd6DI4I7VKPel3KvMhyELUUAy5gEyRZ/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
    padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5-4-U_BQA_g-EHJNCNVdZdHBfWHGQtbrdJ4xLG5RNBFewPNVK4SmRTBm9v1cV89BiHuKlwivbJtOMfm0P7CaO-afs4c3TeaPr88HWCjDfekohFd6DI4I7VKPel3KvMhyELUUAy5gEyRZ/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJiAE9xLm49P7s0Q_NyZxx4aav-e5MxyFD9JteLSpStr1RzDJo2fBlsxDRGLhG551sZZIabPgJ9LoygJl1h9oGiQhDH_5iCdNu56wZ7bHU95-9K8comxt0FdZ4dxffpV0QT2JMszF79bi/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
    padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJiAE9xLm49P7s0Q_NyZxx4aav-e5MxyFD9JteLSpStr1RzDJo2fBlsxDRGLhG551sZZIabPgJ9LoygJl1h9oGiQhDH_5iCdNu56wZ7bHU95-9K8comxt0FdZ4dxffpV0QT2JMszF79bi/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieOcTPeSfrtSW2Tr3EaAqXBp25PQeWGCHwdDk28cvs3KW7P86IOEhnObWIlCPVBRF1qdshefNNB88126r8cP0bRfhswCHK3UDg-qndG43cNC9UOlvVBqCA3h9sMTJqutvQ7-GsH5uD38A6/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
    padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieOcTPeSfrtSW2Tr3EaAqXBp25PQeWGCHwdDk28cvs3KW7P86IOEhnObWIlCPVBRF1qdshefNNB88126r8cP0bRfhswCHK3UDg-qndG43cNC9UOlvVBqCA3h9sMTJqutvQ7-GsH5uD38A6/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHMYc5s_CV6UqnDWCetXdI1ba3aYAQxpgTTYtsB5V-cOawdSXSKQK51y_pfGD4AelvzLc5qu_cyoXllLalMkoxHQZLgd0QmSZFGt2u425RyWuN2fl3uPGoUnu5hO_fCHeJ1dykNDQ3wqhr/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
    padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHMYc5s_CV6UqnDWCetXdI1ba3aYAQxpgTTYtsB5V-cOawdSXSKQK51y_pfGD4AelvzLc5qu_cyoXllLalMkoxHQZLgd0QmSZFGt2u425RyWuN2fl3uPGoUnu5hO_fCHeJ1dykNDQ3wqhr/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_Cwk726SGlWVWDh7LKPwTaKFBA5YMXVFsAnHF32pU-EwNrlADHYvY1h2tn3Q7PDj3eN76b2MbXoXi6eSGRwIPYurLz482-gFg-n_8GVXF87xhfRjuOPvxdpH8zP91dNIHXCFcmT4sM1_/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
    padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_Cwk726SGlWVWDh7LKPwTaKFBA5YMXVFsAnHF32pU-EwNrlADHYvY1h2tn3Q7PDj3eN76b2MbXoXi6eSGRwIPYurLz482-gFg-n_8GVXF87xhfRjuOPvxdpH8zP91dNIHXCFcmT4sM1_/s320/delicious14.png") no-repeat scroll 10px center #2963B8;
}
.entry-social .delicious {
    margin-right: 0;
}
.beh-entry-author {
    margin-bottom: 20px;
}
.beh-entry-author .author-header {
    padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
    color: #000000;
}
.beh-entry-author .author-header h4 a {
    color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}
.beh-entry-author .author-wrap {
    border: 1px solid #EEEEEE;
    overflow: hidden;
    padding: 12px 15px;
}
.beh-entry-author .author-avatar {
    float: left;
    height: 80px;
    margin-right: 30px;
    width: 80px;
}
.beh-entry-author .author-link {
    margin-top: 5px;
}
.main-color-bg {
    background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.entry-social a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
</style>

Now just paste your social profile Links in the above code and write your name and description in the above code and hit save the template. Wasn't it easy and simple? Remember to change the above links with your own links and write a small info about yourself.

If you face any problem to install this widget in your blog please leave a comment below i am glad to see your comments here. :) 

Read More

How to Add Meta Description for Every Post in Blogger

How to Add Meta Description for Every Post in Blogger

The blog’s Meta tag description will increase your SEO toughness as well as relevance for a readers. So it is always encouraged that your particular publish Meta tag needs to be tightly related to your blog post.

Also Read: Easy Tips to Succeed Online blogs

How to Add Meta Description for Every Post in Blogger?

Every blogger should remember these tricks.

Step-1:

Login to your Blogger Account > Go to Dashboard > Settings > Search Preference

Enable search description to Yes.

Step-2:

Enter a blog description relevant to your niche and it should be limited to 150 characters. Click on Save Button.

Step-3:

Now create your New Post and enter following information.

1) Write your post Title.

2) Write your article.

3) Enter Label Name (Right side of your post)

4) Enter Search Description for your post. (This option will be visible after changing search description setting to “Yes” as described in Step-1).

5) Publish your post.

Also Read: Cool Search Box with New Google Style

Step-4:

Now visit to your recent published post and check the page source. It will look like below snapshot. In the below snapshot, you can see the difference between blog and post Meta Description.

If you face any difficulties to add meta tag description to each post please hit a comment below we glad to help you. :)

Read More

Cool Search Box with New Google Style

Cool Search Box with New Google Style

Google has updated their appearance, including their search box. I think this Search Box is very nice with some. So better for us to try create Cool Search Box with New Google Style. Below is the difference of the search box.

OK, let's see the . Looks nice right? Now if you want to create cool search box with new google style, just follow the steps below.

1. Log in to your blogger account

2. Go to Design -- Edit HTML

3. Copy the code below, and paste above ]]></b:skin>

/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdjSa3tDv989cnZGgrFvJSxATWV_vXdsAwxxFJvtavgohCUP5KCgl1-a4xFtH0n7Mr8KSvyHU7zlL0XPUxZuHmGvcwkqCeACm1SMsE-PoXDlCEnOLTtzzDBAjaw13CIQDrughHfq5_0RkU/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdjSa3tDv989cnZGgrFvJSxATWV_vXdsAwxxFJvtavgohCUP5KCgl1-a4xFtH0n7Mr8KSvyHU7zlL0XPUxZuHmGvcwkqCeACm1SMsE-PoXDlCEnOLTtzzDBAjaw13CIQDrughHfq5_0RkU/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

=> Adjust the width with your blog

4. Copy the code below, and paste above </head>
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

5. Click save the template 

Adding New Google Search Box

1. Go to Design --> Page Elements --> Add Gadget

2. Choose "HTML/Java Script"

3. Add the code below

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

4. Click save the template

Read More

How To Add Facebook Follow Button In Blogger

Generally, widgets have a lot importance in Blogging. Usually they attract the visitors and also help them in following your blog. So, today we will tell you How To Add Facebook Follow Button In Blogger. Its a very good widget and will provide you excellent productive results, because with this widget people can easily follow you on Facebook and so, like this they can be in close touch with you and your blog. But, note that its only for a single author so if you have more than one authors on your blog than you have to chose, whose ID should be given for following.

So, if you are a single author of your blog, you can directly and easily get the follow button from Facebook widget page and paste it in your blog anywhere, you want it to be displayed.

Auto SEO Script for Blogspot Blogs

Apply on Google AdSense in urdu

Steps For Adding Facebook Follow Button In Blogger

Believe me, its very easy. First you have to go to Facebook Social Plugins Website Page. Now, enter the URL of your Facebook profile there to generating the code of that widget. There are alot of options for customization which will help to create a perfect match for your blog/website.

After placing your Facebook profile's URL there, you can clearly see how your widget will appear on your blog/website. Now, customize it as you want and click Get Code.

Get Code

Now, a new window will pop-out, select the iFrame tab and copy the code. 

Popup

Go to Blogger Dashboard >> Layout >> Add a gadget >> HTML/JavaScript.

Paste that code which you copied in the above steps in the given pop-up tab and click Save.

Congratulations ! You have done it.

Final Words 

If you enjoy this article please share this with your friends and stay tuned more interesting articles ae waiting for you if you need any help please feel free to contact us or leave a comment below will reply will be highly appreciate thanks.

Read More

How to Add Numbered Pagination in Your Blogger Blog

Like everything, Blogging is also becoming more and more advanced day by day. Previously most of the bloggers used Old Posts and New Posts system in their blogs but that trend is some sort of finished or finishing now. Blogging is approaching more advanced levels now. Now a days, Numbered Pagination has much importance in the style and attraction of the blog. Its also our practical experience that you can get almost 10 times more pageviews with Numbered Pagination instead of that Older and Newer Posts.




Drive Traffic to Your Blog Ten most Tips

Add Facebook like button in every Blogger Post

How to Add Facebook Slide Likebox

What Is Numbered Pagination ?

First of all, let me introduce you to the Numbered Pagination. Its a numeric navigation menu which is mostly present at the end of your blog archive pages. Just like the pages of a book, it divides your blog into different pages. With the help of this users feel ease to look around your blog and explore different posts. Below is the screenshot of it.

How To Add Numbered Pagination In Blogger ?

This task is going to be very easy for you guys because I will guide you till the end. 

• Log in to Blogger >> Template >> Edit HTML
• Search for ]]></b:skin>. Just above it paste the following code.

.showpageNum a {background: #02ab68;padding: 5px;padding-left: 10px;border: 1px solid #b9b9b9;padding-right: 10px;margin-right: 5px;color: #000;font-weight: bold;}.showpage a {background: #02ab68;padding: 5px;padding-left: 10px;border: 1px solid #b9b9b9;padding-right: 10px;margin-right: 5px;color: #000;font-weight: bold;}.showpageArea {float: left;}.feed-links {display: none;}.showpageArea a {float: left;font-size: 15px;color: #fff!important;padding-left: 15px;padding-right: 15px;}.showpagePoint {float: left;font-size: 15px;padding-left: 15px;padding-right: 15px;}.showpageArea a {text-decoration: none;}.showpageArea {float: left;width: 363px;margin-top: 10px;}
 

 Now, the stylesheet is added to your template and its time for the Java/Script coding that would turn the ordinary older/newer post buttons into robust and user friendly Numbered Pagination.

 

• In the Template, search for </body>.
• Just above it paste the following Java/Script coding.

<!--Page Navigation Starts--><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>var pageCount=6;var displayPageNum=6;var upPageWord =&#39;Previous&#39;;var downPageWord =&#39;Next&#39;;</script><script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/></b:if></b:if><!--Page Navigation Ends -->

 Save the Template. 

Congratulations ! you have done it. Now, go to your blog and enjoy the most latest and stylish Numbered Pagination.

Final Words 

If you enjoy this article please share this with your friends and stay tuned more interesting articles ae waiting for you if you need any help please feel free to contact us or leave a comment below will reply will be highly appreciate thanks.

Read More