Coding Blogs with MS Paint Help

Necessary Tools: 1 open window of MS Paint

Have you ever felt frustrated trying to put your textbox on the right place? If so, then this tutorial is for you. All you need is to open your blog on your MS Paint!

1. Once you have opened your blog on MS Paint choose the "select" tool on your tools menu and drag your mouse across your textbox image!
   

   Make sure you're still holding your mouse down and look at the lower right hand corner of your screen. Can you see numbers? If so then we are both on the right track if not you must drag your mouse across your textbox again and be sure to look at your lower right hand corner. Notice that if you let go of your mouse the numbers disappear, so be sure you are holding down your mouse. Now, press "print screen" on your keyboard. Open another window of MS Paint. Click on Edit=>Paste.

   

2. The two sets of numbers will help us with coding our blog. The first set determines the starting location of your textbox in the image, while the second set of numbers indicate the size of your textbox. Now, it's time to code our blog! Copy the code below and edit the following things:
   <center><div style="width:YOUR BLOG WIDTH; height:YOUR BLOG HEIGHT; background:url(BLOG IMAGE URL); text-align:left;"> <div style="position:absolute; margin-left:YOUR X VALUE; margin-top:YOUR Y VALUE; width:YOUR TEXTBOX WIDTH; height:YOURTEXTBOX HEIGHT; overflow:auto; text-align:left; font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 11px; color: #000000; scrollbar-arrow-color:#A9D3AC (edit this color); scrollbar-track-color:#A9D3AC (edit this color); scrollbar-face-color:#417E45 (edit this color); scrollbar-highlight-color:#A9D3AC (edit this color); scrollbar-3dlight-color:#ffffff (edit this color); scrollbar-darkshadow-color:#0000000 (edit this color); scrollbar-shadow-color:#417E45 (edit this color);"> put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! </div></div></center>
   *Due to the changes on Neopets's filters, the code above cannot be used on shops or user lookups, but can still be used on your site and some other places on the net. To make it usable on Neopets, we just need to make the codes compatible to bypass Neopets's filters. Below is the code you can use. You will notice most of our position attributes are placed within the style tags.
   <style> //{} .blog {width:YOUR BLOG WIDTH; height:YOUR BLOG HEIGHT; background:url(BLOG IMAGE URL); text-align:left;} .textbox {position:absolute; margin-left:YOUR X VALUE; margin-top:YOUR Y VALUE; width:YOUR TEXTBOX WIDTH; height:YOURTEXTBOX HEIGHT; overflow:auto; text-align:left; font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 11px; color: #000000; scrollbar-arrow-color:#A9D3AC (edit this color); scrollbar-track-color:#A9D3AC (edit this color); scrollbar-face-color:#417E45 (edit this color); scrollbar-highlight-color:#A9D3AC (edit this color); scrollbar-3dlight-color:#ffffff (edit this color); scrollbar-darkshadow-color:#0000000 (edit this color); scrollbar-shadow-color:#417E45 (edit this color);} </style> <center><div class="blog"> <div class="textbox"> put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! </div></div></center>
   • The first set of width and height pertains to the width and height of your blog image.
   • Specify the background image URL.
   • Margin-left would be the value of X.
   • Margin-top would be the value of Y.
   • The second set of numbers would be the width and height of your textbox. In our example the width would be 231 and the height would be 171.
   • Edit your font color and font-family.
   • Edit your scrollbar colors.

put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here! put your text here!put your text here!put your text here!put your text here!put your text here!put your text here!

NOTE: You can use this to code your REDISTRIBUTABLE BLOGS BUT you must give credit to Neo-Faerie Wings. A link on your credits page would be fine! We hope this tutorial was helpful! ;)

Share |