| BWidgets

Home All posts

Wednesday, 14 November 2012

Gmail Logo With CSS3

So today i'am sharing a post from hongkiat.com which is about creating Gmail logo with CSS3. First of all go and create a new html document on your computer and then paste following HTML markup on it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Gmail Logo with CSS3</title>
<style type="text/css">
Paste CSS3 here
</style>
</head>
<body>
<span class='gmail-logo'>
<span class='gmail-box'> </span>
</span>


</body>
</html>

As you can see in above code that i left a blank field for our CSS3 code so just replace below CSS with "Paste CSS3 here":

That's It...... :)

Monday, 12 November 2012

Stylish CSS3 Login Form

Finally we're posting another form on BWidgets and probably it's our first form since i bought a top level domain for my blog. It's CSS3 based and it contain some amazing CSS3 animations and probably IE will hate this form. Tomorrow is Diwali in India so Happy Diwali to all visitors around the world.

Let's start it with basic HTML markup:

<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Fill out the form below to login to my super awesome imaginary control panel.</span>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="Password" />
<div class="pass-icon"></div> </div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
<input type="submit" name="submit" value="Register" class="register" />
</div>
</form>
<div class="gradient"></div>

Well this was pretty simple and now it's time for final CSS3 touch:

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
/*******************
SELECTION STYLING
*******************/
::selection {
color: #fff;
background: #f676b2; /* Safari */
}
::-moz-selection {
color: #fff;
background: #f676b2; /* Firefox */
}
/*******************
BODY STYLING
*******************/

/* Download Button (Demo Only) */
.download {
display: block;
position: absolute;
float: right;
right: 25px;
bottom: 25px;
padding: 5px;
font-weight: bold;
font-size: 11px;
text-align: right;
text-decoration: none;
color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:hover {
color: rgba(0,0,0,0.75);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:focus {
bottom: 24px;
}
/*
.gradient {
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gmAvvc2Uln1HXAHm70fCv9EgwZImEeShx6PUsuu3Ofuayg3RLA55tqTBM1QPQOfZ3Py_DzBVqLGgUZ1LmbP8jRyDBQTgzGPpGGIYuJ-zP5j7773K0s2brdg3wkZF73GsCkT-ony3fmw/s1600/gradient.png) no-repeat;
}
*/
.gradient {
/* Center Positioning */
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
z-index: -2;
/* Fallback */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gmAvvc2Uln1HXAHm70fCv9EgwZImEeShx6PUsuu3Ofuayg3RLA55tqTBM1QPQOfZ3Py_DzBVqLGgUZ1LmbP8jRyDBQTgzGPpGGIYuJ-zP5j7773K0s2brdg3wkZF73GsCkT-ony3fmw/s1600/gradient.png);
background-repeat: no-repeat;
/* CSS3 Gradient */
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}
/*******************
LOGIN FORM
*******************/
.login-form {
width: 300px;
margin: 0 auto;
position: relative;
background: #f3f3f3;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/*******************
HEADER
*******************/
.login-form .header {
padding: 40px 30px 30px 30px;
}
.login-form .header h1 {
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 28px;
line-height:34px;
color: #414848;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
margin-bottom: 10px;
}
.login-form .header span {
font-size: 11px;
line-height: 16px;
color: #678889;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}
/*******************
CONTENT
*******************/
.login-form .content {
padding: 0 30px 25px 30px;
}
/* Input field */
.login-form .content .input {
width: 188px;
padding: 15px 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
background: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
/* Second input field */
.login-form .content .password, .login-form .content .pass-icon {
margin-top: 25px;
}
.login-form .content .input:hover {
background: #dfe9ec;
color: #414848;
}
.login-form .content .input:focus {
background: #dfe9ec;
color: #414848;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.user-icon, .pass-icon {
width: 46px;
height: 47px;
display: block;
position: absolute;
left: 0px;
padding-right: 2px;
z-index: -1;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.user-icon {
top:153px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
background: rgba(65,72,72,0.75) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQzrCjwkUi3UhnSF1KopzvjotalnA-D9hKBUH6QP834pxpzRODegWxLxM-q1yWEe_9VYuwflD23deVSuv0iXq4mDSixlfsctidmCk7fVbd5L1jps_9HRgXWwgndtvDsZ6YJ7XN3Iu_a6o/s1600/user-icon.png) no-repeat center; }
.pass-icon {
top:201px;
background: rgba(65,72,72,0.75) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheANatJhfXqIQ0wZaJJ_Wn7RvJII7OJh0Hz1pgl6oi330FsbVnxZta7V1MT5iw4KRDimKprGv-wejSbGi3o0VRpIfnvcYtQuAUH-KmmBAY9op7Mxt8ZsCqtckKHHFhpGwzmM5gi1w7oTc/s1600/pass-icon.png) no-repeat center;
}
.content input:focus + div{
left: -46px;
}
/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
/*******************
FOOTER
*******************/
.login-form .footer {
padding: 25px 30px 40px 30px;
overflow: auto;
background: #d4dedf;
border-top: 1px solid #fff;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}
/* Login button */
.login-form .footer .button {
float:right;
padding: 11px 25px;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}
.login-form .footer .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.login-form .footer .button:focus {
position: relative;
bottom: -1px;
background: #56c2e1;
box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
/* Register button */
.login-form .footer .register {
display: block;
float: right;
padding: 10px;
margin-right: 20px;
background: none;
border: none;
cursor: pointer;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #414848;
text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}
.login-form .footer .register:hover {
color: #3f9db8;
}
.login-form .footer .register:focus {
position: relative;
bottom: -1px;
}

That's It!!!

Sunday, 11 November 2012

Create An Exploding Logo With CSS3 And MooTools

Seriously guys this is best script i have ever seen in my life and for it's not a jquery script. It's a MooTools script and this tutorial was so big and complicated so i compiled four different scripts into one to make it look easy and small. All we need is MooTools, CSS3 and an image. I found this tutorial at David Walsh. Let's get started:

First we have to add basic html in your document:

<a href="/" id="homeLogo">David Walsh Blog</a>

Now after this we'll add CSS3 which will contain our image. The original element should be styled to size (width and height) with the background image that we'll use as the exploding image:

a#homeLogo {
width:300px;
height:233px;
text-indent:-3000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png) 0 0 no-repeat;
display:block;
z-index:2;
}
a#homeLogo span {
float:left;
display:block;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png);
background-repeat:no-repeat;
}
.clear { clear:both; }

Now finally we'll add our magic script:

<script src="http://widcraft.googlecode.com/svn/ExplodingMooTools.js"></script>

Our full document will look something like this:

<a href="/" id="homeLogo">David Walsh Blog</a>
<style>
a#homeLogo {
width:300px;
height:233px;
text-indent:-3000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png) 0 0 no-repeat;
display:block;
z-index:2;
}
a#homeLogo span {
float:left;
display:block;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png);
background-repeat:no-repeat;
}
.clear { clear:both; }
</style>
<script src="http://widcraft.googlecode.com/svn/ExplodingMooTools.js"></script>

Wednesday, 7 November 2012

Adding Disqus Recent Comments Widget To Blogger

Previously i posted an article about Disqus comments system and now you all are here because you are using Disqus on your blog or website and wanted to know about adding recent comments widget to your blog. Recent comments widget is a really good way to show some recent comments of your blog/disqus on your blog which also encourages more users to comment on your blog. You can also use below code on your html document or wordpress.

Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste below code:

<div id="recentcomments" class="dsq-widget"><h2 class="dsq-widget-title">Recent Comments</h2><script type="text/javascript" src="http://wwefansnation.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=200&hide_mods=0"></script></div>

Replace wwefansnation.disqus.com with your site's Disqus ID.
Replace 5 with the number of comments your want to display.
Replace hide_mods=0 with hide_mods=1 to hide moderator's comments.

Now save and you're done.!!!

Disqus Recent Comments Widget For WordPress:

You can download add Disqus Recent Comments Widget to WordPress with this plugin.

Creating Your Own Social Networking Website

Social networking websites like Facebook, Twitter and Google + are used by billions on peoples all around the world so why don't we create own on social networking website. This is interesting, You don't need any knowledge of programming or anything like and it's totally free.

You can add a blog, forum and so many things for your users and it's so easy. We already know power of social media so it's time to know how to create our own social networking website for free.

Wall.fm is a social networking site builder and it's free and you can also use a premium wall fm account to get more features for your website. What are you waiting for??? Just go to wall.fm and get started......Don't forget to share your website link the in comment section below.....

Tuesday, 6 November 2012

WordPress Style Follow Widget For Blogger

Last night, I was surfing around the internet and I found a cool following wordpress feed subscription widget. I tried to convert that widget for blogger and after few minutes, I was totally successful to convert it.

Installing:

Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code:

<div id="bit" class="loggedout-follow-normal" style="bottom: 0px; ">
<a class="bsub open" href="javascript:void(0)"><span id="bsub-text">Follow</span></a>
<div id="bitsubscribe" class="open">
<h3><label for="loggedout-follow-field">Follow BWidgets</label></h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?WidgetCraft', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" id="loggedout-follow">
<p>Get every new post delivered to your Inbox.</p>
<p><input type="email" name="email" style="width: 95%; padding: 1px 2px;outline:none" onclick="value=''" value="Enter your email address" onfocus="this.value=(this.value=="Enter your email address") ? "" : this.value;" onblur="this.value=(this.value=="") ? "Enter email address" : this.value;" id="loggedout-follow-field"></p>
<input name="uri" type="hidden" value="WidgetCraft" /><input name="loc" type="hidden" value="en_US" />
<p id="bsub-subscribe-button"><input type="submit" value="Subscribe"></p>
</form>
<div id="bsub-credit"><a href="http://www.bwidgets.com?ref=lof" style="text-decoration:none;color: whitesmoke;">Powered by BWidgets</a></div>
</div>
</div>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/LoggedOutFollow.js"></script>
<style>
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
_margin-bottom:1px;
}
#bit, #bit * {
*zoom: 1;
}
#bit {
font: normal 13px "Helvetica Neue", sans-serif;
_display: none;
}
.loggedout-follow-shelf {
position: fixed;
right: 40%;
z-index: 999999;
bottom: -300px;
}
.loggedout-follow-normal {
position: fixed;
z-index: 999999;
bottom: -300px;
right: 10px;
}
.loggedout-follow-typekit {
margin-right: 4.5em;
position: fixed;
z-index: 999999;
bottom: -300px;
right: 10px;
}
#bit a.bsub {
display: block;
overflow: hidden;
padding: 0 10px 0 8px;
float: right;
text-decoration: none !important;
line-height: 28px;
font: normal 13px/28px "Helvetica Neue", sans-serif;
color: #CCC;
text-shadow: #444 0px -1px 0px;
letter-spacing: normal;
border: 0;
background-color: #464646;
background-image: -ms-linear-gradient(bottom, #464646, #3f3f3f 5px);
background-image: -moz-linear-gradient(bottom, #3f3f3f, #464646 5px);
background-image: -o-linear-gradient(bottom, #464646, #3f3f3f 5px);
background-image: -webkit-gradient(linear, left bottom, left top, from(#464646), to(#3f3f3f));
background-image: -webkit-linear-gradient(bottom, #3f3f3f, #464646 5px);
background-image: linear-gradient(bottom, #464646, #3f3f3f 5px);
-webkit-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
-moz-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
-o-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
-ms-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
outline-style: none;
outline-width: 0;
}
#bit a.bsub {
-moz-border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
-o-border-radius: 2px 2px 0 0;
-ms-border-radius: 2px 2px 0 0;
border-radius: 2px 2px0 0 0;
}
#bit a.bsub span {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnDp_P2F_RTiv8YVrBo9TOmNUnOIn5XqHpqBjEkEAxIQylzKnpob5LkOjulWpMgZy9v8wxz3ALZhLi-GvF_oSRETvwQ0cD9u-8PjNXzyZmEuLxZvPZ9-a-fse9k6IEIvizWcYPKcALO6Q/s1600/wpcom-admin-bar-icons.png) 0 -77px no-repeat;
padding-left: 19px;
}
#bit a:hover span, #bit a.bsub.open span {
color: #ffffff !important;
background-position: 0 -117px;
}
#bit a.bsub.open {
background: #333;
}
#bitsubscribe {
background: #464646;
color: #fff;
padding: 15px;
width: 200px;
margin-top: 27px;
-moz-border-radius: 2px 0 0 0;
-webkit-border-radius: 2px 0 0 0;
-o-border-radius: 2px 0 0 0;
-ms-border-radius: 2px 0 0 0;
border-radius: 2px 0 0 0;
*float: right;
*margin-right: -68px;
}
div#bitsubscribe.open {
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.5);
-o-box-shadow: 0 0 8px rgba(0,0,0,0.5);
-ms-box-shadow: 0 0 8px rgba(0,0,0,0.5);
box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
#bitsubscribe div {
overflow: hidden;
}
#bit h3, #bit #bitsubscribe h3 {
margin: 0 0 .5em 0 !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-shadow: 0 1px 0 #333;
font-size: 20px;
color: #fff;
text-align: left;
}
#bit #bitsubscribe p {
margin: 0 0 1em 0;
*margin: 0 0 0 0;
font: 15px/1.3em "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-shadow: 0 1px 0 #333;
color: #fff;
}
#bitsubscribe p a {
margin: 20px 0 0;
color: #fff;
text-decoration: underline;
}
#bit #bitsubscribe p.bit-follow-count {
font-size: 13px;
}
#bitsubscribe input[type=submit] {
padding: 2px 20px;
background: #333; /* Old browsers */
background: -moz-linear-gradient(top, #333 0%, #111 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#111)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333 0%,#111 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333 0%,#111 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #333 0%,#111 100%); /* IE10+ */
background: linear-gradient(top, #333 0%,#111 100%);
color: #ccc;
text-shadow: 0 1px 0 #000;
border: 1px solid #282828;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
-moz-box-shadow: inset 0 1px 0 #444;
-webkit-box-shadow: inset 0 1px 0 #444;
box-shadow: inset 0 1px 0 #444;
text-decoration: none;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
*margin: 1em 0 1em 0;
}
#bitsubscribe input[type=submit]:hover {
background: #222; /* Old browsers */
background: -moz-linear-gradient(top, #333 0%, #222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333 0%,#222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333 0%,#222 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #333 0%,#222 100%); /* IE10+ */
background: linear-gradient(top, #333 0%,#222 100%);
color: #fff;
-moz-box-shadow: inset 0 1px 0 #4f4f4f;
-webkit-box-shadow: inset 0 1px 0 #4f4f4f;
box-shadow: inset 0 1px 0 #4f4f4f;
text-decoration: none;
}
#bitsubscribe input[type=submit]:active {
background: #111; /* Old browsers */
background: -moz-linear-gradient(top, #111 0%, #222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111 0%,#222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111 0%,#222 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #111 0%,#222 100%); /* IE10+ */
background: linear-gradient(top, #111 0%,#222 100%);
color: #aaa;
-moz-box-shadow: inset 0 -1px 0 #333;
-webkit-box-shadow: inset 0 -1px 0 #333;
box-shadow: inset 0 -1px 0 #333;
text-decoration: none;
}
#bitsubscribe input[type=text] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
#bitsubscribe input[type=text]:focus {
border: 1px solid #000;
}
#bitsubscribe.open {
display: block;
}
#bsub-subscribe-button {
text-align: center;
margin: 0 auto;
}
</style>

Customization:

Now replace BWidgets with your blog's title and also replace WidgetCraft with your feed id.

Saturday, 3 November 2012

Amazing Facebook Like Slide Out Widget For Blogger

So last night while searching for some games i found this amazing jquery widget so i tried to copy the code (it was a Google friend connect widget) of that widget, it was a huge fail but i created a widget just like that but it's a facebook like widget.

It really looks great and when you'll click on that facebook like image a slide will appear with facebook like box so i can approve that it's very good way to attract your visitors. I'am looking forward to create several more widgets like this.

Now most important this is installing this widget so i created a widget generator to make it easy. Just enter your facebook page username below to add this:

Friday, 2 November 2012

Get Free Twitter Followers

Twitter is a really powerful tool for online social networking, promoting your online work and getting to know people in the web world around you. To maximize your use of Twitter, you want to gain followers on the site. The more people that you have following you there, the more likely it is that they will see what you're doing and be interested in your work around the web.

Well we're sharing several website where you can get free twitter followers everyday and it's totally easy and free to use. All website works in the same way and you can use all of them everyday to get more followers. Visit all of websites which are listed follow and choose Free Plan and get gain followers in several minutes. Don't forget that you can use every website everyday. Here is the list:

Thursday, 1 November 2012

Display Your Profile Picture In Google Search Results

I wanted to post this article from a long time but never got a chance. So it's cool that you see my image with my site's name in search results which is a really good way to promote yourself with your blog but lots of guys don't have any idea how to do this. It's pretty simple just follow these simple steps below. First of all you should be using your Google + profile instead of your Blogger profile. You can use your Google + profile by clicking here.

Go To Blogger > Template > Edit HTML > Post following code just above <head> :

<link href='https://plus.google.com/123456789012345678901' rel='author'/>

In above code replace 123456789012345678901 with your Google + profile ID.

Now visit Google Rich Snippet Tool and test your blog's URL and see the magic!!!

BigRock Promo Codes : November 2012

Here are this month's BigRock promo codes .If any of following code is not working or you got one than please comment.

Offer	Promo Code
Up to 25% Off	wwefansnation.com
Up to 25% Off	bwidgets.com
28% on hosting and 18% on domains	NOVAFF
20% on hosting and 10% on domains	BRWFN
20% on hosting and 5% on domains	BRSWAG
15% on hosting and 10% on domains	BRNXT
15% on hosting and 10% on domains	BRBWCOM
20% on hosting and 10% on domains	BRBWID

Wednesday, 14 November 2012

Gmail Logo With CSS3

Monday, 12 November 2012

Stylish CSS3 Login Form

Sunday, 11 November 2012

Create An Exploding Logo With CSS3 And MooTools

Wednesday, 7 November 2012

Adding Disqus Recent Comments Widget To Blogger

Creating Your Own Social Networking Website

Tuesday, 6 November 2012

WordPress Style Follow Widget For Blogger

Saturday, 3 November 2012

Amazing Facebook Like Slide Out Widget For Blogger

Friday, 2 November 2012

Get Free Twitter Followers

Thursday, 1 November 2012

Display Your Profile Picture In Google Search Results

BigRock Promo Codes : November 2012

Popular Posts

Admin Control Panel

Contact Us

Like Us!

Recent Posts

Disqus

Labels

About Me

Blog Archive

Subscribe