28 July 2015

I've Updated My Blog!

Afternoon lovelies.

Unfortunately no tutorial Tuesday today. My skin hates me this week. I'm putting it down to stress - and it is improving so hopefully by Friday I'll have a new tutorial for you all. 

Today however, I just wanted to really quickly go through some changes on my blog.



My blog interface has changed A LOT over the past few weeks! Sometimes I wish I had screenshots of what the original Makeup and Beauty by Amy blog looked like when I started it up again at the start of last year. I love seeing the progression of things over time. I suppose you could say it's the history buff in me! 

Anyway, here's the oldest screenshot I have of my page which comes courtesy of the WayBackMachine search engine:


This was back in March of this year. Before that I had a similar very basic template which was pink, pink and more pink. While I really like the aesthetic look of this template - I felt it was a little too crowded for my liking. 

Next I moved on to something a bit simpler, and I removed the left side bar, opting for my current format of main body accompanied by a right sidebar.



This was again a beautiful template, but I felt the title post font was a little unappealing to look at. This was also around the first time I started to experiment with coding and CSS. 

I made a few tweaks to the above template and my blog has pretty much looked similar to the above image for the past six months or so.

For a few weeks now however, I have been dying to create a header image incorporating all of my favourite things that I love to blog about. 

Once I had changed the header image, I began to wonder how the blog would look with a drop down navigation menu and the more I thought about it the more sense it made. 

I played around with some coding again and I ended up with the interface below:


Next I added the drop down menu feature:


You may also have noticed I was able to grab a CSS code which allowed me to change my date header on blog posts to this cute pink ribbon.

I filmed a quick video for today to essentially give a virtual tour of where to find everything. While I loved the blog template, I do love the idea more of creating a mini website where you can easily navigate through each section and find the topics that specifically interest you. 

 

After I filmed the video, I of course, changed the layout again (I swear my brain is unsettled or something .. I do the same with furniture!). This time I simply moved the navigation bar above the header image - which I honestly prefer. It definitely declutters the post space below, and the menu looks pretty great dropping down over the image as opposed to over the text.


I also removed the search bar (afterwards) under the image and that can now be found in the right hand column.


Most of my CSS and coding came from this fantastic blog
> http://xomisse.com/blog/create-a-drop-down-navigation-menu/

If you have any questions about how I achieved the interface, or my tweaks / value entries in the coding, let me know in the comments below.

Signature photo Signature_zps98b94e16.png

No comments :

Post a Comment