| 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 31 October 2012

Run Android Apps On PC

BlueStacks App Player lets you run apps from your phone fast and full screen on Windows and Mac.

Over 5 million people around the world use top apps like Angry Birds Space, Kik Messenger, Where’s My Water and more on their laptops with BlueStacks. It took 10 engineers two years to build the complex "LayerCake" technology that enable this to happen – but you get to experience it free while in beta.

Just download this software and start using your favorite app on your pc. Choose your operating system below to download:

Windows
Mac

Monday 29 October 2012

Removing Facebook Timeline

Half of users of facebook really hates new facebook timeline and they are tired of finding a way to remove it. Well earlier today i was searching Google Chrome Web Store and i found a really good tool for every browser to remove new facebook timeline.

First of all you can's disable timeline forever, you can just disable it on your own browser not publicly. After downloading this extension your timeline will be remove only on your own browser not publicly.

So time to get on work.....to download this extension on your favorite browser (Chrome/Firefox/Safari/IE) just visit timelineremove.com and choose your browser.

You can also download extension below:

Google Chrome: https://chrome.google.com/webstore/detail/timelineremove/dnedfaenfnkikficknkklbdedlecmpgc

Mozilla Firefox: http://www.timelineremove.com/download/TimeLineRemoveFF.xpi

Safari: http://www.timelineremove.com/download/TimelineRemove.safariextz

Internet Explorer: https://www.timelineremove.com/download/TimeLineRemove.zip

Setting Up robots.txt On Blogger

Months ago Blogger introduced custom robots.txt feature. This feature improve your blog's SEO but newbies really afraid to use this feature because it says :

Warning! Use with caution. Incorrect use of these features can result in your blog being ignored by search engines.

But don't worry guys today we'll learn about this feature here on this article.

By default, every blog that uses the Blogger platform will have a robots.txt as follows:

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://www.yourblog.com/feeds/posts/default?orderby=updated

As you can see in above robots.txt there are three parts of code and let me explain them to you.

Mediapartners-Google is a robot from Google Adsense, leave it because if you changed this then ads will not served will not fit with your content.

The next line is for all the robots and marked with an asterisk (*). On the default configuration, it is clear that the label of our blog is not indexed Disallow: /search.

Keep in mind that a slash (/) is as your homepage, so for example if you want the label to get indexed, do not just fill up with a slash like this Disallow: / because that would be you do not allow the robot tracing your blog.

For example if you want to block a robot for particular page ( for example contact page) you can simply write as follows:

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /p/contact.html
Allow: /

Sitemap: http://www.yourblog.com/feeds/posts/default?orderby=updated

Warning! Use with caution. Incorrect use of these features can result in your blog being ignored by search engines.

Saturday 27 October 2012

Using Custom Short Domain With dlvr.it

As i promised in this article i'll teach you how to use your own short domain with dlvr.it. So we have to do two things. One in your CNAME Records and second in your dlvr.it account so let's start with CNAME:

Visit you domain provider (for example BigRock or GoDaddy).

Click on your DNS Manager and Add A CNAME

In Host Name type your SubDomain (for example: dlvr.example.com) and in Value put dlvr.it just like below pic:

Well after updating CNAME records you have to wait for several hours because it takes a bit time to update CNAME and all DNS records. After one or two hours you can do for second step:

Visit dlvr.it and sign in.

Click on Settings tab in top menu > Click on Short Links

In Short Links tab click on Add Custom Domain and a pop-up will appear their you can put your domain name and it's done.

You can post your questions in the comment section below.....

Thursday 25 October 2012

Redirect Your Feed To Social Networking Sites

As we mentioned in several posts that social sharing is a great way to get some really good traffic to your site but it really sucks to tweet and update every single posts to all of our facebook pages, profiles and twitter profile. In this condition getting a free site to do this for us is a better idea.

dlvr.it got all what we are looking for. With dlvr.it we can share our feeds to all of our social networks on the go. It's simple we just have to confirm all our routes once and after this it'll automatically redirect all your content.

dlvr.it is free for all our basic use but if you're using more than five feeds and three social networking profile then you have to pay a cheep monthly amount to them. So what are we waiting for just visit dlvr.it and get started.

In next article we will show you how to use our own domain with dlvr.it

Watch Flagged YouTube Videos Without Logging In

