Tweak Your Blog: Widgets

Showing posts with label Widgets. Show all posts

How To Add Toggle Button in Blogger Blogs

at Monday, December 31, 2012 Posted By Unknown 5 comments:

Few days back when I was working with my other blog "Spice Up Your Brain", I was tempted to develop a code to toggle the visibility of the answers of the puzzles. So I studied the codes well so as to generate a simple code to toggle the visibility of a content. At last I was successful in that and here I am sharing with you that code which can be used anywhere in your blogger blog, even in your blog post. The major advantage of this code over the others is that this can be used as many times as you wish in a single page without any distraction. You can see the live demo below!

Demo:

Add Toggle Button To Blogger Blog

1) Place the below code anywhere in your blog, where you wish to place the toggle button.

<button class="tybbutton" onclick="if(document.getElementById('tybtoggle') .style.display=='none') {document.getElementById('tybtoggle') .style.display=''}else{document.getElementById('tybtoggle') .style.display='none'}" title="Click To Show/Hide Content" type="button">Show/Hide Content!</button>
<div id="tybtoggle" style="display: none;" class="tybtogglecontent">
Hidden Content!</div>

2) Copy and Paste the following code Directly Above ]]></b:skin>

/*Toggle Button Css*/

.tybtoggle
{
   font-family:Georgia,serif;
   font-weight:bold;
   background-color:#00CC33;
   border-color:#000000;
}

.tybtogglecontent
{ font-weight:bold;
color:#000000;
letter-spacing:1pt;
word-spacing:2pt;
font-size:12px;
text-align:left;
font-family:comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
line-height:1;
}

/*End Toggle Button Css @ http://www.tweakyourblog.com */

Customization:

Replace "Show/Hide Content!" text with any text that you wish to be displayed on the button.
Replace "Hidden Content!" with the hidden content.
"tybtoggle" is the id of the Toggler, give each Toggler a unique id.
"#00CC33" is the colour code of the button, replace it with code of any colour which you like.
"#000000" is the colour code of the hidden content, replace it with code of any colour which you like.

That's it you now have a cool toggle button on your blog.

Drop your comments and questions below.

Christmas Style Email Subscription Widget For Blogger Blogs

at Saturday, December 22, 2012 Posted By Unknown 3 comments:

With just 2 more days left for Christmas here we are with our last seasonal widget for this season. In our previous posts we have shared with you Christmas snow falling effect and other 5 Christmas effects for blogger blogs. Now our last one, Christmas style email subscription widget. A cool Santa clause holds a board showing subscribe via email, which enables visitors to register their mail id. Which can increase your email subscribers this Christmas up to an extend as the visitors will get attracted to it

Add Christmas Style Email Subscription Widget To Your Blog

1) In the Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript':

2) Copy and Paste the following code into the Html/Javascript Gadget :

<style type="text/css">
#tweakyourblog-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpFYsVWM21_UZ3pdN_Ctr_Oaw0ysIToba8Jg_UAVEIl9LMwf1ZPEA5rdBiqXgr2OoNQKjyBHiV5qFZTf_EtYt5hKYKSPEKgAW5p0rXbLin8mM7nLKaVwntOCxTkWg6s6pIKvhryf123s/s320/asdsaf.png)no-repeat scroll center center transparent;
    height: 280px;
    width: 320px;
}

form#tweakyourblog-emailform {
    display: block;
    margin: 0;
    padding-left: 32px;
    padding-top: 191px;
}

form#tweakyourblog-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 198px;
}

form#tweakyourblog-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 25px;
    padding-right: 45px;
}</style>

<div id="tweakyourblog-emailbox">
    <form id="tweakyourblog-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Tweaks123', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="tweakyourblog" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "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="sbutton"
        />
    </form>
</div>

3) Replace Tweaks123 with your feedburner ID.

That's it Happy Christmas ! Peace And Blessings!

Drop Your Comments And Questions Below.

Auto Scrolling Recent Posts Widget For Blogger Blogs

at Sunday, December 16, 2012 Posted By Unknown 2 comments:

