2012 | BWidgets

Home Archives for 2012

Tuesday, 25 December 2012

GoDaddy Promo Codes : 76% Off On .COM

GoDaddy is back with a superb discount on .COM domains. Get 76% Off on .COM Domains which means you get a .COM for just $2.95 (Rs 162.99). So don't waste your time and score a .COM. You can get a .COM For Rs 162.99 by clicking here. Merry Christmas!!!

Why Choose GoDaddy? :

Go Daddy offers everything you need to make a name for yourself on the Web, from domain names and website builders to complete eCommerce solutions. GoDaddy earned their place as the world's #1 ICANN-accredited domain registrar by delivering world-class products at competitive prices and supporting them with industry-best service, delivered 24/7/365. GoDaddy is proud to serve our customers from locations around the world, including Arizona, Iowa, California, Colorado, Washington, D.C., India, Singapore, and The Netherlands.

So go and get a .COM for $2.95 only by clicking here.

Monday, 24 December 2012

3 In 1 Like Box Widget For Blogger - Version 5.0

Previous Versions : Version 1.0 | Version 2.0 | Version 3.0 | Version 4.0

So here is last pop-up social subscribing widget of the year. It's awesome and better than all previous widgets and you can also set appear time and other features of this widget. Happy Holidays.

You can generate this widget using our widget generator :

BigRock Promo Codes : .ASIA Domain @ Rs 99

BigRock is back with another superb discount on .ASIA domains. Get a Free Website with every .ASIA domain. Includes Web and Email Hosting for 6 months @ Rs. 99 only!!! So don't waste your time and score a .ASIA. You can get a .ASIA For Rs 99 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 .ASIA for Rs 99 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.

Saturday, 22 December 2012

Top 10 Google Search Trends Of 2012

It's December and 2012 has come to an end. So i wanted to post top 10 Google Search Trends/Terms. You can get all latest Google Trends of 2012 on Zeitgeist 2012.

Here are top ten terms of 2012 in all categories:

Searches

Images

Athletes

Events

People

Feature Films

TV Shows

Performing Artists

Consumer Electronics

Airlines

Google+ Hashtags

#SOPA
#Awesome
#Sandy
#IO12
#Curiosity
#Olympics
#SXSW
#Debate
#BlastFromThePast
#Eastwooding

Videos

Facebook Introduces Two New Features

Facebook has announced two new features and in my opinion these are one of the best features of the year. It's Christmas time and i guess this is a Christmas gift for us. Now let's talk above these two new features.

Multiple Photos On Status

Now you can upload more than one pic on your Facebook status. If you want to post your tour, favorite celebs and more than now you can upload them on one single status instead of creating an album.

