How to add Facebook popup like box for blogger

Hi! Guys in today’s post I would like to tell you ‘How to add Facebook popup like box for blogger’. After the page is fully loaded the Facebook popup like box slides from the bottom of the page to the center.

Adding this widget to your blog is very simple.

Follow these simple steps:

1. Log in to blogger and go to Layout.
2. Click on “Add a Gadget” and select HTML/Javascript.
3. Copy the below code and save it.

 Before adding the code, please change Techpro365 with your Facebook fan page.

 You can also change the “Don’t forget to join with our community” to whatever you feel   like adding.

CODE:

<style type='text/css'>

#Techpro365FBpop {

position:fixed !important;

position:absolute;

top:350px;

left:50%;

margin:0px 0px 0px -182px;

width:300px;

height:auto;

padding:16px;

background: #FEFEFE;font:normal Dosis, Georgia, Serif;

color:#111;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

#Techpro365FBpop a.bsclose {

position:absolute;

top:-10px;

right:-10px;

background:#fff;

font:bold 16px Arial, Sans-Serif;

text-decoration:none;

line-height:22px;

width:22px;

text-align:center;

color:#000000;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:22px;

-moz-border-radius:22px;

border-radius:25px;

cursor:pointer;

}

</style>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type='text/javascript'>

$(window).bind("load", function() {

// Animate Top

$('#Techpro365FBpop').animate({top:"180px"}, 1000);

// Widget by www.Techpro365.com

$('a.bsclose').click(function() {

$(this).parent().fadeOut();

return false;

});

});

</script>

<div id='Techpro365FBpop'>

<!-- Widget by www.Techpro365.com Start -->

<center><b><a class="Techpro365">Don't Forget To Join With Our Community</a></b></center>

<center>

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

<!-- Widget by www.Techpro365.com End -->

<a class='bsclose' href='#'>&times;</a>

<center style="float:right; margin-right:10px;">

</center></div>

If you have any genuine problems regarding this post please feel free to contact. 

Print Page

How to add a floating or fixed header to blogger.

Hi! Guys in this post I would like to tell you about ‘How to add a floating or fixed header to blogger.’

The header portion remains fixed while you scroll down the page of your blog. This can be done by making some changes to the style sheet of the template. Don’t worry I am with you throughout this.

But before making any changes to your template please backup it.

Now follow these simple steps:

1. Log in to blogger.
2. Go to template and backup it first.
3. Click on ‘Edit HTML’.
4. Now search for #header or header#masthead or something like this that defines the header portion of the template. You can do the search by pressing Ctrl+F.
5. Add position:fixed; z-index:200; background-color: #fff; to the #header portion of style sheet.
6. This part of the code makes the header portion to stick at the top of the blog and any other content.
7. Now we have to make some changes in the #main portion to prevent the posts from being positioned underneath the header.
8. Search for #main or the portion that defines the main portion of the blog.
9. Add margin-top:200px; to the #main portion of the style sheet.
10. Sometimes you have to make some modifications in the style sheet according to your needs.

If you have any genuine problems regarding this post please feel free to contact.

Print Page

How to add arrow keys to navigate in blogger

Hi! Guys in this post I would like to tell you ‘How to add arrow keys to navigate in blogger’.

This widget helps you to navigate from one page to next page and also one post to the next. Navigating through this widget is so helpful because otherwise we have to search for the next post link on the blog, with this that problem can be avoided.

Adding and removing this widget from your blog is so simple. You can add it by clicking on the ‘Add to Blogger’ button.

How to let others know of this?

You can do it by adding some floating images like I done it on this blog. You can let them know by showing some text on your blog.

If you want to show some floating images follow these simple steps.

Log in to blogger.

Go to template. At first backup your template and click on edit HTML.

Search for ]]></b:skin> . You can do this by pressing Ctrl+F.

Add this below code just before ]]></b:skin>.

#float_techproleft { position:fixed;_position:absolute;bottom:270px;left:0px;clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);} #float_techproright { position:fixed;_position:absolute;bottom:270px;right:0px;clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

Now search for </body> and add the below code just before </body>.

<div id='float_techproleft'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpKwAhadNwnudfI-BcSsxgTk7g-1cssKRm_bIolNuz147DRABSd75QiofSVPdkTNWBKmITC_y3I1zKn5HI_KWpDYyEvFndA5-kqwQ9Ujxo0MrAV-mmzK0r59HeAsxSKyoSmkatRw4BtBb/s1600/left.png' title='use keyboard keys to navigate'/> </div> <div id='float_techproright'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPQ2G_YsV-pCaxkuBBjzoylRTq9xh6QutOeMyb69M7_yBmyiV8REpNTKU-zzKZ16ff79t2WvMOFp53YVLitJbL9yUzGPxhhpY7sRA3yQ4TcQQ5VmfZPduf8B_dOrm1azl6HzdjgyK4XPD/s1600/right.png' title='use keyboard keys to navigate'/> </div>

Now click on ‘save’ button and you can see the changes on your blog.

You can edit the image links of the navigation keys in the above code.

If you have any genuine problem regarding this post please feel free to contact.

Print Page

How to add Floating Social Share bar

Hi guys! In this post I would like to tell you ‘How to add Floating Social Share bar’.

Generally bloggers use social networking sites to promote their content and get visibility. With this widget we can easily access different kind of social networking platforms at one place.

Adding this to your blog is so simple that it takes barely two minutes to do so.

Follow these simple steps:

1. Log in to blogger and go to Layout.
2. Click on Add a Gadget and select HTML/JavaScript and paste the following code and save it.
3. Before saving it change the techpro4u with your twitter account name.
4. You can customize this widget according to your convenience.
5. By default the position of the widget is left if you want to change it to right change left to right.
6. Check out your blog for the changes.

CODE:

<!-- Sidebar share buttons techpro365.blogspot.in--><style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-780px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color: #b2e0ff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from techpro365.blogspot.in"> <div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div> <br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='techpro4u' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script> <br /><div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div style="clear: both;font-size: 9px;text-align:center;"> <a href="http://techpro365.blogspot.in/" target="blank"><font color="red">Get This<font></font></font></a></div><!-- Sidebar share buttons End --></div></div>

 If you have any genuine queries or facing any difficulties in following the post feel free to ask through the forum or the contact page.

Print Page