Widget Generators: Blogger Widget

Blogger Widget

Showing posts with label Blogger Widget. Show all posts

Blogger Widget, Tutorials

Add a Announcement Widget in Your Blog

If you want to give any announcement to your readers on regular time or time by time then you can use this kind of widget this is today we are going to launch with you all, as you know that these kinds of widgets is very useful for our blog so you can easily install it in your blog and easily can access.

blo, Blogger Widget, How's, Tutorials

Add a Headlines News Widget in Your Blog

Hemant Verma - 11:29 PM

ghjhgjgghjhHello Gyus, Today we are sharing a very good and very professional type of widget here on this blog, as you see many times in news websites that here is a news ticker always get updates automatically, so this widget is also is related with the same kind of widget and being more professional, developer add a very good feature in it that's called tool tip, as you can see in the gif image so this ticket widget works like same. So, do it and "Make Your Blog Like a Pro" which is Our supreme goal.

| Demo |

How to Add Headline Widget

Follow all below steps.... (It has 2 Steps)
This is Ist Step....

Login to Blogger > Template
Take Backup of Your Template Before Edit
Click on "EDIT HTML"
Paste below code after <head> tag

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Now Search for ]]></b:skin> and Paste below code just above it.

/*--------------Headlines News Widget ----------*/

.ticker-wrapper.has-js{margin:20px 0;padding:0 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#f8f0db;font-size:.75em}
.ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#f8f0db}
.ticker-title{padding-top:9px;color:#900;font-weight:700;background-color:#f8f0db;text-transform:uppercase}
.ticker-content{margin:0;padding-top:9px;position:absolute;color:#1F527B;font-weight:700;background-color:#f8f0db;overflow:hidden;white-space:nowrap;line-height:1.2em}
.ticker-content a{text-decoration:none;color:#1F527B}
.ticker-content a:hover{text-decoration:underline;color:#0D3059}
.ticker-swipe{padding-top:9px;position:absolute;top:0;background-color:#f8f0db;display:block;width:800px;height:23px}
.ticker-swipe span{margin-left:1px;background-color:#f8f0db;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block}
.ticker-controls{padding:8px 0 0;list-style-type:none;float:left}
.ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
.ticker-controls li.jnt-play-pause{background-image:url(../images/controls.png);background-position:32px 16px}
.ticker-controls li.jnt-play-pause.over{background-position:32px 32px}
.ticker-controls li.jnt-play-pause.down{background-position:32px 0}
.ticker-controls li.jnt-play-pause.paused{background-image:url(../images/controls.png);background-position:48px 16px}
.ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px}
.ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0}
.ticker-controls li.jnt-prev{background-image:url(../images/controls.png);background-position:0 16px}
.ticker-controls li.jnt-prev.over{background-position:0 32px}
.ticker-controls li.jnt-prev.down{background-position:0 0}
.ticker-controls li.jnt-next{background-image:url(../images/controls.png);background-position:16px 16px}
.ticker-controls li.jnt-next.over{background-position:16px 32px}
.ticker-controls li.jnt-next.down{background-position:16px 0}
.js-hidden{display:none}
.no-js-news{padding:10px 0 0 45px;color:#F8F0DB}
.left .ticker-controls,.left .ticker-content,.left .ticker-title,.left .ticker{float:left}
.left .ticker-controls{padding-left:6px}
.right .ticker-controls,.right .ticker-content,.right .ticker-title,.right .ticker{float:right}
.right .ticker-controls{padding-right:6px}
/*########Default Style by MBT#########*/
.ticker-wrapper.has-js{margin:0 0 -200px;padding:0;width:98%;min-height:242px;display:block;border-radius:0;background-color:#fff;border:0 solid #eee;font-size:12px;overflow:hidden}
.ticker{width:80%;height:42px;display:block;position:relative;overflow:visible;background-color:#fff}
.ticker-title{background:#71db00;padding:9px 10px;color:#FFF;font-size:16px;font-family:oswald;text-transform:uppercase;text-shadow:1px 1px 6px #666}
.ticker-title:after{left:90px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-left:0;margin-top:1px;border-left:13px solid #71db00;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}
.ticker-content{background-color:#fff;margin-left:18px!important;color:#444;margin-top:1px!important;overflow:visible!important; padding-top: 2px!important;}
.ticker-swipe{background-color:#fff;position:relative;top:6px;left:110px!important}
.ticker-swipe span{margin-left:1px;background-color:#fff;border-bottom:1px solid #333;height:12px;width:7px}
.ticker-controls{padding: 0px!important;margin: 17px 0 0 10px!important;list-style-type:none;position:relative;right:-50px}
.ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
.ticker-controls li a{border:0px!important; padding:0px!important;}
.ticker-controls li.jnt-play-pause,.ticker-controls li.jnt-play-pause.paused,.ticker-controls li.jnt-play-pause.paused.over,.ticker-controls li.jnt-prev,.ticker-controls li.jnt-play-pause.over,.ticker-controls li.jnt-next{position:absolute;background:none}
.ticker-controls li.jnt-play-pause:after,.ticker-controls li.jnt-play-pause.over:after{content:"\f04c";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
.ticker-controls li.jnt-play-pause.paused:after,.ticker-controls li.jnt-play-pause.paused.over:after{content:"\f04b";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
.ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:0}
.ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:3.6em}
.ticker .iauthor:before, .ticker .icomments:before, .ticker .idate:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
.ticker .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin-right:3px;position:relative;
top: 6px;border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
padding: 3px;
}
.ticker span {padding-right:5px; font-family:Oswald; font-weight:normal}
.ticker .icomments a{color:#71db00;font-size:11px}
.ticker .icomments a:hover{text-decoration:underline}
.ticker .icomments:before{content:'\f086';padding:0 3px 0 0px;color:#777;position:relative; top:-1px}
.ticker .idate{font-size:11px;padding-right:7px;}
.ticker .idate:before{content:'\f073';padding:0 5px;color:#777; position:relative; top:-1px}
.ticker .mbttitle{font-family:oswald;font-size:14px;color:#71db00!important;font-weight:400;text-decoration:none;}
.ticker .mbttitle:hover{text-decoration:underline}

/*------ CSS3 Tooltip by MBT -------------*/
.ticker .tooltip{outline:none;text-decoration:none!important;position:relative}
.ticker .tooltip strong{line-height:30px}
.ticker .tooltip > span{width:290px; white-space: normal; padding:15px 15px 0px 15px;opacity:0;top:170%;visibility:hidden;z-index:10;position:absolute;font-family:Arial;font-size:12px;font-style:normal;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}
.ticker .tooltip > span img{float:right;width:130px;margin:0 0 30px 10px;padding: 0;border: none;}
.ticker .tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:0px}
.ticker .tooltip span b{width:15px;height:15px;margin-left:20px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}
.ticker .tooltip > span{color:#fff; background:#71db00;border:1px solid #94fb26}
.ticker .tooltip span b{margin-top:-19px;top:10px;background:#71db00;border-top:1px solid #94fb26;border-right:1px solid #94fb26;border-bottom:1px solid #71db00;border-left:1px solid #71db00}

@media only screen and (max-width:480px) {
.ticker-content {margin-left: -5px!important;padding-top: 4px!important;}.ticker-title{font-size:10px!important;padding:5px!important;}
.ticker-controls, .ticker .icomments, .ticker .idate, .ticker .iauthor, .ticker .iauthorpic, .ticker-title:after {display:none;}}

Now Save Your Template.

This is 2nd Step

Go to Blogger > Layout
Select "Add a Gadget"
Add a "HTML/JavaScript" Gadget
Paste below code in it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>


<script type="text/javascript">
//----------------------------Defaults
var ListBlogLink = "http://www.widgid.com";
var ListCount = 5;
var TitleCount = 70;
var ListLabel ="Widgets";
var ChrCount = 140;
var ImageSize = 200;

//----------------------------Function Start
function mbtlist(json) {
document.write('<ul id="js-news" class="js-hidden">');
for (var i = 0; i < ListCount; i++)
{

//-----------------------------Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//----------------------------- Title URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//----------------------------------- Title Stirng
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}

if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;

//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);

//################### Date Format

ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

ListDate= json.feed.entry[i].published.$t.substring(0,10);

Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];

//################### Thumbnail Check
if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}

// YouTube scan
else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}

else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTHkdg4YMYQGJQwc_M7nLSVMf6XNvls7OHQTo4o2tPb9mlCZT9GI8IFKjj8nMNX0pdIAc-sCfak3DHmUFx4JxKzOe3RO_hMARaP8kTSaET_7v3FsxkfxVSjVs3nHQScjDZfon9ZzoYOA/s200/Icon.png'";
}

//----------------------------------- Printing List
var listing = "<li class='news-item'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+ "</span> <span class='icomments'>"
+ListComments + "</span> <span class='idate'>"
+ D + " " + M + "</span><i class='fa fa-chevron-right'></i> <a class='mbttitle tooltip' href="
+ListUrl+
"><span><b></b><img src="
+ListImage+
"/>"
+ListContent+
" →</span>"+ListTitle+"</a></li>";
document.write(listing);
}}

document.write("</ul><script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
/*##########Newsticker settings########*/
$(function () {
$('#js-news').ticker({
speed: 0.20,
controls: true,
titleText: 'Headlines',
displayType: 'reveal',
pauseOnItems: 2000});
});
</script>

Save Your Widget.

Make Changes....!

Replace it www.widgid.com with your own blog link.

Created By: Mohhamad Mustafa

Blogger Widget, CSS

Add a Glued Fixed Flaping Widget in Blogger

Hemant Verma - 2:25 PM

We can create a good and professional designs by using the CSS and HTML and they both are sisters of each other and that's why we can create such a professional designs by using these languages so today there is also a new widget is waiting for you, this widget all made by these both CSS and HTML there is no any kind of javascript used so it will be very easy to use and also very easy to install in template and there will no be any kind of error comes in the template and also your template will be remain as same.

Blogger Widget, CSS

Add a Keep Stay Tuned Widget for Blogger

Hemant Verma - 6:55 PM

Keep Stay Tune With Us widget is finally here for bloggers and this is very specially created widget for that kinds of blogs which needs a free and the professional widget for their post footer because many times we need a that kind of widget which need a perfect sociality and this kind of technology wants everyone in their own blog. This widget is made by the

Blogger Widget, CSS

Add a Future Blueish Social Author Info Widget for 2015

Hemant Verma - 6:31 PM

Hello frnds, let cheers once with a big champagne bottle because after such a long time a awesome widget is waiting for you all and that widget is named as Blueish Social Author Info Widget because that will give information about the author or admin of blog and by the social bookmarking buttons and any visitor will easily could know about yourself, this widget will also could help you to increase your own fans following like on twitter, facebook, youtube etc.

Widget is simply made by the CSS and with HTLM codes and there is no use of javascript.

| Live Demo |

Install Blueish Social Author Info Widget

Follow below steps carefully to add it successfully.

Login to Blogger > Dashboard
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'/>
<style>
.wgauthr-widget {
background:#fff;
background-color:#fff;
overflow:hidden;
position:relative;
margin-bottom:30px;
padding:10px 26px;
}

.wg-crnrbckgr:before {
content:"";
position:absolute;
top:0;
right:0;
z-index:40;
background:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
display:block;
width:0;
border-color:#fff #eee #fff #fff;
border-style:solid;
border-width:0 16px 16px 0;
}

.wg-crnrbckgr {
position:relative;
background-color:#47C2DC;
height:90px;
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg
img {
height:80px;
width:80px;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo
span {
display:block;
letter-spacing:1px;
text-transform:uppercase;
}

.wg-avtlninfoaa {
font-size:14px;
line-height:21px serif,font-weight:normal,color:#666;
padding:22px 25px 8px;
}

.dwnlin {
margin-top:6px;
text-align:center;
border-top:2px solid #eee;
padding:8px 25px;
}

.wgauthr-widget.wgathrlns {
background:#fff;
margin-bottom:30px;
padding:0;
}

.wg-golblue {
width:100%;
height:50px;
padding:0 0 0 30px;
}

.wg-goliconn {
background:#47C2DC;
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}

.wg-goliconn:hover {
background:#ddd;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

.wg-goliconn img {
padding-top:5px;
padding-left:5px;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg,.wgavtrg {
position:absolute;
bottom:-20px;
left:30px;
border-radius:50%;
overflow:hidden;
background-color:#fff;
border:5px solid #fff;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo,.wgavtinfo {
padding-left:130px;
padding-top:46px;
color:#fff;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurnaam,.wgurnaam {
font-size:14px;
line-height:16px;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurju,.wgurju {
font-size:10px;
}
</style>

<div class="wgauthr-widget wgathrlns"><div class="wg-crnrbckgr" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXQTtGKZ5zhhFEWwW5lVEwGCDA07NSIYtkDy99ZX2jphZrrMX1CEXsJu9NaT5BDJtGosTbQBF40nWtZeSe3WU_7__9LTVXa4vuXfrPDOXWMd0bKGMpzZLUDb_sj9MWAp4Fvzde1WX6aFI/s1600/authorbck.jpg)">

<div class="wgavtrg">
<img alt="Hemant Verma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSk18hT-bJvFhPwibZd0FxkVaiaJj7Y5-63d77Fdk2JD4n6xnLhKSWQTrnvtpDPsR5LsmNS24duSXpM_I3mvKuJ2mYviZ5iTswrDPgonCxRJPUIwBZhZHnTN1ADUtHtQYUO-KqVmM5__dr/s1600/hemant+verma.PNG" /></div><div class="wgavtinfo"><span class="wgurnaam">Hemant Verma</span>
<span class="wgurju">An Entrepreneur, Blogger, Gadget Geek </span></div></div><div class="wg-avtlninfoaa">Our Mission is quite simple and easy to readers that MAKE YOUR BLOG LIKE A PRO which is now serving tons of quality articles daily to a much broader audience. </div><div class="dwnlin"></div>

<div class='wg-golblue'>
<div class='wg-goliconn'><a href='http://www.facebook.com/#' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.twitter.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div>
<div class='wg-goliconn'><a href='http://feeds.feedburner.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div>
</div></div>

Save Your Widget.

Note: Don't Change Anything Extra from Codes because all Codes are Highly Sensitive.

Make Changes....!

Do some changes before save your widget.

Replace Hemant Verma it with your own name (2 times)
Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSk18hT-bJvFhPwibZd0FxkVaiaJj7Y5-63d77Fdk2JD4n6xnLhKSWQTrnvtpDPsR5LsmNS24duSXpM_I3mvKuJ2mYviZ5iTswrDPgonCxRJPUIwBZhZHnTN1ADUtHtQYUO-KqVmM5__dr/s1600/hemant+verma.PNG this link with your own pic link.
Replace An Entrepreneur, Blogger, Gadget Geek this line with your own short bio.
Replace Our Mission is quite simple and easy to readers that MAKE YOUR BLOG LIKE A PRO which is now serving tons of quality articles daily to a much broader audience. this line with your complete bio.
Replace # with the usernames of all social networks.

Blogger Widget, CSS

Add a Black Mini-Mag Social Subscription Widget in Blogger

Hemant Verma - 11:22 PM

Hello frnds, We are doing awesome here hope you all also doing awesome in your life. Do also one thing with awesomeness that install Widget Generator's Widgets in your blogs :) and make your blog like a pro.
We are here with a new widget the widget is very simply and not unique but some where very simple and very effective that must be increase your social fans and also might be increase your popularity in blogging world.

This widget is simply made by the CSS and HTML and there would be no problem to install it in blogger.

Install Black Mini-Mag Widget

Follow below steps carefully to add it successfully.

Login to Blogger > Dashboard
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.

<style type="text/css">
.wg-roumash{
padding:10px;
margin:auto;
width: 100%;
height:60px;
}

.wg-roubbb{
background: #000;
}

.wg-roubbb{
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}
.wg-roubbb:hover{
background:#ddd;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.wg-roubbb img{
padding-top:5px;padding-left:5px;
}

#wg-mashmini {
width:100%;
margin:auto;
padding:0px;
}

.wg-mashmnbx {
background-color:#000;
border:1px solid #fff;
border-top:1px solid #fff;
overflow:hidden;
padding:12px 16px;
}

.wg-mashmnbx form {
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
}

.wg-mashmnbx input.emailu {
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
color:#999;
width:100%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font-size:13px;
padding:7px 10px 8px;
}

.wg-mashmnbx input.submitu {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#000;
font-weight:700;
font-size:12px;
float:right;
cursor:pointer;
padding:7px 14px;
}

.wg-mashmnbx input.submitu:hover {
text-decoration:none;
}

.wg-bttnwht {
border:1px solid #fff;
text-shadow:1px 1px 0 #fff;
background-color:#fff;
}

.wg-bttnwht:hover {
background-color:#DCDCDC;
}
</style>

<div class='wg-roumash'>
<div class='wg-roubbb'><a href='http://www.facebook.com/#' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div>

<div class='wg-roubbb'><a href='http://www.twitter.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div>

<div class='wg-roubbb'><a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div>

<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div>
</div>

<div id="wg-mashmini">

<div class="wg-mashmnbx">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=#', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="64px">
<input class="submitu wg-bttnwht" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="#"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>

</div>

Now, Save Your Widget.

Make Changes....!

Do some changes before save your widget.

Replace # with the usernames of all social networks.

Blogger Widget, CSS

Add a Pro White Collar Social Sidebar Widget in Blogger

Hemant Verma - 5:48 PM

Social Reforms in the widgets are going on its best way. Hello frnds, we are here again for you all, as our blog is related with the widgets but in these days we are not able to post widgets as much as we should post but we are trying our best for you all. Today here is a simple but WordPress like Social Sidebar Widget for blogger which will give a very professional look to your blog like we see on the WordPress.

It simply made by the CSS and by HTML Codes. So, there would be no problem gonna come to
So, get ready to make your blog like a Pro.

Install White Collar Social Plugin

Follow below steps carefully to add it in Blogger

Login to Blogger > Dashboard
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'/>

<style>
.wg-social {
width:100%;
float:none;
margin:0;
}

.wg-social ul {
border:1px solid #CCC;
display:table;
margin:0;
padding:0;
}

.wg-social ul li {
list-style:none;
text-transform:none;
border-bottom:1px solid #CCC;
border-top:1px solid #FFF;
width:100%;
margin:0;
padding:0!important;
}

.wg-social ul li:first-child {
border-top:0 none;
}

.wg-social ul li:last-child {
border-bottom:0 none;
}

.wg-social ul li a {
background-color:#F2F2F2!important;
color:#404040;
display:block;
font-family: oswald;
text-decoration: none;
}

.wg-social ul li a:hover {
background-color:#fafafa!important;
}

.wg-social ul li .rss {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBQKoiY3vxoFyf1h3CMc-l9EKid9RXs04ExL2deJJV-VRja3GVskQss2K2-pTi42o52j2N4oMHGPwmlfOHKumezQ7jz3_KrP8cfTIVa2SXLRY7kKKVG6B7AXolV-ilJ7d6yM8PyIEZA/s1600/RSS-1.png) no-repeat scroll 10px center #F87E12;
padding:17.5px 60px;
}

.wg-social ul li .twitter {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSXexF8Fn464q1b6DmN1ZUq0NPTI_zd1QYbgbvpfEpEtYgV6cA5AOf13bPhmz4477MwDNmiJEZjHYq0fAdKCinMBjdeDGAqFV3h7BGrLPkeQlCKr8Cp_BhDrJXLUNAwcmz4AG51Ya1Q/s1600/Twitter.png) no-repeat scroll 10px center #4CACEE;
padding:17.5px 60px;
}

.wg-social ul li .facebook {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE1C6x96j-0uA-369bRwGQpDByVf4QXDtVmmyE6mKg7a4hNdiNuIzXs7vlZiwG5Xx0afB970ufXF030udsZuLljS01LjTbiYsg0OjQ-keebeNB7I7N0YxSjHcAaYN5R2Z-b_-H_fBgwA/s1600/Facebook-1.png) no-repeat scroll 10px center #3B5998;
padding:17.5px 60px;
}

.wg-social ul li .google {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEvfj7dr6xJzlO0kQ85t2ZhsTLwWj1XhBzM6GHr83q3oTTIkjXfvnwjp04ReoBe2IFD23ZViIW-c8X0VX-WAXL75nQ6ZMn20fdykNIqyr0TXlN7qTXAgNu-SUAvcCgF-r0D46X1ku9nA/s1600/google.png) no-repeat scroll 10px center #D44937;
padding:17.5px 60px;
}

.wg-social ul li .linkedin {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTx5K9b2XENI3HrpN6cGt64BxvpkPXE226mpC0Y7774uNwP06GZ8ehJGUQIXH4Xor6mTjFVQ5kAXlmAL7Nhvih8m-Nc7F3JXcb_z6QXchKodvnUdmrr7u1NBzU3Bb2jAIVAuOD1PLV7g/s1600/LinkedIn-1.png) no-repeat scroll 10px center #3692C3;
padding:17.5px 60px;
}

.wg-social ul li .youtube {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NKdQd0HqZIqu3WF4QnTcCrvkt8xrEK2zZ1anVwKbkSG8oXVWSVTuwK7ETJ9lo-TewIS_X7BSF0JvWtxCuf-4GY9CvE1GY8z-zGs9f2vsdoDSUvxfZlEGJLPMzimU8vCFFjvX7o60cw/s1600/Youtube-1.png) no-repeat scroll 10px center #C6312B;
padding:17.5px 60px;
}

.wg-social-about {
display:none;
}
</style>

<div class="wg-social">
<ul>
<li><a target="_self" class="rss" href="http://feeds.feedburner.com/#">Subscribe to Our RSS Feed</a></li>
<li><a target="_self" class="twitter" href="https://twitter.com/#">Follow me on Twitter</a></li>
<li><a target="_self" class="facebook" href="https://www.facebook.com/#">Find Us on Facebook</a></li>
<li><a target="_self" class="google" href="https://plus.google.com/#" rel="author">Join Us on Google+</a></li>
<li><a target="_self" class="linkedin" href="http://in.linkedin.com/#">Connect with Us on LinkedIn</a></li>
<li><a target="_self" class="youtube" href="http://www.youtube.com/#">Watch me on YouTube</a></li>
</ul>
</div>
</div>
<center>
<h6>Widget by:-<a href="http://www.widgetgenerators.com">Widget Generators</h6>

</center>

Save your Widget.

Make Changes....!

Do some changes before save your widget.

Replace # with the usernames of all social networks.

Blogger Widget, CSS

Add a Pro Expand Collapse Verticle Sidebar Menu in Blogger

Hemant Verma - 3:53 PM

Hello, frnds we are here to share a new and very beautiful widget for blogger, it's being a long time since we did not share any widget on this blog because I was busy in some important work and my laptop also was not in good condition, that was suffering from deadness :) but now that is alive lol. Well Jokes a part we try to share this widget here on WidgetGenerators.com because this is hub of widgets.

About Expand Collapse Verticle Sidebar Widget...

This Widget is simply made by the CSS and some scripting codes, this is very user-friendly and easy to install on your blog. We also used some where JavaScript in this widget just only because of the good looks and gives the professional looks to your blog.

Install Widget in Your Blog

Keep Follow all steps to add it correctly.

Login to Blogger > Dashboard
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.

<style>
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
wgmenu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, wgmenu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html{
height: 100%;
background: rgb(234, 246, 243);
}
body{
text-align:center;
vertical-align:middle;
height:100%;
}
body:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}

.wgmenu{
vertical-align:middle;
width:300px;
display:inline-block;
font-family: 'Source Sans Pro', sans-serif;
transform:translate3d(0,0,0);
}
.wgmenu input{
position:absolute;
left:-9999px;
}
.wgmenu #togglewgmenu:checked ~ ul {
max-height:300px;
padding-bottom:1em;
}
.togglewgmenu {
background: #FC634B;
color: white;
display: block;
padding: 0.75em;
text-align: center;
cursor:pointer;
font-family: 'entypo', sans-serif;
}
.togglewgmenu:before{
content: "\2630";
font-size:1.5em;
vertical-align:middle;
}
.wgmenu ul{
margin-top:2px;
text-align:left;
max-height:0px;
overflow:hidden;
padding-bottom:0;
transition:300ms ease all;
}
.wgmenu li{
margin-bottom:1px;
position:relative;
z-index:10;
transition:300ms ease all;
}
.wgmenu li a {
display: block;
position:relative;
width:100%;
padding: 1em;
background: rgb(192, 192, 192);
text-decoration:none;
color:white;
box-sizing:border-box;
transition:300ms ease all;
}
.wgmenu li:hover a {
width:99%;
margin-left:1%;
box-shadow: inset 300px 0 300px -300px rgba(255, 255, 255, 0.6);
}
.wgmenu li:before {
content: "";
position: absolute;
width: 50%;
height: 30%;
left: 1%;
bottom: 16px;
box-shadow: 10px 0 0px black;
transition:300ms ease all;
transform: rotate(0deg);
}

.wgmenu li:hover:before {
box-shadow: 10px 0 30px black;
transform: rotate(-4deg);
bottom: 6px;
}
.wgmenu li:hover + li{
z-index:1;
}
</style>
<nav class="wgmenu">
<input type="checkbox" id="togglewgmenu" checked />
<label for="togglewgmenu" class="togglewgmenu"></label>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Blogging Tips</a></li>
</ul>
</nav>

Now Save Your Widget, after some changes.

Make Changes....!

Make some changes before adding widget.

Replace # it with your Facebook page id or username.
Replace red color with your Facebook page id or username.

Blogger Widget, CSS

Add a Classic Pro Labnol like Facebook Like Widget in Blogger

Hemant Verma - 5:06 PM

Labnol blog is a India's most popular and first professional blog and this blog is managing by Amit Aggrawal. Amit's team design a Facebook Like Box which is very classic and look as professional. Today you will get this widget here for your blog in free.

Add Classic Labnol like Facebook Widget

Follow below steps to Add it sucessfully.

Login to Blogger > Dashboard
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.

<style>.wgFB{
width:320px;height:150px;border-radius:3px;position:relative;background-color:#f4f4f4;padding:5px 10px 15px 0;max-width:96%}.wgFB,.wgFB:before,.wgFB:after{background:#f4f4f4;border:1px solid #ccc}.wgFB:before,.wgFB:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.wgFB:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ccc}
</style><div class="wgFB"> <div style="height:160px;overflow:hidden"> <fb:like-box href="https://www.facebook.com/widgetgenerators" data-width="340" data-height="189" data-show-faces="true" data-show-border="false" data-stream="false" data-header="false"></fb:like-box> </div></div><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_GB/all.js#xfbml=1&appId=549510788403215";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Save Your Widget.

Make Changes....!

Make some changes before saving your widget

Replace widgetgenerators it with your Facebook page id or username.

Blogger Widget

Add a 3 in 1 Sliding Social Bookmarking Widget in Blogger

Hemant Verma - 7:04 PM

Would like to play with html we also like to play with html because it's a free and easy source learning language and most important thing is this stuff is, it gives results after in just 2 sec. We can give any kind of position to our html coding and that's why we can create widgets with a freely no script boundation, no versions boundations and most important thing is blogger is totally depend and works on the html, css, and javascript as wordpress widgets always need plugins like all in one seo widget so blogger don't need this kinds of plugins you just to need some coding skills and everything will happen automatically, so this is also a big difference between Blogger and Wordpress thats why we like blogger because it's platform is independent but wordpress also has some their own qualities which all are beyond to blogger, so today we have an another unique fresh and crispy blogger widget for you, which is named as 3 in 1 Sliding Social Bookmarking Widget.

Live Demo

Add a 3 in 1 Sliding Social Bookmarking Widget

Follow all steps to add this widget in your blog.

Login to Blogger > Dashboard
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.

<div class="eehucoder kshucoderr-facebook" id="obenimmil"><center><a style="display:block;width:50%;min-width:500px;height:42px;background-color:#333;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:26px;line-height:42px;font-weight:normal;margin-top:15px;-webkit-border-radius: 12px;border-radius: 12px;border:2px solid #c45004;-moz-box-shadow: 0 0 15px #000;-webkit-box-shadow: 0 0 15px #000;box-shadow: 0 0 15px #000;">Which one do you use the most ?</a></center></div><div class="ouihucoder saym1rayt hucoder-facebook"><div id="faceic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#4a6ea9;text-align:center;"><center><a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:180px;height:180px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghq4vUbOOL27hZsny1NoTRPtEOq3qXmQsDmTelLV8zKfFsHF3qW3gqpdpbyVME_EGw91ByoMqx2IVVZVqfsSqZqp06eSmgYGHqjYYtb70n8mFJ1KzWYc8O0TkyAvq16x_yehmYvNMETNCO/s180/facebook-icon.png) no-repeat top left;margin-top:115px;"></a></center></div><center><a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Before entering the site,</a><a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">you liked us on Facebook ?</a><br/><br/><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FWidgetGenerators&send=false&layout=button_count&width=450&show_faces=false&font=trebuchet+ms&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:130px;height:21px;" allowtransparency="true"></iframe><a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#eceef5;-webkit-border-radius: 6px;border-radius: 6px;border:1px solid #6279ad;line-height:18px;font-family:Tahoma, Arial, sans-serif;font-size:11px;color:#3b5998;font-weight:normal;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);"><img src="" style="vertical-align:-4px;padding:0px;margin:0px;border:none;float:left;background-color:transparent;" />Cancel</a></center></div><div class="uoihucoder saym2rayt hucoder-gopluas"><div id="plusic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#e46044;text-align:center;"><center><a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:200px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQ_Tt-Smu-1kUhS5wec4w-i-2SDWLejgHfU34_WuLV9ZOwfjc-fAjtg-vVkq2jpvEXwOLcYTIGt31Tm7eKaaDy8BFOVFIoxYejvEjtUhzTwkDqVCHzpGWcwno5SBtzqI6pfvLWFZKuYuh/s200/google-plus-icon.png) no-repeat top left;margin-top:110px;"></a></center></div><center><a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Before entering the site,</a><a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">google+ us at +1 Can you give me ?</a><br/><br/><div class="g-plusone" data-annotation="inline" data-width="140"></div><script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script><a style="vertical-align:top;display:inline-block;width:90px;height:23px;background-color:#eee;-webkit-border-radius: 4px;border-radius: 4px;border:1px solid #fff;line-height:23px;font-family:Tahoma, Arial, sans-serif;font-size:12px;color:#e46044;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Cancel</a></center></div><div class="iuohulcoder saym3rayt hucoder-twitterr"><div id="twitic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#32def4;text-align:center;"><center><a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:200px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibUJkKCo4wT9CRkslirWIfx6UI4UGHFlGegwE_vlq0SPlVPF00DTEGw02VR7vPVuo0A1zoXAXRtYXcLNrGRS6uqtLKJjVBu1DOb57Efcv0yTanm5VUZ2hHI0fpZ3SF8XGnGngpjD3f8sJ9/s200/twitter-icon.png) no-repeat top left;margin-top:105px;"></a></center></div><center><a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Before entering the site,</a><a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">you can follow us on Twitter ?</a><br/><br/><a href="https://twitter.com/WidgetGenerator" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow us</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><a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#f8f8f8;-webkit-border-radius: 3px;border-radius: 3px;border:1px solid #ccc;line-height:18px;font-family:Helvetica, Arial, sans-serif;font-size:11px;color:#444;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Cancel</a></center></div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>$(".gecgec").click(function(){$(".saym1rayt").animate({top:"-100%"},1100);$(".saym3rayt").animate({top:"-100%"},600);$(".saym2rayt").animate({top:"-100%"},1700,function(){$(".saym1rayt").hide();$(".saym2rayt").hide();$(".saym3rayt").hide()})});$(".saym1rayt").click(function(){$("#faceic").fadeOut(200);$("#plusic").fadeIn(200);$("#twitic").fadeIn(200);$(this).animate({width:"50%"},200);$(".saym2rayt").animate({width:"25%",left:"50%"},200);$(".saym3rayt").animate({width:"25%",left:"75%"},200);$("#obenimmil").fadeOut(400)});$(".saym2rayt").click(function(){$("#faceic").fadeIn(200);$("#plusic").fadeOut(200);$("#twitic").fadeIn(200);$(this).animate({width:"56%",left:"22%"},200);$(".saym1rayt").animate({width:"22%"},200);$(".saym3rayt").animate({width:"22%",left:"78%"},200);$("#obenimmil").fadeOut(400)});$(".saym3rayt").click(function(){$("#faceic").fadeIn(200);$("#plusic").fadeIn(200);$("#twitic").fadeOut(200);$(this).animate({width:"50%",left:"50%"},200);$(".saym1rayt").animate({width:"25%"},200);$(".saym2rayt").animate({width:"25%",left:"25%"},200);$("#obenimmil").fadeOut(400)})</script>
<style type=text/css>div.eehucoder {
position:fixed;
text-align:center;
z-index:99990;
}

div. ksahucoderr-facebook {
background-color:transparent!important;
height:75px;
left:0;
overflow:hidden;
top:10px;
width:100%;
}

div. kshucoderr-facebook {
_bottom:auto;
_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );
}

div.hucoder-facebook {
_bottom:auto;
_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );
background-color:#4a6ea9;
cursor:pointer;
height:100%;
left:0;
overflow:hidden;
top:0;
width:32%;
}

div.hucoder-twitterr {
_bottom:auto;
_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );
background-color:#32def4;
cursor:pointer;
height:100%;
left:68%;
overflow:hidden;
top:0;
width:32%;
}

div.hucoder-gopluas {
background-color:#e46044;
cursor:pointer;
height:100%;
left:32%;
overflow:hidden;
top:0;
width:36%;
_bottom:auto;
_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );
}

div.ouihucoder,div.iuohulcoder,div.uoihucoder {
position:fixed;
text-align:center;
z-index:99900;
}

</style><style type=text/css>div.eehucoder,</style><style type=text/css>div.ouihucoder,</style><style type=text/css>div.iuohulcoder,div.uoihucoder {
_position:absolute;
}

Codes by: Nitin Mehta

Now, Save Your Widget.

Make Changes....!

Make some following changes in above codes.

Replace it WidgetGenerators with your Facebook Page username.
Replace it WidgetGenerator with your Twitter username.

Blogger Widget, CSS

Add a Pop-Up Professional Feedburner Widget in Blogger

Hemant Verma - 6:36 PM

Do you want any professional widget for your blog to increase your feedburner members then you are here at good place because today we have a new fresh professional feedburner widget for your blog which can increase your members. As we all knows that the importance of looks is the first priority in the blogging and most of readers always gets ready only for that site who have a perfect professional look on their blog and then they concentrate at content of blog, the most important and perfect example is Tech and Info site Mashable.com, Mashable always try to change their template's feature and their designers always try to give a new and unique look to their site, and that because for the looks and unique features in the blog, and the result you can see it one the best tech and info blog since a very long time, I don't want to waste so much of time and just look at the today's professional content.

Live Demo

Add Pop-Up Widget in Your Blog

Follow below steps to add it successfully

Login to Blogger > Dashboard
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.

<script type="text/javascript">
/***Delay Timer Code © WidgetGenerators (www.widgetgenerators.com)***/
function wg_style_v4_popup(){document.getElementById('wg-style-v4-popup-main').style.display='block'}setTimeout('wg_style_v4_popup();',4000);
</script>
<style type="text/css">
* html #wgstylepopupdiv {
position:absolute;
}

#wgstylepopupdiv {
z-index:999;
display:block;
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5_0Y6jjmugx_W_aYvCrVTsUI7bZvSGfSVlq41AlbOJZNPQfWe46R5lRNUD-mlt9qXqUQUejp4RtEhO-9MfaVdc4MYwF97CzfchGrgDViXjV5tcWegUmIUWM9-ALBkDNErN9CdsKLBWH2h/s1600/wgspir.png);
overflow-y:auto;
margin:0;
}

