Showing posts with label widgets. Show all posts
Showing posts with label widgets. Show all posts

Friday, 26 April 2013

Providing updates from facebook is always a great way to engage the visitors on your blog/ website . So it's important to get the attention of your visitors towards your like box. 



                                                   Well guys, Checkout this awesome facebook like box widget with timer which you and your readers will like and get attracted. If you want to add this widget to your blog just follow this simple steps.


1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.




<!-- Facebook POPUP LikeBox With Timer Code Start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<style type='text/css'>
#exepopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box; /* for Safari */background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:360px;margin-left:-200px;margin-top:0px;overflow:hidden;}#exepopup span{font-size:20px !important;font-weight:bold !important;}#exepopup h1{background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9lUee8IldZEZjSuQxkWTxbTj2IE1YuBMLaKZ8t30D8h7e3796Br7QW9Jj1pNegzylNyjzRX1cZk3SViRmurQIih7_03k66KpIMDOynmSTfd2iDJ6Cm_LDc_wweSlTDAl8M-jNkxz3xtw/s1600/aktechz-fb-lock.png) 98% no-repeat;border:1px solid #3b5998 !important;color:#FFFFFF !important;font-size:20px !important;font-weight:700 !important;padding:5px !important;margin:0 !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;overflow:hidden !important;}.exepopupdata{font-size:12px !important;font-weight:normal !important;height:265px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}#exepopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#exepopupclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:#111 !important;font-weight:bold !important;padding:5px 8px 5px 8px !important;text-decoration:none !important;display:inline-block !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;outline:none !important;position:relative !important;font-size:18px !important;margin:1px !important;}#exepopupclose:active{top:1px;left:1px;}</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function exepopupfunc() {
var sec = 10
var timer = setInterval(function() {
$("#exepopupfooter span").text(sec--);
if (sec == 0) {
$("#exepopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var exepopupwindow = jQuery(window).height();
var exepopupdiv = jQuery("#exepopup").height();
var exepopuptop = jQuery(window).scrollTop()+50;
jQuery("#exepopup").css({"top":exepopuptop});}
jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)
//alert(jQuery.cookie('sreqshown'));
//var exepopupww = jQuery(window).width();
//var exepopupwww = jQuery("#exepopup").width();
//var exepopupleft = (exepopupww-exepopupwww)/2;
var exepopupleft = 500;
//var exepopupwindow = jQuery(window).height();
//var exepopupdiv = jQuery("#exepopup").height();
//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;
jQuery("#exepopup").animate({opacity: "1", left: "0" , left: exepopupleft}, 0).show();
jQuery("#exepopupclose").click(function() {
jQuery("#exepopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="exepopup">
<h1>Join Us On Facebook</h1>
<div class="exepopupdata"><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fzgamerxs&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe></div>
<div id="exepopupfooter">Please Wait <span>10</span> Seconds...!!!<a href="#" id="exepopupclose" onclick="return false;"></a></div></div>
<!-- Facebook POPUP LikeBox With Timer Code End -->



Customisations

Change red text with your desired time, green text with your slogan and zgamerxs with your facebook page  username.

5. Now click on save button.

Have any problem, please comment.

That's All ....


Enjoy ................






Providing updates from feedburner is always a great way to engage the visitors on your blog/ website through email. So it's important to get the attention of your visitors towards your email box. 




                                                                Well guys, Checkout this beautiful colourfull newsletter box widget which you and your readers will like and get attracted. If you want to add this widget to your blog just follow this simple steps.


 1.Go to Blogger > Template

2.Click on 'Edit HTML'

3.  Now press Ctrl + F and search for ]]></b:skin> tag and paste below codes above it.



.newsletter_box{display:block;width:1006px;position:relative;height:130px;background:#FFF 30px 29px no-repeat url(http://i.imgur.com/5zAio.png);border:1px solid #E0E0E0;margin:20px auto}.newsletter_header{background:url(http://i.imgur.com/59wbz.png) repeat-x;height:18px}.newsletter_box .news_title{display:block;width:190px;height:30px;font-size:22px;color:#929083;position:absolute;top:46px;left:148px;font-family:Segoe UI}.newsletter_box p{display:block;width:262px;font-size:13px;color:#929083;position:absolute;top:28px;left:315px;line-height:18px;border-left:5px solid #ebebeb;padding:10px 0 10px 25px}.newsletter_box .newsletter_form{display:block;width:325px;position:absolute;top:22px;right:35px}.newsletter_box .newsletter_form label{display:none}.wpmlerror{display:block!important;width:150px!important;position:absolute!important;top:30px!important;left:100px!important;text-align:left;margin:0!important;padding:0!important}.feedbutton .button{display:block;position:absolute;right:-5px;top:17px;font-size:12px;font-family:Tahoma;border:0;padding:8px 15px}.feedbutton input{color:#FFF;background:#00a5f0}.feedbutton input:hover{color:#FFF;background:#F06;-webkit-transition:ease-in .3s}.feedbutton input:active{color:#FFF;background:#A5E919}.feednewsletter input.emailfield{width:210px;background:#EDEDE5;display:block;position:absolute;right:95px;top:17px;border:0;padding:7px} 



4. You have pasted the css successfully, Now just click on

 save template. Now it's time to add the html.


5.Go to Blogger > Layout

6.Click on 'Add a Gadget'

7.Choose HTML/Javascript

8.Copy Paste the code given below inside it. 

<section class="newsletter_box  round-me" id="gonewsletter"><div class="newsletter_header"></div><section class="news_title"><strong>NEWS</strong>LETTER</section><section><p>Sign up with your email to get updates about new posts on how to's tuts and other articles.</p></section><section class="newsletter_form"><div class="feednewsletter"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=zgamerx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" name="email" class="emailfield" /><span class="feedbutton"><input type="submit" value="Subscribe" class="button" /></span><input type="hidden" value="zgamerx" name="uri" /><input type="hidden" name="loc" value="en_US" /></form></div></section></section>

9. Now click on save button.


10. Just change zgamerx with your feedburner username.


That's all





Enjoy .............

          

Thursday, 25 April 2013

 Add a beautiful labels widget to Blogger . To add this widget just follow this simple steps.



1. Go to blogger layout.
2. click on Add a gadget.
3. Choose html/java script
4. Add the following code.

 <style type="text/css">
/*<![CDATA[*/
.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#FF6600;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #FF6600 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0; 
 }
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #FF6600;
 -webkit-box-shadow:-1px -1px 2px #FF6600;
 box-shadow:-1px -1px 2px #FF9900;
 } 

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
/*]]>*/
</style>
<a href="http://www.zgamerx.blogspot.com" title="Get everything free" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>


5. Click save button.

Note : You must have  default blogger labels widget added on your blog. This code will transform your labels widget  to this style.

Don't edit any part of this code or the widget will not work.

That's All 



 enjoy...




Wednesday, 27 March 2013

Hey Guys, Checkout this Stylish blue rusted retro subscribe widget for blogger.





If you want to add this widget to your blog just follow this simple steps.



1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.


<a href="http://www.facebook.com/zgamerxs"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI_ArvSZnwD-R-53A37E48MgCexEF_ZqiRlr72EvSI5yOIc3_eZjIKdoXYjtDseXQsN4LZScuWHY9isIp5v3FnYcryZ4RfFJATDCjricHQwSK140JoV2rTsh4BjvOtaWSv8Unq06RRLXc/s1600/098540-blue-retro-rusted-grunge-icon-social-media-logos-facebook-logo-square.jpg" title="Like Us" /></a>
<a href="http://www.Twitter.com/vishalassassin"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBtv7Oircv1zBnMSKtRxAYKAsUQ9x3tFVUbCTw-HeWcxkXGZqLlRnm5EMgCkZgbXAh6rh2gsh6rsGz_oCS_ODLem2IyZ1ykm5UVXX9vNYi203CeYNwOUbfimxZjkN8cRAGwOaYjKs24k/s1600/098610-blue-retro-rusted-grunge-icon-social-media-logos-twitter-bird3-square.jpg" title="Tweet Us" /></a> 
<a href="http://feeds.feedburner.com/zgamerx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4oy4kabwNs-W9ScHQyb1oWqrnlFBIBtKphjV4W0DyX1CsbInhwl8oMJ8yZRR-GEmq0OKcEndSX3ArtKfoWha1RPOin0ZYZwf6p1fZIZ7sOxswM6Y2TjnAwMxWhKtFgq9akitC0E5iueA/s1600/098591-blue-retro-rusted-grunge-icon-social-media-logos-rss-cube.jpg" title="Feed Us" /></a>
<a href="https://plus.google.com/u/0/108432524418882740014"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqgA2yZu9eMB4MZzUNvauZ00uh_YWS8-71mQfrxEU_0r-JiINSsU2fwkg_Qw3EdiY-KrCdPTfBP79hLRvzr8ugKuCeYEer7DRSlj2l1nNcD2Cul291aM_EzqIciUegNi_7zCnXOduzn3k/s1600/098555-blue-retro-rusted-grunge-icon-social-media-logos-google-logo-square.jpg" title="Circle Us" /></a>
<a href="http://www.stumbleupon.com/stumbler/vishalassassin"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRSR2iA2sh2OQp5dLR_xMAqnEhsSVHCPwwQhJJoTogIurhyl68yxFD-NO7UfzB45I88kL3yBZXZu5HcLXumISmPzwu6_dEkvOPxK4sshCVLIJgHAMQU9_Kt6WLhtvIXSYHw-7aMC4s9g/s1600/098600-blue-retro-rusted-grunge-icon-social-media-logos-stumbleupon-logo-square.jpg" title="Stumble" /></a>
<a href="http://digg.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPwlsg17U9vbP4Wh3q4xjK2vf3wDC27w-JUBQ65B5ULQTT7SqIuP-2UHIlFq5hex_w4fyQ5URlz5ikmbLzNssD5ab7EqZOIo2TNiiTwDgq37AV9Ac0RKVs3KyB6VvGj8uYhwYiy8lNTuk/s1600/098531-blue-retro-rusted-grunge-icon-social-media-logos-digg2-logo-square.jpg" title="Share us on Digg" /></a>
<a href="https://delicious.com/vishalassassin"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg804FxY3E5UbJOKnMmH3UCkbr1BdYI8AcSV1QnQmwDzjFaNtDSn4injSDPiCwKctjnVLo_5MXpVeGfnfVBeM2LOpA4SycupoBHVllkqTFV003ox-96sCvHlaKEsX3lmJRdpJ5ywPHfTLU/s1600/098522-blue-retro-rusted-grunge-icon-social-media-logos-delicious-logo-square.jpg" title="Share us on Delicious" /></a>




 5. Change blue coloured url with your's   .
 6 Now click on save button.


That's All.


Have any problem, Please comment.

Enjoy .............



Checkout this cool social spinning widget for blogger. If you Want to add thiswidget to your blog just follow this  simple steps.



1. Go to you blogger dashboard 
2.Click on Design > Page elements > Add a Gadget (Old blogger interface
3.Click on Layout > Add a Gadget (New blogger interface)
4. Select HTML/JavaScript from the options listed and paste the followingcode in the content box



 <style>

p#rb_socialicons img {
 /* Spinning Social Icons Widget By www.zgamerx.blogspot.in */
    -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;
}

p#rb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget By www.zgamerx.blogspot.in*/

</style> 


<center><p id="rb_socialicons">
    <a href="http://www.facebook.com/zgamerxs/">
<img border="0" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5IVK5itRvS-R6p9Ch2xKIO4IvJnKmO9Wym2lXAKQFLc7ioapNCthaOSnaCB4kvlxiTcw5yhwL7mz6WQvjKNdvaXG101T_zukW0FnDFQE5fJvG4WdmR0bRXCzHIk1l5VKUv7_QACRKifI/s1600/facebook500.jpg" /></a>
    <a href="http://www.twitter.com/vishalassassin/">
<img border="0" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK2Uds-eZvDTKr9eVEU4e5DUDrh1rRZ82FqSwg_adpGLl8QAeL4FNru5dM-ct9_Y3KL01IOnnJElq5PSDoMcBdzaA3ej-rPe75V_HLI0A1LG3Q-HxoSAVr0qOucBpfA00_vlP99gH_jqs/s1600/twitter-old.jpg" /></a>
    <a href="https://plus.google.com/u/0/108432524418882740014/posts">
<img border="0" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieUkCiw4SZyDDz93YVve-vIiMO2HKhnI_uzbVKt-eLIKaEz88NGKbE2yIM9uYaYTC7NmlgzXkGn0qC0M3p3-yBg3Pze2q7GHZKuHaFdAPm75FE3T2XQfO1QkXfQ-_4eADUPeXqHdkVhxo/s1600/googleplus.jpg" /></a>
    <a href="http://www.feeds.feedburner.com/zgamerx/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC8mZ91YXcHYMeEqj8JBOwouKzmpm4OTgmY8Qeg5sXZuTSi179foqoaG5dSxDTlwlzCVZK4Jx-HgPYmLwwNPUdgVpvT-Q9svCzTVf83K2VRhkozLxAmdEbZQHN11IRO6nFj2h2fJKuFmY/s1600/rss.jpg" /></a>
 </p></center> 


 
 
5. Click save button 


Customizations

Replace all red url and username with your url and username.

That's all
Enjoy 



Tuesday, 26 March 2013

Hey Guys, Checkout this cool Attractive Subscription Box   widget for blogger.




 If you want to add this widget to your blog just follow this simple steps.



1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.



<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<style type="text/css" media="all">
.pbtsidebar {
    display: inline;
    float:left;
    font-size: 14px;
    text-shadow: 1px 1px #fff;
    width: 300px;
    margin-left: 10px;   
}
.pbtsidebar .widget-wrap {
    padding: 30px;
}
.pbtenews #subbutton {
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 1px 1px #a24a1d;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px #a24a1d;
    border-radius: 3px;
    box-shadow: 0 1px 1px #a24a1d;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQqsWEUnRdZpcPhrvc_e472lqvXzL-I1rVn3E2vgHGfi8_ULM1ptwx9jMka7U9olPS7nFfhdhyFtfcAbfb5yPSxpdneqwrD2RpVxZV3w1Yv-ivLIha7n9BbyjNmYIJAPpRXluUST2sYqV/s1600/button-light.png") 0 0;
    border: none;
    color: #333 !important;
    font-size: 14px;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px 15px;
    text-shadow: 1px 1px #fff;
    text-transform: uppercase;
}
.pbtenews #subbutton:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQqsWEUnRdZpcPhrvc_e472lqvXzL-I1rVn3E2vgHGfi8_ULM1ptwx9jMka7U9olPS7nFfhdhyFtfcAbfb5yPSxpdneqwrD2RpVxZV3w1Yv-ivLIha7n9BbyjNmYIJAPpRXluUST2sYqV/s1600/button-light.png") 0 -40px;
}
#pbtsidebar .pbtenews {
    background-color: #e96a2a;
    margin: -30px;
    min-height: 201px;
    padding: 1px 20px 15px;
    text-align: center;
    }
