Wednesday, November 24, 2010

How to make a blog roll

I recently got asked in my blog comments- How to make a blog roll box.
This is a box the someone can take premade html code and simply copy and paste it anywhere, and the image, blinkies, link list, will show up on the site they are posting.

Examples-
Do you have a blinkie blog roll that you would like to offer in coded html so that others can easily just snag the code and copy it to a list of linked blinkies on their own blog?

If so a scrolling box containing the encoded htlm is what you need.
Now I am no expert... but this should work for you :)

Now on to the tutorial-

1. We will need a VERY useful site I use often for all the encoding and decoding-
http://centricle.com/tools/html-entities/ I recommend bookmarking this one! It is so helpful!!

Anytime you need to show the code format you can copy html and paste it into a box on the above site, then click the encode button. It will then Encode your html so that the code looks like html. If you try to copy and paste an html code without Encoding it- it will just show the item (image) it will not show the code.

2. We need is the scroll box- without a scroll box the coding would take up A LOT of space!
Here is an image of the box-

INSERT HTML THAT HAS BEEN ENCODED HERE



And here is the code you can copy as a template for your box

<pre style="background-color: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 10px; overflow: auto; padding: 5px; width: 75%;">
INSERT HTML THAT HAS BEEN ENCODED HERE
<code>
<script type="text/javascript"><br />replaceMath( document.body );</script></code></pre><b:if cond="data:blog.pageType == " item="">
</b:if>

3. The blinkie-
Here is the GingerScraps site fan blinkie-

Photobucket



This is what that html code looks like- It is linked to GingerScraps and set up to open the link in a new tab.
<br />
<a href="http://gingerscraps.net" target="_blank"><img border="0" alt="Photobucket" src="http://i106.photobucket.com/albums/m255/gingerlooper/Blinkies-Do-Not-Remove/GS_Fan_Blinkie.gif" /></a>
<br />

You can take this code to fill in the blanks for your blog roll-
<br />
<a href="SITE ADDRESS; target="_blank"><img border="0" alt="Photobucket" src="HTML DIRECT LINK IMAGE CODE FROM PHOTOBUCKET" /></a>
<br />

4. Let put it all together-
The scroll box code + the ENCODED html for your blog roll

<br />
<a href="http://gingerscraps.net" target="_blank"><img border="0" alt="Photobucket" src="http://i106.photobucket.com/albums/m255/gingerlooper/Blinkies-Do-Not-Remove/GS_Fan_Blinkie.gif" /></a>
<br />




5. To wrap it all up....
  1. Open up a text document or editor to write up your code for your blog roll.
  2. Take the code template for the scroll box- copy and paste it to your editor.
  3. Take the code template for a linked image.
  4. Fill in the blanks with the link and the image code.
  5. Take the completed image html code- copy and past it into the BOX HERE and click Encode.
  6. Copy the Encoded code and Paste it into the Spot in the scroll box template "INSERT HTML THAT HAS BEEN ENCODED HERE" (remember to remove the INSERT HTML THAT HAS BEEN ENCODED HERE text- so it doent show up in your blog roll)
  7. Now repeat until your blog roll is complete.
  8. Once your whole blog roll code is done- copy and past it into a html widget and tadaa :) you can take a look at my blog to see an example of the finished product. As well as what the blog roll itself will look like.

Thank you to testing-blogger-beta.blogspot for the sample code for a scroll box.

1 comment:

VW said...

Cool. Thanks for the info and Happy Thanksgiving!

*Note*

*Some freebies only last for 1 day... and depending on your time zone by the time you get here you might only have a short time to download. If you like something get it ASAP! You just never know some freebies last a long time and some expire very quickly. If you get to a page and the freebie is not there most likely it has expired.*