Bl0gHelp got their homepage at Neopets.com

Bl0gHelp - Blog and Guild Layout Coding Tutorial

A shop blog on Neopets is an image with a shaded area in which a scrolling text box is placed (note: the shaded area was not coded there, it is part of the image). Click here to get premade Neopets blogs. If you're copying premade blog codes, make sure to copy the entire code (especially the bottom part) or else you will find lots of other stuff you don't want in the blog. Guild layouts are just giant blogs but with more scroll boxes to write in. If coding a guild layout, learn how to code a blog with one scrollbox first, then go ahead and try the code for 3+ scrollboxes.

Don't use these codes if you want to put your lookup in a blog. Instead, check out the layout section on l00kuphelp petpage for proper lookup blog codes.

See that light layer of white that's on the bottom part of the blog? I'll show you how to make that in MS Paint and a few other programs as well. Go offsite, download and install these programs at your own risk! I have GIMP http://www.gimp.org/ (FREE), Paint Shop Pro www.corel.com/ (free 30 day trial, around $60 for full version) and Photoshop http://www.adobe.com/products/photoshop/main.html (free 30 day trial, around $600 for full version). Remember, Neopets allows you to use only .jpg .jpeg .gif .bmp and .png images on you pages.

I have three ways to make the blog image in MS Paint.

MS Paint (a) Many thanks to contagious_smile! Without her insight, this part of the guide would not have even existed. The idea is to create the blog image, view it with your internet browser, highlight it (thus creating the transparent effect), screenie it, crop the transparent part and paste it on the original blog image. First create your blog image.

Save it to desktop. Right click it, open with.., choose program if needed, select an internet browser you wish to use (thanks mintblossom for the tip!). Set up the hightlight color by going to Start, control panel, display, appearance tab, (Vista: Start, settings, control panel, personalization, window color and appearance), advanced, click on the word "Selected" in the picture, change Color 1: to a light color (in the sample I made, I used a very light grey, it might have looked better in FF if I used white), hit OK, Apply. Go back to the browser window, Ctrl + A to highlight the entire image. If you used Internet Explorer, you'll see a checker board highlight.

In Firefox, a layer of the highlight color is added to the entire image.

