June 5, 2013

Customize your blog (in particular blogger) with some html tricks!

Screen shot 2013-05-31 at 10.19.15 AM A lot of people have been asking about how I customized my blogspot blog, in particular my sidebar buttons and social icons as well as how I got my white background. With this video and tutorial below I will show you quickly some easy tricks and html basics. I taught myself through trial and error and youtube etc so I'm not a professional by any means! So if you have anything to add please do in the comments below. Thanks!!
White background without border on photos: 1. Go to layout 2. Click template designer 3. Click on etherial templates 4. Pick the template with the orange leaves sidebar 5. Either click onto the backgound tab below template tag and upload a white background jpeg picture (if the template you do use doesn't give you the option of choosing the background color) or go to advanced settings, click background, and select the white as the background color and the divider color.
Screen shot 2013-05-30 at 11.10.09 AM
How to pop in your title and make the size look the same: 1. Find the width of your blog in layout, then template designer, then layout width. 2. Customize your title page exactly the width of your site (found in template designer, then layout width) and height you like. 3. Upload it to your blog through layout - then click edit header 4. Then click add image and make sure to uncheck shrink to fit.
Screen shot 2013-05-30 at 10.59.48 AM
How to create social icons and buttons through html: 1. Make the buttons first through photoshop or illustrator or something thereof. 2. Save the buttons as jpeg images. 3. Upload them to a photo uploading/sharing site like Flickr or photo bucket or what not. 4. Click on one of the images in that site and click the square with an arrow button. A grab the code box will pop up...copy the code. Make sure its the size tou want it. 5. Go to your layout section, then click ad a gadget 6. Choose to add ab html gadget. A Window will pop up. 7. Paste the html code into that window making sure it is on edit html vs rich text. 8. Grab the link you want this button to go to (like the instagram button goes to your instagram feed) and replace between the quotation marks of href="PLACE LINK HERE". 9. Add all your other buttons you would like.Screen shot 2013-05-30 at 9.36.47 AM
Screen shot 2013-05-30 at 9.36.30 AM
10. If you want to center them, add <center> before it with no space.Screen shot 2013-05-30 at 10.55.43 AM
11. If you want to change the size of the buttons find the height="HERE" and width="HERE" and put in your new pixels height and width. 12. As long as it is below the width of your sidebar and the width of your buttons you can stack them side by side,or however you want.Screen shot 2013-05-30 at 9.29.55 AM

No comments:

Post a Comment