Check out our Home Decor, Accessories & Clothing Store ~ Drops of Sunshine! SHOP HERE!

How to Make a Visual Blog Index Page

posted by Julie Evink on March 11, 2013

How To Make a Visual Blog Index Page via www.julieseatsandtreats.com #blog

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”

Inlinkz Main Page

2. Click on “Add new collection”

Step2

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”.

Step3

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.

Step4

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.

Step5

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.

Step6

7. Crop the picture to your preference and hit OK

Step7

 

 

 

 

 

 

 

 

 

 

 

 

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.

Step8

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.

step9

10. Your link now appears in the screen where you placed it. Click on “Create” in the bottom right hand corner of the screen. It will pop up and say “Collection Inserted” just push OK.Step10

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.

Step11

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.

Step12

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!

Step13

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!

FACEBOOK | PINTEREST | TWITTER | INSTAGRAM | RSS

Get your free eCookbook

Make sure you don’t miss any of the fun stuff Julie’s Eats & Treats is up to!

Follow Along On Snapcat RSS/Subscribe On Pinterest On Bloglovin On Instagram On Twitter On Facebook On YouTube
filed under Blog Tips
tagged with

    Comments

  • Vicki


    Thanks for the clear instructions. It worked perfectly. I actually copied the code to Livewriter, and that sent the info right to my blog recipe page. I’m just starting out, and so happy to have found this!

    • Julie Evink


      That is so good to hear!! Let me know if you have any questions getting started with your blog 🙂

  • Becky @ A Calculated Whisk


    Thanks, Julie! Just used your instructions to make my new recipe index and it looks great!

    • Julie Evink


      Good to hear Becky! Glad you found it helpful 🙂

  • Laurie @ A Wiener Dog in the Kitchen


    Thanks Julie! I just moved by my blog from WordPress.com to self-hosted WordPress.org and the possibilities for customization are mind boggling. Your instructions were very clear and worked perfectly! My Visual Recipe Index Page looks great and I couldn’t be happier with it.

  • Kelli


    I wanted to thank you so much for the step-by-step instructions! I’ve been looking for what seemed like forever trying to find a way to neatly organize our blogs recipes. This helped a ton! If you get a chance, stop by the blog and check out the recipes page you helped build!! http://www.firesidedreamers.com Thanks again!

  • Dori


    Thanks for the info. I’ve been looking everywhere for this. If you don’t mind sharing, I was wondering if you’re still using this method now for your recipe index or have you found a better plugin?

    • Julie Evink


      I actually had someone do a blog design and had it hard coded into the design now! I know there are some plugins on WP that allow you to do something similar but I haven’t ever used them!

  • Gina


    Hi Julie, Thanks so much for your informational post! I got everything working, but am confused on how I add the actual recipe to the collection. Im just not sure how to add the recipe. For example, I have a collection titled “Kids lunches” So now I am trying to add the actual recipe to this field. Thanks for your help.

  • Bre @ Average But Inspired


    Thank you so much, Julie! I actually came to your blog looking for something else, and I’m so happy I found this post! I will definitely be doing this when I have the time. Thanks! Bre @ Average But Inspired

  • Danielle


    I would have not gotten through that without this great tutorial on creating a visual index. THANK YOU!

    Leave a Comment

    Your email is never shared.
    Required fields are marked *