Resizing Web Page Elements With CSS3

Just a simple trick I wanted to show you guys. You can resize web elements with the CSS3 property resize: both. For images make sure it has width and height set to 100%.

Here is an example for you. First let's start with basic markup:

<div class="post">
BWidgets: Visit BWidgets.com for more!
<br><br>
Try resizing me or my media friend below.
</div>
<div class="post photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnaYZS3oYX3BuVH5nd3Q80LXSvfIrIMfrA9K1dQfncaF2gnguilf-8MXMoMFWLHTiCSSf6xR_aA-Yy6YGQW7v9tUbIPd5SO587NJpCzzEIETVTBqmGBAY5ByJIWkKtfVXiV72gLdTttU/s1600/Google+++Style+Subscription+Box+Widget+For+Blogger.jpg">
</div>

Now we'll put our CSS code in it:

body {
  width: 240px;
  height: 200px;
  margin: 0px auto;
  padding: 40px 0 0;
  background-color: #fff;
  font-family: Verdana, sans-serif;
  font-size: 11px;
}
.post {
  margin: 0px 0px 40px;
  padding: 15px;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
  -moz-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
  box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
  overflow: hidden;
  resize: both;
}
.photo img {
  width: 100%; height: 100%;
}

Now see it in action... :)

HTML 5 Shattering Text Effect

So today we're gonna do this amazing HTML 5 Shattering Text Effect with JavaScript and this script doesn't contains jquery or mootolls only JavaScript. Let's get started with basic HTML markup:

<canvas id="canvas"></canvas>

After adding above html we will add some css to make it better:

body {
margin: 0;
padding: 0;
overflow: hidden;
}
#canvas {
background: black;
}

Now finally it's time for us to add some JavaScript:

window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
keyword = "BWidgets.com",
imageData,
density = 3,
mouse = {},
hovered = false,
colors = ["0,120,232", "8,200,255", "30,140,255"],
minDist = 20,
bounceFactor = 0.7;
var W = window.innerWidth,
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
document.addEventListener("mousemove", function(e) {
mouse.x = e.pageX;
mouse.y = e.pageY;
}, false);
// Particle Object
var Particle = function() {
this.w = Math.random() * 10.5;
this.h = Math.random() * 10.5;
this.x = -W;
this.y = -H;
this.free = false;
this.vy = -5 + parseInt(Math.random() * 10) / 2;
this.vx = -4 + parseInt(Math.random() * 8);
// Color
this.a = Math.random();
this.color = colors[parseInt(Math.random()*colors.length)];
this.setPosition = function(x, y) {
this.x = x;
this.y = y;
};
this.draw = function() {
ctx.fillStyle = "rgba("+this.color+","+this.a+")";
ctx.fillRect(this.x, this.y,  this.w,  this.h);
}
};
var particles = [];
// Draw the text
function drawText() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "#000000";
ctx.font = "100px 'Arial', sans-serif";
ctx.textAlign = "center";
ctx.fillText(keyword, W/2, H/2);
}
// Clear the canvas
function clear() {
ctx.clearRect(0, 0, W, H);
}
// Get pixel positions
function positionParticles() {
// Get the data
imageData = ctx.getImageData(0, 0, W, W);
data = imageData.data;
// Iterate each row and column
for (var i = 0; i < imageData.height; i += density) {
for (var j = 0; j < imageData.width; j += density) {
// Get the color of the pixel
var color = data[((j * ( imageData.width * 4)) + (i * 4)) - 1];
// If the color is black, draw pixels
if (color == 255) {
particles.push(new Particle());
particles[particles.length - 1].setPosition(i, j);
}
}
}
}
drawText();
positionParticles();

// Update
function update() {
clear();
for(i = 0; i < particles.length; i++) {
var p = particles[i];
if(mouse.x > p.x && mouse.x < p.x + p.w && mouse.y > p.y && mouse.y < p.y + p.h)
hovered = true;
if(hovered == true) {
var dist = Math.sqrt((p.x - mouse.x)*(p.x - mouse.x) + (p.y - mouse.y)*(p.y - mouse.y));
if(dist <= minDist)
p.free = true;
if(p.free == true) {
p.y += p.vy;
p.vy += 0.15;
p.x += p.vx;
// Collision Detection
if(p.y + p.h > H) {
p.y = H - p.h;
p.vy *= -bounceFactor;
// Friction applied when on the floor
if(p.vx > 0)
p.vx -= 0.1;
else
p.vx += 0.1;
}
if(p.x + p.w > W) {
p.x = W - p.w;
p.vx *= -bounceFactor;
}
if(p.x < 0) {
p.x = 0;
p.vx *= -0.5;
}
}
}
ctx.globalCompositeOperation = "lighter";
p.draw();
}
}

(function animloop(){
requestAnimFrame(animloop);
update();
})();

That's It......

Removing Extra Copies Of Windows XP

It's to easy to get rid of extra copies of xp on your pc and all credits of this article goes to EHow.Com. Here we go:

Instructions:


