Technologypublic Weblog

Just another WordPress.com weblog

Adding Three column footer to blogger template

Unfortunately Amanda’s (Blogger Buster) Tip on adding a three column footer to blogger is currently facing technical database difficulties so i decided to bring up the the hack since i used it before, so here is how to Add Three Column Footer To Blogger:
1- Backup your template first:
Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any problems occur, or decide you don’t like the new look, you can just easily revert back to this design :) .

Now to back up your template, go to Template>>>Edit HTML in your Blogger dashboard, and click on the “Download Full Template” link near the top of the page. You can then save your existing XML template file to your computer.
2- Second of all you need to clear your footer from any widgets that you’ve added, as this hack will completely remove them “unless you don’t need them!”


3- Third step is to find the following code in your footer section.


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

</div>

And replace the following code


<b:section class=’footer’ id=’footer’/>

With


<div id=’footer-column-container’>

<div id=’footer2′ style=’width: 30%; float: left; margin:0; text-align: left;’>

<b:section class=’footer-column’ id=’col1′ preferred=’yes’ style=’float:left;’/>

</div>

<div id=’footer3′ style=’width: 40%; float: left; margin:0; text-align: left;’>

<b:section class=’footer-column’ id=’col2′ preferred=’yes’ style=’float:left;’/>

</div>

<div id=’footer4′ style=’width: 30%; float: right; margin:0; text-align: left;’>

<b:section class=’footer-column’ id=’col3′ preferred=’yes’ style=’float:right;’/>

</div>

<div style=’clear:both;’/>

<p>

<hr align=’center’ color=’#5d5d54′ width=’90%’/></p>

<div id=’footer-bottom’ style=’text-align: center; padding: 10px; text-transform: lowercase;’>

<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>

<b:widget id=’Text2′ locked=’false’ title=” type=’Text’/>

</b:section>

</div>

<div style=’clear:both;’/>

</div>

4- The last thing will be adding style for the new footer section. Add this code right above this code

]]></b:skin>

#footer-column-container {

clear:both;

}

.footer-column {

padding: 10px;

}

Congrats, you’ve just added a Three column footer to your blog. Now all you have to do is go back to “Page Elements” and you’ll notice Three column footers at the bottom of the page :)

And Amanda, We hope things are fine over there!

Technology Public

September 16, 2008 Posted by | Blogging, Hacks and Tricks | Leave a Comment

Add Icon Before Post Titles | BLOGGER ACCESSORIES

Add Icon Before Post Titles | BLOGGER ACCESSORIES

Today I am going to tell how to add Icons to post titles (Thanx to Blogger Accessories). You would have noticed in some wordpress blogs like Dezzain and other famous blogs using Icons before the Post titles. Never Wonder how to do or Whether only WordPress has this feature. It’s really an easy hack and I will help you to implement this.

Let us start :

Step 1 :

First you need to create an image / Icon which you would like to show before each post title. You can create the image either in Photoshop or in Online Image creators. After creating the image upload it to blogger or any other image hosting sites like imageasck.us , photobucket , etc . Now copy and paste the image url in a text file.

Step 2 :

You need to create simple HTML code for your image like below ,

<img src="your Image Url"/>

change the text in red with your image url. Now we have successfully created the code for our image.

Step 3 :

Now let us see how to implement the image code in blogger Template. Login to your Blogger Account , then go to Layout subtab and then to EDIT HTML tab. Before we start first take a backup of your template . Put a check in expand widgets box and search for the code in red .

<b:if cond=’data:post.url’>

<a expr:href=’data:post.url’><data:post.title/></a>

If you want to show the image before post title , you need to add the image code after the red line.

If you want the image to appear after post title then paste the image code after the green text.

After doing this preview your template , Then save it.

I hope you would have liked this hack. If you have any problems in implementing this hack ask in comment form I will help you.

Technology Public

September 14, 2008 Posted by | Blogging, Hacks and Tricks, Web and Internet | Leave a Comment

Online Generators to help bloggers and web professionals!

One can discuss whether web-generators are useful or not. On the one hand, they don’t challenge our creativity, but on the other hand they make our life easier and save our precious time. However, it doesn’t matter really. What matters is that we use them if we have to solve some problem quickly and efficiently. We’ve taken a look at the most useful online-generators for web-development and listed them below

Ascii Generators

  • ASCII Artist

    This little program converts your picture to ASCII text art

  • ASCII Generator

    Generate a ASCII graphic from a word or text. Over 130 fonts.

  • ASCII-O-Matic

    is a web application that can convert an image into ASCII Art dynamically

Color Generators

Css Generators

Domain Name Generators

  • Nameboy

    free domain name generator, search and creation

  • DNGenerator.com

    Domain Name Generator with Domain Name Finder to register domain names if expired domain names

  • Domain name generator

    Intelligent random name generator that finds available domains and unique business names.

  • Makewords Domain Name Generator & Search. Find Name Ideas for your Website or Business. Bulk Check.

  • Domain Name Generator

    Domain Name Generator will produce a list of possible domain name ideas based on the word or phrase you input.

  • Namedroppers

    We provide a more efficient method for finding and generating domain names. Search for domain names using multiple keywords

  • Whoix?

    Domain Name Wizard