People always go after new trends & styles, recent studies say that the style of your blog is much more important than the content of your blog. The auto scrolling recent posts widget is a stylish recent post widget which can make your visitors spend more time on your blog. In this widget, the recent posts on your blog are shown off to your visitors using a jQuery scroll effect, which can easily catch the attention of your visitors. Now lets see how to add it to your blogger blog!

Add Scrolling Recent Posts Widget To Your Blog

Step 1. In Your Blogger Dashboard Click > Template > Edit HTML > Proceed button:

Step 2. Using Ctrl+F Search For <head> and just below it paste the following Code:

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

Step 3. In the Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript':

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

</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/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.tweakyourblog.info/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Step 4. Replace http://www.tweakyourblog.info/ With your blog URL.

Note: numposts = 10 Shows the number of posts that will be scrolled and limitspy=4 Shows the number of posts that appear on the widget at once.

That's it you now have an awesome scrolling recent posts widget on your blog.

Drop Your Comments And Questions Below.

5 Christmas Effects For Your Blogger Blog

at Thursday, December 13, 2012 Posted By Unknown 7 comments:

In my last post i have shared with you how to add christmas snow falling effect to your blogger blog. And today i am here with a collection of 5 christmas effects for your blogger blog. The collection includes christmas flashing lights, animated santa, christmas backgroung music, etc. All these effects are easy to be applied on your blog. You can add it to your blog by copy pasting the below scripts into a HTML/Javascript Widget.

Before you add these to your blogger blog make sure to check out our Christmas Snow Falling Effect For Blogger.

Add Christmas Effects To Your Blog

Simply click the add to blogger button, on the next page select your blog and click add widget.

1) Background Music [Jingle Bells]

<br /> <embed style="width:1px; height:1px; visibility:hidden" autostart="true" loop="true" volume="100%" src="http://learnsongs.ru/songs/BoneyM_jingle_bells.mp3"/></embed>

2) Flashing Lights On Top

<SCRIPT language=javascript type=text/javascript>
//<![CDATA[
var Ovr2='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";}
else
{cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";}

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
{cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: left top;}';
var cot_tl_fixedCSS='#cot_tl_fixed{position:fixed;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'_position:absolute;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'top:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'left:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp;
var cot_tl_popCSS='#cot_tl_pop {background-color: transparent;';
var cot_tl_popCSS=cot_tl_popCSS+'position:fixed;';
var cot_tl_popCSS=cot_tl_popCSS+'_position:absolute;';
var cot_tl_popCSS=cot_tl_popCSS+'height:98px;';
var cot_tl_popCSS=cot_tl_popCSS+'width: 1920px;';
var cot_tl_popCSS=cot_tl_popCSS+'right: 120px;';
var cot_tl_popCSS=cot_tl_popCSS+'top: 20px;';
var cot_tl_popCSS=cot_tl_popCSS+'overflow: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'visibility: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'z-index: 99999;';
var cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;
document.write('<style type="text/css">'+cot_tl_bodyCSS+cot_tl_fixedCSS+cot_tl_popCSS+'</style>');

function COT(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl_fixed">');
document.write('<img src='+cot_tl_theLogo+' alt="" border="0"></a>');
document.write('</div>');}

//if(window.location.protocol == "http:")
COT("http://www.honeybearplayhomes.com/resources/flashing%20christmas%20lights.gif", "SC2", "none");
//]]>
</SCRIPT>

3) Flashing Lights On Sides

