Social Media Subscription Plugin with Google Plus Followers

Social Media plugins are very popular and are heavily used by most of the websites/blogs. They are one powerful tool and are very helpful in increasing the traffic to your blog and building your audience on the internet.

The plugin that I'm going to share today is very simple compared to other plugins and it has the following features:

• Facebook like box
• Twitter follow button with count
• Google plus followers of the authors
• Google Plus follow button for your Google+ page

The plugin will look something like this.

Now here's the code for it.

<style type='text/css'>
#social-media{
background:#fff;
padding-top:10px;
border:1px solid #d9d9d9;
border-radius:15px;
}
</style>
<div id="social-media">
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechcodes&amp;width=292&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=414290321970908" scrolling="no" frameborder="0" style="background:#fff; overflow:hidden; width:292px; height:180px;" allowtransparency="true"></iframe>
<a href="https://twitter.com/LahaulSeth" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @LahaulSeth</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/116408116032173037344" data-width="262" style="background:#ffffff;">
</div>
<div class="g-plus" data-href="https://plus.google.com/100743570747620795888"></div>
</center>
<font style="font-weight:bold;size:8px;font-family:DejaVu Sans Condensed;"><a href="http://www.blogtipscodes.com/2012/12/social-media-plugin-with-google-plus-followers.html">Get this plugin >></a></font>
</div>
<script type="text/javascript">
(function(){window.___gcfg={'lang':'en'};
var po=document.createElement('script');po.type='text/javascript';
po.async=true;
po.src='https://apis.google.com/js/plusone.js';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po,s);
})();
</script>

Now before using this code you need to change all of the urls to your own.

Find this text and the replace them with your own.

techcodes --> replace with your own facebook page username
LahaulSeth --> replace with your own twitter username
116408116032173037344 --> replace with your own google+ profile id
100743570747620795888 ---> replace with your own google+ page id

After only making this changes you can use this code on your blog.

If you are having trouble using this widget, then do not hesitate to use the comment section to share your problems.

Read More...

Blog Engage Style Popup Subscription Form for Blogger

Blog Engage is a paid community for bloggers where you can syndicate your content , gain backlinks , meet other bloggers and lots more. You can also earn money using their affiliate lights program. It is a community which every blogger should join.

Since blog engage is my favorite community, I thought why not promote it by using a look alike widget. That way more people will get to know of blog engage.

Their popup domination subscription form looks like this.

Please note that this form is not in any way related to blog engage. It is only a customised feedburner form only meant for blogger. It's just a look alike using only HTML and CSS.

Like the previous aweber form, this one is also created using only html and css. The one I made looks exactly same. I'm working on a new form using jquery which I hope will be ready soon.

You can check here for a demo.

Note that since this form is only for blogger and being a customised feedburner form, the NAME field is only for display. It doesn't have any consequences whether someone fills it up or not.

To use this form, simply go to your blogger account.

>> Go to Layout --> Add a Gadget --> HTML / Javascript

Then copy the following code and paste it in the gadget. Now before saving the gadget make sure to change the feedburner username to yours.

<style type="text/css">

html #blog_engagestylepopupdiv {position:absolute;}
#blog_engagestylepopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('#');margin:0; overflow-y:auto;}
#blog_engagestylepopup {background-image: url(http://blogtipscodes.googlecode.com/files/Untitled.png); background-repeat:no-repeat; overflow:none;}
.blog_engagestylepopup {width:750px; height:334px; position:fixed; top:50%; left:50%; margin-top:-167px; margin-left:-396.5px;}
form#blog_engagestylepopup {display:block; margin:0;}
form#blog_engagestylepopup #blog_engagenamefield {padding:2px; position:absolute; top:120px; left:490px; width:205px; font-size:16px; border:none; background:transparent;}
form#blog_engagestylepopup #blog_engagefield {padding:2px; position:absolute; top:170px; left:490px; width:205px; font-size:16px; border:none; background:transparent;}
form#blog_engagestylepopup #blog_engagebutton {position:absolute; left:480px; top:218px; width:250px; height:42px; border:none; background:transparent;}
</style>

<div id="blog_engagestylepopupdiv">
<div id="blog_engagestylepopup" class="blog_engagestylepopup">
<center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('blog_engagestylepopupdiv').style.display='none'">
<img src="http://blogtipscodes.googlecode.com/files/aweberclose.png"/>
</center>
<form id="blog_engagestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogtipscodes', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="blogtipscodes" name="uri"/>
<input type="text" id="blog_engagenamefield" name="email" value="" placeholder ="Enter Your Name..." />
<input type="text" id="blog_engagefield" name="email" value="" placeholder ="Enter Your E-Mail Address..." />
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="http://blogtipscodes.googlecode.com/files/popup.gif" id="blog_engagebutton" />
</form>
</div>
</div>

