Showing posts with label How To. Show all posts
Showing posts with label How To. Show all posts

How do I...? Add Badges
2008-03-06


On special email demand of a special friend:

How do I...

... add a my badge with a textarea?

On several blogs, you´ll see a box under the blog's badge with the HTML code for people to add the button to their own blogs, like mine:


Pimp Your Blog


All your readers have to do is copy and paste the HTML into their own sidebar, and *BOOM* there's your pretty badge linking back to your site. Cute.

So, how do you do this?

Here´s the html code:

<a href="http://YOUR URL HERE"><img src="http://YOUR IMAGE URL HERE" border="0" height="125" width="125" /><textarea width="125px" rows="3" cols="15" class="tiny" name="1"><a href="http://YOUR URL HERE"><img border="0" width="125" src=" http://YOUR IMAGE URL HERE" height="125" />/a></textarea>



This is the HTML coding example for the Pimp Your Blog badge

<a href="http://pimp-your-blog.blogspot.com">
<img src="http://i196.photobucket.com/albums/aa267/Pimpyourblog/PYB-badge.jpg" border="0" height="125" width="125" />
<textarea width="125px" rows="3" cols="15" class="tiny" name="1"><a href="http://pimp-your-blog.blogspot.com"><img border="0" width="125" src=" http://i196.photobucket.com/albums/aa267/Pimpyourblog/PYB-badge.jpg" height="125" />/a></textarea>



Have fun!

pimped by @ 2:09 PM 1 comments

Labels: , , , ,

How do I...? Make Scroll Boxes
2008-03-05


On special email demand of a special friend:

How do I...

... make a scroll box?

You might have noticed that sometimes a blog will have a scrollable box in the sidebar. The scroll box is a neat way de-clutter your sidebar. You can display your blogroll, awards, family photos, etc.



Here´s an example from my main blog:

Blog Blings


Blogworld Moments


First I want to show you the code we'll be using and explain how it works.
This is the code you'll place in your sidebar:

<div style="border: 1px solid #000000; overflow: auto; height:150px; width: 150px; color: #000000; background-">YOUR CONTENT HERE</div>

The <div style=" "> and </div> are the opening and closing HTML tags you need to make the scroll box. Everything between the quotes in the <div style> tag tells the browser how to make the box appear on the screen. Let's go through each of these items.

  • border:1px solid #000000; - This tells the browser to make the box with a one pixel border in black. You can change the color by typing another color code matching to your blog or you can change the line type by typing dashed or dotted.


  • height:150px - This tells the browser to make the box 150 pixels tall. You can change this variable by typing a different number (e.g., 200). You can play around with this until you like the look.


  • width:150px - This tells the browser to make the box 150 pixels wide. Again, you can control the width by typing in a different number.


  • color:#000000; - This is the color of the text within the box. You can use any color code here.


  • background-color: #FFFFFF; - This is the color of the inside of your scroll box. You can change this color by simply typing another color code instead of #FFFFFF;

Now that you understand how the tag works, simply enter the content you want to appear in your scroll box!

For example, if you are going to show an awards collage linking to your awards site, like I did above, it would look like this:



<div style="border: 0px solid #FFFFFF; overflow: auto; height: 180px;
width: 220px; background-color: #FFFFFF; ">

<a href="http://coffee2go.blogspot.com/2007/03/blogworld-moments.html" target="_blank"><img src="http://i196.photobucket.com/albums/aa267/Pimpyourblog/coffee2go_awards_2008.jpg" /></div>


Now I will walk you through putting the code in your sidebar.

  1. Log in to Blogger.

  2. Go to Layout > Template > Page Elements > Add a Page Element.

  3. Scroll down until you see HTML/Java Script and choose Add to Blog.

  4. Cut and paste the following code into the Content field (you can leave the Title field blank):

    <div style="border: 1px solid #000000; overflow: auto; height:150px; width: 150px; background-">YOUR CONTENT HERE</div>


  5. Click Save Changes.

  6. Preview your blog to see how it looks. Move the element around as needed (simply drag and drop with your mouse).

  7. Click Save.

Have fun!

pimped by @ 1:17 PM 0 comments

Labels: , , ,

How do I...? Favicons
2008-03-03


On special demand of a special friend:

How do I...

... add a favicon / shortcut icon to my blog?

A favicon, also known as shortcut icon, website icon, page icon or url-icon is a small, square icon, usually 16×16px in size, that is displayed alongside the URL in the web address bar of a web browser.

The reason for using a favicon is branding. Most modern web browsers allow tabbed browsing. This means that a user can open several websites in the same browser window. A nice favicon design will distinguish your blog / website from the other websites.

Some modern browsers also allow favicons to be displayed in the Bookmarks section. Again, this will ensure your website will be distinguished from the others.

Guide to install Favicon
Adding a favicon to your blog is a good way to distinguish your blog from the millions of other bloggers around.
  1. Choose a picture you like
  2. Use a photo Editor to resize the picture to 16x16 pixel .gif for best 1:1 resolution and adjustment
  3. Host the 16x16 pixel .gif on any photo host (like photobucket)
  4. Add your Photo host url of the icon to the following code below


<link href='URL of your icon file' rel='shortcut icon'/>




Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.

If you are still not sure how to get to the XML of your blogger, then follow these steps carefully:



















When you decide to change your blog favicon in future, you can just change the hosting link of the image with a new favicon and that´s it!

pimped by @ 12:40 PM 1 comments

Labels: , , ,

Subscribe to: Posts (Atom)