As you can see in above picture that i have uploaded two pictures in one status (And also that I'am a WWE Fan) and you can upload more photos in it. Just click on that + sign and upload more. After posting your status your pictures will look something like:

Now as you can see in above picture my profile pic is a Black Dot and let me tell you why. In Delhi last Sunday a girl was rapped and all Indians are demanding justice and security for her and for other girls by changing their profile pic to a Black Dot.

Privacy Shortcuts

Also Facebook has a new privacy shortcut option in it's menu. Where you can control "Who can see my stuff?" , "Who can contact me?" and "How do i stop someone from bothering me?" . You can control all your privacy under this option.

That's it for now and hopefully i except that Facebook will launch more new features in 2013 and also i wish you a very Happy Holidays!!

Friday, 21 December 2012

Facebook Events Widget For Blogger

Facebook event is a really good way to remind your fans and friends of some important events of your life and Facebook has bunch of useful plugins/widgets for websites and blog but still there is no events widget yet. Thanks to BandRx now you can also embed your upcoming events on your blog or website. It's simple you can generate your widget code at BandRx or you can also use by our tutorial.

<iframe src="http://www.bandrx.com/facebook/events.php?theme=zuck&page=PAGEUSERNAME&bgcolor=ffffff&textcolor=000000&linkcolor=555555&max=5" width="320" height="520" frameborder="no" scrolling="auto"></iframe>

Just replace red text in above code with your Facebook page username and it's done...now i hope you guys know how to add this widget to your blogger. You can also use this plugin on wordpress and all html sites.

Thursday, 20 December 2012

Styling Blogger Static Pages

In some points Static pages should look different than all other posts of our blog. We all use static pages for our forms, forums and all other stuff. They all need a big space and in this tutorial i'll tell you how to apply custom style on your blogger static pages. First make sure you have some basic css and html knowledge:

Go To Blogger > Template > Edit HTML

Search for <body>

Copy the code below and paste it right after <body>:

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar, #rsidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
</style>
</b:if>

Now between <style> ... < /style> add id or class of thing that you want to hide on your static pages.

You can also add background color, and so many things to style your static pages....If you're having any problems then please leave a comment.

Wednesday, 19 December 2012

How To Customize Google Drive Form

First of all this article is from Immersion Media. It's a very useful article and don't forget to visit their site. Before trying this you need some basic html and css knowledge so first get some lessons then come here.

If you're wondering how to create forms using Google Drive/Docs then you can learn it by clicking here.

Now let's get to our topic. It's very useful and i hope you'll use it in good way.

After creating your form visit your form and Right click on page and select view source from menu. Copy form code by selecting everything between the <form>…</form>tags. See example below. You can also include the JavaScript at the end. This will be the form field validation.

Paste code in a new page/document.

This step is optional, but since you’ve taken the time to stylizing your form, you might as well create a nice confirmation page. After creating a confirmation page, replace the <form> tag of your form page and replace it with the JavaScript listed below.

Find and Replace this:

<form action="YOUR-GOOGLE-SPREADSHEET-LINK" method="POST">

With this:

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://CONFIRMATION-PAGE.html';}"></iframe>
<form action="YOUR-GOOGLE-SPREADSHEET-LINK" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

Even though the form is no longer hosted on Google, form submissions will continue to be posted to your Google Drive/Docs account. Hope this will help you.....

Tuesday, 18 December 2012

20 CSS3 Examples And Tutorials

So i recently created a new blog with lots of CSS3 demos and projects and to promote that i'am posting this post with twenty awesome CSS3 posts from my blog.

1. CSS ToDo List

2. Pure CSS Product Colorizer

3. CSS3 Facebook Buttons

4. Pure CSS Lightbox

5. Stylish CSS3 Progress Bars

6. CSS3 Minimalistic Navigation Menu

7. Apple Style Breadcrumb

8. Windows 8 Metro Tiles With CSS3

9. 10 Crazy Effects With CSS3 Border Transitions

10. CSS3 Animated Bubble Buttons

11. Facebook Timeline With CSS

12. Easy CSS3 Checkboxes And Radio Buttons

13. Pure CSS Folded Corners

14. CSS3 Webkit Scrollbars

15. Pure CSS List Boxes

16. Sexy Bookmarks Effect Using CSS

17. CSS3 Image Gallery

18. Notebook Paper Style CSS Form

19. CSS Bubble Tooltips

20. Disable Text Selecting Using CSS

Showing Only Post Titles On Blogger

If you own a news website or a website where you post so many times in a day with lots of text and sometimes short posts then you probably need to show only post tiles on your homepage instead of whole content or some thumbnails.

This trick is very useful because sometimes you may post very little posts like "Someone Returns Tonight" and instead of checking the post your viewers can know who returned in the short version in homepage like "Vampire returned at last night's Halloween party....Read More."

You don't wanna spoil that i mean you ruined Vampire's return because of your creepy blog. So now it's time to go practical...

Go To Blogger > Template > Mark 'Expand Widgets Templates'

Now find:

<b:include data='post' name='post'/>

Now replace above code with following:

<b:if cond='data:blog.pageType == "index"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

OK so after this your blog's post widget will look something like this:

Well you saved Vampire's return but your blog's post widget will look a bit ugly after this so now it's time to add some css.

Go To Blogger > Template

Search for ]]></b:skin> and just above it post following css:

/* -- Homepage Title Styling -- */
.title-only{
background: whiteSmoke;
padding: 10px;
color: black;
margin: 0;
border-bottom: dotted 2px;
}
.title-only:hover {
background: white;
}

