Thursday, August 25, 2011

how to make a header on your sidebar & have it flip on rollover



I've had lots of people ask me how to do this, and it seems to be really popular right now. Here are a few blogs that I've seen which have the header on the sidebar:

imagine
along a road less traveled
pastor girl's ponderings
follow God - every day
captivating moments
of horsefeathers
aspire
paper heart
borderless
click and capture photography

Let me know if you have a header on your sidebar, or know of someone who does -- I'll be glad to add them to the 'list'. ;)

So, you wanna follow the trends and stick your header on your sidebar? But you don't know how to do it, right? You've come to the right place.


Your header is probably on the top, just like regular, and you want something different.




  1. get rid of that header; go to your dashboard, hit design, and then edit html. hit ctrl + F at the same time, search box should pop up, search for 'header'.
  2. keep searching header until you find the header code. now, all you have to do is add: "display:none" beneath the "border color" part. easy enough, eh? 

3.  now, your header should be gone, make sure to save your template as always before hand, or just copy it and save it in a document in case something goes wrong. 


4. so -- now you're going to open gimp, if you don't have it already, google it and download it. it's totally free. If you don't want to download gimp, just create one (if you just want the picture for the header) or two images somewhere online that are 220 by 220 pixels, or just make sure they're the same size. I used gimp for mine.  Skip to the bottom if you're just using a picture for the header.

5. Now you're just going to do the same thing, make another image the same size. Make sure you spell everything right and have it just how you want. I just used a plain white 220 by 220 box with text in it for this tutorial, normally you won't do that of course, but I'm not trying to make everything perfect just for the tutorial, so it's fine with me. 



















6. save the second image in the same file you saved the first so you can get to it easier. upload both images to a site where you can get the link. I usually use photobucket, but you can also just upload them to a new blogger post and copy the image link. that's what I did since I was in a hurry.


7. here's where the html code work comes in. 

<a href="BLOG LINK">
<img src="IMAGE 1"
onmouseover="this.src=&#39;IMAGE2&#39;"
onmouseout="this.src=&#39;IMAGE1&#39;"
alt="TEXT" /></a>

go ahead and copy//paste that into a Javascript or HTML box in your design page elements part. see where the BLOG LINK text is? copy your blog url into that. Make sure not to erase any of the text anywhere unless it says "BLOG LINK", "IMAGE2", "IMAGE1", or "TEXT". If you delete any other part of the code it will not work.
In the image two part put the image url you want to have appear on hover, in the image one part put the first image url. In the TEXT part, write whatever you want to appear in case something goes wrong with the image. when you're done it should look something like this.



<a href="http://kendralynnestudios.blogspot.com/">
<img src="http://4.bp.blogspot.com/-AhjAid9fBBM/TlZMh7CEbXI/AAAAAAAACdw/Hhttvr92K4Q/s1600/save.jpg"
onmouseover="this.src=&#39; http://2.bp.blogspot.com/-dk94zFcdOO8/TlZMgys_RCI/AAAAAAAACds/ENAKS0036oU/s1600/extra.jpg&#39;"
onmouseout="this.src=&#39;http://4.bp.blogspot.com/-AhjAid9fBBM/TlZMh7CEbXI/AAAAAAAACdw/Hhttvr92K4Q/s1600/save.jpg&#39;"
alt="Sorry...something went wrong, try again later!" /></a>


8. save your html//javascript box and move the header to the top where you want it. 


Ta-da! you're done! If you just want an image for the header upload it to photobucket.com and copy the html code, then add it in an html box & save. To see the results live view here. that's just a test blog, so don't mind me. 

If you have any questions, leave a comment. Also, I'd l-o-v-e to see your results, so leave a little note with your blog link when you're done. If you use this tutorial, make sure to leave proper credit, since I did make the tutorial, I really don't want people copying it and saying they made it, or acting like they did. 

Enjoy your new design! 


Wednesday, August 17, 2011

portfolio - August & July


I haven't done many designs this month, but I'm starting up again. In the past couple of weeks I've done three designs; and I'd love to do more, so order away. In early July I did my sister Anna's blog design for her. She wanted a picture header that looked like it was 'painted', with dark greens and grey, so that's what I did. You can view the design live here.


I also did my own design, and switched the header to the sidebar. I really like this new blog trend, so I went with it. =) The header changes on hover. View live here.


Lastly I finished Anna Katherine's blog design, she wanted something cute with the header on the sidebar, so that's what I tried to do for her. You can see her design live here.

That's all for now, make sure to order something if you'd like a new design. I think I'm going to change the design here once I get around to it, it's sort of plain. 

Monday, August 8, 2011

I'm open.

I'm open and waiting for orders. Portfolio coming soon. I'm thinking of changing this design, since it's not my best work at all, but I want to keep things simple for now.