Blog Makeover 3

Project: Blog Makeover 3
Completion Time: 8 days

By this time, you might have thought of me as a crazy person because I just can't settle with a design but hey, this is me on a designing roll!  Ever since I took blogging seriously three to four years ago, designing has also became an interest of mine.  Of course, reading would always come first.  But anyways, pimping Stardust Lores became a real challenge for me since it's really different from Wordpress.org themes.  And it always makes me giddy every time I succeeded in tweaking the HTML code to achieve what I want.  

Blog Makeover 3 happened because as I was checking my favorite blogs, inspiration suddenly struck me after seeing this and this. I then told myself that, "So what if I'm on Blogger? There's a way that I can make it look like a website!" And like a mad person, I proceeded to figuring out ways on how to make a page look like a website's homepage.  I have to remove the following things in order to achieve such goal:

• the comments box section
• the sidebar
• the subscribe posts (atom)
• the footer that says "Powered by Google"

With the help of numerous tutorials that I've found all over the internet, I finally managed to create a clean static homepage.  But that's not the end of it yet.  I have to redirect the blog address to the URL of the homepage instead of the default home's URL.  With that accomplished, I need to tackle another problem and that's what to put on the homepage.  Like my two inspirations, I wanted to put an image slider on the homepage but the question is, what kind of images? If I had been a full pledged author and has a lot of published works on my portfolio then I would have put the covers of my books on the image slider.  But alas, that's not the case so I have to think of something else.   Fortunately, I stumbled across a tutorial about putting an image gallery on Blogger pages which really got me excited. 

As an aspiring designer who knows so little about CSS and jQuery, setting up the image gallery was so tedious and required a lot of teeth gnashing, neck scratching, yelling and hair pulling on my part. But in the end, I conquered the damned thing and literally jumped with joy when I saw that it worked.

Can you see it? It's so beautiful! I have to overlay the images with a hue of light pink to make sure that they give off some sort of a whimsical vibe. I also have to put a patterned background for the text to make the images more stylish. 

Next up was the header. Yes, I know.  Oh dear Vita, why do you need a new header for Pete's sake?! Well, that's just how I roll but whatever,  I need a new header.  At first, I thought of following the gold foil effect trend that's been popping  up in the blogosphere lately so I created a flashy header (see below) that would surely put my mother's stash of gold jewelry to shame. 

But uhm, the overall look felt somewhat off so I immediately scrapped it.  So to Freepik I went and found a vector that almost made me squeal with delight. It's so cute and romantic and gives a feel-good vibe. 

I do have to edit the vector to make sure that it matches the blog's color branding.  Also, I have to add another boy and a girl on the graphic by copying the girl and the boy and modifying them. The reason for the addition:  I just want the graphic to be more meaningful rather than conveying the simple story of a girl and boy falling in love. 

After creating Header #1, another thought snapped into mind and that's to create a header intended for the blog portion only.  The process was easier though since I opted for a very simple design.  This time, I made use of the gold foil effect to make the stars sparkle. 

Crossing out the two headers and the image gallery,  the last task that I need to accomplish in the homepage was the footer.  That "SUBSCRIBE" section looked really simple but the damn thing took me around 8 hours to make it look that way.  The same can be said with the social media icons.  Boo to my ultra-mediocre coding skills! If it's not the width, it's the alignment that would look wonky.  Le sigh. 

Maybe it's also worth mentioning that those dividers are also a pain in the ass.  But moving forward, I also customized the "Read More" button on my blog posts because the previous one that I have looked really simple.  Thank the designing gods for a little mercy because I figured it out easily. 

With the Blog Makeover 3, I also learned how to put hover effects on the images through CSS  and HTML coding (check the social media icons) which is an achievement for me.  I never have to bother myself about it when I was still in Wordpress.org because the theme that I bought already has the said feature and it's just a manner of activating the hover effects or not. 

The most traumatizing part in Blog Makeover 3 was not the header nor the image gallery nor the subscribe button but it's this part.  Yes, you got it right. The "Favorite Books" section almost made me want to hide under my bed and spend the day cursing Blogger for being such a limited platform. Those collapsible panels or accordion as the lovely coding experts call it is just fucking crazy.  I literally spent 2 and a half days scouring the Internet for tutorials that actually work.  The first tutorial that I found worked but for some reason, the panels just would not collapse on default whenever you load the page. I really tried to make it work and even spent a lot of time figuring where I went wrong. Apparently, my hard work was all for naught so I moved on to another tutorial but it's still a dud. Like a crazed being, I did not stop searching until I found another one and another one.  When I thought that I already found the right one,  I saw that there's something off with the coding because the code wouldn't immediately translate to RICH HTML every time you refresh the page.  It looked horrible so I ditched it and proceeded with my hunt. Finally, when all hope was lost and with my inner self begging for the crazy hunt to stop, I finally found an accordion tutorial that actually worked.  Of course, I still have to tweak it and test whether it accepts images.  Loading the images was also very taxing due to the number of image URLS that I have to place one by one inside the accordion code. And thank the heavens, I finally had a good night's sleep. Still, I can't help but ask myself, "Collapsible panels and those many books?! What were you even thinking?!"

So anyway, aside from what I have mentioned in the previous paragraphs, I also made some minor changes to the following:

• "Subscribe To E-mail" button in the blog page
• logo (it now has a gold foil effect!)
• color of reading progress bars

Update as of 18 July 2015:  For some reason, I felt the need to change the header so I just went ahead and did it. As usual, I got the graphics from Freepik and edited it to match the blog's color branding.

Before

After

With the new header, I finally found a reason to be more lax when employing the gold foil effect. Look at those stars and the rocket's blast. XD  I hope you love it as much as I do.