<SCRIPT language=javascript type=text/javascript>
//<![CDATA[
var Ovr2b='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";}
else
{cot_t2_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";}

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
{cot_t2_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl4_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: right top;}';
var cot_tl4_fixedCSS='#cot_tl4_fixed{position:fixed;';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+'_position:absolute;';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+'top:0px;';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+'right:0px;';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+cot_t2_DOCtp;
var cot_tl4_popCSS='#cot_tl4_pop {background-color: transparent;';
var cot_tl4_popCSS=cot_tl4_popCSS+'position:fixed;';
var cot_tl4_popCSS=cot_tl4_popCSS+'_position:absolute;';
var cot_tl4_popCSS=cot_tl4_popCSS+'height:1920px;';
var cot_tl4_popCSS=cot_tl4_popCSS+'width: 98px;';
var cot_tl4_popCSS=cot_tl4_popCSS+'right: 120px;';
var cot_tl4_popCSS=cot_tl4_popCSS+'bottom: 20px;';
var cot_tl4_popCSS=cot_tl4_popCSS+'overflow: hidden;';
var cot_tl4_popCSS=cot_tl4_popCSS+'visibility: hidden;';
var cot_tl4_popCSS=cot_tl4_popCSS+'z-index: 100;';
var cot_tl4_popCSS=cot_tl4_popCSS+cot_t2_DOCtp2;
document.write('<style type="text/css">'+cot_tl4_bodyCSS+cot_tl4_fixedCSS+cot_tl4_popCSS+'</style>');

function COT(cot_tl4_theLogo,cot_tl4_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl4_fixed">');
document.write('<><img src='+cot_tl4_theLogo+' alt="" border="0"></a>');
document.write('</div>');}

//if(window.location.protocol == "http:")
COT("http://tester2.synthasite.com/resources/flashing%20christmas%20lights%20right.gif", "SC2", "none");
//]]>
</SCRIPT>

<SCRIPT language=javascript type=text/javascript>
//<![CDATA[
var Ovr2b='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";}
else
{cot_t2_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";}

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
{cot_t2_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl3_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: left top;}';
var cot_tl3_fixedCSS='#cot_tl3_fixed{position:fixed;';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+'_position:absolute;';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+'top:0px;';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+'left:0px;';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+cot_t2_DOCtp;
var cot_tl3_popCSS='#cot_tl3_pop {background-color: transparent;';
var cot_tl3_popCSS=cot_tl3_popCSS+'position:fixed;';
var cot_tl3_popCSS=cot_tl3_popCSS+'_position:absolute;';
var cot_tl3_popCSS=cot_tl3_popCSS+'height:1920px;';
var cot_tl3_popCSS=cot_tl3_popCSS+'width: 98px;';
var cot_tl3_popCSS=cot_tl3_popCSS+'right: 120px;';
var cot_tl3_popCSS=cot_tl3_popCSS+'bottom: 20px;';
var cot_tl3_popCSS=cot_tl3_popCSS+'overflow: hidden;';
var cot_tl3_popCSS=cot_tl3_popCSS+'visibility: hidden;';
var cot_tl3_popCSS=cot_tl3_popCSS+'z-index: 100;';
var cot_tl3_popCSS=cot_tl3_popCSS+cot_t2_DOCtp2;
document.write('<style type="text/css">'+cot_tl3_bodyCSS+cot_tl3_fixedCSS+cot_tl3_popCSS+'</style>');

function COT(cot_tl3_theLogo,cot_tl3_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl3_fixed">');
document.write('<><img src='+cot_tl3_theLogo+' alt="" border="0"></a>');
document.write('</div>');}

//if(window.location.protocol == "http:")
COT("http://tester2.synthasite.com/resources/flashing%20christmas%20lights%20left.gif", "SC2", "none");
//]]>
</SCRIPT>

4) Animated Santa On Top

<script src="http://tester2.synthasite.com/resources/santa.js" type="text/javascript"></script>

5) Christmas Bells On Top Corners

<img style="position:fixed;z-index:9999;top:0;left:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPtFjLuwEf-u7tb6GORFsI5dNtGLYrpXo0ZchwCrNVUY_A4eD2kKMZ66AM8K89kFeIvGey9jpujyoVXvrLtDcmCjfYVGUTVtgsqDOGbEbaxfo2wDugIDWQxFi5q8EkYclUF7BT5Tk7UiM/s150/top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3p3GphOf7gzVqCHMPB0KbvQk2ke_p8PwJHyxTwqGKT9-Ryc-kaxQUj26IaejXVy8r_n_H3olvAZVSy31Y3_3setJkINk_t5WCKjB291vqnu712MMoNFyNetvUKB7kvoQiKwaz7WOwzk4/s150/top-right.png"/>

That's it you now have a neat christmasl look on your blog.

Drop Your Comments And Questions Below.

jQuery Google+ Followers Box Pop Up For Blogger

at Sunday, December 02, 2012 Posted By Unknown 4 comments:

