Home All posts
Monday 23 April 2012
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.
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 == "item"'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {"shr_class":{"src":"http://www.shareaholic.com/media/css/styles/sb","link":"","service":"5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf142c45bd4cd03b01ec46b8658","localize":true,"shortener":"google","shortener_key":"","designer_toolTips":true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @hardeepasrani"}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js";
var s = document.getElementsByTagName("script")[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
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.
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
- 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
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
-
Just a quick news before I start the stuff. Google Code has suspended my code account & all repositories I hosted there, so all my c...
-
Just a simple trick I wanted to show you guys. You can resize web elements with the CSS3 property resize: both. For images make sure i...
-
Earlier this week, I wrote about installing CFW on your PSP to do some extra-ordinary PSP stuff. Playing ISO and CSO games in one of it. ...
-
Many PSP gamers wants to capture screenshots of their PSP games to share them with their friends and on tutorials. Even the above picture...
-
BWidgets is a blogsite about blogging, but why we're sharing PSP tutorials here? The answer is very simple. I recently bought a PSP 1...
-
Blogging world is getting large everyday as so many peoples are creating blogs and it's hard for all of them to capture their targets...
-
By default, WordPress only allows us to login to WordPress powered sites only with our username. But most of us prefer to enter our email ...
-
In this tutorial, I'm going to show how you can easily hide login errors in WordPress. It's a great way to protect from WordPress ...
-
Forums are for your visitors and you to discuss and connect with each other but blogger doesn't have any forum options so it's ti...
-
Hi guys! I haven't published anything on this blog for at least an year now. All the posts that you see here are guest posts, and not by...