Wednesday, May 30, 2012

How To Add Smooth JQuery Facebook Like Box to Blogger

How To Add Smooth Jquery Facebook Like Box to Blogger

This is a Facebook like box with j query smooth
hover effect. This will help you to make your
blog attractive. Follow below steps to
add it to your blog.

1. Log in to blogger account and Go to Design >> Edit HTML

2. Make sure you put check mark to “Expand Widget Templates”

3. Find this tag by using Ctrl+F </head>

4. Paste below code Before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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: -249}, 500); }); 

});

</script>

5. Now save the template.

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below code.

<style>
img, a { border: 0; }#on {visibility:visible;}#off {visibility:hidden;}#facebook_div {width:245px;height: 310px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 290px;position: fixed;right: -249px;}
#facebook_right img {position: absolute;top: 70px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
</style><div id="on"><div id="facebook_right" style="top: 30%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfHS_7GY8gPujtLAtkzEQ84c1SNVyLfyMPCUBGGRuYsqZLdcWeyDWFxB8vczATDevRQGFEqjroDjcG_eYu64YGKJNv_pCyw_ggkYcNa5_nm0aUzQOBokiXV_3A02vDaMG36RnnRUPHd1yl/s1600/FB.png" />

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Trix%2F110888928990749&amp;
width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true">
</iframe>

<a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href="http://www.bloggertrix.com/2012/05/how-to-add-smooth-jquery-facebook-like.html"> Get This Gadget</a></div></div></div>

Now you have to replace red color code with your facebook like box code.
To make your own Facebook like box code to click here

You will get box like below.
you have to change your fan page URL with like below i mentioned.

After you can click create code button, you will get popup will like below.

You have to select iFrame and copy that code and replace with red color code that i given.
Now you can save the 'HTML/Javascript'.
You are done. if you have any problem, comment below.

How To Add BuySellAds Marketplace Listing Widget To Blogger

Buysellads Recently introduced a new tools for
websites to listing their ads market place.Earlier
Advertisers need to check the listing from Buysellads
site.In this tool helpful to advertisers get the information
from same website.So, this tool can add to blogger
easily.We can use new page for this tool.
Follow the steps for adding it to blogger.

Market Place Listing

1. Log in to BuySellAds Dashboard >> Tools.

2. Log to your Blogger and go to Posting>> Edit page.
Click New Page.

3. You can rename page as "advertise"
4. Now paste the code where you get from BSA website.

5. Now Click Save and Publish, you are done.

After you can click view page >>copy the url and create new link as advertise here in menubar.

*How to Get Approve In Buysellads

What Is The Importance Of Dofollow And Nofollow Links

Link building is most important part of blogging.In this Post, will explain what is the Dofollow
and Nofollow links, how its important to bloggers.

Whats is a do follow link?

DoFollow links is a normal hyper links which allowing on sites to be click and taken to another persons website. Actually this process is, This hyper links send to the search engine bots to target page with source.if you have more links from high page rank site, it will help to get a good rank to your site.That's why more people focus to creating DoFollow links.

Examples Of Text DoFollow Links

Google site   = http://www.google.com/
Yahoo Site   = http://www.yahoo.com/
Bing Site    = http://www.bing.com/

HTML

<a href="http://www.google.com/" target="_blank">Google Website</a>

<a href="http://www.google.com/" target="_blank" rel="Dofollow">Google Website</a>

Whats is a NoFollow link?

NoFollow link is opposite of DoFollow Link So,also it normal hyper link with modified rel="Nofollow" So,when using this rel="NoFollow"it will block search engine bot to follow that link. Most of High traffic website make default their links as NoFollow because of spamming comments.
Do you think NoFollow Links are Not Useful.Actually Its also useful.Because, It will help you to get more traffic from anchor text that you used for that link.So, its helps to rank in Google pages.

Examples Of Text DoFollow Links

Google site   = http://www.google.com/
Yahoo Site   = http://www.yahoo.com/
Bing Site   = http://www.bing.com/

HTML

<a href="http://www.google.com/" target="_blank" rel="Nofollow">Google Website</a>

How To Check Dofollow link and NoFollow Links?

I think now you know about the difference of DoFollow and Nofollow links.
So,You can use your web browser to check this.
Select the text link that you want to check

Right click and select the source.Hope you will get a good understand about DoFollow and NoFollow Links.

How To Add Cool Subscribe Gadget For Blogger

This is a cool subscribe gadget with nice buttons.
Add to your blog and make it attractive.
i have Facebook ,Twitter and Google +

1. Log in to blogger and Go to Design >> Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3.Paste below code.