Save your template and after doing all this your blog's post widget will look something like this:

That's It...For any help or if you want to nominate me for president then leave your responses in the comment section below..... :)

Monday, 10 December 2012

5 Amazing Search Boxes For Blogger

First of all if you want to download these search boxes for your website or if you want to see the demo then please visit this page.

Here are some fresh new search boxes for blogger and it's also easy to add these boxes.

Go To Blogger > Template > Edit HTML

Search for ]]></b:skin> and just above it paste following css:

/*-----Search One Starts-----*/
input{
font-family: cursive;
}

form.search1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivF8CSxrNrPmcKiMtVNjm8qsUWpxs4ucmqwCw9jcvsdaBu6cvbfUnxZiC2_1zVhOUlHBlRV2QVoVrsrxvbyk1W_qRpYJDetC1MW68JNlWaOqM8WysSCPiRVYjr9lVfYnJpKLRCiPBKi94/s1600/1.png);
width: 320px;
height: 38px;
}
.text1 {
background: transparent;
width: 275px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit1 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 41px;
top: -12;
cursor: pointer;
}
/*-----Search One Ends-----*/
/*-----Search Two Starts-----*/
form.search2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Lw5Foy_jFFJvgNgB6XmHHNSt9LKNe6otKTREqmVK88rlg_OVU24yL384kANiM5l7xlyJV_UMTvS-38GTt9MclL0cVYGkP-zfs9JI2gnxBp162lXyx1m8L5MF8PmwAkVyk_q6JSQ6aU0/s1600/2.png);
width: 320px;
height: 38px;
}
.text2 {
background: transparent;
width: 270px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit2 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 45px;
top: -12;
cursor: pointer;
}
/*-----Search Two Ends-----*/
/*-----Search Three Starts-----*/
form.search3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkPhpEOEI4UG63nZOsW3ZOsvCMuL0wryAyuGHluhwc1LaKbYAEhk3BOl-DSD5UmccqgkXx0f2hVLpo2W1_F1flBRJWTBagMsshPmOkEDnHm7PZuOKK-pIel2tilYTyzFmwWDaClfA0pA/s1600/3.png);
width: 320px;
height: 38px;
}
.text3 {
background: transparent;
width: 260px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit3 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 50px;
top: -12;
cursor: pointer;
left: 5px;
}
/*-----Search Three Ends-----*/

/*-----Search Four Starts-----*/
form.search4 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMFD1UNnuMZNmPLrym_DHzXbazVDBW6gFsLhkLTpJCohr9ADB27YjCsb5kwxS5OSIRoJO0aFPJ0PXze5v32G6ZmmjYlIpYy7UrKHfiFRM9NEz-iNHRmeFXdGrWBYW_8Jb8nvJvc1jzhWQ/s1600/4.png);
width: 334px;
height: 49px;
}
.text4 {
background: transparent;
width: 290px;
height: 38px;
border: 0px;
outline: 0px;
padding: 10px 0 0 10px;
font-size: 20px;
}
.submit4 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 40px;
top: -12;
cursor: pointer;
}
/*-----Search Four Ends-----*/

/*-----Search Five Starts-----*/
form.search5 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS7nuPxbEtbeXaBckBD8xFS-3p7mfpjAyrqcvbZRBtFqmLJfBUasLOLqq7a1nhz-yn6peeyugiXty9yWN9ajGSdS9w7NtUW_ahZr5Mv_RlfwcYAvVcWWoEJiTWvCTpvmbPW9-BDqoc_zA/s1600/5.png);
width: 320px;
height: 32px;
}
.text5 {
background: transparent;
width: 290px;
height: 32px;
border: 0px;
outline: 0px;
padding: 10px;
font-size: 15px;
border-radius: 18px 0 0 20px;
-webkit-border-radius: 18px 0 0 20px;
-moz-border-radius: 18px 0 0 20px;
-o-border-radius: 18px 0 0 20px;
}
.submit5 {
background: transparent;
border: 0px;
height: 23px;
position: relative;
width: 25px;
top: -5px;
left: -3px;
cursor: pointer;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
}

Go To Blogger > Layout > Add A Widget > HTML/JavaScript > And paste following code:

<form class="search1" action="/search" style="method="get">
<input class="text1" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit1" type="submit" value="" />
</form>

Now replace search1, text1 and submit1 one with your preferred search box. For example if you want 3rd search box then make this code like this:

<form class="search2" action="/search" style="method="get">
<input class="text2" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit2" type="submit" value="" />
</form>

You can view all five designs and demo of this searchbox at this link.

Monday, 3 December 2012

Pledge To Support A Free And Open Internet

So today here at BWidgets.com this post is not about any Blogger widgets or tutorials but today we're requesting your support for a free and open internet.

Join Google and billions of peoples around the world and pledge your support for a free and open internet.

Here is a short quote from #freeandopen project:

The Internet has connected more than two billion people around the world. Some governments want to use a closed-door meeting in December to increase censorship and regulate the Internet. Join together to keep the Internet free and open.

You can add your voice and get more info about this at google.com/takeaction.

A free and open world depends on a free and open Internet. Governments alone, working behind closed doors, should not direct its future. The billions of people around the globe who use the Internet should have a voice.

Wednesday, 28 November 2012

How To Setup Custom Domain On Blogger

Congratulations, You're reading this article probably because you bought a new domain for your blog. Using a custom domain is the best investment you can do. So in this tutorial we'll explain how to setup your custom domain on blogger.

Go To Blogger > Settings > Publishing > Click on Add a custom domain

Click on Switch to advanced settings

Now click on settings instructions

Now choose your domain type. We will use top-level domain

Now after above step this below part will appear...now you have to copy highlighted part from it. Please note that these two codes are different for every blog. So grab your own code from that page.

Now go to your domain provider (for example BigRock). And locate your DNS (Domain Name System) settings. Now choose CNAME records.

Add two CNAME records. In Host, Label or Name enter www and in Destination, Target or Points enter ghs.google.com just like showns below:

In second CNAME enter first yellow code as Host Name and second long yellow code as Destination, Target or Points.

Now again Go To Blogger > Settings > Publishing > Click on Add a custom domain > Click on Switch to advanced settings > Enter your domain and click on save.

It's done....After this we will setup A-Records for Naked Domain Redirection (Using your domain without www. )

Monday, 26 November 2012

CSS3 Credit Card Form

Earlier today i found this amazing CSS3 Credit Card Form. This form has been developed purely in CSS3 and does not include any images. In this article i'am sharing one Visa style form with you but there are more credit card forms and they all can be found here.

Let's get started with HTML:

<section class="credit-card visa gr-visa">
<div class="logo">Visa</div>
<form>
<h2>Payment Details</h2>
<ul class="inputs">
<li>
<label>Card Number</label>
<input type="text" name="card_number" pattern="[0-9]{13,16}" value="9842 9472 9457 9472" onclick="value=''" class="full gr-input" required />
</li>
<li class="expire last">
<label>Expiration</label>
<input type="text" name="expire_month" value="December (12)" onclick="value=''" size="10" class="month gr-input" required />
<input type="text" name="expire_year" value="2014" onclick="value=''" size="10" class="year gr-input" required />
<div class="clearfix"></div>
</li>
<li class="cvc-code last">
<label>CVC Code</label>
<input type="text" name="cvc_code" value="174" onclick="value=''" size="10" class="gr-input" required />
</li>
<div class="clearfix"></div>
</ul>
</form>
<div class="watermark">Visa</div>
</section>

After adding our html we'll add CSS coding:

