home™: Blogger Tips

Showing posts with label Blogger Tips. Show all posts

Making 4 Column Footer in Blog

Hello guys, we meet again. Today I will teach you how to make 4 column footer for your blog. I think this might be useful for you guys.

Go to Blogger.com and log in. Then, go to Layout > Edit HTML
Caution : Make sure you backup your current Template first by DOWNLOAD FULL TEMPLATE
Find this code and alert with BLUE CODE:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

4. Then, replace this BLUE CODE with all code below:

 <div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

5. Find ]]></b:skin> and add this code below ( an important code in order to make sure your footer shown on your blog). You must add this code below it:

 <div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

6. Lastly, PREVIEW your template before SAVE in order to prevent any error. If error, re-check your code again.

Scrolling Words On Browsers

Here's a quick view, look at my Blog (top bar on browser), there are scrolling words right? Did you want your blog look like this? So, read my tip.

To make it : you just have to add this code before </head> the tag or put the code in HTML/JavaScript. Copy this code:-


<script type='text/javascript'>
var txt="Your blog name and little description about your site here";
var espera=200;
var refresco=null;
function rotulo_title()
{
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);
}
rotulo_title();
</script>

Change the yellow colour with your own words.

How To Put Code in Your Post

There is a difficulty in putting CSS code in post. This is an important thing for those who want to teach the visitors who are interested in web development. When you go to Create New Post> Type word <script>, it will be an error. So, don't worry, I will teach you how to hack this problem.

In a post, you cannot enter any code like this "<script>"etc. with the symbol of "<" or ">", right? In order to show the CSS code, what you need is,Simple code.

Simple code is the easiest process to put the CSS code into your post. Firstly, you must go to Simple code and copy your code you desire and paste into Enter Markup. Then click Process. The Simple code generate the code and then you copy the results. Lastly, you paste it into your Post.

Here's the result.

<script type='text/javascript'>

var txt="Your blog name and little description about your site here";

var espera=200;

var refresco=null;

function rotulo_title()

{

document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);

}

rotulo_title();

</script>

Therefore, you can show the code to your visitors.

Icon Beside Your Url Address

Sharing Is Caring

Hye, I think I can share my little knowledge with you guys. Today lesson, HOW TO CREATE YOUR OWN TINY ICON BESIDE YOUR URL ADDRESS (BLOG). Since I got this information in the Google, so I will guide you step-by-step on how to create and embed this tiny icon to your blog. Now, we can Start!!!

First lesson
You shall have your own Photo in order to embed into your blog. This picture must in a format of JPEG or PNG. And please make sure your Photo Size in 16x16 (please do not use more than 16pix, below is better). You can do this by using Photoshop or Microsoft Office Picture Manager.

Second Lesson
After you finised with editing, please upload your photo on to the web (eg. imageshack.us)

Third Lesson
Then go to your dashboard>layout>edit html. Please paste this code into Edit HTML. Then Save Template ( or you can preview first ). IMPORTANT : PLEASE MAKE SURE YOUR CODE PASTE BEFORE this code -->/head and alert with this symbol ' . Thank You