Image Map

26.8.13

Making The Most of a Blogger Blog {4 bloggy secrets}


*  *  *   *  *  *  *  *  *  *  *  *  

As most of you know, I blog on blogger. It's a good and a bad thing. (the bad) blogger isn't really customizable but (the good) it's free. And I like free!! I really wanted to make the most of my blogger blog by cheating  sneakily customizing it in ways google didn't intend it to be. HAHA.

Before I start let me say I'm NOT an expert, I just want to share what I've learned through designing my blog. Also all of these tricks are easy. Trust me, html confuses me too. 

So here is the first trick I have for you:


HOW TO ADD A "YOU MIGHT ALSO LIKE" WIDGET TO THE END OF YOUR POST: 

For the past few months you've probably seen this little guy at the bottom of each of my posts:

This widget is SO easy to get. All you have to do is go to Link within (dot) com and put your E-mail, website url and some other info in and follow the directions to install it.  Easy right plus it's free. This really comes in handy if you have some really good old posts that not very many people looked at.

HOW TO ADD AN INTERACTIVE HEADER: 

I've spent a lot of time researching blogger blogs that look and function like a real website. One thing I found almost EVERY blog had was a blog header with social media buttons, tabs, and the blog title. I was stumped, and couldn't figure out HOW IN THE WORLD they put links in they're header. And then, I found and amazing website called Image Maps. Basically you go to their website, upload a picture and then it takes you to a page where you can put links on certain places on your image. Let me show you:

So if you look at my blog header , you can click on ONE of the social media buttons and it will take you to that site, then if you click on one of the pages it will take you to a different page then the social media button did.  To sum it up, my header is just one image but there are many different links on it.

ADDING AN IMAGE TO THE FRONT OF EACH POST:

On my blog you'll notice that on each post, there is a little icon of scissors.

It really adds personality to your blog, and its SO easy to do.  Just follow these steps:

  1. Create the graphic that you want to use. It must be no larger than 20 pixels by 20 pixels saved as a .png  file.
  2. Upload it to a graphics host such as Photobucket or Imageshack.
  3. Log into your Blogger account.
  4. From your dashboard, click “Template”
  5. Click “Edit Html” and then “Proceed”
  6. Back up your template if you haven’t done so already.
  7. Do a search (Ctrl + F) for “h2″
  8. You are looking for a code that looks like this:
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;}
Replace the entire code above with the code below:
h2 {
background-image: url(INSERT DIRECT LINKE HERE);
background-repeat:no-repeat;
border: 0px double #FFFFFF;
margin-bottom: 5px;
padding: 2px 3px 2px 28px;
font:$headerfont;
font-weight: bold;
line-height: 2.0em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
Now you will insert your url into the space that says INSERT DIRECT LINK HERE. Preview and save! 

HOW TO MAKE A POST PHOTO GALLERY:

One blog I love has a photo gallery of all their past projects and a small snippet of the project. It seemed like a Guinness idea, but I had no idea how to get one. 



This blog this gallery is on is not on a blogger platform like I am, so I had no idea how to get a photo gallery. And then I had an idea!! I have been linking to link parties lately and thought the little linkey gadget might just work for my gallery. The link website I like to use is linkytools.com. This is because (again) it's free. Here's a picture of how my gallery turned out. 

Pretty much the same. 

ADDING AN "ABOUT ME" BOX:
Another common attribute I noticed in a lot of blogs was having a small box at the top of the sidebar with a brief summery of you and your blog. Then if you wanted to know a little more about the person there was a link in the box that you can click on to get to their full "about me" page. Here's mine:
 If you click "read more about me" text on my box it will take you to the full about me page. For this trick I used my new friend, image maps again. here's all you have to do:
1. in photo shop create an image with all the words pictures and everything, that is as bid as your sidebar. 
2. upload it to image maps and  insert a rectangle where it  says "read more about me". 
3. copy the code and paste it into a HTML box on blogger. 

_______________________

if you have any further questions, feel free to e-mail me (click on the mail button on my header)


No comments:

Post a Comment