#pbtsidebar .pbtenews p {
    color: #fff;
    text-shadow: 1px 1px #a1491d;
    font-family:'PT sans';
}
.pbtenews #subbox {
    -moz-box-shadow: 1px 1px 3px #ccc inset;
    -webkit-box-shadow: 1px 1px 3px #ccc inset;
    background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoXYzHup4ZFyiShEj3NYw7LJOyGGeyqVQ7t9bIxDoj3qdwY8s08D7m-BYz-jyqwO6XvJ-51RkqKkLWu4_T4g6DfWUGokPt63m_IYY2IymQU_Y0GAMBcrNEZ6vhsyw_dMvOTQmNSzzChcH5/s1600/enews.png") center left no-repeat;
    box-shadow: 1px 1px 3px #ccc inset;
    border-left: 1px solid #9e6e56;
    border-top: 1px solid #9e6e56;
    color: #aaa49f;
    font-size: 11px;
    font-weight: bold;
    margin: 0 10px 15px;
    padding: 14px 10px 12px 50px;
    text-transform: uppercase;
    width: 185px;
}
#pbtsidebar .pbtenews h4 {
    margin-bottom: 10px;
    text-shadow: 1px 1px #a1491d !important;
    margin-top:12px;
    line-height: 1.2em;   
}
.widgettitle{
font-family:'PT sans';
text-transform:uppercase;
background: none;
    color: #fff;
    font-size: 23px;
    padding: 0;
    text-align: center;
}
</style>
<div id="pbtsidebar" class="pbtsidebar widget-area">
<div id="pbtenews-12" class="widget pbtenews-widget"><div class="widget-wrap"><div class="pbtenews"><h4 class="widgettitle">Get latest posts straight to your Inbox!</h4>
<p>Join us for latest posts as soon as they're published (We respect your privacy and will never spam you). </p>
<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onSubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=zgamerx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Enter your email address..." id="subbox" onFocus="if ( this.value == 'Enter your email address...') { this.value = ''; }" onBlur="if ( this.value == '' ) { this.value = 'Enter your email address...'; }" name="email">
<input type="hidden" name="uri" value="zgamerx">
<input type="hidden" name="loc" value="en_US">
<input type="submit" value="Sign up" id="subbutton">
</form>    </div></div></div></div>




 
5. Edit RSS subscription URI  zgamerx to yours .
6. Save the Gadget .


 That's All .