Also, since this a customised feedburner form the name field in the form is just for display. You can write your name on it but it doesn't have any consequences.  Only your e-mail address will be taken into account while subscribing for feedburner.

If you like this form, join blog engage. It's a great community for bloggers. You can share your views in the comment section.

Read More...

Popup Domination Style Subscription Form for Blogger

Popup domination is mostly available for wordpress site owners. It helps in increasing the number of e-mail subscribers. The premium plugin for wordpress comes with a price of $80 or something like that. What I'm going to share is how you can add a customised popup feedburner subscription form for blogger blog.

While looking for some plugins to increase my e-mail subscribers, I found out an interesting code by Muhammad Hassan of exeideas.com. It was to my surprise, code for popup domination like subscription meant for blogger and other sites who cannot afford the premium plugin.

There were quite a few different forms in their post with 3 versions. The first two versions are of jquery and the 3rd one is using only css and html. I'm just going to share the 2nd and 3rd version. They look like same but they have different features.

Version 2 :

It is a jquery version with timing settings. You can adjust the time like how many days after the popup will again open once a visitor closes it. The timing range can be adjusted from one day to 30 days if the user doesn't clear his/her browser cookies.

Just copy the code and paste it in a HTML / Javascript gadget.

Here is the code for it.

<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
UpDated By www.exeideas.com
(Copyright (c) 2011 EXEIdeas International - admin@exeideas.tk)
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#cboxTopCenter{height:35px;}
#cboxMiddleRight{width:0px;}
#cboxContent{overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-uAof05Ee4AtlwCoqgL_38NtZtcIGGDuIYNBhScjZVFqKeEVGs-er3ISB_zrDpKKtD0vs2ZTnlgtZXG9lqTuKOZ3EHyL0CK2UbKxnlc4qw4xvyYQmr6rBGsOkdt8byh28rKep_Zb8Ho/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB55Tf5VgZ6Q6p9Uq__ov2Gfxm9tnvSlKO_jRXzTCVAgVIXZBTFTknL93TYf0iSLkv70B3UUn6JnCiiMhDB5SKuCLWFvPfC5ikL52r-Q_cdXo9EQOAF9-v39KyebHcwuU-dLio0t7qoVs/s400/loading.gif) no-repeat center center;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxClose{position:absolute; bottom:318px; right:0; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNx8hzb3O39DOE7gddHeigL5j49IEHWuJT3b11zxMJ_D66nL7NLpN9VNykpXu1wQbVYx11rN4zCgKOmC_z1CG3knph5GEDmgPyNRGL9Q7HaSXrtCVRSWp8B_0nGnhisHeE0kRhuvd6xg/s40/exestylepopupclosebutton.png) no-repeat; width:40px; height:40px; text-indent:-9999px;}
#cboxClose.hover{opacity:0.8 !important;}
#exestylepopup{overflow:none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTFPhJYFfLm5qv1Vd7r1Tw_b0COscG9kd9JmAnaDSugMNx-6-pPxx7gWBBMi15neAN_WEEFyuHtC8V5K13q7h5TyI3lN-M2xBk3YGxPE0J7XOZ4M11FGSyNDyQtbyG2ca071O6ZUtg1A/s770/EXEIdeasBlog.png) ; background-repeat: no-repeat; height: 334px; width: 770px; }
form#exestylepopup{display:block; margin:0;}
form#exestylepopup #exefield{padding:2px; position:absolute; top:171px; left:480px; width:200px; font-size:16px; border:none; background:transparent;}
form#exestylepopup #exebutton{position:absolute; left:474px; top:214px; width:249px; height:42px; border:none; background:transparent;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"785px", inline:true, href:"#exestylepopups"});
}
});
</script>
<div style='display:none'>
<div id='exestylepopups' >
<form id="exestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=EXEIdeas', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="EXEIdeas" name="uri"/>
<input type="text" id="exefield" name="email" value="" placeholder ="Enter Your E-Mail Here..." />
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="exebutton" />
</form>
</div>
</div>
<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->

Now find these lines :

var fifteendays = 1000*60*60*24*30

The number 30 controls the cookie settings. 30 means the popup window will open again after 30 days if the user doesn't clear browser cookies.

if (document.cookie.indexOf('visited=true') == -1) 

If you make it false then popup window will appear during each window refresh regardless of the timing settings.

Version 3 :

Version 3 has been created using pure css and html. It's main disadvantage is the lack of timing settings and the visitor may be annoyed with the popup window appearing again and again.

Like the previous version, just copy the code and paste it in a HTML / Javascript gadget in blogger.

Here is the code for it.

<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<style type="text/css">

