How can i make a “floating button” like this? (please look inside at the image)

Viewing 8 replies - 1 through 8 (of 8 total)
  • masud7827

    (@masud7827)

    There are two ways to do it.

    #1 go to and made a one for you.

    #2 Add this plugin

    Regrades
    Abdulla Heal Masud
    Ahmasud WordPress Design Services

    masud7827

    (@masud7827)

    sorry i forgot the link here is it

    #1 https://www.go2web20.net/twitterFollowBadge/

    #2 https://wpburn.com/wordpress-plugins/wp-followme-plugin

    Thread Starter sharepointmag

    (@sharepointmag)

    Thank you very much. I have searched, too, and found that i could do something like this with an simple DIV container and the css property FLOAT.

    I will give it a try.

    regards
    yavuz

    actually…if you want it stuck to the side of the page….that’s not a float….

    it an absolute…..

    your html: (this assumes you have a 114×111 image called twitterLogo.png in a folder called images in your theme. Adjust these things accordingly)
    <div id="twitterImg"><a href="https://twitter.com/YOU"><img src="<?php bloginfo('template_url'); ?>/images/twitterLogo.png" width="114" height="111" alt="Follow us on Twitter!" /></a></div>

    Your css is something like:

    #twitterImg {
     position: absolute;
     right: 0px;
     top: 50px;
     }

    something like that will work for what you want I think…. (someone jump in if I’m not thinking straight)

    the right 0px lines it up on the right side, the top 50px tells it how far down the page to go, so you have to adjust that to look right.

    Now for the confusing part, you have to position the div in your code outside of any other div that has a position:relative setting to make it absolute to your screen, and not absolute to another div box

    chrisboggs

    (@chrisboggs)

    I believe the easiest way to do it is to use something like this:

    #twitterImg {
    position:fixed;
    right:0;
    top:50px;
    }

    Using position:fixed; takes your div out of the document flow completely.

    hi guys, just to clarify, which template file does the div html need to go into if i want the button showing one every page and post etc. im thinking index.php.

    index.php does your posts
    page.php for single pages
    single.php for individual posts

    This is a generalization….. depends on your theme…

    a good thing would probably be to include it with header.php actually. Then it always gets called

    @herbiehysteria put the div in header.php just after the <body>
    and it sould be position: absolute;

    @chrisboggs it sould be absolute so it wont alter any of the page structure.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How can i make a “floating button” like this? (please look inside at the image)’ is closed to new replies.