Monday, 25 June 2012

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

Saturday, 23 June 2012

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

Thursday, 21 June 2012

CSS3 Round Corner Generator

Wednesday, 20 June 2012

Password Protect Posts In Blogger


This tutorial is gonna be about how to password protect your blogger posts and this trick is not so hard and i think this is the best trick i know yet so check the tutorial out below

Here we go :

  • Go To Blogger > Design > Edit HTML
  • Backup your template
  • Search for ]]></b:skin>
  • And just below it paste the following JavaScript code,
<!--WidCraft Password Code--> <script type="text/javascript" src="http://widcraft.googlecode.com/svn/jsencryption.js"></script>
Now whenever you wish to show images, text, media or anything only to selected people then you may create and write the post as you normally do in your blogger editor :

  • Switch to the Edit HTML mode and copy all the code that you see. As shown below,

You will see 4 boxes with names: Key, Plain Text, Clipher Text and HTML Code.  We are only interested in the key, plain text and HTML CODE box. Follow these steps:
  • Enter a password in the Key Box

  • Next Paste the code that you copies from your Blogger Editor into the Plain Text box
  • Hit the Encrypt Button below Plain Text box  
  • Copy the code from the HTML CODE box

  • Now get back to your Blogger Editor. Create a New Post. Give your post a title and paste the HTML Code that you just copied inside your blogger Editor in the  Edit HTML Mode.  You can write anything in place of this text -> Show Encrypted text but make all changes in Edit HTML mode only.

That's It.....just publish your post and have fun.....you can also have some fun with this trick :p

Leave your Questions/Review/Requests/Phone Numbers(Only Girl) in the comment section below! 

JavaScript Encryption and Decryption


    Key

   

  Plain Text

   

   Cipher Text

   

      HTML Code

Standard       Inline       ***

     HTML Test


Monday, 18 June 2012

How To Create Table Of Content On Blogger


  • Go To Blogger > Pages > Create A New Page > HTML and post the script given below 

<script src="http://widcraft.googlecode.com/svn/TOC.js">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=1000&callback=loadtoc" type="text/javascript">
</script>

Now just sit and eat your dinner!!

Saturday, 16 June 2012

7 Cool CSS3 Text Effects


Ok so in this article i'll teach you 7 cool CSS Text Effects.....you can use'em all on your blogger/wordpress and all blogs.....so first of all the method of adding CSS/HTML on blog is same for all effects so first start with it.

How To Add :
CSS : Go To Blogger > Template > Edit HTML > Paste CSS Script Just Above ]]></b:skin>

HTML : You can add HTML on Posts/Pages/Template/ HTML/Javascript Widget.

Effect 1  Fade Block :


Demo : Place mouse on me i will fade!

HTML :


<div id="fade">Place mouse on  me i will fade!</div>

CSS :

#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
#fade{opacity: 1;-moz-transition: opacity 1s linear;}
#fade{opacity: 1;-o-transition: opacity 1s linear;}
#fade:hover{opacity: 0;}

Effect 2  Pulsate Block :


Demo : Place mouse on me i will pulsate!


HTML :


<div id="pulsate">Place mouse on  me i will pulsate!</div>

CSS :

#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}
 @-webkit-keyframes pulsate {
 0% { width:140px; }
 5% { width:190px; left:-25px; }
 10% { width:140px; left:0px; }
 15% { width:190px; left:-25px; }
 20% { width:140px; left:0px; }
 40% { width:140px; }
 45% { width:190px; left:-25px; }
 50% { width:140px; left:0px;}
 55% { width:190px; left:-25px;}
 60% { width:140px; left:0px;}
 80% { width:140px; }
 100% { width:140px;  }
 }

#pulsate:hover {-moz-animation-name: pulsate;-moz-animation-duration: 20s;-moz-animation-timing-function: ease-in-out;}
@-moz-keyframes pulsate {
 0% { width:140px; }
 5% { width:190px; left:-25px; }
 10% { width:140px; left:0px; }
 15% { width:190px; left:-25px; }
 20% { width:140px; left:0px; }
 40% { width:140px; }
 45% { width:190px; left:-25px; }
 50% { width:140px; left:0px;}
 55% { width:190px; left:-25px;}
 60% { width:140px; left:0px;}
 80% { width:140px; }
 100% { width:140px;  }
 }

#pulsate:hover {-o-animation-name: pulsate;-o-animation-duration: 20s;-o-animation-timing-function: ease-in-out;}
@-o-keyframes pulsate {
 0% { width:140px; }
 5% { width:190px; left:-25px; }
 10% { width:140px; left:0px; }
 15% { width:190px; left:-25px; }
 20% { width:140px; left:0px; }
 40% { width:140px; }
 45% { width:190px; left:-25px; }
 50% { width:140px; left:0px;}
 55% { width:190px; left:-25px;}
 60% { width:140px; left:0px;}
 80% { width:140px; }
 100% { width:140px;  }
 }


Effect 3 Nudge :


Demo : Place mouse on me my text will shift!


HTML :
<div id="nudge">Place mouse on  me my text will shift!</div>

CSS :

#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
#nudge{-moz-transition-property:color,background-color,padding-left;-moz-transition-duration:500ms,500ms,500ms}
#nudge{-o-transition-property:color,background-color,padding-left;-o-transition-duration:500ms,500ms,500ms}
#nudge:hover{background-color:#efefef;color:#333;padding-left:50px}


Effect 4 Expand Block :

Demo : Place mouse on me my border will expand


HTML :
<div id="expand">Place mouse on  me my border will expand</div>

CSS :

#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-moz-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-o-transition: all 500ms linear; border:10px solid black}
#expand:hover{border:30px solid #800}


Effect 5 Bounce Block :


Demo : Place mouse on me i will bounce!


HTML :
<div id="bounce">Place mouse on  me i will bounce!</div>

CSS :

#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}
 @-webkit-keyframes bounce{from{margin-left:0px;}
  to{margin-left:250px;}
  }

#bounce:hover {-moz-animation-name:bounce;-moz-animation-duration:1s;-moz-animation-iteration-count:2;-moz-animation-direction:alternate}
 @-moz-keyframes bounce{from{margin-left:0px;}
  to{margin-left:250px;}
  }

#bounce:hover {-o-animation-name:bounce;-o-animation-duration:1s;-o-animation-iteration-count:2;-o-animation-direction:alternate}
 @-o-keyframes bounce{from{margin-left:0px;}
  to{margin-left:250px;}
  }


Effect 6 Spin Block :


Demo : Place mouse on me i will spin


HTML :
<div id="spin">Place mouse on  me i will spin</div>

CSS :

#spin{-webkit-transition: -webkit-transform 3s ease-in;}
#spin:hover{-webkit-transform:rotate(360deg)}

#spin{-moz-transition: -moz-transform 3s ease-in;}
#spin:hover{-moz-transform:rotate(360deg)}

#spin{-o-transition: -o-transform 3s ease-in;}
#spin:hover{-o-transform:rotate(360deg)}


Effect 7 Accordion :


Demo : This Is First Tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Demo : This is second tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Demo : This is third tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


HTML :
<div id="accordion" class="accordion">
<a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
</div>

CSS :

.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none}
.accordion a:hover{background-color:#999}
.accordion div{background-color:#ccc;color:#222;}
.accordion div p{padding:20px}

#accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-moz-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-o-transition:height 600ms ease}
#accordion div:target{height:110px}


That's all for this time.....Comment for any help or report.....Thanks

Friday, 15 June 2012

Creating A Pop Up On Blogger


  • Paste the script given below on your blogger post to create a link to popup

<script type="text/javascript">
// Popup window code
function newPopu1p(url) {
 popupWindow = window.open(
  url,'popUpWindow','height=300,width=200,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a href="javascript:newPopu1p('URL');">Text To Display</a>

Replace URL with url of the page you want to pop-up and text to display with your text.....

Example : -
Click Here To Open A Pop-Up

CSS Sticky Footer For Blogger



This widget is so useful to write down site notes or welcome messages for visitors and also to easy to add.

  • Go To Blogger > Layout > Add A Gadget > HTML/JavaScript
  • Paste following code : 
<style type="text/css">
 #stickybar { border-bottom:1px solid #ECF1EF;
background:#151715;
font-size:19px;
color:#FFF;
padding:10px 10px;
position:fixed;
bottom:0; left:0;
z-index:2000;
width:100%;
text-align:center; opacity:0.6;
}
#stickybar:hover { opacity:1; }
#stickybar a { color:#FFF; text-decoration:none; }
</style>
<div id="stickybar">
<center><tbody><tr> <td><strong>Your Text Here | </strong> </td> <td><a href="#" rel="nofollow">Back To Top</a></td></tr></tbody></center>
</div>
  • Just replace Your Text Here with your text.

CSS3 Spin On Hover Image Effect On Blogger





Spin image on hover effect is cool and it's also easy to do..........so this time i'll show you how to give spin on hover CSS3 effect to your pics in blogger.....

  • Go To Blogger > Template > Edit HTML
  • Just Above ]]></b:skin> post the script given below

.rotate{
 -webkit-transition-duration: 1s;
 -moz-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
 }
.rotate:hover
{
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}
  • Now save your template.
  • Now on pics you want to spin add class="rotate" tag
Like this : -


<img class="rotate" src="Image URL" />
  • You can also add this only in one post by adding code given below on your post


<style>
.rotate{
 -webkit-transition-duration: 1s;
 -moz-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
}
.rotate:hover
{
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}
</style>


That's It.....Enjoy!!

CSS3 Spinning Image Effect On Blogger





Spinning image effect is cool and it's also easy to do..........so this time i'll show you how to give spinning CSS3 effect to your pics in blogger.....

  • Go To Blogger > Template > Edit HTML
  • Just Above ]]></b:skin> post the script given below

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}
  • Now save your template.
  • Now on pics you want to spin add id="spin" tag
Like this : -

<img id="spin" src="Image URL" />
  • You can also add this only in one post by adding code given below on your post

<style>
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}
}
</style>


That's It.....Enjoy!!

CSS Sticky Footer For Blogger



Stick Footer gives our blog a cool professional touch because it's cool stylish and also in trend and today i'am gonna tell you how to add this professional touch on your blogger blog.....
  • Go To Blogger > Template > Edit HTML
  • Find </b:skin>  and paste the code given below just above </b:skin>

#stickey_footer { /* This will make your footer stay where it is */
 background: none repeat scroll 0 0 #1D1D1D;
 border: 1px solid rgba(0, 0, 0, 0.3);
 bottom: 0;
 font-family: Arial, Helvetica, sans-serif;
 height: 40px;
 left: 50%;
 margin: 0 auto 0 -490px;
 padding: 0 10px;
 position: fixed;
 text-shadow: 1px 1px 1px #000000;
 width: 960px;
}
/* border curves */
#stickey_footer {
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#stickey_footer:hover {
 background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
 -moz-box-shadow:0px 0px 11px #191919;
 -webkit-box-shadow:0px 0px 11px #191919;
 box-shadow:0px 0px 11px #191919;
}
#footer_menu {
 margin: 0;
 padding: 0;
 width:auto;
}
#footer_menu li {
 list-style: none;
 float: left;
 font-size:12px;
 padding: 12px 14px 14px 14px;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
 padding:5px 8px 3px 14px;
 float:left;
 background:url("“http://1.bp.blogspot.com/-XLLTxGA_jqc/T9rcf8eKSiI/AAAAAAAAFZU/rMZVGE75Nug/s1600/home.png") 13px 5px no-repeat;
 width:36px;
 height:30px;
 border:none;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 cursor:pointer;
}
#footer_menu li:hover {
 background:#202020; /* Fallback color for old browsers */
 background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
 background:url("http://4.bp.blogspot.com/-E0_4VUI1muE/T9rchPsIuDI/AAAAAAAAFZc/sWD2KAI4d6U/s1600/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
 display: block;
 color: #cccccc;
 text-decoration: none;
}
#footer_menu li a:hover {
 color: #ffffff;
}
#footer_menu li span {
 display:none;
}
#stickey_footer #social_icons {
 float:right; /* social icons positions */
 width:auto;
 margin:5px 15px 0px;
 padding:0px;
 overflow:hidden;
}
#stickey_footer #social_icons li {
 margin-right:12px; /* 12px is the space between each one of them */
 float:left;
 width:24px;
 padding:0px;
 height:32px;
 list-style:none;
 _margin-right:0px; /* this is for IE6 only */
}
  • Save Your Template
  • Not Go To Layout > Add A Gadget > HTML/JavaScript
  • And paste the code given below:
<div id="stickey_footer">
 <!– Begin Footer Menu –>
<ul id="footer_menu">
 <li><a href="#"><span>Home</span></a></li>
 <li><a href="#">Label</a>
 <li><a href="#">Widgets</a>
 <li><a href="#">Friends</a>
 <li><a href="#">Blog</a>
 <li><a href="#">Contact</a>
 </ul>
 <ul id="social_icons">
 <!–Social Icons –>
 <li><a href="http://twitter.com/username" ><img src='http://1.bp.blogspot.com/-N86wA4c0ocE/T9rfG1Tav0I/AAAAAAAAFZ0/VPLB2zMpTgs/s1600/twitter.png' alt="" /><span>Twitter</span></a></li>
 <li><a href="http://digg.com/username" ><img src='http://3.bp.blogspot.com/-s8zEJZ_OcnQ/T9rfIcRCDcI/AAAAAAAAFZ8/I34iNs4r-HU/s1600/digg.png' alt="" /><span>Digg</span></a></li>
 <li><a href="http://flickr.com/username" ><img src='http://1.bp.blogspot.com/-SUIS3JleQ6c/T9rfDektT-I/AAAAAAAAFZs/YLqS72DjGAA/s1600/flickr.png' alt="" /><span>Flickr</span></a></li>
 <li><a href="http://fb.com/username" ><img src='http://4.bp.blogspot.com/-CykBbA-jWuE/T9rel2HNPTI/AAAAAAAAFZk/7Cd_h50FH70/s1600/facebook.png' alt="" /><span>Facebook</span></a></li>
 </ul>
</div>
  • Now replace username with your usernames.
That's It.....For any help/request or anything please comment and i'll contact you as soon as possible.....

Stop Blogger Redirecting To Country Specific Domains



As a blogger i really hate when blogger redirect me to my country specific domain .in . Because of this redirection i can't add a Facebook Login Button so today i'am show you how to stop this redirection on your blogger blog,
  • Go To Blogger > Template > Edit HTML
  • Find :
<b:include data='blog' name='all-head-content'/>

  • And Just Below It Paste :

<script type="text/javascript">
var str= window.location.href.toString();
if ((str.indexOf('.com/'))=='-1') {
var str1=str.substring(str.lastIndexOf(".blogspot."));
if (str1.indexOf('/')=='-1') {
var str2=str1;
}
else {
var str2=str1.substring(0,str1.indexOf('/')+1);
}
window.location.href =window.location.href.toString().replace(str2,'.blogspot.com/ncr/');
}
</script>
  • Save Template And You're Done ......Now Check It By Visiting.....

Thursday, 14 June 2012

Advance CSS Menu For Blogger


We all know that CSS menus are in trend over blogger so i got this menu.....i found this menu in a blog but it was not working so i downloaded pics and put'em here and now it's working and still it's looking damn awesome......


  • Go To Blogger > Template > Edit HTML
  • Find ]]></b:skin>  and just above it paste the below CSS code
#wmenu {
 list-style: none;
 padding: 0;
 margin: 0;
 width: 774px;
 height: 58px;
 position: relative;
}
#wmenu span {
 display: none;
 position: absolute;
}
#wmenu a {
 display: block;
 text-indent: -900%;
 position: absolute;
 outline: none;
}
#wmenu a:hover {
 background-position: left bottom;
}
#wmenu a:hover span{
 display: block;
}
#wmenu .home {
 width: 144px;
 height: 58px;
 background:
url(http://4.bp.blogspot.com/--d7WlpLy164/T9nhNTJ5zBI/AAAAAAAAFYs/_ctgNQv1GYY/s1600/home.gif) no-repeat;
 left: 96px;
 top: 20px;
}
#wmenu .home span {
 width: 86px;
 height: 14px;
 background:
url(http://1.bp.blogspot.com/-r8qUJ4PeYQA/T9nhMJUBjLI/AAAAAAAAFYk/JOtnk_A9Zec/s1600/home-over.gif) no-repeat;
 left: 28px;
 top: -20px;
}
#wmenu .about {
 width: 131px;
 height: 51px;
 background:
url(http://3.bp.blogspot.com/-VmTd_Mj5BuI/T9nhKHOQuXI/AAAAAAAAFYc/T-zI6fiA77s/s1600/about.gif) no-repeat;
 left: 338px;
 top: 20px;
}
#wmenu .about span {
 width: 40px;
 height: 12px;
 background:
url(http://3.bp.blogspot.com/-VCtz2YoexCg/T9nhI8sY67I/AAAAAAAAFYU/rWHPywbcyeg/s1600/about-over.gif) no-repeat;
 left: 44px;
 top: 54px;
}
#wmenu .rss {
 width: 112px;
 height: 47px;
 background:
url(http://2.bp.blogspot.com/-Z3dhDfpMsVU/T9nhQiiOKwI/AAAAAAAAFY8/fvW_CuPSicw/s1600/rss.gif) no-repeat;
 left: 588px;
 top: 20px;
}
#wmenu .rss span {
 width: 92px;
 height: 20px;
 background:
url(http://1.bp.blogspot.com/-Nl-InI2jGU4/T9nhO5ijgLI/AAAAAAAAFY0/imm2Bbk5lWo/s1600/rss-over.gif) no-repeat;
 left: 26px;
 top: -20px;
}
  • Save Template 
  •  Go to blogger  >  Layour > Add a gadget  > HTML/JavaScript and place the HTML below and click save.

<ul  id="wmenu">
<li><a href="#" class="home">Home <span></span>
</a></li>  <li><a href="#" class="about">About <span></span>
</a></li>  <li><a href="#" class="rss">RSS <span></span></a>
</li></ul>

  • Replace  # with your links....
If any widget/tutorial of this blog is not working then please let me know by commenting..........

"Do You Like This Story?" Widget For Blogger


Attract your viewers with "Do You Like This Story..?" widget ......this widget is used by  so many famous website and blogs and i found this widget on MBT and all credit of this post/code goes to them.....

  • Go To Blogger > Template > Edit HTML
  • Backup your template
  • Check the "Expand Widget Templates" box
  • Search for, <data:post.body/>
  • Just below it paste the following code,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(http://4.bp.blogspot.com/-26uGwa4yxWE/T9m1Z8w6cAI/AAAAAAAAFXY/gs3n4hHV7dA/s1600/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;,
endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Do you Like this story..?</span>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=WWEFAnsNation&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='WWEFansNation'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>
<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p>
<a href='http://feeds.feedburner.com/WWEFansNation' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://1.bp.blogspot.com/-FaQK8Sdio6Q/T9m1b7xJmpI/AAAAAAAAFXo/tP0sEIK5c_4/s1600/w2bRSS+.png'/></a>
<a href='http://twitter.com/hardeepasrani' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-SaFtieKAagw/T9m1cynA4yI/AAAAAAAAFXw/No4iTUYwui8/s1600/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/WWEFansNationPage' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://4.bp.blogspot.com/-ySYsK6KCGTk/T9m1a5YXuSI/AAAAAAAAFXg/uBxDtyZT1lw/s1600/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if> 
  • To change the colour of the "Do you like this story..?" text then simply change #FF683F  with a hexadecimal color of your choice.
  • Now replace http://feedburner.google.com/fb/a/mailverify?uri=WWEFansNation with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
  • Replace tntbystc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=WWEFansNation
  • Replace orange link with your Feedburner link
  • Replace the blue link with your twitter link
  • Replace the purple link with your Facebook Like Page link
Credits : MTB

Wednesday, 13 June 2012

How To Redirect a Blogger Post to Another URL


  • Login to your blogger dashboard > Template -> Edit HTML
  • Scroll down to where you see <head> tag .
  • Copy below code and paste it just after the <head> tag.

<b:if cond='data:blog.url == "YOUR-BLOG-POST-URL"'>
<meta http-equiv="refresh" content="5; url=REDIRECT-URL" />
</b:if>
  • Replace YOUR-BLOG-POST-URL and REDIRECT-URL as your need.Look at the example below.
<b:if cond='data:blog.url == "http://widcraft.blogspot.com/p/facebook.html"'>
<meta http-equiv="refresh" content="5; url=http://facebook.com/hardeepsrani" />
</b:if>
  • If I add above code to my template,When someone go to my contact us page/post he will be redirected to my home page after 5 seconds.To redirect without waiting replace 5 with 0.
  • Now save your template and you are done.

WordPress Style Social Subscription Widget For Blogger


I added this widget in past but deleted because of some errors but now it's back. This time it's even more easier to add this widget on your Blogger.

Just use our widget generator to generate widget code and after adding it you can also change readers/followers/fans count....

Making Pages Inside Blogger Posts


Finally after so much search on google and other places i found how to make pages inside a blogger posts aka sub posts ....

Tips:
1.First create your post and copy html of your post in notepad application of your computer.

2.After pasting the above code (The ol list) in the Edit HTML Tab, if you go to the Compose Tab and then go back to Edit HTML tab ,you will see the links have changed in the href , if you don't revert them back to only # ones, then this will not work. So either add this code just at the end of writing your Post or don't switch to Compose tab :(
  • Create A Post > Choose HTML Option And Paste The Below Script 
<div class="content11" id="page-1">

Content Of Page One

</div>
<div class="content11" id="page-2">


Content Of Page Two


</div>
<div class="content11" id="page-3">

Content Of Page Three

</div>

<ol id="toc">
<li><a href="#page-1">1</a></li>
<li><a href="#page-2">2</a></li>
<li><a href="#page-3">3</a></li>
</ol>
  • Replace Content Of Page One/Two/Three with the HTML of your page one/two/three content.
  • Now after completing above step just post this script below it

<style>
div.content11 {clear: left;padding: 1em;}
div.content11.inactive {display: none;}
ol#toc {height: 2em;list-style: none;margin: 0;padding: 0;}
ol#toc a {padding: 0px 8px 0px;margin: 1px 4px;text-decoration: none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;}
ol#toc a:hover {background-color: #DBECF8;padding: 0px 8px 0px;border:1px solid #204e73;}
ol#toc a:hover span {background-position: 100% -120px;}
ol#toc li {float: left;margin: 0 6px 0 0;}
ol#toc li a.active {background-color: #48f;background-position: 0 -60px;color: #fff;font-weight: bold;}
ol#toc li a.active span {background-position: 100% -60px;}
ol#toc span {background: url(tabs.gif) 100% 0;display: block;line-height: 2em;padding-right: 10px;}
</style>
 <script src="http://widcraft.googlecode.com/svn/Pages-In-Posts.js" ></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2','page-3' ]);
</script>

  •  Now your post in ready to get published.....you can add more pages on your post by editing  activatables('page', ['page-1', 'page-2','page-3' ]); section in last script and by adding more page option on first script.
If you liked this hack then give up credits and comment :D

SuperBox Lightbox For Blogger


Superbox/Lightbox is a cool option for all bloggers to display some pics , external links and iframe in this cool window with close option.....you can add this features on your pics , gallery and iframe .

Now you all are thinking how to add this widget......it's simple just follow some simple steps......
  • Go To Your Blog > Template > Edit HTML 
  • Just above ]]></b:skin> post css given below