.wgstylepopup {
width:619px;
height:475px;
position:fixed;
top:50%;
left:50%;
margin-top:-237.5px;
margin-left:-309.5px;
}

#wgstylepopup {
overflow:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitnqxqSWot99ZS32tXsQLob9ciH1HpvhxGpuHz2_iflaii05dl00YGuCEWarWcHUm4mBMSDjmJwCHbyyOIUgTsR6odrpUoumy-D4gls-1fxDgpdki8oHCCq-QirxGfmQCuh_g0frPIFuiB/s1600/Prosubwg.png);
background-repeat:no-repeat;
}

form#wgstylepopup {
display:block;
margin:0;
}

form#wgstylepopup #wgfield {
position:absolute;
top:297px;
left:352px;
width:250px;
font-size:16px;
border:none;
background:transparent;
padding:10px;
}

form#wgstylepopup #wgbutton {
position:absolute;
left:352px;
top:350px;
width:249px;
height:42px;
border:none;
background:transparent;
}
</style>

<div id="wg-style-v4-popup-main" style="display:none;">
<div id="wgstylepopupdiv">
<div id="wgstylepopup" class="wgstylepopup">
<center style="color:#000;cursor:pointer;float:right;margin-right:10px;margin-top:-20px;" onmouseup="document.getElementById('wgstylepopupdiv').style.display='none'">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmHfODmShMcklHe8rRR7d4ABN2xBHHE7hmjnkKus-n_ho-XCLTcPfAm4FA2i3j-1mGLzblcT-0te5ZcfHUhN7E1mh5NhcC4fIaZOrXN3IYG744dbdeD71NBgZykeuAAsPK9xePid_B0i-7/s1600/closebtnwg.png"/>
</center>
<form id="wgstylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WidgetGenerators', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="WidgetGenerators" name="uri"/>
<input type="text" id="wgfield" name="email" value="Enter Your E-Mail Here..." />
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-FQFRQQTD9HnU-Yx_0WQDmLxcs5XHN4o6UUkCLQDE_CcBflmH5zbnnlZMcJHaJKdm7msSXyDOKsHUIH9vX9hnQzyxzuw28USp-U0ebbwc6hY8j3J-STMjUSG65JUzGPWSuPypP2xZqmc3/s1600/wgtnn.gif" id="wgbutton" />
</form>
</div>
</div>
</div>

Finally Save Your Widget after some changes (below).

Make Changes....!

Replace it WidgetGenerators with your feedburner user name (2 times)
You can also adjust the loading time of this widget 4000 from here, 1000 = 1 sec (Optional)

Final Words...!

I have some suggestion for you that don't try to change anything from above codes because all codes are very sensitive and in this widget we used some javascript for timing so please don't try to change anything in the coding section. Add this in your blog and have fun with pro effect on your blog :)

Editor's Choice

Popular Posts

Blogger Widget, Tutorials

blo, Blogger Widget, How's, Tutorials

How to Add Headline Widget

Make Changes....!

Blogger Widget, CSS

Blogger Widget, CSS

Blogger Widget, CSS

Install Blueish Social Author Info Widget

Make Changes....!

Blogger Widget, CSS

Install Black Mini-Mag Widget

Make Changes....!

Blogger Widget, CSS

Install White Collar Social Plugin

Make Changes....!

Blogger Widget, CSS

About Expand Collapse Verticle Sidebar Widget...

Install Widget in Your Blog

Make Changes....!

Blogger Widget, CSS

Add Classic Labnol like Facebook Widget

Make Changes....!

Add a 3 in 1 Sliding Social Bookmarking Widget

Make Changes....!

Blogger Widget, CSS

Add Pop-Up Widget in Your Blog

Make Changes....!

Final Words...!

Get Updates on Facebook

About us

Editor's Choice

Followers

WG Tools