/***********************************************
* CSS POP-UP With Light Box Effect- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit http://www.exeideas.com/ for full source code.
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9Uv3mEWbJoEdH9gtV1xaHO19Psz0hhlSNvlJRnNSkyDAAhansZWKCfz20tvPfhzIkXDUrrcWGSxPMlTejbs0M8fLHJf6ZVEqeVgdGLhe7bx0B6iqhuxA0w3uUXMVUkotxoV4m9PbiQ/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTFPhJYFfLm5qv1Vd7r1Tw_b0COscG9kd9JmAnaDSugMNx-6-pPxx7gWBBMi15neAN_WEEFyuHtC8V5K13q7h5TyI3lN-M2xBk3YGxPE0J7XOZ4M11FGSyNDyQtbyG2ca071O6ZUtg1A/s770/EXEIdeasBlog.png); background-repeat:no-repeat; overflow:none;}
.exestylepopup {width:770px; height:334px; position:fixed; top:50%; left:50%; margin-top:-167px; margin-left:-396.5px;}
form#exestylepopup {display:block; margin:0;}
form#exestylepopup #exefield {padding:2px; position:absolute; top:171px; left:480px; width:200px; font-size:16px; border:none; background:transparent;}
form#exestylepopup #exebutton {position:absolute; left:474px; top:214px; width:249px; height:42px; border:none; background:transparent;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-LPBzxvNTrMHLmlIuPxPaHUDXaT5WRtWaudYRwXBXDmHuxhWgO8w0QpainLbOfJOq3HAlTqbVYRuMfzqQgPtmDl1tJsYUipRwK2p1BxHdUhzPUS-6PFDsvYSQHbjUBDsqDmu6Od02w/s40/exeideasclose.png"/>
</center>
<form id="exestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=EXEIdeas', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="EXEIdeas" name="uri"/>
<input type="text" id="exefield" name="email" value="Enter Your E-Mail Here..." placeholder ="Enter Your E-Mail Here..." />
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzj77qcX9DYvPkCI4c888hdp6u8AW_IBFFbk0Tjhb6VurTykbaDAOWPnbfhUqRIfuMaLSSp6qZISvpiZRDG25MFpxS8lfxhPMeSt1uJE4QJ25WWGn88gzyV-XJ18rhpqeWX0KFXBS4w/s128/exeideasblank.gif" id="exebutton" />
</form>
</div>
</div>
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

Also make sure to change the default feedburner username to yours in both the forms.

You can use any one of the version but I would suggest that you use the version 2 since it has the timing settings.


Which one you are going to use ? You can shoot the comment section to share your views regarding this widget.

Read More...

Free Hello Bar alternative using only HTML and CSS

Hello Bar is a great little toolbar which floats on the top of the website. It helps in engaging more users in your blog or website. Using hellobar.com it is fairly easy to create a hellobar for your site. They will provide you with a code you will have to paste the code in  the <body> section of your site which is fairly easy for even beginners.

Unfortunately, the free version of the hello bar only allows 25 clicks. Beyond that you have to pay money to avail it's services. The most cheapest one comes with 100 clicks priced at $4.95/month. But if you pay $29 then you can use the hello bar in unlimited sites forever. It's a one time payment. Again it costs money (which I don't have at the moment).

So to relieve myself of the disappointment the other day I was experimenting with HTML & CSS to see if I can actually create a hello bar of my own. To my surprise I was able to create one which looks just like the original one. Here's a demo.

On the left is Ian Eberle's omegaweb.com which features the original Hello Bar and on the right is my site which features the hello bar I created.

Pretty cool !!! Huh ???

At first glance, you wouldn't be able to tell the difference. Sure it does not have the automatic feed update features or the statistics display feature. But it's free to use and it looks exactly the original. It is good for those who doesn't have the money to buy it.

Now onto the main point, the coding. Before doing anything, save a copy of your template.

To use this widget on your site copy this css code and paste it right before  ]]></b:skin>

#btchello_bar{
background:#CC3300;
width:100%;
margin:0px auto 0px auto;
text-align:center;
padding:5px 0;
box-shadow: #666666 0px 1px 3px;
z-index: 9998;
height: 22px;
position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
text-decoration:none;
color:#fff;
font-size:15px;
font-weight:none;
font-family: verdana;
line-height: 24px;
border-top:0px solid #000;
border-bottom:0px solid #000;
}
#btchello_bar a{
text-decoration:none;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
font-family: Cambria;
line-height: 24px;
}
#btchello_bar a:hover{
text-decoration:none;
}
#btchello_bar p {margin:0; list-style:none;}
#btchello_bar img {vertical-align: middle;
margin-right: 6px;}

Now copy the following HTML code and paste it right after the <body> tag.

<div id='btchello_bar'>
Join Blog Engage Affiliate Program and earn 25% commission
<button onClick='window.location=&apos;https://www.affiliatelights.com//idevaffiliate.php?id=622_2_1_45&apos;' style='width:50; height:15;'>Join Now</button>
</div>

Just replace the text and link with your own choice of links and text. Then preview your blog to see whether the widget is working properly. Then save your template.

If you like this article then please share it. You can also shoot the comment section to provide your views regarding this widget.

Read More...

Add a MyBloggerTricks style social subscription widget to your blogger blog

MyBloggerTricks is one of the most popular websites in the world. It provides different types of tips on blogging , SEO , blogger widgets and many others. It's social subscription widget on the upper part of the site is also pretty cool. It contains the links of RSS Feed , Facebook , Twitter and Google+. It also shows the no. of twitter followers and there is also a form for e-mail subscription. So, today I decide to share on how you can use the widget on your blog.

First copy and paste the code in wordpad.

<style>

.BTCbar{width: 300px; float: left;}
.BTCbar .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;}
.BTCbar .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;}
.BTCbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}
.BTCbar .subicons a{text-decoration: none; color:#333333;}
.BTCbar .subicons a:hover{text-decoration: underline; color:#333333;}
.BTCbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkF9LWmuM4P4Sxt5vV_Ecxb0VPkQyqETMk08_QuA6UyAOvkJLSHK61NLmHC5AyGPtcdkOUw3supaNU7HgEhyRhfJId7yIeCgScMt3seBYM_FX1qEPwAR2ZZ6BD5cDY5a4bew0WqQ-eBP8/s400/rsssprite.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;}
.BTCbar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkF9LWmuM4P4Sxt5vV_Ecxb0VPkQyqETMk08_QuA6UyAOvkJLSHK61NLmHC5AyGPtcdkOUw3supaNU7HgEhyRhfJId7yIeCgScMt3seBYM_FX1qEPwAR2ZZ6BD5cDY5a4bew0WqQ-eBP8/s400/rsssprite.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;}
.BTCbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkF9LWmuM4P4Sxt5vV_Ecxb0VPkQyqETMk08_QuA6UyAOvkJLSHK61NLmHC5AyGPtcdkOUw3supaNU7HgEhyRhfJId7yIeCgScMt3seBYM_FX1qEPwAR2ZZ6BD5cDY5a4bew0WqQ-eBP8/s400/rsssprite.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;}
.BTCbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkF9LWmuM4P4Sxt5vV_Ecxb0VPkQyqETMk08_QuA6UyAOvkJLSHK61NLmHC5AyGPtcdkOUw3supaNU7HgEhyRhfJId7yIeCgScMt3seBYM_FX1qEPwAR2ZZ6BD5cDY5a4bew0WqQ-eBP8/s400/rsssprite.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;}
.BTCbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 10px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.BTCbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSfP3_cK-6hLMrwEvlxDItnxHD_-PbupF7rHqA9vSj3hseHzX33FRTamoF5bLC_CRT0hWKRuXDglCphTo82Dgw2DOoGqUW_7En-MOXTnYY_ZnvjcoxCNfEl3fws2Mf2yDGzbsxQvsh3wc/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px;  line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }
.BTCbar .emailsub .emailupdatesform{margin: 10px 0 5px 5px; width: 300px; float: left;}
.BTCbar .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: 205px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.BTCbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

</style>

    <!--[if IE 9]>
    <style>
    .BTCbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

   .BTCbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 3px 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
    </style>
    <![endif]-->

<div class="BTCbar">
<div class="count">
<span class="bigcount">
<a rel="nofollow"  href="http://feeds.feedburner.com/blogtipscodes"><img 
width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/blogtipscodes?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26"/></a></span>
Learn Free Pro Tricks daily </div>
<div class="subicons">
<div class="rssicon">&#160;<a rel="nofollow" href="http://feeds.feedburner.com/blogtipscodes" target="_blank">RSS</a></div>
<div class="googleicon">&#160;<a href="https://plus.google.com/116408116032173037344" rel="author" target="_blank"> G+</a></div>
<div class="fbicon"> &#160;<a href="https://www.facebook.com/techcodes" target="_blank" rel="nofollow">FB</a></div>
<div class="twittericon">&#160;<a href="http://twitter.com/lahaulseth" target="_blank" rel="nofollow">Twitter</a></div>
</div>
<br  style="clear:both;"/>
<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/lahaulseth' rel='nofollow'></a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>

    <div class="emailsub">
    <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 12px; font-weight: normal; font-family:  Arial;  padding:0; margin:0;">Receive Quality Tutorials Straight in your Inbox &#160; by submitting your Email ID below.</p></div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogtipscodes', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />
<input value="blogtipscodes" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>
</div>
<div class='clear'></div>

 Then find the following words and replace them with your own usernames.

blogtipscodes --> Replace with your own feedburner username

techcodes --> Replace with your own facebook page username

lahaulseth --> Replace with your own twitter username

116408116032173037344 --> Replace with your own Google+ ID

After replacing all of these words then copy and paste the code in one of the  sidebars of your blog. Then view your blog to see the effect. Click here for a demo.

Read More...

Add a simple looking scrolling "Back to Top" Button to blogger blog

The back to top button helps blog readers to scroll back to top quickly when they have read a long post.

Just paste the following code in one of the HTML / Javascript gadget and save it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script>
    $(document).ready(function(){
        // hide #back-top first
        $("#back-top").hide();
     
        // fade in #back-top
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    $('#back-top').fadeIn();
                } else {
                    $('#back-top').fadeOut();
                }
            });
            // scroll body to 0px on click
            $('#back-top a').click(function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });
    });
    </script>

 <style>
    #back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -170px;
    }
    #back-top a {
    width: 45px;
    display: block;
    text-align: center;
    font: 8px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #666;
    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;}
    #back-top a:hover {color: #000;}
    /* arrow icon undefinedspan tag) */
    #back-top span {
    width: 45px;
    height: 45px;
    display: block;
    margin-bottom: 7px;
    background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNuJ0zXE6OpD9GjrmQ-qlvcEZzrtHHBrLScrmSOjaT4nbjTv5OWiXKhUZfgnE_3zHy1vtomDEWXYhoxJpZ5QQvUuK1lxewgP1248xx_2VQhlZbf_ksM2SDaF6MSECzP9u91sDp0APNNrp/s1600/up-arrow.png) no-repeat center center;
    /* rounded corners */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;}
    #back-top a:hover span {   background-color: #000;}
    </style>
    <div id="back-top" style="display: block; ">
    <a href="#top"><span></span><font><font>Top</font></font></a>
    </div>