In our previous post we have shared with you how to add Google+ Followers Box to your blogger blog. And now we are here with an awesome widget which pops up a jQuery window containing Google+ Followers Box, when a visitor lands on your blogger blog. The widget will pop up only on the first visit, so that it may not haunt your visitors. This widget is a great one to increase your followers, which inturn will help you to attain more traffic from Google+. The installation is easy, follow the steps below to do so.

Add Google+ Followers Box Pop Up To Blogger

1) In the Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript':

2) Copy and Paste the following code into the Html/Javascript Gadget :

<style>
#backgroundPopup{ display:none; position:fixed; _position:absolute; height:100%; width:100%; top:0; left:0; background-color: transparent;       background:rgba(0, 0, 0, 0.5);z-index:999; }
#popupContact{ float=center; display:none; position:fixed; _position:absolute; height:400px; width:340px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px; }
#popupContactClose{    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLpD-mSZyFJ4jMhybVurFoc7a9Doku5ov44OyiO7TV4sok2UGTT2dByk91Q5-H2vhyPPBB1WjmH2NS_DTLRHiTnNrIBeKw5owJEjw-YOKXKc6VIKGd4Sc4LJULQsx-iakbUUtp7MYGzM/s1600/x.png) no-repeat;    width:25px;    height:29px;    display:inline;    z-index:3200;    position:absolute;    top:0px;    right:0px;    cursor:pointer;    text-indent: -99999px;}
</style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> </script>
<div id="backgroundPopup">
<div id="popupContact">
<a href="" id="popupContactClose">x</a>
<div id="btntfollowForm">
<center><img alt="Subscribe" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj966kKzYHAf3WnRN2_3UgHzylhfT1G8EX2VQJHpGqApLUAKOObVPqvf9ouFU8LROCvcLbjYc7CHYqg_vFFF6-YVkGwKZ5RPGCYa8aQGK6FDl2MhZbxdmcazu-GzxuSuZREmSLm3I4YZk/s1600/asdafsasf.png" />
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/117395947435425050465" data-source="blogger:blog:followers" data-width="310">
</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></center>
</div>
</div>
</div>
<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
</script>
<script type="text/javascript">
     var popupStatus = 0;
function loadPopup(){
    if(popupStatus==0){
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

function disablePopup(){
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

function centerPopup(){
       var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
       $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
       $("#backgroundPopup").css({
        "height": windowHeight
    });

}
$(document).ready(function(){
    if ($.cookie("anewsletter") != 1) {
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    }
       $("#popupContactClose").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 7 });
        }
    });
});
</script>

3) Replace 117395947435425050465 with your Google+ Profile ID.

4) Hit the save button.

That's it you have a very cool Google+ Followers Box Pop Up on your blog.

Drop Your Comments And Questions Below.

Google+ Followers Widget For Blogger

at Wednesday, November 28, 2012 Posted By Unknown No comments:

At last Google+ has now came up with their official followers widget, almost similar to the facebook like box, the Google+ Followers widget have the faces of the followers being displayed along with the option to add you to their circles. In addition to that, total number of your followers and view all option is there in the widget. Adding this to your blog may surely help you in gaining some followers. The widget is present in the "Add a Gadget" menu and is easy to add. Before you move on to the tutorial make sure that you have already connected your Google plus account with your blogger account.

Screen Shot:

Here is the screen shot of the Google + followers widget,

Add The Google + Followers Box To Your Blog

Step 1. In Your Blogger Dashboard Click > Layout > Add A Gadget:

Step 2. Now from the list of gadgets, find Google+ Followers Widget.

Step 3. Click the + sign on the right top of the Google+ Followers widget and click the save button.

Step 4. The Widget is sucesfully added, now drag and place it somewhere in your blog!

That's it you have a very cool Google+ Followers Box on your blog.

Drop Your Comments And Questions Below.

Stylish Subscription Widget With Hover Effect

at Saturday, November 17, 2012 Posted By Unknown No comments:

The main aim of the subscription widget is to make the visitors into readers or followers, so as to increase the traffic of your blog. Today lets learn how to implement a stylish, eye-catching subscription widget. Other than an email subscription form, the widget consist of social icons with hover effect. The widget is quiet catchy and is sure that the widget will force your visitors to subscribe to your updates. Its proven that the most effective position for your subscription widget is top of your sidebar, as it is easily visible to visitors.

