Tag: footer

how to add top button in wordpress website

Adding top button link is always good for users of blog. This is good for SEO also and your blog became more seo friendly this way.

how to add top button in wordpress

You just need to add the following CSS code into style.css file.


#topbutton{display: block;border: 0;position: fixed;  bottom: 20px; right:0;

After this open your header.php file from your wordpress theme folder and after body just add following link code in that file.


<a name="top"></a>

After this open your footer.php file and at the end of body tag add following code in that file.


<a href="#top"><div id="topbutton">
bloginfo('template_directory'); ?>/images/top-button-wordpress.png" />
</a>

put following image in your wordpress theme’s images folder. Just right click and save the image and put that in your images folder.

You can change css as per your requirement. This article is written by purabtech.in. If you are having any dobuts then please write to me.

Your button link will look like as follows:

add top button in wordpress
add top button in wordpress

footer stickable to end of the browser window without fixed position

Many web developer always think about why footer is not sticking to end of browser. In this tutorial we will show you to footer stickable to end of browser.

This is scenario:
If content is less than footer need to go bottom of browser and if content is more than footer will go down as per content.

Many people think this is CSS developer’s But I am not think that way. because this is totally different problem.

Some people suggest to use header, middle container and footer height in percentage. But that is wont be possible for all the time.

Here I will give you the solution. Use following JavaScript in document.

<script type="text/javascript">
 var header_height = 150;
 var footer_height = 100;
var reduce_height = header_height+footer_height;
 browserHeight = 0;
 if( typeof( window.innerHeight ) == 'number' ) {
 //Non-IE
 browserHeight = window.innerHeight;
 } else if( document.documentElement &amp;&amp; (  document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 browserHeight = document.documentElement.clientHeight;
 } else if( document.body &amp;&amp; (  document.body.clientHeight ) ) {
 //IE 4 compatible
 browserHeight = document.body.clientHeight;
 }
 // window.alert( 'Height = ' + browserHeight );
 var min_height = browserHeight-reduce_height+ +"px"
 document.write('<style>#middle_container{min-height:'+ min_height +'}</style>');
 //document.getElementById("middle_container").style.minHeight = browserHeight-146+"px";
</script>

Here in this JavaScript I am assuming middle_container is your main block of content. You can change the variables as per your need.

footer stickable to end
footer stickable to end