Monday, October 29, 2012

Blogger Template: Veyroniqa

I know that my blog layout has been revamped for quite some time now and I haven't blogged about it... But here it is! :D

I am by no means skilled in HTML and all that jazz. So here's to all the bloggers out there who wants to prettify their blog but don't know how. I promise you, this is all very simple and if you would like help with your template, feel free to shoot me an email! :)

The base I used for this template is called Awesome Inc which you can access through the Blogger Template Designer. It is the 5th one. So don't email me regarding any other templates. This is the only template I'm familiar with. You may also refer to this post which includes information on how I removed the stubborn grays in the Awesome Inc template, you can also see my old blog template there if you're curious. 

Now that that's all done and over with. The fun part: beautifying and personalizing your template!

Header
I accidentally deleted the picture while cleaning up my blog's album. My bad! 

For the header, I created a PNG image (meaning it has a transparent background) in Adobe Photoshop with the dimensions 950 (width) x 230 (height). I initially used the splice tool in Photoshop in an attempt to create an image map manually, but I couldn't seem to make it work properly so while I was hunting around for tutorials, I came across http://www.image-maps.com/! It is an online image mapping tool which allows you to generate HTML which you can easily paste in a HTML widget box as your header! Bless the kind soul who created that website to help untalented people like myself. 

Now, you may have realized that you are unable to delete your header or create a HTML widget in its place. This is what you have to do: 

1. Go to Template -> Edit HTML -> Proceed
2. Press "CTRL" + "F" (simultaneously) on your keyboard. 
3. Copy & paste the following into the box: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Header (Header)' type='Header'/> </b:section> </div>
4. Replace 1 with the number of widgets you'd like your header section to have. 
5. Replace no with yes. 
6. Replace true with false. 
7. You're done!

Now if you go to Layout, you'll realize that there is a new "Add a Gadget" button. If you click "edit" on your header widget, you'll also realize that there is a "remove" button which was not originally there. 

So, if you have generated your image map, click "Add a Gadget", choose "HTML/Javascript" and paste the code. Viola! You have a new customized header with clickable buttons! 

Note: Go to http://picasaweb.google.com and upload your header there so that your header is hosted on your own account before you use Image Map Tool. 

Sidebar Image Titles
As you can see, on my sidebar, I have images instead of texts like:


1. Figure out what is the width of your sidebar. 
1a. If you already know what the width of your sidebar is, ignore this. Go to Template -> Customize -> Adjust Widths. Here you can see the exact size of your sidebar(s). 
2. Create an image which does not exceed the width of the sidebar(s). 
3. Upload the images to http://picasaweb.google.com/
4. Search for the title of your widget in "Edit HTML", remember to check the box that says "expand widgets". So for example, if your widget is titled "1234", search for "1234". 
5. Following that example, you should have something that looks like this about 3 lines below:  <h2 class='title'><data:title/></h2>
6. Replace that code with: <h2><img alt='(YOUR TITLE HERE AKA 1234)' src='(IMAGE URL HERE)'/></h2>
7. Replace (YOUR TITLE HERE AKA 1234) with your title and (IMAGE URL HERE) with your image URL. 
8. Do it for all your widgets and you're done!

FYI, you cannot do this for the Followers widget. The only way to get around that is by leaving the title blank and adding an image manually.

So that's all. Simple isn't it? :) Good luck! 

2 comments:

  1. Oohhhh thank you :)!! I'm def going to try this :D!! I was wondering how people did that and my social buttons were a bit cramped :(!!

    ReplyDelete

FacebookInstagramYoutubeTwitter