Widgets For Everyone

Saturday 21 December 2013

Add Social Bookmarking Running Trucks in Blogger

Step 1

Go to Blogger
Select Your blog
Go to Layout
Click on ADD A GADGET
And Select HTML/JAVASCRIPT
and paste the following code

<div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee><a href="http://www.facebook.com/Widgetsplace" target="blank"> <abbr title="Follow us at Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGFVyjXAlwlSevF0ccxU2h3nuYFZOQSpDAQqWGg1equWxKr1ItGzTbiuB1eGNjDYQlzQBRdupss2mtmxBW0ilWiDt7SEDjADAPPiNHSbYp0xvF7dqcc0GwZAdhsUZ8R6Zpd_JS5mMoa6LB/s1600/Social-Truck_fb2.png" width="120px" height="100px"/> </abbr> </a> <a href="http://feeds.feedburner.com/Widgetsplace" target="blank"> <abbr title="Subscribe Our Feeds"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsgLiPqO_YN4t0kk5TOVQj2eAIe7CPct26zJd4Ju_qUaG4nxv6jYRQID3fSVb7OFjUDA_JsTe-zh3xZCBSYELdcqyiDIbwW3xyZv7kPUYaLCbNIu9kA8CiAY1IeAuA0kUnsa9Kwi0w6Et/s1600/Social-Truck_rss.png" width="120px" height="100px"/> </abbr> </a><a href="http://twitter.com/Widgetsplace" target="blank"> <abbr title="Follow Us on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUUaeZN5Yc-oJP69wm2AlgwcmhHKm0Ai8u6vTC3kwVv1KpPonGqoEk04VFFJyLFc19cTU1wLAtQibsl-yiRnHkLXoAHAAcYSz8yCFsnwXgPCBTHJiYO0YqCgUuCKZZDDhLWwGzFu5OSFIa/s1600/Social-Truck_twi.png" width="120px" height="100px"/> </abbr> </a> </marquee></div>

Customization

Replace Widgetsplace With your facebook page id
Replace Widgetsplace with your feedburrner id
Replace Widgetsplace with twitter username

Posted By: Unknown on Saturday 21 December 2013

How to change page loading in blogger

Published Under : blogger widgets

Step 1

Go to Blogger Blog
Click on EDIT HTML
Search For </body>
paste following below code

Step 2

<style>
#wd-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekY8EmEZgBk4zW7SO-mWOlnmPMYwOCbSVH54kJQCPCumcjqBRXuRqzBW9TzCygUp-lHFIJsG8tXtFuJTrOuTgsqOmr2FKddNVia5I0MMzxCJDh8lQPsmoqSImS29mP03KKEgHmAmwo1M/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Posted By: Unknown on Thursday 19 December 2013

Add Stylish Social Widget for blogger

Published Under : Social Share Widgets

Step 1

Go to Blogger
Select your blog
Go to layout
click on add a gadget
Select HTML/JAVASCRIPT
paste the below code

<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/TWITTERHANDLE" class="like">

Follow
</a>
</li>
<li>
<a href="https://plus.google.com/GOOGLEPLUSID" class="favourite">

Circle us
</a>
</li>
<li>
<a href="https://www.facebook.com/FBID" class="comment">

Like us
</a>
</li>
<li>
<a href="http://YOURBLOG.blogspot.com/feeds/posts/default" class="share">

Subscribe
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */
a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>

Customization

Replace http://twitter.com/TWITTERHANDLE with your twitter username
Replace https://plus.google.com/GOOGLEPLUSID with your Google id
Replace https://www.facebook.com/FBID with your facebook id
Replace http://YOURBLOG.blogspot.com with your blog name

Posted By: Unknown on

Add Stylish Popup Roll social share wodget in blogger

Published Under : Social Share Widgets

Hello Friends! In my previous Post i told you about how to add stylish facebook box. Today i have a interesting Widgets for you that makes your blog beautiful. Now this hope fully help you to increase your visitor Because it So Eye Catcher widget. Here is a Demo Below.

Demo

Step 1

Go to Blogger
Go to layout and click on ADD A GADGET
Click on HTML/JAVASCRIpT
Paste The following code in html section

