Blogger Template : Superhero

Finally, I can finish this template. Due to very busy at work, it’s difficult for me to ‘steal’ spare time to be on-line. Thus, I do blog walking rarely. I apologize if anyone has visited my blog but I have not visited you yet. Hopefully with the launch of this Superhero template can ‘heal’ your disappointment.
The idea of making this template is I love comic books about superheroes, like Superman, Batman, Captain America, and others. And I'm sure many of you who also love the 'superhero' which I mentioned earlier.
This header of this template is an animation so it looks interesting. I also keep the slide show feature which I adapted from Mahusay template which is created by FreeBloggerTemplate. Please see the demo here, and please give your comments and critics – all welcome.

Type : Blogspot template  XML Name : Superhero  Designer : Free Tips 4U  Added : 14 November 2009  Properties : 3 columns, fixed width, black, grey, with animation header Feature :   slide-show and author boxes under header & 3 columns on the bottom    Advertising boxes   Demo : Click Here!  Download : Template_Superhero.rar

You may download and use my template freely as long as you agree to the User Agreement.

Read More...

How To Edit Navigation Menu on MagzStyle V1.1

One of blogger who uses blogger template MagzStyle V1.1 asked how to edit the navigation menu in this template. I'll give you the tip here, and this tip can be applied to other Free Tips 4U’s templates.

As usual, first log into www.blogger.com > Dashboard> Layout> Edit HTML. On the Edit HTML window, find the code like below:

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://bloggertemplate-2508.blogspot.com'>home</a></li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/blogger template'>Blogger Template</a></li>
<li><a href='http://bloggertemplate-2508.blogspot.com/'>Edit-Me</a></li>

<li><a href='http://bloggertemplate-2508.blogspot.com/'>Edit-Me</a></li>
<li><a href='http://bloggertemplate-2508.blogspot.com/'>Edit-Me</a></li>

</ul>
</div>
</div>

The script code in blue is the title / name of the menu. While the code in red is the url link related to the title of the menu. So, to edit or modify, you can replace the code in red and in blue with yours.

Read More...

Instruction Manual For Blogger Template MagzStyle Slider

It’s been a while since I launched the latest template called magzstyle slider, but I have not made an instruction manual on how to change / replace some of the features in these templates, such as how to chang the image and description in the slide show box, how to change the banner ads, and how to change the content and thumbnails in the about author box.

First: Downloading and Saving Javascript Files 
The slide show feature on this template is using Javascripts, I recommend you save them on your own hosting (whether paid or free). There are 2 Javascript files that used on this template and I put them in fileave.com. Please visit http://freetips.fileave.com/jd.gallery.js and http://freetips.fileave.com/mootools.v1.11.js.

While you’re in the address I gave earlier, you will see the javascript file there. You select all the content(right click and select all) and copy (right click and copy or Ctrl + C). Then paste (Ctrl + V) it first into Notepad or a similar program and save the file using this name : jd.gallery.js. Do the same way for the second file and name it mootools.v1.11.js. Now you've got 2 Javascript files. Please save the files to the hosting that accepts javascript, or save them at fileave.com. If succeed you will get the urls of both files.

Now, log into blogger.com and go to Edit HTML and look for code like this:

<script src='http://freetips.fileave.com/mootools.v1.11.js' type='text/javascript'/>
<script src='http://freetips.fileave.com/jd.gallery.js' type='text/javascript'/>

Then replace the url address (red color) with your urls. Done.

Second: How to Change Images and Description in The Slide Show Box 
1. Log into blogger.com
2. From the Dashboard page, select Edit HTML
3. Then look for the code / script like this:

<div class='imageElement'>
                <h2>Blogger Template : Strawberry</h2>
                <p>Hi&#8230;, today i publish new blogger template with a refreshment theme: Strawberry, yummy&#8230; With catchy colors, i hope, you&#8217;ll like it. If you do like it, don&#8217;t hesitate to download and use it.<a href='http://allfreetips4u.blogspot.com/2009/07/blogger-template-strawberry.html' target='_blank'>..Read More</a></p>
            <a class='open' href='#' title='Read More'/>
            <img class='full' src='http://farm3.static.flickr.com/2534/3921792999_16db29f110_o.jpg'/>
            <img class='thumbnail' src='http://farm3.static.flickr.com/2534/3921792999_16db29f110_o.jpg'/>
        </div>
                <div class='imageElement'>
                <h2>Blogger Template : Harry Potter</h2>
                <p>Harry Potter Black Edition is a free blogger template with the most downloaded. It consists of 3 column, fixed width, black color with great looking header. This template is suitable for all Harry Potter&#8217;s fan.<a href='http://allfreetips4u.blogspot.com/2009/05/blogger-template-harry-potter-black-ed.html' target='_blank'>.. Read More</a></p>

            <a class='open' href='#' title='Read More'/>
            <img class='full' src='http://farm4.static.flickr.com/3478/3921793091_84229a3a49_o.jpg'/>
            <img class='thumbnail' src='http://farm4.static.flickr.com/3478/3921793091_84229a3a49_o.jpg'/>
        </div>

4. Red code is the title of the image will be shown in the slide show, for example Blogger Template: Strawberry. You can change the title you want.
5. The blue code is the description / text in the slide show. Please replace with your description you have prepared.
6. Green code is the code from the image url address that is displayed on the slide show. In this example I store pictures on flickr.com. If you already have the url of the image to be displayed please replace the old url with yours.
7. Done, do not forget to save and see the results on your blog.

Third: Changing Banner Ads
How to replace banner ads have been discussed in the previous articles. Please click here to learn how.

Fourth: Changing thumbnails and contents of Box About Author
Still in the Edit HTML page, look for code like this:

<div class='ab-box ab-box-author'>

<h2>About Free Tips</h2>
<div class='interior'>
<img alt='banner5656' height='56' src='http://farm3.static.flickr.com/2444/3921677879_a531480a45_o.gif' width='56'/><p>Free Tips has many free blogger templates just for you. The collection has more than 20 templates and will be added regularly. You can choose template that suits your need and your taste. Feel free to download. You can go through this link to see the collection <a href='http://allfreetips4u.blogspot.com' target='new'>here.</a> </p>
</div>
                    </div>

The red code is the title, change it.
The blue code is the url of the image / thumbnail. Images that I use in this sample is 56 x 56 pixels and stored on flickr.com. Replace it with the url of the image belongs to you.
While the green code is the description of the writer / author. Replace it with your version. Done.

Good luck and thanks for using Free Tips’ templates.

Read More...