Email Generators

  • Advanced Email Link Generator

    Advanced Email Link Generator with Anti-Spam Encoder

  • E-Mail Icon Generator

    For GMail, Hotmail, MSN, Yahoo!, AOL and many more!

  • Email Riddler

    Email Riddler is an online tool that encrypts and transform your email address into a series of numbers when displaying it, making it virtually impossible for spam harvesters to crawl and add your email to their list.

  • NeedASig

    Email and Forum Signature Icon Generator

Favicon Generators

  • Favicon Generator

    Make Free Favicons – Create a Favicon.ico Design

  • FavIcon Generator (beta)

    Use this online tool to easily create a favorites icon (favicon) for your site

  • FavIcon from Pics

    How to create a favicon.ico for your website

  • Favicon.ico Maker

    Upload a 16 x 16 pixel PNG and click ‘Faviconify!’ to create a favicon for your website. This favicon maker supports alpha transparency.

Flash Generators

Form Generators

  • Accessible Form Builder

    Generate XHTML-compliant accessible forms quicky and easily

  • Accessible Form Creator

    allows you to create forms for web sites containing all the additional markup required to make the forms accessible under Section 508 standards and the W3C WCAG 1.0 Priority 1-3 Guidelines.

  • Contact Form Generator

    The free Website Contact Form Generator utility enables you to create form-to-email scripts for your ASP, PHP or Perl web site with no programming skills needed.

  • CSS Form Code Maker

    Generates ‘Colorful Box Layout’ For Forms

  • Form Element Generator

    allows you to create forms for web sites containing all the additional markup required to make the forms accessible under Section 508 standards and the W3C WCAG 1.0 Priority 1-3 Guidelines.

  • FormLogix

    FormLogix is an online web database and form generator solution.Free

  • JotForm

    Web Based WYSIWYG Form Builder

  • PHP FormMail Generator

    A tool to create ready-to-use web forms in a flash. Once the form has been generated, you have a full functional web form. Including error checking of required fields, email address validation, credit card number & expiry date checking, multiple attachments sending, and email auto responding.

  • Wufoo

    Making forms easy + fast + fun.

  • Web Form Factory

    Open Source Web Form Generator

Fun & Humor

Graphics & Image Generators

Htaccess Generators

  • Htaccess Disable Hotlinking Code Generator

    If people are ‘hotlinking’ to your image files, they are using your bandwidth which you will ultimately pay for. You can stop this from happening by placing a ‘.htaccess’ file in the folder where your images are stored…

  • .htaccess File Generator

    Apache htaccess file generator

  • .htaccess Generator

    .htaccess generator – will generate the files you need (.htaccess and .htpasswd) to password protect a directory of your website.

  • .htaccess Generator

    Create Encrypted Passwords in seconds

  • mod_rewrite RewriteRule Generator

    Our mod_rewrite RewriteRule generator will take a dynamic url given to it, and generate the correct syntax to place in a .htaccess file to allow the url to be rewritten in a spiderable format

  • URL Rewrite (mod_rewrite)

    With this tool you can generate dynamic urls to search engine friendly urls..

Metatag Generators

  • META builder

    This form will generate HTML META tags suitable for inclusion in your HTML document.

  • Meta Tag Generator

    Use this tool to generate a search engine friendly Head Tag for your web site

  • Title & Meta Tags Generator

    his code generator will build the title and meta tags for your site to help improve your website’s search engine ranking using our Meta Tag Generator

  • META Tag Generator

    Fast track creating your META tags with our advanced META tag generator. Just select the META tags you would like and let our META tag generator spit out the code for you

  • META Tag Generator

    Here‘s an easy to way to generate your META tags. Fill in the form and hit ‘submit‘

Misc Generators

Password Generators

PDF Generators

  • html2pdf

    Type the URL of a Webpage of your Choice to generate a PDF file

  • Notepad Generator – 1.0.0a

    This tool allows you to customize a PDF notepad.

  • PDFCreator

    PDFCreator is a free tool to create PDF files from nearly any Windows application.

  • PDF Online

    Quickly and easily convert your documents into PDF from anywhere in the world

  • RSS 2 PDF (Beta)

    Free Online RSS, Atom or OPML to PDF Generator

PHP & MySQL Generators

Popup Generators

  • Accessible Pop-up Window Generator

    Create pop-ups that are accessible and search engine-friendly

  • Popup Window Generator

    Use Eric’s Popup window Generator to easily add popup windows to your site!

  • Popup Window Maker

    Fill out the specifications of the popup window you would like to use, including the URL and the various options such as menubars, toolbars, scrollbars, etc, and click the generate button

Robots.txt Generators

Rss Generators

Sitemap Generators

