Make the main body wider in blogger

I thought I would just add this little post.

This is just a simple tutorial for making the main body part of a regular blog template (I was using "Minima") wider. It's already well covered
Google results.

It's rather easy. I just did it to try to make the last post look a little better and it took me just a couple minutes.

Go to blogger → Layout → Edit HTML → Expand Widget Templates

Then scroll down (or control/f) to

#header-wrapper {

to find...

width:...px;

Add an amount to increase the width by. I went from 660 to 860, adding exactly 200px.
Now, you need to keep the whole thing together, so next go down to...

#outer-wrapper {

and change the width by the same amount.
Next,

#main-wrapper {

and add the same amount again. Remember, it is the amount you add that must stay the same, not the total amount. The "main-wrapper" is going to be smaller than the "outer-wrapper" because the "outer-wrapper" is also containing the side bar (unless, of course, you did away with the sidebar)

Save and check it. Your blog's main body portion should be wider now.

Hide your blogger navbar

Introduction: In a blogger blog (...blogspot.com/) you will always find that you get a navigation bar at the top.
I don't think everyone will want to get rid of it, but if you want to personalize your blog a bit, you may think about throwing it away.
How to do that? Well, it's rather easy to just get rid of it, but there are a few additional things you could do to.

Just get rid of the Nav bar: This is really easy. Follow here step by step and you will have no navbar.

1. Sign in to blogger, and go to "dashboard".
   
   
2. Click on "Layout" for the blog with the doomed navbar.
   
   
3. Select "Edit HTML"
   
   
4. Select "Expand Widget Templates"
   
   
5. Now either press 'Ctrl' + 'f' and search for 'body {'.
   The image shows how this can be done in firefox:
   
   
   Or you could just scroll down.
   The "body" element is the first one in the CSS portion of your blogger template.
   It's not that far down.
   
6. Now just add the following code just after the body {....} css element
   
   #nabvar {
   display:none;
   }
   

But if you don't want to go all the way, there are some ways to just hide it a little. Some people are scared of Google taking it out on them if they don't follow the rules. Well, this is how you do that...

Come and go: In this example you make the navbar disappear while until you hover over it with simple css.

I found this bit of code on various people's blog and so it's hard to credit the original author. It's not me, and I am sure it would have taken me some time to figure it out, being a non-nerd type. Try it. All you need to do is add this code where I told you to add the code mentioned above, just below the body {...} section in your blogspot template code.


#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Reference: This bit of code seems to have been plagarized by loads of people in endless tutorials. I tried to find the oldest version of it that I could.  This seems to be the oldest post that I could find on this peace of code.

Come and go a little: So, this is my own little edition. Most of what I learn ends up being just like this. I find an interesting thing to try, try it, and then try to change it and understand how it works (or at least have an idea how it works.) How I learn for guiding influences a great deal how I learn for computers. Both are related: I want to understand how things work. It makes me a successful guide, and makes blogging (and other 'computer' related things) FUN!

So, why not just play with the Opacity and see where it takes us:

#navbar-iframe{opacity:0.3;filter:alpha(Opacity=30)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}


Now it's not totally hidden ever, but just get's a little see through.

If you want to learn more about transparency, visit these pages:
www.w3schools- css image transparency and
www.w3.org - css3 color - transparency.

Test first

Okay, I did something wrong.

New comments test

Part of the reason for a blog like this is just to have somewhere to try things. Since various people are now reading this blog I will do my best to make that testing interesting and useful. I am playing around with my main blog, Frantic Naturalist, a lot, but want to try things elsewhere before they go there. I just thought that I would try to get to know IntenseDebate, and so I am trying it here.

Oh, please comment. Say anything. Promote yourself, whatever. Just keep it clean. I am just testing right now. Of course I think there are only about two or three people reading this blog at the moment, so if nobody does comment, forgive me for commenting myself. I am just trying it out.

How to change the "Older post" marker in your blogger template

This post is an answer to a question posted on Blogcatalog group "Blogger"
Here is the question posted by Jules66 (or Julie-Anne):

I am wanting to change the 'older posts' link on the bottom of my blogs, to say 'next page' instead.

Does anyone know how I can do it without losing all my stuff on my blog ?

I did quick google for an answer but the sites that say how to do it, don't apply to my style blog.

Thank you in advance for your help

I am not an expert, and just explaining the way that I understand that you could do it. If there is a better way, you are most welcome to let me know. I also certainly don't take any responsibilty for any loss or damage to your blog. You follow my advice at your own risk. I did try it out on a couple of blogs of mine. I have one blog that I use for just that (trying things out.) I will not give you the URL. It is just a muck around blog. But I also did it with text for Desert Dad which is my 'show off my kids blog.'

1. First of all, I don't want to be bias towards a specific browser, but for this purpose I just love using Mozilla. Chrome seems to muck it up, and I am not a big Internet Explorer fan. I am going to explain following myself along in Mozilla. I am sure if you use a different browser it shouldn't be to tricky to figure out what works differently. It shouldn't be much


2. Open your blogger dashboard, and log in.


3. If you have more than one blog, choose which one you would like to edit, and click on "layout"


4. When the "Blogger: Edit Layout" page is up, right click on the "View Blog" link and click "Open Link in new Tab". Each time you want to see how you are doing, you can just re-load that page, and just leave your editing page alone. It's just the way I like to work.


5. Now, go to where it says "Edit HTML". If you are new to fiddling around in there, perhaps I should point out a couple things. First of all, you can click "Download Full Template". This way, if you really stuff things up, you can just re-load what you had before. If you are really worried about this, perhaps read a little about it in blogger help. The second thing is the "Clear Edits" link at the bottom. This is like a reset button before you have saved your changes. If you think it's just not going well, hit the "Clear Edits" and things go back to how they were when you last saved.


6. Now click "Expand Widget Template" and let it re-load.


7. No comes the trick. You need to find this code
   
   

   
   <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
   

   
   


8. If you know much about html you will know that a link has three parts, and this bit is just the same. The first bit:
   

   
   <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
   

   
   and the last bit:
   

   
   </a>
   

   
   surround the bit in the middle:
   

   
   <data:olderPageTitle/>
   

   
   


9. Now, that bit <data:olderPageTitle/> is a reference in xml to what should be placed there. But you can just remove the reference and put anything you want there. For example, if you wanted to use "next page" you could do this:
   

   
   
   <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><p>Next Page</p></a>
   

   
   All you have done is slip the <p>Next Page</p> code into that link.
   


10. There are different ways that you could play with that. You could empasis it by changing the p tag to strong
    

    
    <strong>Next Page</strong>
    

    
    Or you could use an image like this one:
    

    

    
    I am not going to go into details now, but I would be happy to if you are interested. You need to do something like this: Upload the image to your Picasa web album, get the URL (where it is just the image, not a page it's on.) You will need to put it into the right code:
    

    <img src="theImageURL">

    
    and you then need to go to a site like Blogcrowds parse html page and change the code before pasting that into the same place you put the other code explained above.


11. 
    Now you need to save it. In the separate page you opened at the beginning, just click 'refresh' and if it worked fine, it should show you the new text in place of the "Older Post"
    

If you would like to use the image above, you are most welcome. For a link back to this site I would make an even nicer one, based on the colors of your blog. Just save it as an image on your computer, don't just use the linked URL.

I did find a good post about covering this. I just wanted to check that I was not going to blow up your blog. Check out Blogspottutorial


Hey, if you found this blog and you are not Julie-Anne, you may want to check out her blogs:
Chatterblog
and
Images by Julie-Anne