Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

HOW TO ADD STATIC FACEBOOK LIKE BOX WITH SMOOTH JQUERY HOVER EFFECT?

Here There are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

1. Go to Blogger Dashboard < Design tab > Edit Html
2. Search for </head> tag
3. Add below line of code Before </head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Widget Code

it’s Simple

Replace my facebook page Name below with Mycybersafar for your page.

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRujsFZw8zYMrAqtxsklVsUaLbezZ7-sbwImrCqHQ5D9GVsNAtDvWr30seJtli5Cl2rehGc0pHaqkchoTdRImjh4QqQA3I94HW8QNQbTI2eySDVrAv2r5XaRLw-dwI7rEuQKCTqGlA7FdA/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>
<div class="w2bslikebox" style="">
    <div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FMycybersafar&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href="http://www.way2blogging.org/2011/06/add-static-facebook-pop-out-like-box.html">by Way2Blogging</a></span>
    </div>
</div>

How to Replace Newer, Older & Home Navigation Links with Image Buttons

HOW TO REPLACE NEWER, OLDER & HOME NAVIGATION LINKS WITH IMAGE BUTTONS?

Important!!! Back Up your Template before Making any changes in Template.

1. Go to Blogger Dashboard -> Design tab -> Edit HTML tab
2. Click on  Expand Template Widgets checkbox

REPLACING THE OLDER LINK

Search for <data:olderPageTitle/> and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii9PdqItieuaSOHlbkeEzkHQSFI3KXWuSlPquDYYEWbPNPDZYNZawqsJYRW5PSWMucqgoNgn4hxW_OCvrEQJp-uImnfKSKrMsuzTAvNcyAWKgyzFM9Uz-RpnwQ1wAd_cbIOIdFuAsGxZKs/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

REPLACING THE NEWER LINK

Search for <data:newerPageTitle/> tag and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjagsbrzAJkeH-7vfWFEisxWJdqhsbFXvY9RQ63ktHAsS2ck5ocJJoqPAmr095ZtQ3RL6_I-i6htbI0cq4pGekbAnI3dDEqyGFRWQ2rIP4PL8obu7C9iO4RjYPdRqJrOom6SH9tZBO-yTM0/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

REPLACING THE HOME LINK

Search for <data:homeMsg/> tag and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGv9vioRs4l7lHdQnW0sNHSArVY1ULHtJDY3UnheKHlY1ZV78jLssr77mDSv5XP23HXCAs95b4i22vHNCDAcbwdsxYZ5o8GVcMqfO0-aanURaeIthchyphenhyphenCGIcD93bQwha2gpeHJZp65iei6/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>

You can change your own icons by replacing the image Url in the above three codes...

How to Display Scripts and Codes in Blogger Posts

How to display the Scripts and Codes in blogger post To show codes in blogger post in special section.

Suppose we want to show a simple code like bellow

<h1> Related posts </h1>

but it is HTML Code so it will display like bellow...

To avoid this we show codes in special Section amd make it friendly to post

Just follow these steps :-

1. Login to Blogger dashboard
2. Go to Design Section
3. Then select Edit HTML tab
4. Find   ]]></b:skin> tag
5. Replace it with Bellow Code of section

   .codeview {
   margin : 15px 15px 15px 35px;
   padding : 10px;
   clear : both;
   font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
   line-height:1.6;
   background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWd2uvbio93zJo_ZEF9AN86ziOxRAayiBw-Q8Tqq8wXdmGOkUVqAQFWVUV97k69_DVUvBECdN7BUJRhwU9tNs5aG1q0c07AWIRjqIy3wtWtIbqz7ufW_Tf8RtB3ux41zGxXr30NHhw9kOv/') no-repeat scroll bottom right #EFFBF5; 
   border-top : 1px solid #eeeeee;
   border-right : 2px solid #cccccc;
   border-bottom : 2px solid #cccccc;
   border-left : 1px solid #eeeeee;
   }
   .codeview li {
   line-height : 24px;
   color : #333333;
   margin : 0;
   padding : 0;
   }
   ]]>

6. Now save your template.

While creating any Post, If you want to show the special Code in post that CSS code or JavaScript code, what ever may be , Go to Edit HTML tab in Post and create Div section and put your code in Div section like bellow and publish Your Post

<div class="codeview">

<!-- Put Your Special code here -->

</div>

Note:- Before Putting code, Make it Friendly to post Using these tools

1. HTML Entities Encoder / Decoder
2. Postable
3. Centricle Encode / Decode HTML Entities

a sample preview

.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-size:normal;
list-style-type : none;
font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;
background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWd2uvbio93zJo_ZEF9AN86ziOxRAayiBw-Q8Tqq8wXdmGOkUVqAQFWVUV97k69_DVUvBECdN7BUJRhwU9tNs5aG1q0c07AWIRjqIy3wtWtIbqz7ufW_Tf8RtB3ux41zGxXr30NHhw9kOv/’) no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Add Css/Jquery Fixed Horizontal Menu To Blogger Blog

This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again.

Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page.

-> SEE DEMO <-

Let's start adding it...

1. Go To Blogger - Template - Edit HTML

 ....and select the "expand widget templated" box:

2. Search (using CTRL + F) for this piece of code:

</head> 

3. Just above/before the </head> tag, add this code:

<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.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>

4) Now search for this tag:

<body>  

If you can't find it, search for this one:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

5) Just below/after this code, copy and 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='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></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>

Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link that will appear in the menu. 

6) Now click on the Save Template button and you're done...!!!