How to Use HTML/JavaScript Gadget on Blogger

Last week I showed you how to personalize your "About Me" section on your blog. Now I am going to show you how to add an image in a HTML/JavaScript Gadget.

First upload your profile image in a site like Photobucket, and copy the address of the image. Once you have the address, follow the next steps.

1) Go to "Layout" then "Add a Gadget"

2) On the pop up window, select "HTML/JavaScript" (it's all the way down).

3) In the next window, you will need to insert your html code:

4) If you uploaded your image on Photobucket, select the HTML code, paste inside of the window and go to the next step. If not, I'll break down how the code reads:

<a href="your image address goes here" title="Anna Dusek"><img src="your image address goes here" alt="About Anna Dusek" style="border:none;" /></a>

5) If you would like the image to be centralized in the sidebar, use div tags as follow.

<div align="center">
what you want centralized goes here
</div>

It will look like this.

<div align="center">
<a href="your image address goes here" title="Anna Dusek"><img src="your image address goes here" alt="About Anna Dusek" style="border:none;" /></a></div>

6) Your final result will look like this

♥ Enjoy!

Read More

Anna Dusek

Share Tweet Pin It +1

0 Comments

How to Personalize About Me Section on Blogger

If you don't personalize your "About Me" section on your blog, it will show your Google+ Profile as showing on the picture below. To change it just follow the next steps.

1) First, delete the "about me" showing on your blog, go to "Layout", then click "Edit" where show "About Me".

2) On the pop-up window click "Remove" and the gadget will be gone.

3) Now to create your own personalized "about me", you need to "add a gadget".

4) Select HTML/JavaScript (it's all the way down)

5) In the next window type about yourself and click "save". You can also insert an image and links.

6) Here's your new "about me" section.

♥ Enjoy!

Read More

Anna Dusek

Share Tweet Pin It +1

0 Comments

How to Personalize your Header on Blogger

Blogger offers your two ways to personalize your header. One is through it's own tools, and mainly you will have your a vary basic header, the other is uploading your own image. I'll show you both ways here today.

Using what Blogger has to offer:

My original template used to look like this. 

1) Go to "Template" then "Customize".

2) Go to "Advanced" then on the next tab click on "Blog Title" and select the font that pleases you best. You can also change the size and color in the same tab.

3) Here's the final product.

Using what your own image:

I was not happy not having a completely personalized header, so I designed my own using photoshop. To upload a picture as your header follow the next steps.

1) Go to "Layout" then click on "Edit" on the "(Header)" section.

2) On the pop up window click on "Choose File" and Select your desired file. Select "Instead of title and description" in the Placement section, to show only your new picture as the header.

3) You can preview your header, to make sure you selected the correct file. If is the correct image, click on save.

 4) Now you can check your blog, and you will have a completely personalized new header.

♥ Enjoy!

Read More

Anna Dusek

Share Tweet Pin It +1

0 Comments

How to Center Your Blog Header on Blogger

1) Go to "Template" then "Customize".

2) Select "Advanced", then "Add CSS".

3) Copy and paste the following code in the available field and click "Apply to Blog"

#header-inner img {margin: 0 auto !important;} 

#header-inner {text-align:center !important;}

4) Here's your centralized header.

♥ Enjoy!

Read More

Anna Dusek

Share Tweet Pin It +1

0 Comments

How to hide your NavBar on Blogger

Everyone that uses Blogger platform when starting out has the ugly NavBar on the top of your pages (you know, the one saying "Create Blog" and "Sign In")

I honestly find it kinda ugly, since I appreciate the idea of having a clean website look on my blog. To hide it is pretty simple.

1) Go to "Layout" and click in Edit where says "Navbar".

2) In the pop-up window select "Off", then save.

3) Your Navbar is gone!

♥ Enjoy!

Read More

Anna Dusek

Share Tweet Pin It +1

0 Comments

How to Center your Blogger Pages Menu

When choosing one of the templates offered by Blogger, the pages menu is aligned to the left.

Not everyone likes this layout, some, like me, prefer it to be centralized. 

Follow the next steps and you will be able to centralize your menu also!

1) Go to the “Template” area within Blogger and click on "Customize".

2)  In "Advanced" select “Add CSS” tab in the second column (it’s way down the bottom).

4) Paste the following code into the CSS window.

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

5) Click "Apply to Blog" on the top right corner.

♥ Enjoy!

Read More

Anna Dusek

Share Tweet Pin It +1

0 Comments