Text Generators

  • Lorem Ipsum Generator

    Generator for randomized typographic filler text

  • Lorem Ipsum

    All the facts – Lipsum generator

  • Malevole – Text Generator

    This text generator has been developed based on years of careful research and is guaranteed to improve even the most lacklustre of designs.

  • Typetester

    The Typetester is an online application for comparison of the fonts for the screen.

Tooltip Generators

  • DHTML Tooltip Generator

    Sometimes the HTML “alt=” isn’t enough to relay the detail you’d like it to. Here is a tool that will allow you to give your users more interactive tooltips.

  • Flash Tooltip Generator

    Free online flash generator create a flash tooltip

Weblog Generators

Source: “Google, Yahoo, MSN, Dogpile, Altavista, Mixcat“

Technology Public

September 8, 2008 Posted by | Blogging, Technologypublic, Web and Internet | Leave a Comment

Flash Animation "Lable Cloud" For blogger

Blogger Buster: Blogumus: a flash animated label cloud for Blogger!: “installing Blogumus in your Blogger layout”

This widget “As you can see in my sidebar” uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work “out of the box” without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :) You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location. To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing. Here are the steps required to install Blogumus in your Blogger layout: Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):


<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>

Immediatly after this line, paste the following section of code:


<b:widget id=’Label99′ locked=’false’ title=’Labels’ type=’Label’>

<b:includable id=’main’>

<b:if cond=’data:title’>

<h2><data:title/></h2>

</b:if>

<div class=’widget-content’>

<script src=’http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js’ type=’text/javascript’/>

<div id=’flashcontent’>Blogumulus by <a href=’http://www.roytanck.com/’>Roy Tanck</a> and <a href=’http://www.bloggerbuster.com’>Amanda Fazani</a></div>

<script type=’text/javascript’>

var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

// uncomment next line to enable transparency

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

so.addVariable(&quot;tcolor&quot;, &quot;0×333333&quot;);

so.addVariable(&quot;mode&quot;, &quot;tags&quot;);

so.addVariable(&quot;distr&quot;, &quot;true&quot;);

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values=’data:labels’ var=’label’><a expr:href=’data:label.url’ style=’12′><data:label.name/></a></b:loop></tags>&quot;);

so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);

so.write(&quot;flashcontent&quot;);

</script>

<b:include name=’quickedit’/>

</div>

</b:includable>

</b:widget>

Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Then you are free to save your template, edit the colors and dimensions as required, or move it to a different location. That’s all!

Customizing Blogumus

n this default installation, Blogumus includes the following preset variables:

* Width is set to 240px
* Height is set to 300px;
* Background color is white
* Test color is grey
* Font size is “12″

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I’ll go through these options in the order they appear in the widget code. Editing width and height The variables for width and height are found in this line of the script:


var so = new SWFObject(“http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf”, “tagcloud”, “240“, “300“, “7″, “#ffffff”);

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer. Editing background color You can change the background color from white to any other color by altering the hex value in the same line:


var so = new SWFObject(“http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf”, “tagcloud”, “240″, “300″, “7″, “#ffffff“);

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes. Alter the color of text By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:


so.addVariable(“tcolor”, “0x333333“);

Be aware that “tcolor” is a Flash variable and doesn’t include the usual hash symbol of hex color codes. Be sure to only replace the numbers! Adjust the font size The maximum font size of tags is specified in this line:

so.addVariable(“tagcloud”, “<tags><b:loop values=’data:labels’ var=’label’><a expr:href=’data:label.url’ style=’12‘><data:label.name/></a></b:loop></tags>”);

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing “12″ to a larger or smaller number. While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.

If you have any problems feel free to ask :)

Technology Public

September 7, 2008 Posted by | Blogging, Technologypublic | 2 Comments

How much my blog worth….Trick

According to what Technorati said:

We here at Technorati think that all your blogs are priceles angkatkening But when Weblogs Inc. was bought by AOL a few weeks ago, Tristan Louis did the math banyakckp He figured out how much each blog in the Weblogs Inc. stable was worth, based on their Technorati rank.Inspired, Dane Carlson whipped up a handy little calculator with the Technorati API. Just enter your blog URL to see how much it’s “worth” using the Weblogs/AOL math.
………………………………………………………………………………………………………..

Today am going to show you how to trick your visitors or your friends with this little calculator:

First thing is visiting this site, and entering your website address “URL”.

Once done, you’ll see an HTML code provided.

Now all you’ve got to do is have a look at that code:

Now…you know what you’ve got to do!

Thats right, time to pump-up the ZERO to (Any number you want) duit

After that, just copy the entire edited HTML and just add it to your website.

You can see the code in action on my site.

And thats how we do it jelir

P.S. This trick won’t work if you check your website again through the checking tool. It only works on the HTML code you’ve edited, ya i know my blog is worth nothing. But i hope it grows bigger sengihnampakgigi
Technology Public

August 28, 2008 Posted by | Blogging, Hacks and Tricks, Technologypublic | Leave a Comment

   

Follow

Get every new post delivered to your Inbox.