by | January 23, 2016 · 2:31 am
↓ Jump to Comments

How to make a “floaty” banner in WordPress.com

Did you know that if you pay for the Premium account, you not only get rid of pesky third-party ads, you also get a list of benefits you are probably not using? Like CSS, or custom design?

I’m kind of excited and scared at the same time – I’m one of those people that knows how to drive cars and use computers, but not exactly sure how the cars or computers work. Still, I’m not gonna fall behind the times – I have to regularly force myself to try something new. Like buying a Surface Pro, even though it means a week of crying “Where did my file go?” and “I want my Grandpa PC back!”

This time it will be “Oh my God, what have I done to my website?”

By the way, have you noticed what I’ve done? It’s in the right top corner – see the invitation to buy my book? See how it won’t go away, no matter how fast you scroll? Cool, huh…do you want one for your website? I will walk you through it step-by step while it’s still fresh in my mind.

I started with WordPress support post on Custom design. I didn’t understand half of it, except that you can “try it now” without purchasing an upgrade, which is a good news for those with the free accounts.

I then read through some of the CSS Customization Forum, backed away from the computer, and cried quietly in the corner. That’s my process, okay? You should have seen how much I cried over essays in highschool…anyway, the Forum will be a good resource later on, when I start getting all fancy with my trickery. For now, I will climb the mountain  one step at a time. The first step I’d decided to take is create one of those (mildly obnoxious) floating invitations to buy your book or sign up for an email list. I have to credit alfageek with generously sharing the original code for an invitation to buy a book. Turns out that once you have a base to work from, learning CSS can be a lot of fun as you tinker with values and then refresh madly, to see what your tinkering has done.

Ok, now for the promised easy steps:

STEP 1. Make a widget of your banner – have a look at how to create a widget for your Amazon book or how to create a widget using Amazon affiliate link.

STEP 2. Once you have a working widget, go to the wp-admin version of your site, and click on Appearances-Customise-CSS. This is what my CSS looks like now, with custom code beginning on line 6:

CSS code

STEP 2. Copy this code and paste it to your CSS window:

#text-4 {
font-weight: bold;
position: fixed;
right: -2px;
top: 120px;
margin: 0;
background: white;
border: solid 2px #ddd;
padding: 4px;
}

#text-4 h3 {
font-size: 16px;
line-height: 140%;
}

STEP 3. Almost finished! Change number “4” in lines 6 and 17 above to the order of your widget in the sidebar. So, if your widget is at the very top, change it to read “text-1” and so forth.

THAT’S IT! Now, the fun part! Play with the code line-by-line and see what it does:

6. “text-4” refers to my widget being #4 in the sidebar. Change number to reflect the order position of your widget.

7. optional line – if you delete it, the font will not be bold.

8. “fixed” position means it will stay put while you scroll through the page.

9. “right” can be replaced with “left” – that’s where it will appear on the page. -2px refers to how far it is from the edge. Mine has a 2px (2 pixels) border around it, so -2px shaves off the border on the right.

10. “top” can be replaced by “bottom”. Play around with the pixel number until you get it to the exact spot you want.

11.”margin” – add a margin, if you wish. I have none.

12. “background” – I have white. Have a look at CSS Tricks for codes to some alternative colors.

13. “border” – change pixel number to make it thicker, or delete this line if you don’t want a border. Change color code to match your website.

14. “padding” – controls the amount of background space around the text. Increase the number to make your banner larger, while the text stays the same.

15, 16 and 17 – I have no idea, just leave as is or play with it.

18. “font size” – did not seem to make a difference, perhaps it’s a combination of font size and line height (line #19).

19. change line height to make font larger.

Have fun!

29 Comments

Filed under Self-publishing and marketing

Tagged as , , , , , , , , , ,

29 responses to “How to make a “floaty” banner in WordPress.com”

  3. colingarrow
    January 23, 2016 at 4:38 am

    I did notice the floater but hadn’t got round to wondering how you did it. Nice one.

    Like

    Reply
  4. Terry Nelson
    January 23, 2016 at 5:42 am

    I just purchased a WordPress site yesterday, but have not gone premium just yet. I do like that I am not the only one crying in the corner trying to understand what they are talking about. I am making progress so thank you for the information and I wish you well

    Liked by 1 person

    Reply
    • Ana Spoke
      January 23, 2016 at 9:00 am

      You’re welcome, Terry 🙂 Now I wish I was this diligent blogging about it early on – I remember there were quite a few hiccups on the way. One step at a time and you will have a great site – now that I know what I’m doing, I love WordPress

      Like

      Reply
  5. Elizabeth Jay
    January 23, 2016 at 7:55 am

    Your cool floaty banner is why I purchased your book – you made it so easy! 😀

    Liked by 2 people

    Reply
  6. adeleulnais
    January 23, 2016 at 9:12 pm

    Thank you so much for sharing this with us.

    Liked by 1 person

    Reply
  7. saharafoley
    January 24, 2016 at 4:03 am

    Not sure how I feel about those floaty banners. All my books are on the right hand side of my blog. I wouldn’t want them overshadowed with a banner. Maybe if it could go on the left hand side.

    Liked by 1 person

    Reply
  8. Coffee2words
    January 24, 2016 at 8:24 am

    The curly brackets (}{) group your CSS code into attributes for each part. It’s so you can style the heading in one way, and the text in another. So you must ensure that they open and close or your code won’t work! Line 17 in your code is referencing H3 text 4: which is the heading, it’s a heading size 3 that sits above the text in your floating box. You can change the font, size, colour etc the same way you do I the text. Have fun!

    Liked by 1 person

    Reply

  9. Pingback: How to make a “floaty” banner in WordPress.com – Random Reads!

  10. Coffee2words
    January 24, 2016 at 8:30 am

    Grr… WP are my reply. The curly brackets are used to group all the styles for each element of your code so you can apply different styles to the text and the headings. They need open and close as they appear in your image or the code won’t work. Line 17: #text 4 h3 – it is the heading in you floating text box. You can style it like you have the text, change colour and font etc.

    Liked by 1 person

    Reply
  11. nananettie1969
    January 24, 2016 at 9:05 am

    Thank you for letting me know this process. Most of all thanks for saying you walked away and cried! I’m early in the process of glamouring up my blog and there were days….I did just that!

    Liked by 1 person

    Reply
  12. mopana
    January 24, 2016 at 8:17 pm

    I look forward to do something like that one day 🙂 After my blog will be developed enough

    Liked by 1 person

    Reply

  13. Pingback: Floating Banner | Olive These Words

Leave a comment