/* === Basic reset === */
* { margin: 0; padding: 0; outline: none; box-sizing:border-box; }
a>img { border: none; }
header, footer, article, section, nav, aside { display: block; }
/* === General === */
body {
font-family:Arial;
font-size: 14px;
background:#ddd;
}
.clearfix {
clear:both;
}
/* === Credit Card === */
.credit-card {
display:block;
position:relative;
width:93.75%; /* This is 300px on 320px wide screen */
max-width:500px; /* Just to make sure that it doesnt get crazy on bg screens */
min-width:300px; /* And make sure that it contains at least some size */
margin:30px auto;
padding:20px;
overflow:hidden;
border-radius:6px;
z-index:1;
}
.credit-card .inputs {
list-style:none;
margin-top:30px;
}
.credit-card .inputs li {
margin-bottom:30px;
}
.credit-card .inputs li.last {
margin-bottom:10px;
}
.credit-card .inputs li.expire {
float:left;
width:70%;
margin-right:5%;
}
.credit-card .inputs li.expire input{
float:left;
width:35%;
}
.credit-card .inputs li.expire input.month{
width:60%;
margin-right:5%;
}
.credit-card .inputs li.cvc-code {
float:left;
width:25%;
}
.credit-card .inputs li.cvc-code input {
width:100%;
}
.credit-card .watermark {
position:absolute;
z-index:10;
}
.credit-card form {
position:relative;
z-index:50;
}
.credit-card .logo {
position:absolute;
top:15px;
right:20px;
text-transform:uppercase;
font-weight:bold;
}
/* === Visa === */
.visa {
color:#fff;
box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.2);
}
.visa h2 {
text-shadow:1px 1px 2px rgba(17,121,173,0.8);
}
.visa .logo {
color:rgba(255,255,255,0.9);
font-size:2em;
font-style:italic;
text-shadow:0px 0px 3px rgba(17,123,173,0.9);
}
.visa .logo:after {
content:' ';
position:absolute;
left:0px;
top:5px;
width: 0;
height: 0;
border-top: 10px solid orange;
border-left: 10px solid transparent;
}
.visa .watermark {
bottom:-100px;
left:-50px;
color:rgba(255,255,255,0.06);
font-size:20em;
font-weight:bold;
font-style:italic;
}
/* === Forms === */
label {
display:block;
margin-bottom:8px;
color:rgba(255,255,255,0.6);
text-transform:uppercase;
font-size:1.1em;
font-weight:bold;
text-shadow:0px 1px 2px rgba(17,123,173,0.6);
}
input {
display:block;
padding:12px 10px;
color:#999;
font-size:1.2em;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
border:1px solid rgba(16,103,133,0.6);
box-shadow:0px 0px 3px rgba(255,255,255,0.5), inset 0px 1px 4px rgba(0,0,0,0.2);
border-radius:3px;
}
input.full {
width:100%;
}

/* === Gradients === */
.gr-visa {
background: #1db1cf; /* Old browsers */
background: -moz-linear-gradient(top, #1db1cf 0%, #1078ab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1db1cf), color-stop(100%,#1078ab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1db1cf 0%,#1078ab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1db1cf 0%,#1078ab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1db1cf 0%,#1078ab 100%); /* IE10+ */
background: linear-gradient(to bottom, #1db1cf 0%,#1078ab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1db1cf', endColorstr='#1078ab',GradientType=0 ); /* IE6-9 */
}
.gr-input {
background: #d3d3d3; /* Old browsers */
background: -moz-linear-gradient(top, #d3d3d3 0%, #d9d9d9 38%, #e5e5e5 82%, #e7e7e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(38%,#d9d9d9), color-stop(82%,#e5e5e5), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* IE10+ */
background: linear-gradient(to bottom, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
}

That's It....Don't forget to leave a comment!!!

Saturday, 24 November 2012

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

Wednesday, 21 November 2012

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

Tuesday, 20 November 2012

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.

Friday, 16 November 2012

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

Tuesday, 25 December 2012

Monday, 24 December 2012

Saturday, 22 December 2012

Friday, 21 December 2012

Thursday, 20 December 2012

Wednesday, 19 December 2012

Tuesday, 18 December 2012

Monday, 10 December 2012

Monday, 3 December 2012

Wednesday, 28 November 2012

Monday, 26 November 2012

Saturday, 24 November 2012

Wednesday, 21 November 2012

Tuesday, 20 November 2012

Friday, 16 November 2012

Popular Posts

Admin Control Panel

Contact Us

Like Us!

Recent Posts

Disqus

Labels

About Me

Blog Archive

Subscribe