Previous | Next

Mockup: Instagram


Welcome to another code from Tessisamess!
I've been wanting to recode my Instagram page for a while now to match the new Instagram, so here it is, as accurate as I could possibly make it! This code is a full HTML page that works on both IJ styles and offsite hosting, and features an image overlay function when you click on gallery images! I know the real Instagram allows non-square pictures, but for simplicity of use I'd say stick to squares. I have not included appearance replacements for obvious reasons, and I've hosted the CSS outside of the code for ease of editing. Enjoy! ♥

NOTE: When adding extra images and their corresponding overlays make sure the a href and the id number match. Ex. a href="#1" would be on the first photo grid picture and div id="1" would be on the first post overlay. Keep your numbers matching for each picture and its overlay, and you can make as big a gallery as you like! To insert fake links into photo comments just wrap things like @username and #hashtag in italic tags.
the coding
Oh, yeah. These are the goods!
Paste your code into a code tester, then follow the directions below to get your code rolling!

installation guide
Everything you need to know about editing this code!
YOURNAME for your first name.
YOURUSERNAME for your username.
YOURAVATAR for your avatar.
JOURNALNAME for your bio link.
URL1 through URL6 for your grid and overlay photos.
The above fields show up in multiple places, so Replace All is best for them.

BLURB for your bio.
<b>0</b> posts, <b>0</b> followers, and <b>0</b> following for your account stats.
00 and 00 (x6) for your post stats.
00 likes and 1d (x6) for your post info.
POST DESCRIPTION for your photo blurb (use the i tag to make fake hashtags and @ links.)
anotherusername and COMMENT1/COMMENT2 for your user comments (use the i tag to make fake hashtags and @ links.)
terms of use
Please respect my usage agreement; thank you!
♥ Keep credit backlink in place.
♥ Do not redistribute my codes in part or in whole.
♥ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♥ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!
Just some things to keep in mind!
♥ Most of my in-entry codes utilize lj-raw, which means things like line breaks need to be done with the HTML <br> tag.
♥ Some of my codes look great without using an lj-cut! But be aware, some of them (very large codes, or any code that utilizes tables) really should be behind a cut; spare your friends' f-pages and give it a look after posting! If it stretches out your journal entry or cuts off on the side, chances are it's going to warp other people's styles as well.


Sep. 20th, 2016 12:52 am (UTC)
I love this! I have a question though. If we wanted to be able to hover for a description like in this other beautiful one what coding would we insert and where can we use it. I want to be able to utilize both the function you put in where you click and get the preview and to be able to hover for a description.
Sep. 20th, 2016 12:54 am (UTC)
Ty! You'd just add title="text here" to the a href of each photo link! So <a href="#1" title="text here"> would become <a href="#1" title="text here">
Sep. 20th, 2016 12:57 am (UTC)
Thank you so much!! I thought that might be all but I figured I'd ask before I tried it and came back here asking after I ended up doing something wrong and messing up the whole code lol
Sep. 20th, 2016 02:05 am (UTC)
Me again. I need more help! It's still a work in progress as far as descriptions go but I'm using the code here . I noticed that the overlay on Image #5 (and then subsequently 8 and 11 since I copied the code to make more images) doesn't work. I didn't change anything except the img src address so I don't know what to do or where the problem is. How do I fix it?
Sep. 20th, 2016 02:24 am (UTC)
I should clarify that by overlay I mean the clickthrough link. I said overlay because it's labeled "overlay" in the coding
Sep. 20th, 2016 02:27 am (UTC)
Okay, so! a href="5" should be a href="#5" (same for 8 and 11) and that should do ya! ♥
Sep. 20th, 2016 02:36 am (UTC)
Sep. 20th, 2016 01:18 pm (UTC)
Pure genius! Thank you so much for all your hard work.
Sep. 25th, 2016 12:12 am (UTC)
Ummm... yes. You know I will be putting this to use.
Sep. 25th, 2016 06:48 pm (UTC)
This is epic. Hands down, the most epic of epicness.
Sep. 25th, 2016 08:34 pm (UTC)
This is beautiful.
Oct. 2nd, 2016 01:04 am (UTC)
Is there an lj-raw version of this or should I keep it on a webpage?
Oct. 2nd, 2016 08:20 pm (UTC)
Html page only, I'm sorry!
Nov. 25th, 2016 03:12 am (UTC)
This is beautiful and we're using it here with some minor modifications!
Nov. 28th, 2016 09:40 pm (UTC)
First off, this layout is stunning. Thank you for creating it!

I think I need your help though. I edited the code as you instructed and it looks perfect in your code tester. However, when I post it in an entry on my journal, it ends up looking like this. I'm not sure what seems to have gone wrong, but any help you could offer would really be appreciated!
Nov. 29th, 2016 01:06 am (UTC)
Thank you!

I'm sorry, but this code is for raw HTML pages only since it utilizes popup posts and is its own full page, so it only works as a standalone on paid accounts in custom page views, and using offsite hosting (like webhosts and Tumblr.)

For in-entry Instagram galleries [info]54 made a lovely code here, and there are single posts from [info]cyrus over here. Sorry about that, I hope this helps!
Jan. 10th, 2017 07:03 am (UTC)
Hi there. I love all that you do. But I've come upon a hiccup with this particular code. I was going to use it for an in-character update, and went to look at the last one I'd done, which is here, and it's somehow become that hot mess. It was perfect when I originally did it, and haven't edited it since. Any clue as to what happened? Thanks xx
Dec. 11th, 2017 11:37 am (UTC)
Hi, I am having difficulties getting this code to work at all. When I first edited it using the code tester it worked there but then refused to work on my journal. Is there some special way of uploading it that I am missing?

Every time I attempt to work on this code it look fine in the tester and then breaks in my journal.
Dec. 11th, 2017 05:56 pm (UTC)
Heyo! This code is an HTML page, so you'll need a paid account to create a custom style to host it, or offsite hosting like Tumblr to use this page; sorry about that!
Dec. 11th, 2017 10:32 pm (UTC)
Thank you so much for the reply!

I did test it on Tumblr and was thrilled I got it to work there, since I haven't gotten a paid account here.

Thanks for making this beautiful code.
Dec. 11th, 2017 10:33 pm (UTC)
Aw, no problem at all! ♥
Apr. 7th, 2018 05:46 pm (UTC)
I can't seem to get the second image to pop up like the first - I'm not sure what I'm doing wrong. (I did edit out some of the images like following/etc bc i'm changing it up to look less like straight instagram) but the first one works and the second does not. What am I doing wrong? HERE
Apr. 10th, 2018 04:22 pm (UTC)
Hey! So I can't access it anymore, but when I took a look at it the other day it looked like you were just missing some closing divs on the sections you'd edited things out of.
Apr. 10th, 2018 05:15 pm (UTC)
Okay! I'll got frustrated and started over, forgetting I commented. I'll try that again!