Before moving into the tutorial please make sure that you have read my tutorial on How To Set Up Feedburner For Blogger Blog.

Take a look at the screenshot below :

Add Stylish Subscription Widget With Hover Effect To Your Blog

1) In the Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript' > Paste In The Following Code > Click Save:

Widget Code

<a href="http://feeds.feedburner.com/Tweaks123" imageanchor="1" style="margin-left: .5em; margin-right: 1em; float: center;" rel="nofollow" target="blank"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkO_ctBf734KKgDtgo3GSN4UH43gRtF72n7MTE_MvUM1wgrwAjDhek9oNGf02EueLrXP8K6PEuaczXOyf2E6fXLugT5cb6AFnt4Svz2z4mkSIeMr64voLKC4hZUEHXZsZxgbQuBbLta6E/s1600/Untitled-5.png" width="290" /></a>
<style>
.tweaks-email{
background:Fff no-repeat 0px 12px ;
width:270px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:2px 20px 0px 35px;
color:#686B6C;
}
.tweaks-emailsubmit{
background:#0084CE;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
margin:0 0 0px 0;
text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
font:12px sans-serif;
}
.tweaks-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:0px 2px 0px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<style class="text/css">
.center
{
text-align:center;
font-weight:bold;
margin:10px;
}
</style>
<div class="center">
Submit your Email Address to Get Free Blogger Tips Directly to your Inbox
</div>
<div class="tweaks-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Tweaks123', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == "") {this.value = "Enter email address here";}" onfocus="if undefinedthis.value == "Enter email address here") {this.value = "";}" value="Enter email address here..." type="text" />
<input type="hidden" value="Tweaks123" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="tweaks-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<style class="text/css">
table
{
border-bottom: 0px solid #E6E6E6;
float: center;
width: 300px;
margin:10px 0 0 15px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"> <div id="social"> <a rel="nofollow" title="Grab Our Rss Feed" href="http://feeds.feedburner.com/Tweaks123" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKX__hfa7Q8zH5n3bh32Xkca-B16KGl7on5mA334YUc8d6WoR7bwJ72fJaiScXn7PCy7r0MtYpFHZDgVswH5K7G_ATpILBAf4Y4vHQZwu_kZOfcDKabakEeHP-gxhGHOqfaiV5RDc0KA/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> </div></div></td>
<td><div class="subicons"> <div id="social"> <a rel="nofollow" title="Like Our Facebook Page" href="https://www.facebook.com/Tweaks123" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBU9vtT12dTRp9jgdYATfxzfKGAGneJnq-9UwMRw1bJDog8fYCAzeIGg8VWYegcBJHE09LBstHJ10pBwmiI836-uE6UvE5NXUarHcHLLrDB1WQJNsBq2s6n0tuv3wdczoLOWn2Hzo09oI/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> </div></div></td>
<td><div class="subicons"> <div id="social"> <a rel="nofollow" title="Follow Our Updates On Twitter" href="https://twitter.com/tweaks123" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwnvIqVHqnKy62Q7JCA807ZhzSN6t1zuwkxnwPZbgIGhwdUXIwmAGbE4U2e9hC3vJooTNd6IMtKTwfLS1Pp1q1NpgG59yF44-zH48YLXy2paXltksLxR_9V235Z8wXIz4uj5ZpqZWcMPA/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> </div></div></td>
<td><div id="social"> <a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/u/0/117395947435425050465" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVzqQFI9StrYz7FN4EYXrCLnQkUGmWLClPzERDDyS-RWkoksz7eZdSFBWSHwZRlGQrbGIPeWJEb0W0l5810dTO4S3eSGIbG9UGojI_KUojBUJk1Yj5X95OB4TH0oGcji475lZpnSaca4/s1600/GOOGLE-PLUS-48x48.png"/></a> </div> </td>
</tr></table>
</div>

2) Replace the yellow sections with your social profiles and feed URLs.

That's it you have a very cool subscribe section on your blog.

Drop Your Comments And Questions Below.

Add A Stylish Email Subscription Box With Social Media Buttons Below Every Posts

