::The Myrabev Life::: {Blogging DIY Series} How to adjust your blog width.

Have you noticed how some blogs use the entire screen whilst others have open edges? Well I learnt a while back how to adjust my template but most of the time never felt the need. But since I had a make over on this blogger my designer left huge gaps on either side of the blog and I wanted to re-adjust that plus increase the size of my widget area. As I have mentioned I know how to do this without code but I recently learnt howto do it with code and I will show you both today.

**Note this is for blogger, if you need for Wordpress please let me know**

Adjust widths without code.

Step 1: open blogger dashboard, choose template and click on customise.

Step 2: on top left click on adjust widths and you can play around with the widths and watch the changes at the bottom before you apply to your template.

Step 3: Once happy with size then save and you're done.

Adjust widths with code.

**I recommend always saving template before your begin anything code related**

Step 1. Open blogger dashboard, choose template and click on HTML

Step 2: search width (ctrl f) and locate *header-wrapper, outer-wrapper, main-wrapper, sidebar-wrapper and footer* The main-wrapper is your post section and the rest I think is explanatory. Adjust each of these sections to your wishes and save template. That's its done.

This is how I adjust my templates, let me know if you need help I am happy to assist.

Labels: blogging, DIY

13 Comments:

At 21 January 2015 at 12:58 , Unknown said...: This is a great tutorial! It is always nice with tutorials when they actually show pictures like this of where you need to click, and what to do. Like you mentioned, it is always important to keep a backup of your template before making changes. Nothing is worse than making a change, not liking it, and then not remembering what you changed or how to get back to the original!
At 21 January 2015 at 14:32 , Ashley said...: I love tutorials like this, thank you! I actually use Wordpress myself, but literally know nothing about all the technical sides of blogging and am so thankful for sites like yours that explain the process so simply (and with pictures!). I will definitely be looking through your archives to see if I can learn some more as a newbie :) Thanks again! xo
At 21 January 2015 at 15:13 , Unknown said...: This is such a great tutorial. I love tutorials that really go into depth especially with coding because it is sooooo so confusing lol. I, myself use wordpress so I will not be able to use this tutorial, but I'm sure it is so helpful to others that use blogger!
At 21 January 2015 at 16:12 , Unknown said...: Great info! Tutorials are my absolute favorite. I have done coding and HTML for years and years but I got out of it for a bit and when I got back into it, on blogger I was a little lost! So posts like these are really great and useful for a lot of people!
At 21 January 2015 at 20:54 , Nikki said...: This is definitely helpful for those on blogger. I used it in the beginning for a couple of months. I had no idea how to do ANYTHING on it aside from write totally unformatted posts. They were truly horrible, lol. My mom moved me to Wordpress early on because she designs sites and understands all the hosting stuff, but I know a lot of people who still use Blogger. This is so easy to understand too!
At 21 January 2015 at 21:38 , Olivia Douglass said...: I am rearranging my blog for a better look and feel. This is one thing that I've been wondering about and know that some bloggers can benefit too! Thanks for the tutorial, I'll pass it along!
At 21 January 2015 at 22:29 , Jenny @cookeatgo said...: I am constantly making changes and tweeks to the blog design. I love learning how to do my own coding makes things much easier to fix when it breaks or for making changes. Great tutorial for teaching!
At 22 January 2015 at 01:03 , Debi Gerhart said...: This comment has been removed by the author.
At 22 January 2015 at 06:11 , Yona Williams said...: I was just saying to myself the other day how I might want to change the width of my blog, but I am a little nervous that everything will get out of whack. I bought a template that I customized a bit, but it still has odd quirks in it that I know are there because the programmer put them in. I may rethink again. I use Wordpress though.
At 22 January 2015 at 09:58 , DisneyBride2008 said...: Argh! Nooo! Ha ha - I had just written a little tutorial like this, now I'll look like a crazy person if I post it! How funny! Thank you for posting it though, there are so many ways of customising your blog and I love fiddling around with mine on an almost daily basis. Tutorials like this make things much easier to do!
At 22 January 2015 at 14:57 , Debi Gerhart said...: I have always had trouble navigating things like this. I needed a simple, step by step tutorial like this so I can learn to do it myself. I was always asking someone else to do it for me. I am going to go try it on one of my sites now.
At 22 January 2015 at 15:37 , Vanessa Morgan said...: I was just looking for a way to make my sidebar a little larger, so this is exactly what I needed to know. I hope it works. Thanks. Have a lovely Thursday.
At 23 January 2015 at 02:57 , Unknown said...: Wow this is so cool! I am a bit of a newbie and haven't quite looked into editing this area. Thanks for teaching us a bit more about adjusting our blogs! I know I definitely learned a great deal of info from you! Thanks again for sharing!

{Blogging DIY Series} How to adjust your blog width.

Adjust widths without code.

Adjust widths with code.

::The Myrabev Life::

Wednesday, January 21, 2015

{Blogging DIY Series} How to adjust your blog width.

Adjust widths without code.

Adjust widths with code.

13 Comments:

Post a Comment

About Me

Previous Posts