Note that if you remove the jquery library, it will still work but won't have the scrolling effect.

Read More...

Add a Mashable Style Social Subscription Widget to your blogger blog

Mashable style social subscription widget gives our readers the benefit of sharing your post on most of the popular social networking sites which includes

Facebook , Google+ , Pinterest , Twitter , Feedburner Subscription etc.

To add this to your blog, you just simply have to paste the code and change the URLs of the social networking sites with yours.

<style>
/* Social Widget */
#BTC-mashable-bar{border: 0;margin-bottom: 10px;margin: 0 auto;width:300px;border: 1px solid #DDD;}
.fb-likebox{background: #fff;padding: 10px 13px 0 10px;border-right: 1px solid #D8E6EB;border-left: 1px solid #D8E6EB;border-bottom: 1px solid #D8E6EB;margin:0px;height:70px;}
.googleplus{background: #F5FCFE;border-top: 1px solid #FFF;border-bottom: 1px solid #ebebeb;border-right: 1px solid #D8E6EB;border-left: 1px solid #D8E6EB;border-image: initial;font-size: .90em;font-family:"Arial", "Helvetica", sans-serif;color: #000;padding: 9px 11px;line-height: 1px;}
.googleplus span{color: #000;font-size: 14px;position: absolute;display:inline-block;margin: 9px 70px;font-family: calibri;width: 280px;}
.pinterest1{background: #F5FCFE;border-top: 1px solid #FFF;border-bottom: 1px solid #ebebeb;border-right: 1px solid #D8E6EB;border-left: 1px solid #D8E6EB;border-image: initial;font-size: .90em;font-family:"Arial", "Helvetica", sans-serif;color: #000;padding: 9px 11px;line-height: 1px;}
.pinterest1 span{color: #000;font-size: 14px;position: absolute;display:inline-block;margin: 9px 40px;font-family: calibri;width: 280px;}
.g-plusone{float: left;}.gplus{background: #fff;padding: 0px;border: 0px solid #C7DBE2;margin-bottom:-13px;}
.twitter{background: #EEF9FD;padding: 10px;border: 1px solid #C7DBE2;border-top: 0;}
.pterest{background: #F5FCFE;padding: 10px;border: 1px solid #C7DBE2;border-top: 0;}
#mashable{background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 2px 8px 2px 3px;text-align: right;border-image: initial;}
#mashable .author-credit{}
#mashable .author-credit a{font-size: 10px;font-weight: bold;text-shadow: 1px 1px white;color: #1E598E;text-decoration:none;}
#email-news-subscribe .email-box{padding: 5px 10px;font-family:"Arial", "Helvetica", sans-serif;border-top: 0;border-right: 1px solid #C7DBE2;border-left: 1px solid #C7DBE2;border-image: initial;height:36px;}
#email-news-subscribe .email-box input.email{background:#FFFFFF;border: 1px solid #dedede;color: #999;padding: 7px 10px 8px 10px;-moz-border-radius: 3px;-webkit-border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;border-image: initial;font-family:"Arial", "Helvetica", sans-serif;}#email-news-subscribe .email-box input.email:focus{color:#333    }
#email-news-subscribe .email-box input.subscribe{background: -moz-linear-gradient(center top, #FFCA00 0, #FF9B00 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFCA00), color-stop(1, #FF9B00));background: -moz-linear-gradient(center top, #FFCA00 0, #FF9B00 100%);-pie-background: linear-gradient(270deg, #ffca00, #ff9b00);font-family:"Arial", "Helvetica", sans-serif;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #cc7c00;color:white;text-shadow:#d08d00 1px 1px 0;padding:7px 14px;margin-left:3px;font-weight:bold;font-size:12px;cursor:pointer;border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{background: #ff9b00;background-image:-moz-linear-gradient(top, #ffda4d, #ff9b00);background-image:-webkit-gradient(linear, left top, left bottom, from(#ffda4d), to(#ff9b00));filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff, endColorStr=#ebebeb);outline:0;-moz-box-shadow:0 0 3px #999;-webkit-box-shadow:0 0 3px #999;box-shadow:0 0 3px #999 background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ffda4d), color-stop(1, #ff9b00));background:-moz-linear-gradient(center top, #ffda4d 0, #ff9b00 100%);-pie-background:linear-gradient(270deg, #ffda4d, #ff9b00);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #cc7c00;color:#FFFFFF;text-shadow:#d08d00 1px 1px 0    }
#other-social-bar{background-color: #D8E6EB;box-shadow: 0 1px 1px #FFFFFF inset;padding: 0px;font-family:"Arial", "Helvetica", sans-serif;font-weight:bold;overflow: hidden;border: 1px solid #B6D0DA;height:37px;}
#other-social-bar ul{list-style: none outside none;padding-left: 4px;}
#other-social-bar .other-follow{float: left;color:#1E598E;overflow: hidden;height:20px;padding:5px;width: 270px;}
#other-social-bar .other-follow ul{list-style: none outside none;padding-left: 4px;}
#other-social-bar .other-follow ul li{font-size: 12px;font-weight: bold;display:inline;border:0;text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a{font-size: 12px;color:#1E598E;font-weight: bold;display:inline;text-shadow: 1px 1px white;}
#other-social-bar .other-follow li{font-size: 12px;font-weight: bold;display:inline;border:0;text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a{font-size: 12px;color:#1E598E;font-weight: bold;display:inline;text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtz8VGzWjk_wEzoepHk7q40JKBHTLhutuDJdVW6Y6I9djUBRtp8qZD8juvO0wOvAOm3Obrwhi3zPc_kLwPSObLTnG62-trX3-VaLD1hVVx9mm5maOkNTHM-UrMNAiaVHI3Gi9F88wYk6A/s400/rss-16x16.png') no-repeat transparent;line-height: 1;padding: 0px 3px 1px 20px;width: 60px;margin-bottom:0px;margin-left:5px;}
#other-social-bar .other-follow li.my-rss a,
#other-social-bar .other-follow li.my-twitter a,
#other-social-bar .other-follow li.my-gplus a{text-decoration:none;}
#other-social-bar .other-follow li.my-rss a:hover,
#other-social-bar .other-follow li.my-twitter a:hover,
#other-social-bar .other-follow li.my-gplus a:hover{text-decoration:underline;}
#other-social-bar .other-follow li.my-twitter{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZXQjpk9XkxgQ3exo86ovIMNTREOGrJCN0Po4Sgc9uZ9bWwyHg3jW7_OUa6gcZW_WCYyBCDWhdHbzruZzll6pAIObL93wn_MBs2WSLMh1mbX3CZ7fKbw0rA7HMHFidS3sMj185OegX7Hw/s400/twitter%2527.png') no-repeat transparent;line-height: 1;padding: 0px 3px 1px 20px;width: 60px;margin-bottom:0px;}#other-social-bar .other-follow li.my-gplus{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0IJ6G8yhl2kX68IEfqbGmpjCHUp_6c5O4V4s4P7i6s8gqq5NKetmPB5qKWEGPJVKZ1Yq6zOHL-h7Cg2J0-rWa_4wV6-seHMHfBVyz0dc-0yByIImYEHO3i5MUP1TeS0_OI2NF_XWg3vg/s400/gplus-16x16.png) no-repeat transparent;line-height: 1;width: 60px;padding: 0px 3px 1px 20px;margin-bottom:0px;}</style><!--[if IE]><style>#email-news-subscribe .email-box input.subscribe{background: #FFCA00;}</style><![endif]-->

<!--begin of social widget-->

<div style="margin-bottom:10px;">
<div id="BTC-mashable-bar">
<!--Begin Widget -->
<div class="gplus">
<link href="https://plus.google.com/u/0/YOUR GOOGLE+ PROFILE ID/" rel="publisher" />
<script type="text/javascript">
window.___gcfg={lang:'en'};
undefinedfunctionundefined)
{
var po=document.createElementundefined"script");
po.type="text/javascript";
po.async=true;
po.src="https://apis.google.com/js/plusone.js";
var s=document.getElementsByTagNameundefined"script")[0];
s.parentNode.insertBeforeundefinedpo,s);})undefined);
</script>
<script type="text/javascript">
var _gaq=_gaq||[];_gaq.pushundefined['_setAccount','UA-29131740-1']);
_gaq.pushundefined['_trackPageview']);
undefinedfunctionundefined)
{
var ga=document.createElementundefined'script');
ga.type='text/javascript';
ga.async=true;
ga.src=undefined'https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';
var s=document.getElementsByTagNameundefined'script')[0];s.parentNode.insertBeforeundefinedga,s);})undefined);
</script>
<!--Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/u/0/YOUR GOOGLE+ PROFILE ID/" width="300" height="131" margin="0px" theme="light">

