MOCpages : Share your LEGO® creations
LEGO models my own creation MOCpages toys shop How to create a MOC Page
Welcome to the world's greatest LEGO fan community!
Explore cool creations, share your own, and have lots of fun together.  ~  It's all free!
How to create a MOC Page
Rate it  12345       Add a comment Add a comment   Zoom in  Zoom in
I don't know if anyone has ever made a tutorial like this. I hope I can make your creation uploading a-lot easier.
About this creation

I will break this into multiple easier to understand sections.

  • 1 Uploading photo's

  • 2 Text and spacing

  • 3 Posting your page

  • 4 HTML for these links

  • Section one

    Uploading photo's and keeping track of them (this will come in handy later).

    I won't go into taking the photo's but here is a link.
    Sariel's photo tutorial

    Click add photos when the window comes up drag and drop the photo's in the order you want them to appear. With Microsoft Word or a similar program write down the img number and the corresponding number next to each img number, number 1 being the main photo. When the html version of your photo's appear write this on the end of the first block (---------2){one is taken up by the main image} and the corresponding numbers on the other blocks. See below photos.

    Sorry the photos didn't come out right, they were fine on my computer and then they went weird when I uploaded them.

    If you have limited upload like I do or are just impatient re-size your photo's to 800 by 600 pixels, if your computer automatically adjusts the aspect ratio only adjust the horizontal amount.

    Back to top

    Section two

    Text and spacing.

    To make your MOC's story/description easier to read. Put 4 vertical spaces in-between each photo/block of html. The lines represent the spaces.

    Spacing for description below the photo
    Html version of photo here
    Right text here for above photo
    Html version of next photo here

    Spacing for description above the photo
    Html version of above photo here
    Write text here for photo below
    Html version of desired photo here

    That takes care of photo and text spacing.

    Adding the description for the photo can be difficult if you don't know which photo it is, that is where the numbering and writing down of the image number comes into play. Use the numbers to figure out the img number and then you know which description goes to which photo.

    I think that covers section two.

    Back to top

    Section three

    Posting your page.
    Delete all of these (--------2). Warning MOCpages automatically signs you out after about 20 minutes which clears all of your work. Copy and paste your work to a Word document or a similar program. Now that you have saved your MOC click continue. If it asks you to type in your password type it in and then copy and paste your work from the word document. If not check to make sure your MOCpage is correct. If it isn't click "go back". If it is click continue and post your MOC. Here is where most people would be finished. Click this to learn some cool html techniques.
    I hope this will make uploading MOCs easier for you.

    Back to top

    Advanced html section

  • Inner page links like the ones at the top of the page

  • What the html code looks like

    <li><a href="#1">Section one</a></li>
    <a name="4">Put this at the beginning of the section</a>

    Put this above the links <a name="top"></a>
    Put this at the end of each section <a href="top">Back to top</a>

    This page will be changed and updated periodically as I see needed improvements and as I get recommendations.

    If you have anything I can add, post a comment and I'll do my best to fit it in.


      June 10, 2014
    This is Great! Thanks for the tips! I'll try to use them!
    John Daniels
     I like it 
    Graeme Straughn
      April 10, 2014
    This will be REALLY useful! Thanks for posting it, man!
     I like it 
      September 4, 2012
    I never used the li in any of my creations i.e. (
     I made it 
      September 4, 2012
    Quoting Timothy Dillman What are/is the "<li>" for?
    It is for the html that returns you to the top of the page. <li> Stands for *link* in the html language. --John
     I like it 
      September 4, 2012
    What are/is the "<li>" for?
    By John Daniels
    Add to my favorite builders

    people like this. See who.

    1,113 visitors
    Added July 28, 2012

    LEGO models my own creation MOCpages toys shop How to create a MOC Page

    You Your home page | LEGO creations | Favorite builders
    Activity Activity | Comments | Creations
    Explore Explore | Recent | Groups
    MOCpages is an unofficial, fan-created website. LEGO® and the brick configuration are property of The LEGO Group, which does not sponsor, own, or endorse this site.
    ©2002-2018 Sean Kenney Design Inc | Privacy policy | Terms of use