/* Base Superbox Styles */
#superbox-overlay{position:fixed;top:0;left:0;z-index:9998;width:100%;height:100%;}
#superbox-wrapper{position:fixed;z-index:9999;top:0;display:table;width:100%;height:100%;}
#superbox-container{position:relative;display:table-cell;width:100%;height:100%;margin:0;padding:0;vertical-align:middle;}
#superbox{margin:0 auto;padding:0;}
#superbox-container .loading{margin:0;text-align:center;}
/* IE7 */
*:first-child+html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
*:first-child+html #superbox{position:relative;top:-50%;display:block;}
/* IE6 - Thanks to Thickbox for IE expressions */
* html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
* html #superbox{position:relative;top:-50%;display:block;}
* html #superbox-overlay{position:absolute;height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight + 'px' : document.body.offsetHeight + 'px');}
* html #superbox-wrapper{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
/* Default Theme */
#superbox-overlay{background:#000;}
#superbox-container .loading{text-align:center;font-size:40px;color:#fff;}
#superbox{padding:10px;background:#fff;}
#superbox-innerbox{padding:10px 0;}
#superbox.image{text-align:center;}
#superbox .close,
#superbox .nextprev{overflow:hidden;margin:0;}
/* Container */
#container{position:relative;overflow:hidden;width:820px;margin:0 auto;padding:0 20px 50px;background:#fff;}
pre{overflow:auto;padding:5px;background:#a7dbd8;}
code{background:#a7dbd8;}
pre code{font:12px monospace;}
ul{list-style-type:square;}
img{border:0}
blockquote{margin:50px 40px 0;font-size:30px;quotes:"\201C" "\201D";}
blockquote p:before{content:open-quote;font-weight:bold;}
blockquote p:after{content:close-quote;font-weight:bold;}
cite{float:right;margin-right:40px;display:inline;}
.translations{float:right;margin-right:20px;top:0;margin:0;padding:0;display:inline;}
.translations dt{margin:0;padding:0;text-indent:-9999px;}
.translations dd{margin:0;padding:0;height:19px;}
.translations dd a{float:right;padding-right:20px;line-height:19px;text-align:right;background:url(flags.png) no-repeat 100% 0;}
.translations dd strong a{text-decoration:none;}
.translations dd.en a{background-position:100% -19px;}
.translated-by{position:absolute;top:46px;right:35px;width:150px;padding:10px;text-align:justify;background:#fff;border:1px solid #fa6900;}
  • Just above </head> post the below script
<style type="text/css">
/* Custom Theme */
#superbox-overlay{background:#e0e4cc;}
#superbox-container .loading{width:220px;height:90px;margin:0 auto;text-indent:-9999px;background:url(http://4.bp.blogspot.com/-lseEeAp0DKQ/UANHRzspkDI/AAAAAAAAHYo/hMD2S8PKKJQ/s1600/Loading.gif) no-repeat 0 0;}
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#333;cursor:pointer;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
</style>
<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
</script>
<script src="http://widcraft.googlecode.com/svn/JSuperbox.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$.superbox.settings = {
closeTxt: "Close",
loadTxt: "Loading...",
nextTxt: "Next",
prevTxt: "Previous"
};
$.superbox();
});
</script>
  • Click on Save and you're done with this part.
  • Now to add superbox effect on your content add these following code on your image/iframe/gallery -

------------------------------------------------------------

On Images
rel="superbox[image]"

For Adding Gallery:
rel="superbox[gallery][GalleryName]" In all the elements of the Gallery

For Adding Links/iFrame:
rel="superbox[iframe]"

For Inline Content:
el="superbox[content]"

For AJAX Content
rel="superbox[ajax]"

------------------------------------------------------------

Some Example Codes -

On Images -


<a href="http://4.bp.blogspot.com/-6MfQl3VwAds/T9ho4CLlc8I/AAAAAAAAFHI/DTFq89q0WjI/s1600/Popunder.jpg" rel="superbox[image]">Image Title</a> 

On Gallery -

<a href="http://4.bp.blogspot.com/-6MfQl3VwAds/T9ho4CLlc8I/AAAAAAAAFHI/DTFq89q0WjI/s1600/Popunder.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="http://4.bp.blogspot.com/-6MfQl3VwAds/T9ho4CLlc8I/AAAAAAAAFHI/DTFq89q0WjI/s1600/Popunder.jpg" width="75" /></a>&nbsp;&nbsp;<a href="http://4.bp.blogspot.com/-6MfQl3VwAds/T9ho4CLlc8I/AAAAAAAAFHI/DTFq89q0WjI/s1600/Popunder.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="http://4.bp.blogspot.com/-6MfQl3VwAds/T9ho4CLlc8I/AAAAAAAAFHI/DTFq89q0WjI/s1600/Popunder.jpg" width="75" /></a>&nbsp;&nbsp;<a href="http://4.bp.blogspot.com/-6MfQl3VwAds/T9ho4CLlc8I/AAAAAAAAFHI/DTFq89q0WjI/s1600/Popunder.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="http://4.bp.blogspot.com/-6MfQl3VwAds/T9ho4CLlc8I/AAAAAAAAFHI/DTFq89q0WjI/s1600/Popunder.jpg" width="75" /></a>

On Links/iFrame(default dimensions) -


<a href="http://widcraft.blogspot.com" rel="superbox[iframe]">Iframe Superbox (default dimensions)</a>

On Links/iFrame(defined dimensions) -

<a href="http://widcraft.blogspot.com" rel="superbox[iframe] [750x500]"> Iframe Superbox (definded dimensions)</a>

Inline -


<div id="mode-content">
Generates a box containing an element of the page.
The link will be external, and will point to an element of the page using its <code>id</code> attribute.
This element will be copied to appear in Lighbox.
</div>
<a href="#mode-content" rel="superbox[content]">Superboxox element</a>
<a href="#mode-content" rel="superbox[content][500x400]">Superbox element (dimensions)</a>

Ajax -

<a href="http://pierrebertet.net/projects/jquery_superbox/crockford.html" rel="superbox[ajax][crockford-ajax.html]">AJAX SuperBox</a>

Sunday, 10 June 2012

Spinning , Fading Social Sharing Icon Widget For Blogger


This spinning and fading widget is damn cool for blogger......it'll 100% attract your visitors and it's possible if they spend half of there time to just spin these icons again again and again :p
  • Go To  Your Blog > Template > Edit HTML and paste this code just above  </b:skin>