</g:plus>

</div>

<div class="fb-likebox">

<!--Facebook -->

<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>

<div class="fb-like-box" data-href="http://www.facebook.com/YOUR FACEBOOK PAGE USERNAME" data-width="292" data-show-faces="false" data-stream="false" data-header="false">

</div>

</div>

<div class="googleplus">

<!--Google -->

<span>

Recommend us on Google!

</span>

<div class="g-plusone" data-size="medium">

</div>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

</script>

</div>

<div class="pinterest1">

<a href='javascript:void(run_pinmarklet1())'>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTPkdK7W9SaMLF1KebSSoremwCWDeIay3F2yYSYmc342uVXPEOONZhSXqREa8bSxF_bxiDl_S9iJ_OZ955h15TePOJ_8j7VuPpI6LHYUK9lAm9qfiPb1jiIKCaax-QsmYTzxrvAVP3y0c/s1600/pinmask2.png" style='margin:0;padding:0;border:none;'/>

</a>

<script type='text/javascript'>

function run_pinmarklet1()

{

var e=document.createElement('script');

e.setAttribute('type','text/javascript');

e.setAttribute('charset','UTF-8');

e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);

document.body.appendChild(e);

}

</script>

<span>Pin It On Pinterest</span>

</div>

<div class="twitter">

