Add Widgets Above/Below The Header

This is another easy one!

First!!! BACKUP YOUR BLOG!

Go to "Customize"


Now click on "Layout", Then "Edit HTML"

Now press "Ctrl + F" and type "maxwidgets" into the Find Box. It should take you to here:

Delete the code "maxwidgets='1'", and change "showaddelement='no'" to "showaddelement='yes'". Here is what the final product should look like:

Code:

Result:

Create a Show/Hide Link

Show/Hide

Learn To Make This

I have seen nearly 30 different ways to do this for blogger.com blogs but this method is by far the easiest!

First!!! BACKUP YOUR BLOG!

2. Go to "Customize"


3. Now click on "Layout", Then "Edit HTML"


4. How copy and paste the following code just above the "</head>" code, and just below the "]]/:skin>" code.

<script language='javascript'>
function toggle() {
var ele = document.getElementById(&quot;toggleText&quot;);
var text = document.getElementById(&quot;displayText&quot;);
if(ele.style.display == &quot;block&quot;) {
ele.style.display = &quot;none&quot;;
text.innerHTML = &quot;show&quot;;
}
else {
ele.style.display = &quot;block&quot;;
text.innerHTML = "hide&quot;;
}
}
</script>

Before:

After: (This picture is missing some code and will be updated soon)

5. Now paste the following code where ever you need.

<a id="displayText" href="javascript:toggle();" id="displayText">Show/Hide</a>
<div id="toggleText" style="display: none;">Hidden Text or Object Goes Here</div>

The above code can be placed anywhere whether it be within a blog post or in a widget or even in the template to show/hide entire columns. The text "Hidden Text or Object Goes Here" can be replaced with any amount of text or even entire widget or entire embedded websites.

If you want to add multiple Show/Hide links to your blog to either Show or Hide two or more completly different things then all you need to do is repeat steps 4 and 5 but add a number after the code "toggle" for BOTH steps 4 and 5.

Before:
function toggle() {
------
< href="javascript:toggle();" id="displayText">Show/Hide</a>

After:
function toggle2() {
-------
< href="javascript:toggle2();" id="displayText">Show/Hide</a>

Remove the Blogger Banner

This is probably one of the easiest things to change in your blog.

First!!! BACKUP YOUR BLOG!

Go to "Customize"



Now click on "Layout", Then "Edit HTML"

Now Copy and Paste the following Code right below the "Blogger Template Style" and right above "Variable Definitions":

#navbar-iframe {
display: none !important;
}

Before:


After:

Introduction

Welcome to "How To Do Anything With Blogger". I am a strong supporter of using blogger.com becuase it is nearly 100% customizable, and the defaultss for it are great if you are not in to the customization of your blogger blog. On this blog I will be posting up different articles reguarding everything and anything concerning blogger. Whether it be how to add a third column or how to add an image. This blog is beginners and experts alike. If you have any suggestions for me, or challenges to tackle please submit them by commenting on the blog.

If you can't find what you're looking for here send in a suggestion and in due time a tutorial or article will be avialable for your eyes.

How To Read This Blog:

Text in Red is HTML or JAVA code to copy and paste into your template/post

Before and After images will be posted with each guide. The blue highlighted text in the after image is the code you should have copied and pasted into your template/post.