I’ve been trying to figure out how to make a visual index page for my recipes for months and I haven’t been able to figure it out until this month. I was so excited when I “fancied” up my index pages that I figured I’d share it with you all. Hope it comes in handy!
I built mine using the Inlinkz “Link Manager”. I’m not a big guru on CSS and HTML so I found this the easiest, most basic way to make this work for me. So if you are looking for, fast, easy and manageable this post is for you!
Please don’t be afraid fo the 13 Steps listed. I made this as simple as I could breaking it down and much as I could. I could have combined things but I wanted to truly walk you through it!
1. Go to the Inlinkz webpage, make an account or log-in and then click on the “Link Manager”
2. Click on “Add new collection”
3. Now you get to develop you “index”. Start by filling out the Name & Description with what you’d like to call this collection. I always set the Columns to fill width so I can fit as many links on the page as possible. If you’d like a specific number then set that to your preference. Thumb Size is the size of your picture on your index. I set it to 125 px. If you’d like them small or bigger of course adjust to your preference again. I always check the Display name box. This will display the name of your link below the picture on your index page. For recipes and blog posts I find this necessary. We will now “Add a new link”. Click on “Add a new Link”.
4. A box will pop up. Enter the name of your post or how you want your link described, description, displayed name, and tooltip text. I always keep these all the same. Then enter your target URL or where you want the person to go when they click your picture on your index, usually this will be a specific blog post. Click Select Image.
5. You have several options to select the image the you want to appear on the visual index page. I always just select one off the URL I’m linking too. My recipe posts always have the image to corrolate to that recipe. If you want to select a different specific image you can also click on “Picture Upload” and go through that process. To use a picture from your URL click on “GO” next to the URL.
6. The Link Manager will now pull all the pictures from that webpage and you can select the picture you want displayed for that link. Select the picture you want displayed.
7. Crop the picture to your preference and hit OK
8. If the link images page appears just push cancel. You will be at the “Add New Link” page from Step 4. Click Accept in the bottom right hand corner.
9. The Link you just added will show up on the right hand side of the screen under “My Links” Now click and drag that link to the left hand side of the screen.
11. Now you want to get the “HTML code/script”. So next to the Collection Title there is some buttons. Click on the little blue and white piece of paper with the blue <> on it.
12. I always use the dynamic script option. This means when I go and add another link to the collection it will automatically update my blog page. Less hassle = Happy Julie. So click on the dynamic script and it will highlight all the script just copy that script.
13. Now comes the fun part. Just put it into your blogs coding! I’m going to do a quick show of how you do it in WordPress. Open up the page in WordPress where you want to put this index. In the upper right hand corner select the “Text” button. Paste the code in that area. Click Publish! You are done!
I hope you found this simple and helpful. If you have questions or feedback please let me know!
Make sure you don’t miss any of the fun stuff Julie’s Eats & Treats is up too!