Tag Archives: tips

Quick How-To: add a static welcome page to WordPress.com without losing your blog

Hi, guys!

I’ve been MIA for a couple of weeks, and for a good reason – as you’ve probably noticed, I am now running #ComedyBookWeek. It’s been a full-time job for the last month or so, what with setting up an official website, approaching 100 book bloggers, and gathering 112 (and counting) books to participate. Not to mention the daily highlights and social media – luckily I’m on leave right now, otherwise, I’d have a nervous breakdown!

Still, I had to take a little timeout and post this How-To, because it took me forever to figure out what should take you five minutes to do. If you’ve looked on #ComedyBookWeek webpage lately, you might have noticed that the front page is now a static one, showcasing all the books on offer. To see the actual blog posts, you now need to click on the “Blog” tab at the top. This makes the page look more professional from the event point of view, rather than the WordPress standard landing page being a blog. Plus, it gives more weight to the books on offer. Incidentally, this is what most professional authors do – when you go to their website, the welcome page is about the author and their books. I am going to revamp this blog in the same way, so I wanted to give you heads up and write down how I did it for #ComedyBookWeek webpage .

Please follow the steps below exactly – if you only assign the front page, you will notice that your blog will DISSAPEAR! And we don’t want that.

Here are the steps:

  1. Create a landing Page that you want to be your “front” page. For this blog, it will be my “About Ana” page. Here are all the pages used in comedybookweek.com:Add page
  2. Create a “Blog” page. Just trust me – add a new page, call it “Blog” or whatever you want, but DON’T WRITE ANYTHING in the body/text box.
  3. Now go to your WP Admin, and in Settings-Reading, assign two static pages as shown below. Assign your welcome page to “Front” and your empty “Blog” page to “Posts.”Reading settings
  4. In Appearance-Menus, add pages and rearrange them as desired. Here’s what #ComedyBookWeek menu looks like:Menus

That’s it!

You’re welcome 🙂

22 Comments

Filed under Self-publishing and marketing

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