at Tuesday, November 13, 2012 Posted By Unknown 4 comments:

Now a days, having an email subscription widgets has become common as the visitors who will subscribe to our newsletter will get the notification of our new posts via email and which will contribute a huge amount of traffic. So in order to increase your subscribers and visitors you should place a email subscription widget somewhere in your blog.

Adding an email subscription widget below every posts of your blog is an awesome technique to get more followers. Along with email subscription form, adding your social profiles will help you getting more Facebook fans, Twitter followers & Google+ circles.

Before moving into the tutorial please make sure that you have read my tutorial on How To Set Up Feedburner For Blogger Blog.

Live Demo

Here is the email subscription widget in full working order; don't be afraid to click them and follow us.

Stay Connected With Free Updates!

Subscribe via Email

How To Add A Stylish Email Subscription Box With Social Media Buttons Below Blog Posts

1) At first backup your template, so that you can revert your template back if something goes wrong

2) In Your Blogger Dashboard Click > Template > Edit HTML > Proceed > Expand Widget Template:

3) Use Ctrl-F to find the code below:

<data:post.body/>

4) Now paste the code below immediately after the code above:

<b:if cond='data:blog.pageType == "item"'>

<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.tweaks123-email-style{
padding:7px 15px 7px 5px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.tweaks123-email{
background:url(http://2.bp.blogspot.com/-oHGqJ1etW_M/UDRi0T2OkXI/AAAAAAAAAyw/voPqdzqf-F4/s1600/MBT+Stay+Connected+Email.png) no-repeat 0px 13px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-family: "Trebuchet MS",sans-serif;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.tweaks123-submit-button{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 5px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #c4c4c4;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:auto;
margin:10px 0;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>

<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#333; font-weight: bold; font-size: 22px;font-family: "Trebuchet MS",sans-serif; margin:0px 0px 5px 0px; '>Stay Connected With Free Updates!</p>
<div class='tweaks123-email'>Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Tweaks123', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Tweaks123'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='tweaks123-email-style' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>

<input alt='' class='tweaks123-submit-button' title='' type='submit' value='Submit'/>
</form></div>
</td>

<td style='border:none; margin: 40px 0px 0px 0px; padding: 40px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>

<a href='http://feeds.feedburner.com/Tweaks123' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5TfhgacbgScVwUR7S_hUilVZroR2GFOK-PQZ1E9fzaVNyyq_C4KGca7Bd5eAeeEBnkMwrnvu46uDXathbl1qZKHkqIt5gGD4pmK1rAXz0s5mgUHtMBocz6o8cgLhNj966BQ45lMOfPzc/s1600/rss.png'/></a>

<a href='http://twitter.com/Tweaks123' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj44F_zbPiMKCb72-G65xWXaqBghK7c84xa0LfqJ7ql3Q-LnYGIN9I6pPdyXRFDpA_Diyd-KWH-bNzLk1WxM8AWzonoP-G3aNYzHft-zWf2OkL5qpyK_TwwIbiOl9andjTwraoYM4jCopQ/s1600/twitter.png'/></a>

<a href='http://www.facebook.com/Tweaks123' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT5M_fFBZL-geggRuLQkp6UZe8nv36F2mbBx7X47EHNeGZmf_jfVODZEnDVL_MDFittXVXrGpmgtssFkyRdboEAYKuMB6JvLyr0wACvAK0NROaO_Q4Hvv8PL8tP3_UlQ-ShBk1SvhchBg/s1600/facebook.png'/></a>

<a href='https://plus.google.com/117395947435425050465/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnl2JG64fCmf1W8iutmon39Gyxol4POya24CmpitjCQuimW23FGKDxoJ-KBrtg5NjaKQzGWqaD7HWQQZDblPEyb1sDt22Byg7aJlGX2zaerDnQl8mizY8Lv8UJ3ft4Xx3O91RkW44CJsQ/s1600/google+.png'/></a>

</td>
</tr>
</tbody></table>

</div></div>
</center>
</b:if>

5) Replace the colored sections with your social profiles and feed URLs.

That's it you have a very cool email subscribe section below you blog posts.

Drop Your Comments And Questions Below.

Tweak Your Blog

Anything and everything about blogger!