Blogger Hacks

Add Stylish Floating Facebook Like Box Widget In Blogger

By / Blogger, Blogger Hacks
This widget is not working anymore, Please visit Stylish Floating Like Box for Blogger Updated.

floating facebook likeboxI found this great Floating Facebook Like Box Widget on internet. This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This is a great widget for blogger. Which will help you to increase facebook likes. You just need to put Jquery and CSS . HTML code to your blogger blog. I will soon share more floating widgets like Google+, Twitter Follower Box and Floating Subscription box in future. Now lets move to how you can add this in blogger I will show you How You Can Add Stylish Floating Facebook Like Box Widget In Blogger.

Updated Widget!

 

How To Add Stylish Floating Facebook Like Box Widget In Blogger

  1. Go To Blogger>>>Design>>>Edit HTML
  2. Tick Expand Widget Template
  3. Search For The Tag </head> (Using ctrl + f )
  4. Copy n Paste Below Code Before </head>
<link href=’https://gj37765.googlecode.com/svn/trunk/[www.gj37765.blogspot.com]multipopoutwidget.css’ rel=’stylesheet’/>
<script src=‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js‘ type=’text/javascript’/>
<script src=’http://apis.google.com/js/plusone.js’ type=’text/javascript’/>
<script type=’text/javascript’>
jQuery(document).ready(function(){
jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -200}, 500); });    jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -250}, 500); });     jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -154}, 500); });    jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); });    });
</script>
Note :– CTRL + F To Find Above Red jQuery Plugin URL In Your Template If You Have Already This Plugin Than Remove It .

5. Now Save Your Template

Now Adding HTML Code It’s Simple

  1. Go to Blogger>>Design>>>Add a Gadget
  2. Choose HTML/Javascript
  3. Copy n paste below HTML code Into It,
<div id=”on”>
<div id=”facebook_right” style=”top: 18%;”>
<div id=”facebook_div”>
<img src=”http://1.bp.blogspot.com/-XyYjgghpO7A/TwqccHW47QI/AAAAAAAACSU/OvETkV56ui8/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png” alt=”” /><iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com/allbloggingtips&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356″   scrolling=”no”></iframe>
</div>
</div>
</div>
Note:- Replace allbloggingtips With Your Facebook User name

5.Now Click on Save Widget.

This widget is not working anymore, Please visit Stylish Floating Like Box for Blogger Updated.

Visit your Blogs to see it floating at the right side of your webpage. I hope this widget helps you in increasing the number of your Facebook Readers. That’s all. If you face any problem in floating facebook like box or any problem than don’t stop just drop your comments and Feel free to ask.

How To Add Floating Contact Me Button To Blogger

By / Blogger, Blogger Hacks

floating conatct me buttonWe also know that how important are visitors for us. But how to interact with them? There are many ways like adding a contact me link to footer, sidebar or in navigation menu. But adding floating contact me button is best choice. This will help your visitors to easily find contact button.  Adding Floating Contact Me Button is best way to interact with your visitors and make them love your blog.  Now You can Add Floating Contact Me Button To Blogger. You just need to place below code just after <body> to add floating button and link it to your contact me page.

How To Add Floating Contact Me Button To Blogger

Follow following simple steps to add floating contact me button to blogger. But Backup Your Template first.

  • Goto your Blogger Dashboard > Design > Edit Html
  • Click on Expand Widget Template
  • Now Search for <body>
  • and replace <body> with below code
<body>
 <a href='https://allbloggingtips.com/contact-us' style='position: fixed; top: 40%; z-index: 4;'><img border="0" height="170" src="http://2.bp.blogspot.com/--vuieai7-4s/Twm8UiIon4I/AAAAAAAAAQU/PZpTmVDCt58/s200/floating%2Bcontact%2Bme%2Bbutton.png" width="40" /></a>

And click on save but before saving it read next part of article below.

Customization

Make following changes to above code.

Replace https://allbloggingtips.com/contact-us  with you contact us page.

Now you have done sace your template and is you Add Floating Contact Me Button To Blogger. do comment if you face any problem.!!

How To Easily Create Animated Favicons And Add It To Blogger

By / Blogger, Blogger Hacks

Favicon Demo

Favicon is actually the icon that appears next to your Website URL in the browser address bar. A favicon is usually your blog logo. There are many services which only provide you facility to add image to favicons only. But now you can Create Animated Favicons which will allow you to add image with animating text. I will show you How To Easily Create Animated Favicons And Add It To Blogger.

Steps To Easily Create Animated Favicons?

  • Goto FaviconGenerator
  • And Just goto Bottom of the page. Upload your image which you want to use for favicon and type desire text which you want to make animating You will find all the help at favicongenerator

Favicon Generator Screenshot

  • Hit the Generate Favicon Button and you will be taken to this page,

download animated favicon

Here you will see many images just right click the animated one and save it to your computer.

How To Add Animated Favicons In Blogger

    • Go To Blogger > Design > Edit HTML
    • And Search For <b:skin>and just above it paste the code below,
<link href='ADD YOUR FAVICON LINK HERE' rel='icon" type='image/gif'/>
  • Replace ADD YOUR FAVICON LINK HERE with the image URL of the favicon you saved in Picasa album.
  • Save your template and you are done!

View your blog to see it in action on the address bar and tabs. Hope you liked it! Questions are always welcomed here:>>

Add Meta Tag to Blogger : Make Blogger Blog Fully Search Engine Optimize!

By / Blogger Hacks

 

Most of us use Blogger.com to start their free blog which may be for making money or sharing your knowledge, voice through blogging. But if your blog is not Search Engine Friendly than you can not archive your goal. For this purpose you need to make your blog fully Search Engine Optimized and add meta tag to blogger so that people searching their keywords will easily knows your site. Just follow following simple steps to add meta tag to blogger.

How to add Add Meta Tag to Blogger? (Updated)

Step 1:

Go to Blogger Dashboard > Design > Edit Html and search for <head>

Step 2:

Delete Every Thing From <head> to <b:skin><![CDATA[

Step 3:

Place following code just after <head>

<b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>
    <meta content='Your Blog Description here!' name='description'/>
    <meta content='Your Keywords here!' name='keywords'/>
    <meta content='Author Name here!' name='Author'/>
    <meta content='Author Email Address here!' name='Email'/>
    <meta content='document' name='resource-type'/>
    <meta content='all' name='audience'/>
    <meta content='general' name='rating'/>
    <meta content='all' name='robots'/>
    <meta content='index, follow' name='robots'/>
    <meta content='id' name='language'/>
    <meta content='id' name='geo.country'/>
    <meta content='global' name='distribution'/>
    <meta content='1 days' name='revisit-after'/>
    <meta content='Indonesia' name='geo.placename'/>
  • Replace:-

To add your own description, title, keywords. Please replace all above words with your desire words! as shown below.

Blog Description : Write your blog description
Blog Keywords : Write the keywords of your blog
Blog Author : Write the author’s name(Your name)
Email Address : Write your Email address

Step 4:

Click on Save Template.

That’s it. Now your blog is full Search Engine Friendly. If you face any problem. Just Drop your comment. I will be able to help you about blogger Search engine optimization