Have any problem, Please comment.
Hey Guys, Checkout this cool social sharing button with hover effect  for blogger.



If you want to add this widget to your blog just follow this simple steps.



1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.



<style type="text/css">
.pbtv2Social {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.pbtv2Social span {
float: left;
display: inline;
margin-right: 8px;
}
.pbtv2Social span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZe3k1TAKWF6sAix8EhbKVUlAETmNp6Wf9C4n2sTfd7DmSnWR2rYy9udRqOCpFO_6nH7Nd4zTMRBleWB915lIhouL7hZs4m__6Kludq5BSRWm2v9ZjYfY_bfrV53ZnHIJNMAywn2ozuv6K/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class='pbtv2Social'>
<span><a href='twitter.com/vishalassassin' id='iconTwitter' target='_blank' title='Follow us on Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/zgamerxs' id='iconFacebook' target='_blank' title='Join us at Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/zgamerx' id='iconRSS' target='_blank' title='Subscribe our RSS Feed'>RSS</a></span>
<span><a href='youtube.com/vishalassassin' id='iconYouTube' target='_blank' title='Follow our YouTube Channel'>YouTube</a></span>
<span><a href='https://plus.google.com/u/0/108432524418882740014/' id='iconGooglePlus' target='_blank' title='Follow us at Google+'>Google</a></span></div>
</div>
</div>



Customizations

Replace vishalassassin with your twitter username.
Replace zgamerxs with your facebook username.
Replace zgamerx with your feedburner username.
Replace vishalassassin with your youtube username.
Replace 108432524418882740014 with your google plus id.   


That's all


Have any problem, please comment. 

 


Hey Guys, Checkout this Stylish Twitter Followers Like Box Widget  for blogger.



If you want to add this widget to your blog just follow this simple steps.



1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.


<script type="text/javascript">
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("vishalassassin");</script>  




 4. Change the Twitter ID vishalassassin with Your Twitter ID.


That's All.

 

Monday, 25 March 2013

Hey Guys, Checkout this cool Floating Sharing buttons to sidebar  .




 If you want to add this widget to your blog just follow this simple steps.



1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.


 <style>
/*-------GAMERX Sharing Widget------------*/
#pbtfloat {
  position:fixed;
bottom:15%;

margin-left: -84px;
z-index:10;
float:left;
padding-bottom:2px;
}
#pbtsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !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="pbtfloat">
<div id="pbtsidebar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="probloggingtool">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td> <a href="" style="color:#000000; font-size:8px"> </a>
    </td>
    </tr>
        </table> </div> </div>




 4. Adjust the position of the widget, edit -84px; 
 5. Save the Gadget and see your blog again.
 6. You can use this in blogspot blog.




That's all



Have any problems, Please comment.
Hey Guys, Checkout this cool subscribe box with social buttons for blogger.



 If you want to add this widget to your blog just follow this simple steps.

1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.



 
<style type="text/css">
/* PBT Style sheet for subscription box */
#pbt-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
    #pbt-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
    #pbt-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
    #pbt-subscribe-box .email-box {background:#e3edf4; padding:11px;}
        #pbt-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
        #pbt-subscribe-box .email-box .txt,#pbt-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;}
        #pbt-subscribe-box .email-box .btn,#pbt-subscribe-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding: 7px 8px; text-shadow: 1px 1px 0 #D08D00;}
            #pbt-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}

#pbt-text {
background:#C8E993;
border: 1px solid #CCC;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:300px;
}
#pbt-text h3 {
color:white;
border-bottom: 1px dotted
white;
line-height:1.385em;
font-size: 18px;
padding: 0;
margin: 0 0 10px;
border-bottom: 1px dotted
#AAA;
font-wieght: bold;
text-transform: uppercase;
letter-spacing: 0;
}
</style>
<div class="pbt_widget">
<div id="pbt-text"><h3>Stay Connected</h3>
<div id="pbt-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=zgamerx" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/zgamerx" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=zgamerx', 'popupwindow',
'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address&#39;;}" onfocus="if (this.value == &#39;Enter your email address&#39;)
{this.value = &#39;&#39;;}" value="Enter your email address" class="txt" />
<input type="hidden" name="uri" value="Probloggingtools" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="btn" />
<div style="clear:both;"></div>
</form>
    </div>
    <div class="fb-like-box">
      <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fzgamerxs&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/zgamerxs" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
    </div>
    <div class="gplusone">
<div style="float:left;width:90px;">
<g:plusone href="http://www.zgamerx.blogspot.com"></g:plusone>
</div>
<a href="https://plus.google.com/u/0/108432524418882740014" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle us on Google+</a><div class="clear"></div>    
    </div>
    <div class="twitter-follow">
  <a href="https://twitter.com/vishalassassin" class="twitter-follow-button">Follow @vishalassassin </a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> </div>
</div></div>




      4. Change zgamerxs your Facebook Page name/id.
      5. Edit vishalassassin Twitter Name with yours twitter id.
      6. Edit Google Plus Link url with yours.
      7. Edit Feed burner URI with your, zgamerx
      8. Change  108432524418882740014  Google plus Circle ID with yours Circle id.
      9. Now, Go to Blogger > Design > Edit Html
     10.Backup your template
     11. Add Google Plus Script before </head> 



 <script type="text/javascript">
  (function() {
    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>



      12. Save Template and Visit your Blog again.

That's All


Have any problems, Please comment.


 




Most Commented

Contact Form

Name

Email *

Message *

2014 © Planer - Responsive Blogger Magazine Theme
Planer theme by Way2themes