1. Determine if your second copy of Windows XP is just left over from an over-written installation, or if it is in fact a complete second copy of Windows. You can determine this by checking to see if there are two Windows folders on two different drives on your computer. If your computer only has a single Windows folder, then skip ahead to Step 5.

2. Restart your computer and, when prompted, boot the XP installation that you wish to keep on your computer.


3. Locate the Windows folder for the second Windows XP installation. This will be the one located on the drive that does not contain your current Windows XP's "My Documents" folder. If your My Documents folder is located on the C:\ drive, for instance, the Windows folder for the second installation will be on a different drive.

4. Delete the Windows folder for the second Windows XP installation. This will completely remove all files related to the second Windows XP installation from your computer.

5. Right-click your "My Computer" icon and select the "Properties" option. This will bring up a new dialog box. Select the "Advanced" tab, then locate the "Startup and Recovery" section of the new tab.

6. Click the "Settings" button under the "Startup and Recovery" section. This will bring up yet another new dialog box.

7. Click the "Edit" button. This will open a new instance of the Notepad program, and will show several lines of code. Locate the line that reads "[operating systems]". Just beneath this line will be the lines that tell your computer to offer the choice to boot to one of the Windows XP operating systems on your computer.

8. Locate the line that corresponds to the Windows XP installation you do not want to keep, then delete it. If you are having trouble figuring out what installation you want to delete, the operating systems appear in the boot order in the same order they appear on the Operating System Select screen. So if the operating system you wish to delete was second in line on the "choose your operating system" screen, it will be the second option in Notepad.

9. Save the "Boot.ini" once you have deleted the line, then restart your computer. You will no longer be given the option to boot to the removed Windows XP operating system upon restart.

You can read original article at this link.

Adding Online Visitors Widget To Blogger

Adding online visitors widget to your blog or website is a really cool way to show-off your site's visitors and it's also a great way to find more stats of your site. Now the question is which widget will be good for your site but don't worry cuz whos.amung.us is the most trusted and used online visitor counter in the world.

Installing this widget on your website is very easy. There is no registration and they are completely free! Simply copy the html code from their site and paste it into your blog.

You can get your widget code from this page. After copying your widget code follow this simple step:

• Go To Blogger > Layout > Add A Widget > HTML/JavaScript > Paste html code that you copied in above step and it's done.

I hope this will help you...Don't forget to leave a comment!!!

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>
<!-- sample usage, remove this comment
<a href='mailto:your@mail.com' class='gmail-logo'>
<span class='gmail-box'> </span>
</a>
 -->
<!--
Cheers and Regards
Hongkiat Lim < http://www.hongkiat.com
Indam < http://www.indaam.com
-->
</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":

<!--
body{
/* min-height:1600px;
padding:200px 0;
*/}
/*
Css Logo created by Indam < http://www.indaam.com
Publish for http://hongkiat.com */
.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{
/* content:''; Bug in Opera */
/* add this, for : can using many tag */
margin:0;
padding:0;
background:transparent;
border:0;
outline:0;
display:block;
font:normal normal 0/0 serif;
}
.gmail-logo{
margin:110px auto;
background:rgb(201, 44, 25);
width:600px;
height:400px;
border-top:4px solid rgb(201, 44, 25);
border-bottom:4px solid rgb(201, 44, 25);
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.gmail-logo .gmail-box{
overflow:hidden;
float:left;
width:440px;
height:400px;
margin:0 0 0 80px;
background:white;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.gmail-logo .gmail-box:before{
position:relative;
content:'';
z-index:1;
background:white;
float:left;
width:320px;
height:320px;
border:100px solid rgb(201, 44, 25);
margin:-310px 0 0 -40px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
.gmail-logo .gmail-box:after{
content:'';
float:left;
width:360px;
height:360px;
border:2px solid rgb(201, 44, 25);
margin:10px 0 0 40px;
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
.gmail-logo:after{
content:'';
position:relative;
z-index:2;
content:'';
float:left;
margin-top:-404px;
width:600px;
height:408px;
display:block;
background:
-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
/* rgba(255, 255, 255, 0.3) 30%, */
rgba(255, 255, 255, 0.1) 100%);
background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
/* rgba(255, 255, 255, 0.2) 30%, */
rgba(255, 255, 255, 0.1) 100%);
background:-webkit-gradient(
linear, left top, left bottom, color-stop(0%,
rgba(255, 255, 255, 0.3)),
/* color-stop(30%, rgba(255, 255, 255, 0.2)), */
color-stop(100%, rgba(255, 255, 255, 0.1)));
}
.gmail-logo:hover{
background:#313131;
border-color:#313131;
}
.gmail-logo:hover .gmail-box:before{
border-color:#313131;
/* margin-top:-305px; */
}
.gmail-logo:hover .gmail-box:after{
/* margin-top:-5px; */
border-color:#313131;
border-bottom-color:#fff;
border-right-color:#fff;
}
-->

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

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!!!

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>

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.....

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==&quot;Enter your email address&quot;) ? &quot;&quot; : this.value;" onblur="this.value=(this.value==&quot;&quot;) ? &quot;Enter email address&quot; : 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><!-- #bitsubscribe -->
</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.