Screenie it (check out screeniehelp if you don't know how to make a screenie). Paste it in MS Paint with Ctrl + V. Select the dashed rectangle tool. Make a square on the image where you want the box to be. Cut it out with Ctrl + X (a white box will appear where the rectangle was).

Open the original blog image, paste the box, position it perfectly and save.

IE
FF

MS Paint (b) Use IE and MS Paint combo without the checker board highlight effect. Thanks mintblossom for this method! Open you image in MS Paint, go to Image then Stretch/Skew. In the stretch box, put 200 for both the horizontal and vertical number and hit ok. Save it and open it with IE. Set up the hightlight color by going to Start, control panel, display, appearance tab, advanced, click on the word "Selected" in the picture, change Color 1: to a light color like white, hit OK, Apply. Go back to the browser window, Ctrl + A to highlight the entire image.

Open the enlarged blog image again. Ctrl + V to paste the shaded box. Click somewhere off the image to unselect everything (very important that nothing s selected before shrinking again). Go back to Image, Stretch/Skew, this time change the percentages to 50 and hit OK and save!

MS Paint (c) The idea is to put the blog image on a petpage, position white transparent boxes over the image and screenie it. First make your blog image and upload it (small upload guide after the Photoshop tutorial). Put the image on a blank petpage with this code. Replace my URL with yours.

<img src=http://images.neopets.com/games/new_tradingcards/lg_spardel_day_2005.gif hspace=50 vspace=50> Now the painful part. Position white boxes on the image with this code. Use as many of this code as needed. Increase the top number to move the box down, increase left number to move it right, adjust the width and height of the white box and change its opacity if you wish. You'll have to tweak the code, check the petpage, tweak the code, check the petpage etc. <div style="position:absolute;top:70px;left:70px;width:200px;height:250px;background:white;filter:alpha(opacity=50);opacity:.50"></div> After you get it perfect, screenie it (check out screeniehelp if you don't know how to make a screenie). Paste it in MS Paint with Ctrl + V. To crop it, select the dashed rectangle tool, select just the image, cut it out with Ctrl + X, File, New, don't save, find the tiny black square at the bottom right corner of the new image, drag it in to make it small (smaller than the blog image will be) and paste with Ctrl + V. You should see your spiffy blog image now then save.

GIMP Open your image. Go to Layer, New Layer, you can leave the width and height as is, make sure White is checked off in the Layer Fill Type and hit OK . Then go to Dialogs, Layers, a little box should pop up, set the Opacity to anywhere in the middle for now. Back in the window with all the tools, select the rectangle with the dotted lines around it and then make a square on your image where the text will go. In the Image window, go to Select, Invert, then Edit, Cut. Finally, go back to the Layers window and fine tune the opacity of the white box.

Paint Shop Pro Open your image. If your Layers window isn't already open, go to View, Palettes, Layers. Click on the New Raster Layer button in the Layers window then hit OK. Select the rectangle tool with the dotted lines around it and then make a square on your image where the text will go. Now select the paintbucket tool, set your color to white and click inside the square you made. Finally, go back to the Layers window and fine tune the opacity of the white box by moving the slider to the right of the eye.

Photoshop Open your image. Go to Window, then Layers and a small window will pop up. There's a button on the bottom of that window to Create a new layer, press it. Back in the main window, go to Edit, Fill..., set the Use: to White and hit OK. In the Layers window, set the Opacity to the middle somewhere. In the tools window, select the square with the dotted lines around it and then make a square on your image where the text will go. Go to Select, Inverse, then Edit, Cut. Finally, go back to the Layers window and fine tune the opacity of the white box.

Upload the blog image Before we code the blog, your image has to be uploaded to the internet somewhere. You can go to Google.com and search for.. free image host ..and you'll find tons of hosts. Some image hosts require you to sign up and submit some personal information. All image hosts are pretty much the same. Sign up, find the page where you can start uploading images, click on the "browse" button to find the image on your computer to upload, then hit some upload button. After successfully uploading the image, you will be redirected to a page with some information about the image. The only thing you need to look for on that page is the URL of the image which looks something like.. http://images.neopets.com/neoboards/avatars/uni.gif It always starts out with http:// and ends in an image format like .gif .jpeg .jpg .png or .bmp You can check if you copied the right thing by pasting the URL in the address bar, hit enter and see if you image comes up.

The Quick Copy and Paste Tutorial
Windows: Position the mouse cursor at the beginning of the piece of text you wish to copy. Click and drag to the end of the piece of text to highlight it all (you may let go of the mouse button now). On the keyboard, hold down the Ctrl button and hit the C button to copy it all. Then click in a spot where you want the copied text to appear. Paste by holding down Ctrl and pressing V. Test this process in the area provided below.
Mac: Position the mouse cursor at the beginning of the piece of text you wish to copy. Click and drag to the end of the piece of text to highlight it all (you may let go of the mouse button now). On the keyboard, hold down the z button (it's also the apple button) and hit the C button to copy it all. Then click in a spot where you want the copied text to appear. Paste by holding down z and pressing V. Test this process in the area provided below.

Copy this entire sentence and paste it anywhere in the box below.

There are two ways to code a blog: The way Neopets codes them by using html table codes and the other way by using div elements (easier and will not work on pet lookups : P ).

Coding blogs the easy way. You don't have to know anything about coding. You just need to know how to copy and paste and do a little math. Below is what the code will look like for a blog with one box and the highlighted parts are the only things you will have to change in the code.

One scrollbox blog In the text area box below is the code. You can change the numbers directly in the box below and then once you're done setting the numbers and stuff, just copy it from the box and paste it where ever you want. (if you mess up, you can refresh this page and the code will reset)

What if you don't have MS Paint? You can go to http://www.draac.com/imagemap/mapper/ and put in the URL of your image and click on your image to get the coordinates.

Forth, with some math skills, figure out the width and height of what the scrollbox should be and change 182 and 108 to those numbers.

Alternate way to find out width and height. Thanks to hakufan for this tip! Open the blog in MS Paint. Click on the dashed square button on the top right corner of the tools. Now click on the top left corner of the proposed text area, drag the cursor to the bottom right corner of the text area and let go. Right-click inside the square and select cut. The area should be gone now. Go to File, New, don't save, and press CTRL + V to paste. Find the tiny blue thing on the bottom right corner of the image and drag it toward your pasted image until you don't see any white. Last, press CTRL + E and an Attributes box should pop up telling you the width and height of the area.

Fifth, change the text "THIS IS WHERE ALL YOUR SPIFFY TEXT GOES." to whatever you want and test the entire code out. Don't use text like.. tttttttttttteeeeeeeeeeeeeeeeeeessssssssssssssssttttttttt.. or else you'll just get a horizontal scrollbar. Just copy and paste.. test test test test test.. so the text has a chance to start on a new line. The scrollbar will show up when there are enough lines of text to surpass the height of the div
Sixth, need to change the font too? In the div tag before all your spiffy text add.. ;color:red;font:8pt verdana ..between the height:108px and the last ".

Two scrollbox blog In the text area box below is the code. You can change the numbers directly in the box below and then once you're done setting the numbers and stuff, just copy it from the box and paste it where ever you want. (if you mess up, you can refresh the page and the code will reset)

First, replace http://www.boomspeed.com/mach3000/sloth.gif with your image's URL.
Second, find out the width and height of your entire blog image. To do that, one way, is to put the URL of the blog image in the address bar, hit enter, your image should come up, right-click it, go to properties, and the width and height of the image should be there. Replace 200 and 300 with your numbers.
Third, open your image in MS Paint (or any other program you can use to find the exact position of a point on the image). Point the cursor to where the top, left corner of the scrollbox will be. The cursor position (x number, y number) can be seen at the bottom of the window (if not, go to View and check off Status Bar). Change the left: and top: numbers in the code. If you see 10, 100 at the bottom of the MS Paint window, then your code should be left:10;top:100;.
Forth, with some math skills, figure out the width and height of what the scrollbox should be and change 182 and 108 to those numbers.
Fifth, repeat third and forth step for second box.
Sixth, change the text in the box to whatever you want and test the entire code out. Seventh, need to change the font too? In the div tag before all your spiffy text add.. ;color:red;font:8pt verdana ..between the height:108px and the last .

Three scrollbox blog It's the same as above but with another box added. Here's the code anyways. See if you can find the pattern for more boxes.

<div style="background:url(http://www.boomspeed.com/mach3000/sloth.gif); width:200px;height:300px"> <div align=left><div style="position:absolute"> <div style="position:absolute;overflow:auto; left:9px;top:175px;width:182px;height:108px"> TEXT FOR FIRST BOX GOES HERE. TEXT FOR FIRST BOX GOES HERE. </div></div><div style="position:absolute"> <div style="position:absolute;overflow:auto; left:50px;top:300px;width:182px;height:108px"> TEXT FOR SECOND BOX GOES HERE. TEXT FOR SECOND BOX GOES HERE. </div></div><div style="position:absolute"> <div style="position:absolute;overflow:auto; left:100px;top:425px;width:182px;height:108px"> TEXT FOR THIRD BOX GOES HERE. TEXT FOR THIRD BOX GOES HERE. </div></div></div></div>

Four scrollbox blog Just in case you didn't figure out the pattern.. : )

The second way to code a blog. You have to be very very comfortable with using HTML table codes if you want to try to code blogs the way Neopets does. There's a small table tutorial on L00kupHelp or go here where I learned how to code tables http://www.w3schools.com/html/html_tables.asp Blogs on Neopets are just small tables with a background image and a code for a scrollbox in one of the cells. Since you're so comfortable with coding tables, I'll teach you how to code it by dissecting one of Neopet's blog. : )


	THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. THIS IS WHERE ALL YOUR SPIFFY TEXT GOES.

This is what the blog looks like if the table's border were visible.

table would have background image
	code for text in scroll box goes here

This is the code for it.

Translated from the beginning.

<div align="center"> says you want to center whatever comes next.
<table border="0" cellpadding="0" cellspacing="0" width="200" height="300" background="http://images.neopets.com/shopblogs/slothshallreign.gif"> Then you start a table with no border, no cellpadding, no cellspacing, width=200, height=300 with the background below (the table's width and height are the Exact size of the background image).

Note: The shaded area is part of the image not coding. Go back to the beginning of this guide to learn how to add shaded areas to images.
<tr> Start a table row.
<td width="200" height="175" colspan="3"> Start a table cell with width of 200 (same width of image) height of 175 (from the top of the image to the start of the shaded box is exactly 175 pixels) and colspan 3. You can right-click the image and save it to your computer then open it in MS Paint. When you put the cursor over the image, the cursor position can be seen at the bottom of the window (if not, go to View and check off Status Bar). Those numbers are in pixel units.
</td></tr><tr> Close the cell, close the row, and start a new row.
<td width="9" height="108"> </td> Start a cell with width of 9 (distance between left edge to shaded area) height of 108 (distance from top of shaded area to the bottom of shaded area) and close table cell.
<td width="182" height="108"> Start a cell with width and height the same size as shaded area.
<div style="width: 182px; height: 108px; overflow: auto;........"> In the cell, start a code for text in a scroll box. The width and the height of the scroll box are exactly the same as the cell's.
<div style="padding: 5px;"> Says the words in the box will be 5 pixels away from the cell border.

This is where you type all the stuff.

</div></div></td> Close the div padding, close the scrollbox code, and close the cell.
<td width="9" height="108"></td></tr> Start a cell width 9 (distance from shaded box to right edge) height 108 (same height as all the cells in the row) close cell and close row.
<tr><td width="200" height="17" colspan="3"></td></tr></table></div> Start a row, start a cell with width of 200 height of 17 (distance from bottom of shaded box to bottom of image) colspan 3 to span across the above three cells , close cell, close row, close table, and close the whole div center.
The End.

When coding your blog, make sure all the lengths add up to the size of the background image.

Scrollbar color. Scrollbar colors are only visible to Internet Explorer users. A bunch of hex colors can be found on this petpage niesean99449 If you need an exact color, you need an art program like Paint Shop Pro or Photoshop. If you happen to have one of those programs, have an image with the color saved to your computer, open it up, select the eyedropper tool and pick the color. You might have to tweak your color palette preferences to change it from decimal values to hex values. You can always go to the Avatars/Signatures board or Help board and ask for someone with the programs to get the colors for you.

Code to change default scrollbar color of whole page.

Simple code to chage default scrollbar color of whole page. Thanks kaurilover for telling me about this code! Use this code if you don't need to tweak all of the colors in the scrollbar. <style> body{scrollbar-base-color:blue} </style>
Code to change the scrollbar color of one scrollbox. Add scrollbar-highlight-color:#FFCC33; scrollbar-arrow-color:#FF3366; scrollbar-shadow-color:#CC33FF; scrollbar-track-color:#3366FF; scrollbar-3dlight-color:#33CCFF; scrollbar-face-color:#FF33CC; scrollbar-darkshadow-color:#002EB8; after overflow:auto; (or add scrollbar-base-color:blue after overflow:auto;) Example below.
<div style="background-image:url(http://images.neopets.com/shopblogs/slothshallreign.gif); width:200px;height:300px"><div align=left> <div style="position:absolute"><div style="position:absolute;overflow:auto; scrollbar-highlight-color:#FFCC33; scrollbar-arrow-color:#FF3366; scrollbar-shadow-color:#CC33FF; scrollbar-track-color:#3366FF; scrollbar-3dlight-color:#33CCFF; scrollbar-face-color:#FF33CC; scrollbar-darkshadow-color:#002EB8; left:9px;top:175px; width:182px;height:108px"> THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. </div></div> </div></div>

Transparent scrollbar. Scrollbar colors and filters are only visible to Internet Explorer users. The chroma filter makes any specified color transparent (#3366FF in this case). Example code below.
<div style="background-image:url(http://images.neopets.com/shopblogs/slothshallreign.gif); width:200px;height:300px"><div align=left> <div style="position:absolute"><div style="position:absolute;overflow:auto; scrollbar-highlight-color:#3366FF; scrollbar-arrow-color:#FFFFFF; scrollbar-shadow-color:#3366FF; scrollbar-track-color:#3366FF; scrollbar-3dlight-color:#FFFFFF; scrollbar-face-color:#3366FF; scrollbar-darkshadow-color:#3366FF; filter:chroma(color=#3366FF); left:9px;top:175px; width:182px;height:108px"> THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. THIS IS WHERE ALL YOUR SPIFFY TEXT GOES. </div></div> </div></div>

Blogs side by side. If you copy two blog codes from Neopets and put them next to each other, they will appear above and below one another on the page. The center tags surrounding the blog codes make them not be side by side. You can delete the div align="center and the last /div from both blog codes or put them in a simple table.

<table> <td> first blog code here </td> <td> second blog code here </td> </table>

There's lots of fan sites out there that offer premade stuff for Neopets. But be very careful when visiting these site. Don't download anything from them because it might be a virus. There's also a code out there called a Cookie Grabber. From what I understand, this code copies the cookie that keeps you logged into Neopets and puts in on their comp and then they have full access to your account. To prevent that from happening, you should clear your cache before visiting off site pages and clear it again before coming back on Neopets. In Internet Explorer, go to Tools, Internet Options, General tab, under Temporary Internet Files, Delete Cookies.. and just delete all the cookies if you want. In FireFox, go to Tools, Options, Privacy and click on the Clear button to the right of Cookies.

The hidden Neopets jelly blog. I found this blog while checking the source of the first page of Neopet's shop blogs.


	This is where all your spiffy text goes. Ohhh! Fancy, eh? You can put thank yous, wishlists... anything you want!

Code for your shop description:

My button.

Bunun224's blog guide.

If you'd like to try another way of making blogs, check out the above link!

FAQ.

1. Copy right info in middle of page on petpage using "easy way" blog code. Delete the </div> 's one by one from the end of the code until the copyright info goes in the scrollbox too. Or use this code to remove it.

2. The background of the blog repeats. The width or height of the main div box (or table background if you used the "hard way" blog code) was not set or was set higher than the image's width or height.

3. The scrollbox only goes horizontally. Don't use text like.. bbbbbbbbbblllllllllllllllaaaaaaaaaaaaahhhhhh.. to test the scrolbox. Instead, use.. test blah test blah test test blah and keep copying and pasting.. so that the pieces of text can start on a new line.

4. Not working, no scrollbar. You need lots and lots of text in the scrollbox. Once you have enough content in the div to surpass its height, the scrollbar will show up.

5. How to put codes on a petpage for people to see and copy?

That code works on petpages. On an offsite web page, delete the _ so there's no space between text and area.

6. Regular scrollbox. Change width and height.

Change the font? In the div tag before all your spiffy text add.. ;color:red;font:8pt verdana ..between the height:108px and the last .

Scrollbox tip: Take off the overflow:auto part to make the scrollbox not scroll.

Neomail me (mach3000) if the code is not working for some reason. Don't neomail me if you're too lazy to code it and want me to code it for you : P Try your best to code a one scrollbox blog and put it on a petpage. Neomail me to check the coding.

My awards have been moved to Cybunny_61603s petpage

Counter started on August 22, 2005

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions