Positively Splendid {Crafts, Sewing, Recipes and Home Decor}

Handcrafted. Splendidly.

Creating a Welcome Box for Your Blog

By

PinYummlyPrint


Hi, everyone! Today’s Simple Solution is actually in response to the requests I’ve received from a few lovely ladies for a how-to for how to create a welcome box like the one above my posts section. It really is quite simple if you take the time to dissect the meaning of all of the HTML mumbo-jumbo required to form it!


I never cease to be amazed at how much you can do with a bit of HTML. My inspiration to create a welcome box of my own came from the impeccable Tidy Mom (love her blog!). What a terrific way to greet visitors as they stop in for a visit!

All set to create a welcome box for your blog? Let’s get started!

Below is the format you’ll use for your code…

Insert your welcome greeting here!

In this section, you can add links to your Facebook, Twitter and subscription information.


Whoa, Nelly! Looks like a lot of nonsense, doesn’t it? Let’s discuss just exactly what all of that stuff means.

 …


The section of code above is what comprises the box portion of your welcome message. You can tweak the appearance of your box my manipulating some of the portions of the code…

background: #FFFFFF;

The 6 numbers and/or letters after the # sign above specify the background color of your box. Use an online color chooser like this one to select a color you like, and then input its 6-digit code in those spaces. (FYI: #FFFFFF represents a white background.) 

border:1px solid grey;

The above code is what you can use to tinker with the appearance of the border of your box. You can increase or decrease the numeric value before “px” (pixels) to make your border heavier or lighter, if you desire. Change the word “solid” to “dashed” if you wish your box to be framed in a dashed border. Replace the word “grey” with the name of the color of your choice to customize the color of your border.

Ok – you’ve made your box! Now, let’s add some text to it.

You will place the code for your text between this line…


and your closing 

 


Each new paragraph of text will need to be framed in a

 set. You can manipulate the appearance of your text by using  tags  for bold, or  tags or Italics.


So, here is an example of what your paragraph text might look like (in red), all nicely framed within your border code (in grey).

Welcome to my blog!

 

(Notice this first paragraph of text is in bold, as is indicated by the tags.)

Subscribe to my blog via Facebook or Twitter!


Now, let’s polish things a bit further by centering everything. This can be done simply by adding center tags at the beginning and end of your code as shown below:

Welcome to my blog!

 

Subscribe to my blog via Facebook or Twitter!


So, you’ve hammered out the details of your code. Now, let’s add it to your blog! From the Design tab of your Blogger account, click on Page Elements. Click “Add a Gadget” and choose “HTML/Java Script.” Copy and paste your code into this box, and then click on “Rich Text.” Highlight the portions of your text that you want to be linked, and click on the “Create Link” tab on the top right to specify where each of the links should go. Click “Save,” and head over to your blog to admire your work!

Happy blogging!
Photobucket

Reader Interactions

Comments

  4. Jello says

    excellent! thank you so much for sharing… not a lot of info about those CSS codes out there. your post’s so easy to follow! thanks so much! love, Jello

  7. PaChomp says

    Thank you! I added a note to the bottom of my blog and I’m thinking of adding a little welcome note to the top later. I really appreciate you, not only posting the code, but also explaining them.

  8. Craig says

    Wow. That was a really really thoughtful and kind thing to do. Showing the code – and explaining.

    This is my first time here since meeting you at Blissdom. Going through all the business cards – and doing life at the same time – harder than I thought.

    I heart the Colossians verse at the top. ANd your heart shines through in the post – and your about section and a bunch of posts I just read.

    God Bless and keep you and yours.

  14. Our Seven Dwarfs says

    Thank you so much for this tutorial. I have been wanting to add this to our blog for awhile and didn’t know how! Thanks, it worked beautifully!

    Jill of oursevendwarfs.com