<!--Twitter -->

<iframe title="" style="width: 300px;height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&align=&button=blue&id=twitter_tweet_button_0&lang=en&link_color=&screen_name=TWITTER USERNAME&show_count=&show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe>

</div>

<div class="pterest">

<a href="http://pinterest.com/YOUR PINTEREST ID/">

<img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" />

</a></div>

<div id="email-news-subscribe">

<!--Email Subscribe -->

<div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 150px;font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /><input type="hidden" value="YOUR FEEDBURNER ID" name="uri" />

<input type="hidden" name="loc" value="en_US" />

<input class="subscribe" name="commit" type="submit" value="Subscribe" />

</form>

</div>

</div>

<div id="other-social-bar">

<!--Other Social Bar -->

<ul class="other-follow">

<li class="my-rss">

<a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/YOUR FEEDBURNER ID" target="_blank">RSS Feed</a>

</li>

<li class="my-twitter">

<a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/TWITTER USERNAME target="_blank">Twitter</a></li>
<li class="my-gplus"><a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/YOUR GOOGLE+ PROFILE ID target="_blank">Google Plus</a></li></ul>

<!--Don't remove credits otherwise your widget will not work -->

</div>

<div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: " arial ","helvetica ",sans-serif;"><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;">
<a href="http://www.blogtipscodes.com/" target="_blank">Blog Tips Codes</a></span></div></div>
<!--Don't remove credits otherwise your widget will not work --><!--End Widget --><!--end of social widget-->
</div>

