Advance CSS Tabs

It's cool and also you can do lots of crappy this with it :

CSS :

<style >
#site { background: #FFF; }
#tabs {
border: 1px solid #DEDEDE;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
min-height: 200px;
position: relative;
overflow: hidden;
margin: 25px;
}
.tabs-content {
padding: 25px;
height: 120px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.tabs {
overflow: hidden;
background: #e1e1e1;
background: -moz-linear-gradient(center top , #f2f2f2, #e1e1e1);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e1e1e1));
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: 0 1px 0 #FFF inset;
-moz-box-shadow: 0 1px 0 #FFF inset;
box-shadow: 0 1px 0 #FFF inset;
}
.tabs a {
display: block;
float: left;
font: 15px/35px Arial, Helvetica, Sans-serif;
padding: 0 20px 0 40px;
color: #999;
text-shadow: 0 1px 0 #FFF;
border-left: solid 1px rgba(0,0,0,0.05);
border-right: solid 1px rgba(255,255,255,0.7);
position: relative;
overflow: hidden;
}
.tabs a:first-child {
border-left-width: 0;
}
.tabs a:last-child {
border-right-width: 0;
}
.tabs a:after {
content: '✔';
position: absolute;
top: 0;
left: 10px;
line-height: 21px;
font-size: 10px;
width: 21px;
text-align: center;
margin: 7px 10px 5px 0;
background: #000;
font-size: 12px;
-moz-border-radius: 21px;
-webkit-border-radius: 21px;
border-radius: 21px;
background: #bdbdbd;
background: -moz-linear-gradient(center top , #d4d4d4, #bdbdbd);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#bdbdbd));
-webkit-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
-moz-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
text-shadow: 0 1px 0 #999;
color: #ffffff;
}
#tab1:after { content: '1'; }
#tab2:after { content: '2'; }
#tab3:after { content: '3'; }
#tab3 { border-right-width: 0; }
.tabs a:target {
background: #FFF;
border-left-color: #CCC;
}
.tabs a:target:after {
background: #038bd5;
background: -moz-linear-gradient(center top , #2dc3fc, #038bd5);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2dc3fc), color-stop(100%,#038bd5));
text-shadow: 0 1px 0 #096c9e;
-webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85);
-moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85);
box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85)
}
.tabs a:target + section.tabs-content {
display: block;
}
</style>

HTML :

<div id="tabs">
<nav class="tabs">
<a id="tab1" href="#tab1">Widget Craft</a>
<section class="tabs-content">
You can learn creating this CSS tabs at Widcraft.blogspot.com.
</section>
<a id="tab2" href="#tab2">Author</a>
<section class="tabs-content">
This blog is created by Hardeep Asrani from India he is a commerce student but doing this is his passion.....i mean my passion :p .
</section>
<a id="tab3" href="#tab3">WWE</a>
<section class="tabs-content">
I'am a huge WWE Fan and owner of India's number one WWE News Website.
</section>
</div>

That's It

Animated Label Cloud Widget For Blogger

This is the most amazing way to show your blog's labels. This widget is originally for wordpress but now you can add this on your blogger. Generate this widget with the help of our Widget Generator :

Creating jQuery Show/Hide Panel

So today i'am going to teach you how to create jQuery Show/Hide Panel.....so let me start :

Java Script :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

CSS :

<style>
div.panel,p.flip
{
margin:0px;
padding:5px;
width:600px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
width:600px;
height:100px;
display:none;
}
</style>

HTML :

<div class="panel">
<p>Show/Hide Panel Is Cool :p</p>
<p>Learn creating a jQuery show/hide panel at http://widcraft.blogspot.com .</p>
</div>
<p class="flip">Show/Hide Panel</p>

Ok so now let me explain you CSS with this pic :

Ok so finally here is the Full Script :

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
width:600px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
width:600px;
height:100px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>Show/Hide Panel Is Cool :p</p>
<p>Learn creating a jQuery show/hide panel at http://widcraft.blogspot.com .</p>
</div>
<p class="flip">Show/Hide Panel</p>
</body>
</html>

How To Get Free Google Adwords Coupon

The best way to try adwords advertising program is to use a voucher, but remember adwords coupons can be used only once. I will give you a list of website where you can request a free adwords coupon from google. Once you did, wait from 3 to 7 days, and check your email for voucher.

Do not request a coupon second time, because google will not send you another voucher, don’t try to fill in another domain, or your name, google tracks you other ways.

Please read Terms and Conditions apply for online advertising promotional credits

The list of website where you can request a free promotional coupon (choose only one link to request the coupon, do not repeat requests on other links, and do it once):

$75 Adwords coupon – https://services.google.com/fb/forms/adwordscoupon/

AU$75 Adwords coupon – https://www.google.com/appserve/fb/forms/auonline/

$100 Adwords coupon – http://www.google.com/ads/offers/hiregoogleadwords.html

$100 Adwords coupon – http://www.google.com/ads/offers/adwordsoffer.html

£30 Adwords coupon – http://www.google.co.uk/intl/en/ads/offers/specialoffer.html

£75 Adwords coupon – http://www.google.co.uk/intl/en/ads/offers/get75.html

Different Background In Each Post Of Blogger

So in this tutorial i'am gonna show you how to use different background in each post of your blogger......ok so here we go.....

• Go To Your Blog > Settings > Posts And Comments 

• Paste this code at the top of the box :

<div style="background:url(Image_URL) no-repeat;">

• And paste this code at the bottom of the box :

</div>

• Click on Save Settings and then Create a new post

• The Post Editor will open with the code already in it.

• Replace Image_URL with your background image url

• Type in your post before the </div> tag at the bottom, give it a Title and Publish.

Disable Right Mouse Click On Blogger

If you wanna disable right mouse click on your blogger blog then just add the below widget on your blog :

Comment/Request/Question

Display/Hide Widget On Specific Pages In Blogger

When you add a widget (or a gadget as Blogger would call it) to your blog, by default the widget would appear on all pages –homepage, index, archive, post and static pages. But what if you want a certain widget to appear only on a certain page or pages, can it be done? In other words can you select on which page/pages the widget would or would not appear?  The answer is yes you can -by using Blogger conditional tags.

Note: This trick doesn't work with Labels, Archive and Followers gadgets.
Let us proceed,

• Locate the widget code in HTML

1. Go to Dashboard > Design > Edit HTML.
2. Check the  Expand Widget Templates check box on top right of the HTML window.
3. Find your widget in the HTML by using Ctrl+F and entering the widget Id in the search box.
   

Your widget code might look like this. It may be a little different, but it’s okay. Just pay attention to  the highlighted lines. Widget content is contained in between those two lines -in "includable" section.

<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

• Choose the appropriate conditional tag

I listed some conditional tags in another post -Targeting specific pages with conditional tag. Copy your desired tag from there and apply it here.

• Apply the tag

Paste the tag (from step 3) immediately after <b:includable id='main'> and the code line 11 to 15 immediately before </b:includable>, as shown below.

<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'>
PUT CONDITIONAL TAG HERE
<b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>
</b:includable>
</b:widget>  

Replace WidgetID in line 13 with the widget ID from code line 1.
The code will check whether the condition is true or false:

• If the result is true, it executes (and display) the widget’s content.

• If the result is false, it skips the content and hide the widget. 

• You need to hide the widget because in most templates the content-less widget will still appear -as an empty box.

• Save And Done

Click Save Template button and view your blog.

That’s all to it. Enjoy!

List Of Conditional Tags

List of conditional tags :
Below is a list of conditional tags that target specific pages. I only list the opening tags here. Just make sure you include the closing </b:if> tag when applying a conditional in your template.

1.Index (list) pages 

Index pages include homepage, labels page and yearly archive page.

<b:if cond='data:blog.pageType == "index"'>

2.Post (item) pages 

<b:if cond='data:blog.pageType == "item"'>

3.Static pages 

<b:if cond='data:blog.pageType == "static_page"'>

4. Archive pages 

<b:if cond='data:blog.pageType == "archive"'>

5. Homepage 

<b:if cond='data:blog.url == data:blog.homepageUrl'>

6.Specific page/URL 

<b:if cond='data:blog.url == "PUT_URL_HERE"'>

7. Post and static pages

<b:if cond='data:blog.url == data:post.url'>

8. Label-search pages 

<b:if cond='data:blog.searchLabel'>

9. First post 

This is not a page, but a conditional for the first post. Used for targeting the first post on multi-post pages.

<b:if cond='data:post.isFirstPost'>

Random Banner Widget For Blogger

Random banner widget is the best way to promote your blog content or to promote your
advertisements on your blog.....every time your visitor will see a random banner of your post/advert on your blog..... and its simple to add just follow these steps

• Go To Blogger > Layout > Add A Gadget > HTML/Javascript

• Paste the following script

<script language="JavaScript">
images = new Array(3);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='60px' width='468px' ></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='60px' width='468px' ></a>";
images[2] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-3' border='0' height='60px' width='468px' ></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

• Now Change URL OF ADVERTISER with your links and  URL OF BANNER’S IMAGE-1/2/3 with your images..

• You can also change height and width of pics by chaning  height='60px' width='468px' .

• You can also add more banners by changing the script.

Confused or need help then please comment....i won't bite... :p

Creating A HTML Email Form

So today i'am gonna teach you a simple HTML tutorial on Creating HTML E-mail Form for your blog, website or any html page ....First of all sorry i wrote wrong form/forum spelling on pic above ......so here we go :

• On Blogger : Go To Post/Page > HTML and paste the html given below.

• On HTML : Paste html given below on your html document.

<h3>Send E-mail To Your Name:</h3>
<form action="MAILTO:USERNAME@gmail.com" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" value="Your Name" /><br />
E-mail:<br />
<input type="text" name="mail" value="Your Email" /><br />
Message:<br />
<input type="text" name="comment" value="Your Message" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

• Change  USERNAME@gmail.com  with your email and you're done.....