Hide and show floating button or box

Just now, i made a floating box for advertisement in my blog. My friends ask me how to that, and now, I'll write a tutorial for that.

Actually, it's use same concept as floating site button that i do before. Using jQuery and fixed position for div. With jQuery, we can hide and show the floating box(div). You can see the example at the bottom right corner of my blog.

Go to your Blogger Dashboard, Choose Design and Edit HTML.


1. First, the most important is jQuery, add jQuery to your site by add this code :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

paste this code below "//]]>"


2. Second, add the floating box to your page. Paste this code before </body> tag :

<div id='show-ads'><a class='show_ads' href='#'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_AbBoFj0pw7NyOjCUbjbDfquq71KCNALO0aIxUGiaEEW4h3Y5Sm_H2zVc_35LrfHSWFu54MaImb4FaJca9cY9nO2djOuuUVR9C2zOfPZLrNj4Kx_ZhBqt9zsp3oHRptnkl5JyBTrYJy3-/s1600/back_blue_button.png'/></a>
</div>
<div id='float-right'>
<a class='close_ads' href='#' style='font-size:large;' title='Close this ads'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3aJ9BxojWlLG_-4pwEgkMMd-V2xWwhxlYTNTpA5MJAeirTY_uy2LchMkB8FWDCd2P04E4xddz_0EiD2KFQhHMwpcGycyYoqx4Zhz4euJ55eBcozc-kwtaWc3JNVq1YOhJ2av5guULFJ8x/s1600/button_blue_close.png'/></a><br/>
Your script here.(I copy and paste my Nuffnang ads script here)
</div>



Write by Arafa Daming

Page navigation by numbers on Blogger

By default, your blog will use Older posts, Newer Posts links at the bottom of the page. This is the main navigation for your blog post.

So, lets make it more fancy and more interesting. You can view at this blog footer for example.

Please back-up your template before editing.

1. Go to your blog dashboard then :
Setting >> Formatting

Choose number of post you want to view on every page.

2. Go to Design >> Edit HTML

 Tick Expand Widget Templates

Find this code : </body>
You can find it by press Alt + F and type the word.

Paste this code above the </body>



Write by Arafa Daming

How to make floating side button?

Today, we will make an interactive floating side button which is moving to the left/right on mouse-over same as my blog side button. First, what you need is :

• Your blog or website (This tutorial for blogger but applicable for a web page)
• Button images
• Yourself

You can download free button as mine at IconFinder
or you can choose your own icon.

Now, here is the method :

1. Go to Blogger dashboard, choose your blog, design and edit html. Expand widget templates.

2. Include jQuery on your web page. This is to make your button more interactive.
Find "//]]>" and paste this code below "//]]>" :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

3. Make your floating div. Paste the code before </body> tag :


<div id='float-left'>
<ul>

<li><a href='http://www.facebook.com/pai.arafa' target='_blank' title='Be My Friend on Facebook'><img alt='Be my Friend on Facebook' src='http://filex.e-labuan.com/icon/side_facebook.png'/></a></li>

<li><a href='http://twitter.com/pai_arafa' target='_blank' title='Tweet Me'><img alt='Follow Me on Twitter' src='http://filex.e-labuan.com/icon/side_twitter.png'/></a></li>

<li><a href='http://paiarafa.blogspot.com/atom.xml' target='_blank' title='RSS This'><img alt='RSS Feed' src='http://filex.e-labuan.com/icon/side_rss.png'/></a></li>

<li><a href='http://www.e-labuan.com' target='_blank' title='Joim My Community Forum Board'><img alt='Join My Community Forum Board' src='http://filex.e-labuan.com/icon/my_forum.png'/></a></li>

<li><a href='mailto:pai_arafa@yahoo.com' title='Email Me'><img alt='Email Me' src='http://filex.e-labuan.com/icon/email_me.png'/></a></li>

</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
var duration = 150; //time in milliseconds

     $("#float-left ul li a";).hover(function() {
        $(this).animate({ paddingLeft: "30px" }, duration);
        $(this).animate({ paddingLeft: "20px" }, duration);
         }, function() {
         $(this).animate({ paddingLeft: "0px" }, duration);
          });
});
</script>

4. Make a style for that floating div. Find "]]>" and paste the following code before "]]>" :

#float-left { border: 0; position: fixed; top: 100px; left: 0; z-index: 9999;}
#float-left ul { margin: 0 0 0 -40px; list-style: none;}
#float-left ul li a { display: block;}

5. Finish


p/s : This is just a simple example. You can customize more.
You place the all JavaScript  "<script>" just before </body> tag for better web page loading. This is an optional.

Next tutorial is to make "pop-up div". YEAH!!

Write by Arafa Daming

Hello World! My name is Arafa Daming

This is my first post as a blogger. I'm a web designer from Sabah, Malaysia and this is my personal blog. This blog will cover about web designing, web programming, Search Engine Optimazation(SEO), all about Google, graphics designing, photo manipulation and related fields.

Objective of this blog is to share information and as a reference to everyone and myself. In my opinion, nowadays, the faster way  to learn about web designing is from internet; from professional tutorial, forum board or blog. So, self search ability is important (searching on search engine skills) and eager to learn. Practicing also is the main key to success.

Special quote :
"Before you speak, listen. Before you write, think. Before you spend, earn. Before you invest, investigate. Before you criticize, wait. Before you pray, forgive. Before you quit, try. Before you retire, save. Before you die, give."
-- William A. Ward {American Anthropologist}

Write by Arafa Daming