<div class="allcoder-yuvarclanan ciscimcik-allcoder">
<div class="divxix">
<div style="position:absolute;top:0px;left:0px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;
font-size:13px;color:#fff;background-color:#e84343;overflow:visible;" class="iyisenden">
<div style="float:right;margin-left:40px;margin-top:-10px;width:270px;">
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"><img style="border:none;background-color:transparent;padding:0px;margin:0px;" alt="allcoder facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22p-5EmbG8nUqG345RAfVO0E1-Btu2KRMpY8q_lOGOJqDiE5x3HHfrXyIbyK0uo-Zr6j8xVehCPPu7vpX8UgjBoa7S3WZcNhoEpqCOmuXc8fGAdqOYWtv1KSGPLMRbVoS3cfTjBbloXB1/s1600/Facebook-icon.png"/></a> 
<a class="addthis_button_google_plusone_share"><img style="border:none;background-color:transparent;padding:0px;margin:0px;" alt="allcoder google+" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVbSOKCLv1RbV9A3FeMyIGCQ1HUHeaepTmwlYXteUuntnOeLu4tjZBMUH8zxJyPrjmPiHAU2ESDD_Rg6vAbmjpg8nMAVXvZM-LGRTZmFQzK1cCQY5ZfHXlK4LngBktc4uN8V6yqW5uCEc/s1600/Google-plus-icon.png"/></a> 
<a class="addthis_button_twitter"><img style="border:none;background-color:transparent;padding:0px;margin:0px;" alt="allcoder twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgl6FgHWOVKAWdBadHdTOynlGJo1xya1KxsU1S5lZ8or7fxip5boSWOQPCF3fXIvo5JeW9Q9BnW_EkE6P9WH5HOWK3-KEvupUc-qM8p8zqF1Dh4vHB6uq-rZHVXVpk7hzTJvqgnF4vsUo7/s1600/Twitter-icon.png"/></a> 
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> 
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=potdehid"></script></div>
</div>
<style>.divxix{height:95px;position:absolute;top:0px;left:0px;min-width:86px;}.naber{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;border:2px solid #ff9c9c;}</style> 
<div class="naber">
Share</div>
</div>
</div>
<style>.naber{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;}.naber{-webkit-transition: all 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: all 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);cursor:pointer;}.iyisenden{padding-right:30px;height:80px;text-decoration:none !important;padding-top:4px;overflow:hidden;background:#fff;border:none;border-color:#ff9c9c;border-width:0px;width:0px;-webkit-transition: width 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: width 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: width 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);}.divxix:hover .naber{height:80px;margin-left:300px;transform:rotate(360deg);-ms-transform:rotate(360deg); /* IE 9 */-moz-transform:rotate(360deg); /* Firefox */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */-webkit-border-radius: 40px;border-radius: 40px;}.divxix:hover .iyisenden{background-color:#e84343;border:1px solid #ff9c9c;width:298px;height:78px;}
div.allcoder-yuvarclanan{position:fixed;z-index:999999;}div.ciscimcik-allcoder{top:240px;left:0px;}</style><style type="text/css">div.allcoder-yuvarclanan{_position:absolute;}div.ciscimcik-allcoder{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
</style>

Posted By: Unknown on Monday 16 December 2013

How to add stylish facebook popup box to bloger

Published Under : blogger widgets, Social Share Widgets

Hello Friends! In Previous post i told you about How to change Heading Style in blogger . today we will discuss about facebook popup like box. Facebook Popup Like box is a fantastic way to increase facebook likes. Facebook like box widget show the love of the people for his blog. Facebook offers a simple facebook like box plugin but in this tutorial i will add a custom facebook popup like Box. Most of blogger want to add this widgets on his/her blog. Therefore i will tell you about this widget. it will appear. When the users open your site or blog. you can also checkthe demo below.

Preview

step 1

Go To Blogger
Select your blog and Click on layout
Click on Add a Gadget
click on HTML/JavaScript
Paste the Below Code

Customization

Replace 667185289981891 With your facebook page
Replace Widgetsplace With your Feed
Change Stay Updated Via Our Facebook Page in your own words

Posted By: Unknown on Sunday 15 December 2013

Saturday 21 December 2013

Add Social Bookmarking Running Trucks in Blogger

Thursday 19 December 2013

How to change page loading in blogger

Add Stylish Social Widget for blogger

Monday 16 December 2013

Add Stylish Popup Roll social share wodget in blogger

Sunday 15 December 2013

How to add stylish facebook popup box to bloger

Contact Us

Popular Posts

Socialize us

Way2themes g+

Labels Cloud

Blog Archives

Latest post

Subscribe Now!

About Us

Recent Comment

Want To Get Hot Updates?

Powered By:

Subscribe Us

Saturday 21 December 2013

Add Social Bookmarking Running Trucks in Blogger

Thursday 19 December 2013

How to change page loading in blogger

Add Stylish Social Widget for blogger

Monday 16 December 2013

Add Stylish Popup Roll social share wodget in blogger

Sunday 15 December 2013

How to add stylish facebook popup box to bloger

Contact Us

Popular Posts

Socialize us

Way2themes g+

Labels Cloud

Blog Archives

Latest post

Subscribe Now!

About Us

Recent Comment

Want To Get Hot Updates?

Powered By: