Saturday, 28 July 2012

FancyZoom Lightbox For Blogger


Don't know about you guys but i think Lightbox are the best widget ever made.....i really like Light Boxes and today i'am sharing one of it with you.....

Installing :

  • Go To Blogger > Template > Edit HTML
  • Just above </head> paste the script given below
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/FancyZoom.js"></script>

And you're done.....

How To Use :

$('#id').fancyZoom() where id is the id of the <a> tag you would like to zoom. The <a> tag should have an href that anchors to the id of the box that contains the contents that should be zoomed. For example:

<a href="#small_box" id="small">Small Box!</a>
<div id="small_box">
  <p>Here is the contents that will appear in the zoom.</p>
</div>
<script type="text/javascript">
$('#small').fancyZoom();
</script>

Other Examples


// other examples
<script type="text/javascript">
  $(document).ready(function() {
    $('a.fancy').each(function() { $(this).fancyZoom({width:500, height:300});});
    $('#small').fancyZoom({scaleImg: true}); // Scales images inside while zooming
    $('#medium').fancyZoom({closeOnClick: true}); // Close the zoom by clicking on the contents
    // width and height are optional. defaults to css specifications of width and height.
    // if width and height are passed in, they override whatever may be in css.
    $('#large').fancyZoom({width:600, height:400});
  });
</script>

You can use this lightbox in Images , HTML , Text , Flash and Embed-able stuff.....Having problem or want a pet Unicorn then comment.....

Friday, 27 July 2012

Cool CSS3 Buttons For Blogger


First of all you can also use these buttons on your html documents ..... just wanted to let you know :).....so all blogger right now i'am gonna tell you how to use these button on your blog.....
  • Go To Blogger > Template > Edit HTML
  • Find ]]></b:skin> in your template
  • Post the following CSS Code just above  ]]></b:skin>  :
.button, .button:visited {
 background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewoAg3lsQg5SmchY9vK8pBm4LQJre7b0CLQT4cdh72tqOAVFwBifdsYjQEBcoMTuodgCtVxCyd_wZQrqm3vjkDjcjs0SzWK-qcEcspJJuPYunC77n09cVx4hFsijQknzmEixKfmLUDuI/s1600/overlay.png) repeat-x;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
 font-family: calibri;
}
.button:hover {
 background-color: #111;
 color: #fff;
}
.button:active {
 top: 1px;
}
.small.button, .small.button:visited {
 font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}
.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}
.pink.button, .magenta.button:visited {
 background-color: #e22092;
}
.pink.button:hover {
 background-color: #c81e82;
}
.green.button, .green.button:visited {
 background-color: #91bd09;
}
.green.button:hover {
 background-color: #749a02;
}
.red.button, .red.button:visited {
 background-color: #e62727;
}
.red.button:hover {
 background-color: #cf2525;
}
.orange.button, .orange.button:visited {
 background-color: #ff5c00;
}
.orange.button:hover {
 background-color: #d45500;
}
.blue.button, .blue.button:visited {
 background-color: #2981e4;
}
.blue.button:hover {
 background-color: #2575cf;
}
.yellow.button, .yellow.button:visited {
 background-color: #ffb515;
}
.yellow.button:hover {
 background-color: #fc9200;
}

  • Save Your Template : )
How To Use These Button :
  • While editing post click on Edit HTML tab
  • Choose your button code below and paste it
  • Replace links and link names with yours,
1. HTML Code Large Buttons :

<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>
2. HTML Code Medium Buttons :

<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>
  • Replace LINK HERE with link URL
  • Replace LINK TEXT HERE with the text which you want to appear on the button. 
That's IT!

Thursday, 19 July 2012

Meta Tag Generator


Search engine friendly Head tag generator Use to create a search engine friendly Head Tag for your website.

Enter your own information and simply copy and paste into your html page.
Enter Title For Your Site
Enter The Description For Your Site
Enter Keywords Seperated By Commas.(You can put up to 20 keywords)
 
   
 
Title And Meta Tag




Tuesday, 17 July 2012

Changing Mouse Cursor In Blogger


Changing mouse cursor are hell cool.....your visitors will be like "Howwwwww???" i got a answer below :
  • Go To Blogger > Layout > Add A Widget > HTML/JavaScript 
  • Paste the script given below:
<style type="text/css">body, a:hover {cursor: url(CURSUR URL), progress;}</style>
  • Now replace CURSOR URL with your Cursor URL(in .CUR format)
  • You can find lots of cursor around the internet.....

Saturday, 14 July 2012

Short URL Widget Below Posts In Blogger


So in this tutorial we'll learn adding short url widget below posts.....it's totally awesome and gives your visitors short links of your blogger posts.....


  • First get Bit.ly's API you need to sign in there to get your api.
  • After getting AIP Go To Blogger > Template > Edit HTML
  • In Edit HTML press Ctrl+F and find </head>
  • Post following script just above  </head>.
<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=YOURUSERNAME&amp;apiKey=YOURAPIKEY"></script>
<script type="text/javascript" charset="utf-8">
BitlyClient.addPageLoadEvent(function(){
BitlyCB.myShortenCallback = function(data) {
// this is how to get a result of shortening a single url
var result;
for (var r in data.results) {
result = data.results[r];
result['longUrl'] = r;
break;
}
document.getElementById("shorturl").innerHTML = "Share this link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
}
BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
});
</script>

  • Replace  YOURUSERNAME And YOURAPIKEY with your bit.ly Username and API(Follow First Step)
  • Now Find ]]></b:skin>  and just above it post following script
form#shorturl {
color:#666;
font-size:11px
}#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}
  • Save Template
  • Now again click on Edit HTML and mark Expand the Template.
  • Find :
<div class='post-footer-line post-footer-line-3'>
</div>
  • And post following script just between above code
<b:if cond='data:blog.pageType == "item"'>
<form id='shorturl'/>
</b:if>
  • Click on Save Template and just visit your posts to see this script in action.
Comment for any type of help..... :)

Thursday, 12 July 2012

Using Custom Blogger Post URL


So blogger introduced custom permalink option for posts which is one of the best SEO tool.....using this method is extremely easy :

Update : Blogger has launched this feature publicly so now you can use this feature in blogger.com
  • Create a post
  • There is a Permalink option in Post Setting section , like this:


  • Fill your Custom URL and click on done
  • Publish and we're done :)

Popular Posts Slider For Blogger


All cool templates got a featured content slider but you have to edit those crappy slider manually but i found this slider for your popular posts so check this tutorial out :
  • Go To Blogger > Layout > Add A Gadget > Popular Posts 
  • Now  add this widget given below .....just above/below your 'Popular Posts' widget :


All done just save your template and leave a comment :)

Tuesday, 10 July 2012

3 Amazing CSS3 Image Transitions


So guys in this post i'am gonna teach you 3 amazing CSS image transitions as you can read on post title and image above.....they all will work when you'll hover one image will transform to another so here we go + some examples :

Effect #1 :

Example :











HTML :


<div id="cst" class="hover">
 <img class="bottom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>


CSS :


#cst {
 position:relative;
 height:281px;
 width:450px;
}
#cst img {
 position:absolute;
 left:0;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
}
#cst img.top:hover {
 opacity:0;
}


Effect #2 :

Example :








HTML :


<div id="cst2" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>


CSS :


#cst2 {
  position:relative;
  height:281px;
  width:450px;
 }
 #cst2 img {
  position:absolute;
  left:0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #cst2 img.top {
  -webkit-transform:scale(1,0);
  -moz-transform:scale(1,0);
  -o-transform:scale(1,0);
  transform:scale(1,0);
  filter: alpha(opacity=0);
  opacity:0;
 }
 #cst2:hover img.top, #cst2.hover_effect img.top {
  opacity:1;
  -webkit-transform:scale(1,1);
  -moz-transform:scale(1,1);
  -o-transform:scale(1,1);
  transform:scale(1,1);
 }
 #cst2:hover img.bottom, #cst2.hover_effect img.bottom {
  filter: alpha(opacity=0);
  -webkit-transform:rotate(360deg) scale(0,0);
  -moz-transform:rotate(360deg) scale(0,0);
  -o-transform:rotate(360deg) scale(0,0);
  transform:rotate(360deg) scale(0,0);
 }

Effect #3 :

Example :









HTML :


<div id="cst3" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>


CSS :


#cst3 {
  position:relative;
  height:281px;
  width:450px;
 
 }
 #cst3 img {
  position:absolute;
  left:0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #cst3 img.top {
  -webkit-transform:scale(0,0);
  -moz-transform:scale(0,0);
  -o-transform:scale(0,0);
  transform:scale(0,0);
  opacity:0;
 }
 #cst3:hover img.top, #cst3.hover_effect img.top {
  opacity:1;
  -webkit-transform:scale(1,1);
  -webkit-transform-origin: top right;
  -moz-transform:scale(1,1);
  -moz-transform-origin: top right;
  -o-transform:scale(1,1);
  -o-transform-origin: top right;
  transform:scale(1,1);
  transform-origin: top right;
 }
 #cst3:hover img.bottom, #cst3.hover_effect img.bottom {
  -webkit-transform:scale(0,0);
  -webkit-transform-origin: bottom left;
  -moz-transform:scale(0,0);
  -moz-transform-origin: bottom left;
  -o-transform:scale(0,0);
  -o-transform-origin: bottom left;
  transform:scale(0,0);
  transform-origin: bottom left;
 }

Sunday, 8 July 2012

5 Best Advertising Networks For Bloggers


Every blogger wants to earn some revenue from their blogs. You can earn some money from your blogs by becoming an ad publisher, first we need to find a perfect publisher website for you. Below are top 5 advertising/publisher networks:

Google Adsense: Google Adsense is best publishing network, which is recommended by every blogger. Many bloggers are earning millions of dollars with Adsense. Adsense pays you more than any other publisher website. You receive 68% of revenue with Adsense. Getting accepted for Adsense is like a nightmare for a new blogger but it's the best advertising website. If your Adsense account is banned then this article may help you.

Infolinks: Infolinks provides intext ads and they also provide related tags, tag clouds which can gives you maximum advantage from Infolinks, Infolinks share 70% of revenue with their publishers,you will get approved easily but first read their Requirements then apply.

BuySellAds: BuySellAds is different from others, in buy sell ads you can sell advertising space on your website and you can set pricing as per your choice, its different from Adsense and you can use this with Adsense, but you can use buy sell ads if you have really good traffic and your account will approve if you have good traffic, if you are new then think about other options.

Contextweb: Contextweb is a CPM ad network with a good reputation that serves as a great source of revenue for low to high traffic websites and does not require clicks to earn revenue.

Bidvertiser: Bidvertiser is also a good alternative to Adsense. BidVertiser online advertising network offers Bid Per Click ad sales model, that gives publishers the ability to sell their ads space to highest bidding.

Label Widget Style For Blogger







Here we go :
  • First add a Label widget on your blog.
  • Change setting to cloud style.
  • Add this widget on your blog :


Popular Posts

 
Powered by Blogger.