#followIcons a  {
display:inline-block;
width:48px;
height:48px;
text-indent:-3000px;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
position:absolute;
}
#followIcons a  {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
#iconRSS  { background-image:url(http://3.bp.blogspot.com/-Cmk005D9Pvw/T9SQD6j-n7I/AAAAAAAAE_s/JFga8-SZBR4/s1600/RSS.png); }
  #iconTwitter { background-image:url(http://1.bp.blogspot.com/-Q72keIRIRu8/T9SQE9O7Q0I/AAAAAAAAE_0/_KBTFn0KEDI/s1600/Twitter.png); }
#iconPlus { background-image:url(http://4.bp.blogspot.com/-PXVFy4ZZEIQ/T9SQC1a3uHI/AAAAAAAAE_k/j3F7LwB2EAw/s1600/Google++.png); }
  #iconFacebook { background-image:url(http://1.bp.blogspot.com/-fgXvfQ6u2uE/T9SQB2ojG1I/AAAAAAAAE_c/eAgTTaVJyaw/s1600/Facebook.png); }

  • Now paste the below JavaScript code just above </head>

<script src=”http://widcraft.googlecode.com/svn/jquery.js”></script>
 <script>
  jQuery(document).ready(function() {
   // “Globals” – Will make things compress mo-betta
   var $random = function(x) { return Math.random() * x; };
   var availableWidth = 400, availableHeight = 40;
      // Get the proper CSS prefix
   if(jQuery.browser.webkit) {
    cssPrefix = “webkit”;
   }
   else if(jQuery.browser.mozilla) {
    cssPrefix = “moz”;
   }
   else if(jQuery.browser.opera) {
    cssPrefix = “o”;
   }
   // Apply opacity
   var zIndex = 1000;
      // Randomize each link
   jQuery.each(jQuery(“#followIcons a”),function(index) {
    var startDeg = $random(360);
    var element = jQuery(this);
    var resetPlace = function() {
     element.fadeTo(250,0.6).css(“-” + cssPrefix + “-transform”,”rotate(” + startDeg + “deg)”);
    };
    element.attr(“style”,”top:” + $random(availableHeight) + “px; left:” + $random(availableWidth) + “px; z-index:” + zIndex).hover(function() {
     element.fadeTo(250,1).css(“zIndex”,++zIndex).css(“-” + cssPrefix + “-transform”,”rotate(0deg)”);
    },resetPlace);
    resetPlace();
   });
     });
 </script>
  • Now Go To Layout > Add A Gadget > HTML/Java Script and paste this code
<div id=”followIcons”>
  <a href=”http://feeds.feedburner.com/WidgetCraft” id=”iconRSS”>RSS Feed</a>
  <a href=”http://twitter.com/HardeepAsrani” id=”iconTwitter”>@HardeepAsrani Twitter</a>
 <a href=”http://plus.google.com/USERNAME” id=”iconPlus”>Google Plus</a>
  <a href=”http://facebook.com/HardeepAsrani” id=”iconFacebook”>Hardeep Asrani Facebook</a>
</div> 


Now just replace URL's with your profile URL's :p

For any help/request or reporting bug just comment thanks

How To Get Your Google Adsense Account Unbanned


This post will be about how to get your Google Adsense Account unbanned! First off, let my start by saying that if your Google Adsense Account was banned because you violated the Google Adsense Terms Of Service (TOS), your up the proverbial creek without a paddle. Chances are you’ll not get your Adsense account unbanned.However, if you feel the Google Adsense gang unfairly banned your account, here are 5 simple steps to follow that may help you get it unbanned. (this means you have read the Adsense TOS and have determined without a doubt you did not violate their terms)Remember, most bans come from an automated machine. Something went wrong and it caused a Red flag to pop up at G Headquarters. 

Your goal now is to to have a human review it.Try and determine why your account was banned. This is important because you need to know what happened before you can gather evidence. Google will not always tell you and many times they’ll tell you it’s because of “Invalid Clicks” which can mean anything under the moon. I’ve heard of accounts being banned because of a sudden increase in clicks due to a site hitting the front page of Digg and because a previous owner of a domain had his Adsense account banned.Contact the Google Adsense team and be nice about it. If you’re email starts with “You Jerks at Google Banned My Account For No Good Reason,” then you’ll not likely get it unbanned before Hell freezes over. Your emails should be very nice and non-judgemental. Assume it was an honest mistake by Google, because it may very well have been.Provide Proof Of Your Innocence.If you have a good idea of why your Adsense was banned, offer to give it to Google. This could be everything from server logs, a letter from the webhost or a WhoIs file. Be nice and politely show Google where they went wrong.Have some patience.The folks at Adsense won’t be tripping over their self to get to your case. I’d be sending follow up emails every other day or so and checking on the status of the human review. Remember to keep them nice and polite. You may also want to keep offering to give them evidence. Try and show you really want to help in the investigation.Persistence pays off. 

If you give up only after an email or two, then chances are you may never hear from them again. Stay with the follow up emails! Eventually they’ll get tired of you and either give you a Yea or Nay. Remember, the squeaky wheel gets the oil!There is no guarantee that these tips will help. But if you’re going to fight to get your account reinstated, this is the way to begin.I can’t stress this enough, read the damn Adsense TOS before you cry about getting banned. After you get your account banned is not the time to familiarize yourself with the Google Adsense TOS.You’ll be surprised at the type of things you account can be banned for. I’m always amazed at people in the forums who’ve had their account banned because of something they did that was against the TOS. Then they proceed to tell everyone they “didn’t know.”And if you can’t get you Adsense account unbanned, you can always use one of your other Adsense accounts…right?