Change the respective social networking ids with your own which I have highlighted in red and paste the code in HTML/Javascript gadget in the sidebar.

For any problems, do not hesitate to post a comment and I will be more than happy to fix your issue.

Read More...

How to use "PasteHTML" to preview your HTML code ?

PasteHTML.com is a free HTML publishing website where you can paste your HTML code and preview it online and also store it without any registration for future references.

Just go to the site and paste your HTML code and click on "Publish Page".

If you want you can paste the my Multi-level Navigational Menu code for a demo and preview it. Just copy and paste the code from here in PasteHTML.com and the preview it, which will look like this :

It's as easy as that. Enjoy.

Read More...

Scrolling Recent Posts widget for Blogger

Scrolling Recent Posts widget is best for your site's new visitors as it quickly grabs your visitor's attention and will also increase your pageviews.

Follow the steps below to implement it on your blog :

1) Go to your blogger account.

Go to Template --> Edit html. Find <head> using ctlr+f and paste the following line of code after <head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> 

2) Go to layout.

3) From one of the sidebars, add a HTML / Javascript Gadget.

4) Copy the code below and paste it.

<style type="text/css" media="screen">

#blogtipscodes-scroll {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#blogtipscodes-scroll ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#blogtipscodes-scroll li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8Wvc9crO4JDvdGjq1jfTPkUB64QBiDkPT2es96R7FjcVrrQmA-pA7pVL5TzhfDjXUdKcWGiPH9cAIowMZIcEVxkUeZFRZHqjFNMxhjkvwdZa6yPF9XR37Xdj-liPXRgbKCFKbLepGSA/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#blogtipscodes-scroll li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#blogtipscodes-scroll img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#blogtipscodes-scroll img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#blogtipscodes-scroll img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.blogtipscodes.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="blogtipscodes-scroll">
<script src='https://dl.dropbox.com/s/9ztrbkqn0x507ua/scroll.js?dl=1' type='text/javascript'></script>
</div>

