Home Archives for April 2012

Wednesday, 25 April 2012

Flying Twitter Bird Widget For Blogger



  • Go To Blogger.com >> Template >> Edit HTML >> Proceed
  • Remember to Backup your template.
  • Search for </body>
  • Just above  </body>
  •  Paste the following code .  

<script src='http://widcraft.googlecode.com/svn/Twitter-Bird.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var twitterAccount = &quot;HardeepAsrani&quot;;
var tweetThisText = &quot; <data:blog.pageTitle/> : <data:blog.url/> &quot;;
tripleflapInit();
</script>  

  • Replace HardeepAsrani with your twitter username/handler
  • Save your template

Go and view your blog to see a bird flying with picture perfect finish:)

Monday, 23 April 2012

Social Subscribing Icons With Animated Tool Tips For Blogger


Every blog needs a widget like this and our blog doesn't have this widget but we have a widget like this below search bar. This widget is available in four cool styles three are listed above and one is secret click on 'Add To Blogger' button below to add this on your blog (It'll configure your FB/Twitter/Plus links and widget style) :

Cool Floating Twitter Widget For Blogger


This widget will help you to gain some followers on twitter and it looks damn cool. It's just a floating image with your twitter link but trust me this is a must-add widget for your blog.

Sunday, 22 April 2012

Awesome CSS And jQuery Fixed Fade Out Menu For Blogger



The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.
Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.
  • Go To Blogger Dashboard > Design > Edit HTML
  • Search for the tag </head>
  • And paste the code above it.....

<link rel="stylesheet" href="https://sites.google.com/site/widgetcraftfiles/home/hb-fadeout.css"/>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else  
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>

  • Now search for the <body>
  • Just below it paste the following code.
<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li class="search">
<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>      
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>

  • Now replace Your Link Here with the link which you want to add to a text.
  • And replace Text Here with the text which you want to appear on fade out menu.

CSS3 Multi Level Drop Down Menu For Blogger


Adding beautiful drop down menu helps to increase the beauty of your blog.By adding the drop down menu your readers or visitors can easily navigate through your blog.This amazing menu is designed by Catlin Rosu.And hey main part is that It doesn’t needs Any jQuery or JavaScript. It uses no images at all and loads extremely fast.It is compatible with all major browsers like FireFox, Chrome and Safari.I have kept the installation extremely easy.


  • Go to your blog > Layout > Add A Gadget > HTML/Java Script and paste the code 

<style>
/*------ Drop Down Menu By WC (widcraft.blogspot.com)---------*/
#hb-menu, #hb-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#hb-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#hb-menu:before,
#hb-menu:after {
content: '';
display: table;
}
#hb-menu:after {
clear: both;
}
#hb-menu {
zoom:1;
}
#hb-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#hb-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#hb-menu li:hover > a {
color: #fafafa;
}
*html #hb-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#hb-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#hb-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#hb-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#hb-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#hb-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#hb-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#hb-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#hb-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#hb-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#hb-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#hb-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#hb-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#hb-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id='hb-menu'>
<li><a href='#'>Home</a></li>
<li>
<a href='#'>Categories</a>
<ul>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Graphic design</a></li>
<li><a href='#'>Development tools</a></li>
<li><a href='#'>Web design</a></li>
</ul>
</li>
<li><a href='#'>Work</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='http://www.widcraft.blogspot.com/'>Create This »</a></li>
</ul>



After adding it.....edit the widget and replace # with your respective links and other with your Page Title.

 If you need help about setting up this widget feel free to ask me.I'll glad to help you.....

Shareaholic Sexy Bookmarks Widget For Blogger


  • Go to Blogger Dashboard > Design > Edit HTML. (In new user interface Dashboard > Template)
  • First download a copy of your template
  • Now find ]]></b:skin> in your template
  • Add the code given below  just above  ]]></b:skin>  -
div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}
  • Now check  Expand Widget Templates and  find :
<div class='post-footer'>
  • And paste code given below just below <div class='post-footer'> :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some fancy post title - http://goo.gl/dbqlx via @hardeepasrani&quot;}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.widcraft.blogspot.com/' target='_blank'>Social Bookmarking Gadget</a></b:if>
  • Replace hardeepasrani with your twitter username.
  • Now save your template and you are done..

Wednesday, 18 April 2012

Go To Top / Back To Top Widget For Blogger

Add This Widget :

                                        





                                        






                                        





Monday, 16 April 2012

Adding Facebook Comment Box To Blogger

In this tutorial, I'll show how to add Facebook comment box on your blog, which is a great way to receive more comments.

  • Go To Blogger > Template > Edit HTML > Tick expand widget template.
  • Now Find this code in your html by pressing Ctrl + f:

<data:post.body/>

  • Copy this code  and paste it below the code above:

<h3>Post Comment</h3>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='5' width='500'/>

Now you can see Facebook comment box in post pages only.You can change number of comments to show by changing num_posts='5' to your preferred number of posts. And you can also change width of the box by changing width='500'/> with your preferred width....Enjoy

How To Remove Or Hide Navigation Bar (Navbar) In Blogger


The navbar (navigation bar) is the horizontal bar located at the top of your page. If you think it doesn’t match your blog’s design, or if you need that extra space for your banner — you can remove it to suit your needs. Here’s how:
  • Go to your Dashboard > Template
  • Under Template tab, click Edit HTML to edit template
  • Just add the piece of code below somewhere between the <html> and </head>  tags of your blog’s template…
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;}
  • Like This-

<head>                                        
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>      
    <b:skin><![CDATA[                          
/*-----------------------------------------------
Blogger Template Style                          
Name:     Widget Craft                        
Designer: Hardeep Asramo                        
URL:      www.blogger.com                    
Updated by: Blogger Team                        
----------------------------------------------- */
                                               
#navbar-iframe {                                
height: 0px;                                    
visibility: hidden;                            
display: none;}

Static Facebook Pop Out Like Box Widget For Blogger - Version 1.0


Facebook pages connect us with our visitors and fans and it's important for us to get more likes on our facebook page and deliver good content to our visitors. This widget will help you a lot on it , first i introduce tutorial of adding it but now you can add this in your blog with our widget generator :

Sunday, 15 April 2012

Random Post Widget For Blogger - Version 1.0


Random Post Widget is a very cool app for blogs, it'll show a random post from your blog everytime you'll click on it. For some Jokes or Pic Blogs it's a perfect widget.We recommend you to not change any HTML Code because this coding is very sensitive.




Saturday, 14 April 2012

Recommended Post Slide Out Widget For Blogger


To add the widget to your blog, you can use this one click installer. :
Customize The Recommended Slide Out:

 End Of Post marker : The slide comes out when the user scrolls down to a particular point in your Blog.(the bottom of the page by default) To mark this point, you can add an HTML element there. The element should have the id bpslidein_place_holder 

 e.g.: <div id='bpslidein_place_holder'></div> would do the job. The best place to add this marker would be at the end of the post. If you want to do it easily, you can add this to your Blogger Template

 In your template Find,(You will have to expand the Widget Templates) :
<div class='post-footer-line post-footer-line1'>


Or
<p class='post-footer-line post-footer-line1'>


 Or
<data:post.body/>

Immediately below any of these, add the following snippet and save our template
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>


Now when the reader scrolls down to this div, the slide will open up.
Subscribe to: Posts (Atom)

Popular Posts

 
Powered by Blogger.