Widgets For Everyone

Add Social Bookmarking Running Trucks in Blogger

2013-12-21T20:01:00.002-08:00

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

How to change page loading in blogger

2013-12-19T04:02:00.002-08:00

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>

Add Stylish Social Widget for blogger

2013-12-19T03:40:00.003-08:00

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

Add Stylish Popup Roll social share wodget in blogger

2013-12-16T20:01:00.005-08:00

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"></a> 
<a class="addthis_button_google_plusone_share"></a> 
<a class="addthis_button_twitter"></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>

How to add stylish facebook popup box to bloger

2013-12-15T21:47:00.001-08:00

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

How to Change Heading style in blogger

2013-12-14T04:21:00.001-08:00

Hello Friends! This is mine first post on this blog . Every Blogger want to make a great and beautiful blog. In nowadays Heading plays an important role to make a blog beautiful. There are many heading style to change blog heading. I have different types of heading style. Hope this would be surely Helping you. OK Getting into the tutorial.

How To change Heading Style In Blogger

Go to Blogger
click on template and clik on edit html
Press Ctrl+F and search for.post h4
Then Replace by the below codes

Heading Style 1

.post h4 {
background-attachment: scroll;
background-color: white;
background-image:url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKBjPHcRV4J9U286dg2vS6_R9Fi_urrFwOfLvvxhOiiJoQpBtegcDzxrMiiYfrdPSheFE8gGzp5ianBs5Hjn42uwB2uUBTY1hfN0pOv0PXhW-FymBGj526fnWrK1qflCAoav-Sf3zajHN5/s1600/h2.png”);
background-position: 4px 50%;
background-repeat: no-repeat no-repeat;
border: 3px solid;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px, 1px 1px 0 inset;
color: #333333;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: 1;
list-style: none outside none;
margin: 15px 3px;
outline: medium none;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0;
text-transform: uppercase;
vertical-align: baseline;
}

Heading Style 2

.post h4{background: url(“http://1.bp.blogspot.com/-zs4aWzVV5J4/UTm__Ri99eI/AAAAAAAAbW4/a–rNrWDM9Q/s1600/h2.png”) no-repeat scroll 4px center transparent;border: 3px solid #C8C800;border-radius: 60px 60px 60px 60px;box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;color: #A5A503;font-family: ‘lobster’,sans-serif;font-size: 19px;font-weight: bold;line-height: 1;margin: 15px 3px;padding: 3px 10px 3px 30px;text-shadow: 0 1px 0 #CCCCCC;text-transform: uppercase;}

heading style 3

.post h4 {background-attachment: scroll;background-color: white;background-image: url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2f4f6QEJb2sgCNI8C0W49KKJO7TMGEP59T6BjT5v-or2npQpPtdn0E913T1NuT58FcQws03-SuSjTW0P8VX4XmI0Nw08jch24Lyver9loqOI2DC1HyHjNvH0-jbMPgjiHDI3kROHF8kK/s1600/h2.png”);background-position: 0 50%;background-repeat: no-repeat no-repeat;border: 3px solid #0D7005;border-radius: 14px 14px 14px 14px;box-shadow: 3px 3px 3px #ABABAB;color: #25991C;font-family: Lobster,cursive;font-size: 26px;font-weight: normal;margin: 0 0 1em;padding: 0 1px 4px 34px;position: relative;text-shadow: 1px 1px 0 #000000;text-transform: capitalize;}