Youtube is so high on removing adult videos from their site and also youtube ask users to verify their age for watching flagged video which really makes me sick. My Google account is banned from Youtube and because of it i can't watch any flagged youtube video without logging out of my Google account. Last year while searching for funny memes i found a meme with a trick to watch flagged youtube video.

Unfortunately, I lost that meme image but i still got that trick on my mind which i'am going to share with you all guys. Make sure you're using a pc with flash player.

Here is a link of a flagged video by Smosh : http://www.youtube.com/watch?v=g2sZSm9JcdY

You can't watch above video without signing in now remove watch? and = from above link and make it look like this : http://www.youtube.com/v/g2sZSm9JcdY

Wow that's easy..... here is a basic structure of this link http://www.youtube.com/v/videocode

Hope this will help you.....

Tuesday 23 October 2012

BigRock Promo Codes : .ORG Domain @ Rs 299

BigRock is back with another superb discount on .ORG domains. Now you can get a .ORG domain @ Rs. 299 only plus get a 5 Page DIY package FREE for 6 months with every .ORG Domain. !!! So don't waste your time and score a .ORG. You can get a .ORG For Rs 299 by clicking here.

Why Choose BigRock? :

BigRock is an ICANN-Accredited Domain Name Registrar that sells Domain names at the most competitive rates in the industry. BigRock's platform powers over 6 million domains. At BigRock they have a seamless domain search process and our cheap domain registration prices are upto 80% lesser than other Registrars. Bigrock is India #1 domain registration and web hosting provider. On BigRock you can register domain names in many different name spaces including .com, .net, .org, .biz, .info, .mobi, .in, .co.in, .co.uk, .asia and many other spaces. Additionally they offer 24X7 support for all your domain registration and web hosting services. So if you are looking for Domain Registration in India look no further. BigRock is the destination for you!.

So go and get a .ORG for Rs 299 only by clicking here.

Note : This is a limited time offer only but if this offers expires then you can always get 10% discount on domains by clicking here.

Sunday 21 October 2012

Amazing Paginator3000 Widget For Blogger

This amazing widget is created by the amazing Abu Farhan and you can check his blog by clicking here. This page navigator supports more than 500 pages even more and this is the most beautiful page navigation widget ever for blogger. Thanks to Abu Farhan for creating this widget. Here we go:

Go To Blogger > Template > Edit Html > Search for ]]></b:skin> and just above it post following css:

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhps5RxgtF3-w3BppXgcFrg1cNeMUmukR0eRWUoObUKJwqPFr7g0VHgzLLDRnTcfU98W63kEL3-3b8GOllFe4oxWsacQkyInZI11wDH8_7NrJyzplYxA7RKhxjLjRLLwiMgL9WbXsi2xGA/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

Now find </body> and just above </body> post following script:

<script src='http://widcraft.googlecode.com/svn/Paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://widcraft.googlecode.com/svn/Paginator3000ForBlogger.js' type='text/javascript'/>

Change based on your blog setting :
var postperpage=7;
var numshowpage=6;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Now click on "Expand Widget Templates" and find 'data:label.url' and replace it with following code:

'data:label.url + "?&max-results=7"'

Change 7 base on how many post every page..........

10 Tips For Beginner Bloggers

Blogging world is getting large everyday as so many peoples are creating blogs and it's hard for all of them to capture their targets and follow their blogging dream. So today i'am sharing few tips that might help all new bloggers:

1. Follow your niche: For every successful blogger it's important to follow your niche. Blogging is not what peoples like, It's what you like and you're good at. Before starting blogging you should figure out what you're going to blog about if you want to be a foodie blogger, a lifestyle blogger, a sporty blog, a sex blogger (yep I love them), it depends on what you like.

I love pro-wrestling so i stared a blog on Wrestling stuff and right now i got over 3k posts on it and i'am writing more posts everyday. That's the best part that you'll never get bored of posting what you're good at.

2. Choose a perfect name: A perfect blog needs a perfect name which is related to what you're blogging at. First of all never choose your name as your blog's name or address. Try to choose a name which attract Google and which is easy to remember for your fans.

Always try to choose an original name and don't copy names of other websites. I guess someone said "What's In The Name...."

3. Improve your looks: It's hard to find a perfect design for your blog but don't worry about that because you can get tons of templates for your blog by searching them on Google or you can get a simple template then customize it on your own. I mean it's just a waste of money if you're buying a premium template because free templates are as good as paid.

Choose a design according to your niche and which doesn't annoy your visitors. Because just like girls every blog wants to look sexy.

4. Writing is a must: Most importantly bloggers should focus on their content because good content is everything for your readers. Take a time to improve your writing skills and don't write like me (Believe me i do lots of mistakes). Always double check your article before posting to see your spelling and grammar mistakes.

Always give full information in your posts because sometime we just ignore something and thinks that it's a common-sense but believe me internet is full of experts and some really dumb guys.

5. Get involved in social media: Social media is a great way to earn new visitors and get in touch with old ones. Sites like facebook, twitter, youtube really helps us to earn some great traffic. Who knows maybe you become the next big thing of social media. Try to stay connected with all visitors on social networking sites.

It's important to make a facebook page for your blog and sharing your content on social media with your fans and friends.

6. Stay in touch: As i said it's good to stay in touch with your visitors and just like that it's also good to always stay in touch with your visitors by helping them and answering their comments. Maybe that visitor pay you for doing some work in their blog or maybe you find some good friends.

If your blog has a forum then make sure to participating in user posts so they think that you're interested in their activity.

7. Ask: Don't afraid of taking help of other bloggers and peoples they won't bite at all. I mean not everyone knows everything so i think it's a great idea to take some help from other bloggers and ask what you don't know.

It's never to hard to Google your problems. Well Google is the worlds best book so as our parents said "Read Books"

8. Y U NO USE MEMES: Don't just blog like a nerd mix up some memes and funny images to attract your readers. I know you're the biggest joke in the world but still you need some funny things on your posts to earn some real loyal fans.

It's not hard to find some amazing images for your blogs just Google it and you'll find tons of images.

9. Respect copyrights: Sharing content is good but don't forget to give the real owner of that content some credits. I mean he/she can claim you for using his/her content without their permissions so don't forget to respect their copyrights and give them some credits or some kind of shout-out on your blog.

Come on copy cats i know some of you guys also copy my content at-least you can post a link to my blog as a reward....Damn!!!

10. Let a life: To stay healthy and to keep your mind fresh it's really important to give yourself a little break. I mean don't spend full day in front of your PC. Go outside, have fun, hangout with your friends, date your girlfriend (Real one not online).

Sleep is important so don't forget to sleep at-least 6 hours everyday. This will keep your mind fresh and will also reminds you that there is a world outside your computer.

I hope these tips may help you in future and also i hope that after reading this you'll love to give me credits of my content you copy cats :p ....Happy blogging!!!

Saturday 20 October 2012

How To Block An IP Address On Blogger

It's too hard to deal with spammers and copy cats but if some how you find their IP address then this article may help you. It's php based tutorial then we first need a php file hosting.

Copy/paste the PHP code below in a notepad

Replace IP Address 1, IP Address 2, and IP Address 3 with the actual IP addresses you want blocked

Save the file as a .php file (ex. ipblocker.php)

<?php
/*
Blogspot IP address blocker.
*/
$iplist = array(“IP Address 1″,”IP Address 2″,”IP Address 3″); // the list of banned IPs
$ip = getenv(“REMOTE_ADDR”); // get the visitors IP address
// echo “$ip”;
$found = false;
foreach ($iplist as $value) { // scan the list
if (strpos($ip, $value) === 0){
$found = true;
}
}
if ($found == true) {
echo “top.location = “error.html”;n”; // page to divert to
}
?>

Upload your newly created PHP file on any PHP supported web hosting service like 000webhost.com and zymic.com

Now paste following script in your blog's template just above </head> :

<script language=’javascript’ src='URL of your php File' type='text/javascript'></script>

Save your template and it's done.... :)

Wednesday 14 November 2012

Monday 12 November 2012

Sunday 11 November 2012

Wednesday 7 November 2012

Tuesday 6 November 2012

Saturday 3 November 2012

Friday 2 November 2012

Thursday 1 November 2012

Wednesday 31 October 2012

Monday 29 October 2012

Saturday 27 October 2012

Thursday 25 October 2012

Tuesday 23 October 2012

Sunday 21 October 2012

Saturday 20 October 2012

Popular Posts

Admin Control Panel

Contact Us

Like Us!

Recent Posts

Disqus

Labels

About Me

Blog Archive

Subscribe