5) Change the home_page url to your own blog url.

     numposts controls how many posts the code will scroll. 

     limitspy controls the no. of thumbs.

6) Save it.

7) View your blog to see the effect.

You can modify the above css code to suit your blog's needs.

Read More...

Add a Numbered Page Navigation to Blogger Blog

In most of the popular blogs, you can see the numbered page navigation just below the post section. It helps readers to easily check out your older posts in a methodical fashion.

In this post, I will demonstrate how to add a simple numbered page navigation just like I have added to my blog.

Just copy the code below and add the code in a HTML/Javascript gadget below the Blog Post Gadget.

Read More...

Add a Related Posts widget with Thumbnail and Summary to your blogger blog

The related posts widget with thumbnails and summary are good to look at and would generate some pageviews if your reader gets interested by reading the summary.

The widget that I'm going to show looks like this .....

To show this widget on your blog , simply follow the easy steps :

1> Go to your blogger account.

2> Template --> Edit HTML

3> Expand widget templates

4> Using Ctrl + f, find </head> and paste the following code just above the </head>line.

<style>
#related_posts h4 {background: none repeat scroll 0 0 #333;color: #FFF;font-family: Arial,Tahoma,Verdana;font-size: 11px;font-weight: bold;margin: 10px 0 0 0;padding: 6px 5px 6px 8px;text-shadow: 1px 1px #000000;text-transform: uppercase;}
#relpost_img_sum {/* height: 320px;overflow: auto; */margin: 0;padding: 4px;line-height: 16px;}
#relpost_img_sum:hover {background: none;}
#relpost_img_sum ul {list-style-type: none;margin: 0;padding: 0;}
#relpost_img_sum li {border: 1px solid #DDD;margin: 0;padding: 5px;height: 65px;list-style: none;}
#relpost_img_sum li:hover {background-color: #E6E6E6;}
#relpost_img_sum a {text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#relpost_img_sum .news-title {display: block;font-weight: bold !important;margin-bottom: 4px;}
#relpost_img_sum .news-text {display: block;text-align: justify;font-weight: normal;text-transform: none;color: #333;}
#relpost_img_sum img {float: left;margin-right: 14px;padding: 4px;border: solid 1px #DDD;width: 55px;height: 55px;}
</style>
<script src='https://dl.dropbox.com/s/4egbrqj6ddfp8f6/rel2.js' type='text/javascript'></script>

5> Then using Ctrl+f , find your post-footer code.

<div id='post-footer'>

6> Paste the following code under line.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related_posts'>
<h4>You might also like :</h4>
<script src='/feeds/posts/default/-/kesehatan?alt=json-in-script&callback=relpostimgcuplik&max-results=50' type='text/javascript'></script>
<a href='http://www.source-codes.co.in/2012/08/add-related-posts-widget-with-thumbnail.html' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>

</b:if>

7> Then save your template and view a blog post to see the effect.

Read More...

Add a jQuery Facebook popup like box with timer in 3 easy steps

The jQuery Facebook popup like box pops up when someone enters your blog. It has the facebook like button which can be used to increase your blog's fan page likes. It also has a timer depending on which the pop up will disappear.

The other ways it will disappear is when the visitor likes the page or clicks on the close button. Click here for a demo.

Follow the steps to implement it on your blog.

1) Go to your blogger account.

2) Template --> Edit HTML

3) Using Ctrl+f, find </body> and paste the following code just above the </body> line.

Replace "techcodes" with your own FB pan page username. The time set here is 40 seconds and you can change it as you wish.

Save the template and view the blog to see the effect.

Leave a comment for any problems.

Read More...