<style type="text/css">                                                        
.abtbar{width:300px;float:left;background:#FFF top no-repeat;margin:0 0 10px;padding:10px;border:0px solid #DDD;}.abtbar .abt-credit{}.abtbar .abt-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}.abtbar h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWh5X69umAcsN_LP99V5Nntr2RDGcrO9Q84w5MdUM2QWI3NAdfcX3B1usOd-eQ6gnrZ2Gv3sIRX8KPcv659yURnI04TtJVh0UV2jLfLDiYsvxZv7amE01gQULTOdgc9LafkZBBycEKwPs/s1600/%5Bwww.internetricks4u.blogspot.in%5DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}.abtbar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}.abtbar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}.abtbar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}.abtbar .subicons a{text-decoration:none;color:#333333;}.abtbar .subicons a:hover{text-decoration:underline;color:#333333;}.abtbar .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzvTaw_niZEyXHv9_2prLspEHeaxa4YA88gNpRyyYb7bj7wBGBsWaANvYudViPLlq4d-yLDAWB-VQWkcGlJlITyA1ulubvcmfRdismqln4EJhD2BjqYb6Mc8ScITaFRDArZUUg9Sl0OUE/s1600/Widget_icon.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzvTaw_niZEyXHv9_2prLspEHeaxa4YA88gNpRyyYb7bj7wBGBsWaANvYudViPLlq4d-yLDAWB-VQWkcGlJlITyA1ulubvcmfRdismqln4EJhD2BjqYb6Mc8ScITaFRDArZUUg9Sl0OUE/s1600/Widget_icon.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzvTaw_niZEyXHv9_2prLspEHeaxa4YA88gNpRyyYb7bj7wBGBsWaANvYudViPLlq4d-yLDAWB-VQWkcGlJlITyA1ulubvcmfRdismqln4EJhD2BjqYb6Mc8ScITaFRDArZUUg9Sl0OUE/s1600/Widget_icon.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzvTaw_niZEyXHv9_2prLspEHeaxa4YA88gNpRyyYb7bj7wBGBsWaANvYudViPLlq4d-yLDAWB-VQWkcGlJlITyA1ulubvcmfRdismqln4EJhD2BjqYb6Mc8ScITaFRDArZUUg9Sl0OUE/s1600/Widget_icon.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.abtbar .emailsub .emailicon{background:url(http://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.abtbar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}.abtbar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.abtbar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}
</style><div class="abtbar">
<h2 class="title"></h2>
<div class="count">
<span class="bigcount"></span>Learn Free Pro Tricks daily </div>
<div class="subicons">
<div class="rssicon">
&nbsp;<a href="http://feeds.feedburner.com/FeedburnerID" rel="nofollow" target="_blank">  RSS</a></div>
<div class="googleicon">
&nbsp;<a href="https://plus.google.com/Username 1" rel="author" target="_blank"> G+</a></div>
<div class="fbicon">
&nbsp;<a href="http://www.facebook.com/Username 2" rel="nofollow" target="_blank">FB</a></div>
<div class="twittericon">
&nbsp;<a href="https://twitter.com/bloggertrix" rel="nofollow" target="_blank">Twitter</a></div>
</div>
<div class="emailsub">
<div class="emailicon">
<div style="color: #3a3a3a; font-family: Helvetica, Arial; font-size: 13px; font-weight: normal; margin: 0; padding: 0; width: 270px;">
Receive Our All Updates  In Your Inbox by &nbsp; &nbsp; submitting your Email ID below.</div>
</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedburnerID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailupdatesinput" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" placeholder="Enter your email here..." /><input name="uri" type="hidden" value="AllBloggingTricks" /><input class="joinemailupdates" type="submit" value="Submit" /></form>
<span class="abt-credit" style="font-family: Arial,Helvetica,sans-serif;"></span></div>
</div>
</div>

* Repalce placewith FeedburnerID with your ID
* Replace Username 1 With Google plus username
* Repalce Username 2 with your Facebook ID
* Replace bloggertrix with your Twitter ID

4. Now save your HTML/Javascript'.

you are done.

How To Add Shareaholic Sassy Bookmarks To Blogger

This is a new style social bookmark widget.
it will helps to share your post with social bookmarks.
Follow these steps.

DEMO

1. Log in to blogger Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3.Paste below code.

<!-- Start Shareaholic Sassy Bookmarks HTML Bloggertrix.com-->
<div class="shr_ss shr_publisher"></div>
<!-- End Shareaholic Sassy Bookmarks HTML 
<!-- 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 Bloggertrix.com -->

4. Now save your HTML/Javascript'.

You are done...

Game Plus Blogger Template

Template Name : Game Plus Blogger Template

Template Author : http://www.Premiumbtemplates.com/

Designer : Sohan jayasinghe

Basic Instructions : How to install a Blogger template

Descriptions : -Fixed, 2 column,Web 2.0, 1 sidebar, Black, Premium template,
                          Right sidebar,Smooth Menubar, wide Smooth Slideshow.3 column Footer
                          Ready for games post, Round corners.