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

Privacy Preference Center

Consent Management

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalised web experience.
Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

Privacy Policy

You read and agreed to our Privacy Policy.

Necessary Cookies

These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site may not work then.

Cookies Used

Required
positivelysplendid.com

Performance Cookies

These cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous.

Cookies Used

Required
Google Analytics

Targeting Cookies

These cookies are set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant ads on other sites. They work by uniquely identifying your browser and device. If you do not allow these cookies, you will not experience our targeted advertising across different websites.

Cookies Used

Required
Adthrive