Send your email to adsense-support@google.com

Saturday, 9 June 2012

Show Recent Posts From A Label On Blogger



It's easy to show latest posts from a label of your blog..... just follow these easy steps :D
  • In your Blogger Dashboard click > Design > Edit Html 
  • Find the ]]></b:skin> code in your blogs Html : (Click Ctrl and F for a search bar to help find the code
  • Copy and paste the following code Directly Above / Before ]]></b:skin>
/*** Recent Labels Gadget Css ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}
  • Find the </head> code in your blogs Html : (Click Ctrl and F for a search bar to help find the code
  • Copy and paste the following code Directly Above / Before </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
  • Now save your template 
  • Go to Layout > Add A Gadget > HTML /Java Script and post the following code
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

You must add the name of the label you want to to the above code.Replace LABEL in red with the label name.

Example - If i wanted to display posts from the gadgets label i would replace LABEL with Widgets.
(http://www.widcraft.blogspot.com/search/label/ Widgets /)

If your label is made up of more than one word it can get confusing as the space between the words will be filled automatically as shown below :

http://www.widcraft.blogspot.com/search/label/Blogger%20Widgets 

If you are going to use a label with more than one word make sure to first see how the label appears.

  • Save the gadget and you can drag and drop it into the position you want it displayed on your blog.

HTML Parse Encoder

HTML Editor

Edit your HTML codes and test our Widget in this HTML editor.....
 

Tuesday, 5 June 2012

Blogger Widget Code Generator


Enter Widget Title


Enter Your Blog Url


Enter Your Logo Image Logo Url


Paste The Widget Content Value (HTML/Javascript)


Copy The Form & Paste In Post 


Featured Content Slider For Blogger


Featured Content Slider is one of the best way to featured some of the best content from your blog to your users.....to add this just follow the following steps.....
  • Go to your blogger > Template > Edit Html
  • Just above the </head> paste this script

<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {

 //Execute the slideShow
 slideShow();
});
function slideShow() {
 //Set the opacity of all images to 0
 $('#gallery a').css({opacity: 0.0});

 //Get the first image and display it (set it to full opacity)
 $('#gallery a:first').css({opacity: 1.0});

 //Set the caption background to semi-transparent
 $('#gallery .caption').css({opacity: 0.7});
 //Resize the width of the caption according to the image width
 $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});

 //Get the caption of the first image from REL attribute and display it
 $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
 .animate({opacity: 0.7}, 400);

 //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
 setInterval('gallery()',6000);

}
function gallery() {

 //if no IMGs have the show class, grab the first image
 var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
 //Get next image, if it reached the end of the slideshow, rotate it back to the first image
 var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

 //Get next image caption
 var caption = next.find('img').attr('rel');

 //Set the fade in effect for the next image, show class has higher z-index
 next.css({opacity: 0.0})
 .addClass('show')
 .animate({opacity: 1.0}, 1000);
 //Hide the current image
 current.animate({opacity: 0.0}, 1000)
 .removeClass('show');

 //Set the opacity to 0 and height to 1px
 $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 });

 //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
 $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );

 //Display the content
 $('#gallery .content').html(caption);
}
</script>
  • Now Save and after saving close that edit html window and click on  Customise/Customize 
  • Click On Advance > Add CSS and paste the script from below

.clear{clear:both}
#gallery{position:relative;width:500px;height:400px}
#gallery a{float:left;position:absolute;}
#gallery a img{border:none;}
#gallery a.show{z-index:500}
#gallery .caption{z-index:600;background-color:#000;color:#ffffff;height:100px;width:100%;position:absolute;bottom:0;}
#gallery .caption .content{margin:5px}
#gallery .caption .content h3{margin:0;padding:0;color:#1DCCEF;}

  • Click on Apply To Blog 
  • Now paste the script from below to where you want to add this widget example in template/posts/pages/gadget

<div id="gallery">
<a href="#" class="show">
<img src="IMAGE_URL" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>TITLE 1</h3>Description 1 "/>
</a>
<a href="#">
<img src="IMAGE_URL" alt="Grass Blades" width="580" height="360" title="" alt="" rel="<h3>TITLE 2</h3>Description 2 "/>
</a>
<a href="#">
<img src="IMAGE_URL" alt="Ladybug" width="580" height="360" title="" alt="" rel="<h3>TITLE 3 3</h3>Description 3"/>
</a>
<a href="#">
<img src="IMAGE_URL" alt="Lightning" width="580" height="360" title="" alt="" rel="<h3>TITLE 4</h3>Description 4"/>
</a>
<div class="caption">
<div class="content">
</div>
</div>
<div style="clear: both;">
</div>
</div>
  • Change IMAGE_URL with the url of your image and # with your post/page url and TITLE and Description with your content title and description and you're done :D

Popular Posts

 
Powered by Blogger.