Thesis Themes Customization: 13 | Add Note/Alert Box in Post

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

Select custom.css file and place this code below it:

/******************************************************************/

/* NOTE BOX BY Allhelpz.blogspot.com */

/******************************************************************/

.custom .format_text p.note {

background: #E3F0F2 url(YOUR-NOTE-IMAGE-URL) center no-repeat; border: 1px solid #66CCCC; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 50px;

-moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px;

-moz-border-radius-topleft:4px; -moz-border-radius-topright:4px;

-webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px;

-webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

To put this style in your post place code in html:

<p class="note">WRITE-HERE</p>

 TO create Alert Box
Select custom.css file and place this code below it:

/******************************************************************/

/* ALERT NOTE BOX BY allhelpz.blogspot.com */

/******************************************************************/

.custom .format_text p.alert {

background: #EEEEEE url(YOUR-ALERT-IMAGE-URL) center no-repeat; border: 1px solid #000000; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 50px;

-moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px;

-moz-border-radius-topleft:4px; -moz-border-radius-topright:4px;

-webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px;

-webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

 To put this style in your post place code in html:

<p class="alert">WRITE-HERE</p>

DOWNLOAD IMAGE FILES

Now save it.

[Please comment for any Problem]

Thesis Themes Customization: 12 | Create Archive Page in Thesis

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

Place this code in custom.css :

/* SAVE THIS IN CUSTOM.CSS FILE */

/* custom  sitemap and archives page */

.custom .sitemap h3 {margin-top: 0;}

.custom .sitemap ul {font-size: .85em; }

.custom .sitemapl { float: left; width: 30%;}

.custom .sitemapr { float: right; width: 70%;}

Select custom_functions.php form drop down menu and Click Edit Selected File.

Place this code below custom_functions.php :

/* SAVE THIS IN CUSTOM_FUNCTIONS.PHP FILE */

remove_action('thesis_hook_archives_template', 'thesis_archives_template');

add_action('thesis_hook_after_post', 'custom_sitemap');

/* SITEMAP AND ARCHIVES PAGES */

function custom_sitemap() {

if (is_page('754')) { ?>

<div>

<div class="sitemapl">

<h3>Blog Pages:</h3>

<ul>

<?php wp_list_pages('title_li='); ?>

</ul>

<h3>Monthly Blog Archive:</h3>

<ul>

<?php wp_get_archives('type=monthly'); ?>

</ul>

<h3>Blog Category Archive:</h3>

<ul>

<?php wp_list_categories('sort_column=name&title_li='); ?>

</ul>

</div>

<div class="sitemapr">

<h3>Last 40 Posts:</h3>

<ul>

<?php wp_get_archives('type=postbypost&limit=40'); ?>

</ul>

</div>

</div>

<?php } }

 N.B: if (is_page('754(HERE-YOUR-SITEMAP-PAGR-ID)')) { ?>

  
Now save it.

[Please comment for any Problem]

Thesis Themes Customization: 11 | Add Page Navigation

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Select custom_functions.php form drop down menu and Click Edit Selected File.

Place this code below custom_functions.php :

// Page Navigation

function custom_post_navigation(){

if(function_exists('wp_pagenavi')){

echo'<div class="prev_next">';

wp_pagenavi();

echo'</div>';

} else

thesis_post_navigation();

}

remove_action('thesis_hook_after_content','thesis_post_navigation');

add_action('thesis_hook_after_content','custom_post_navigation');

 Select custom.css file and place this code below it:

/* Page Navigation */

.custom .full_width #content_box .wp-pagenavi .page {

margin: 2px;

padding: 2px 4px;

}

 Now save it.

[Please comment for any Problem]

Thesis Themes Customization: 10 | Customize footer / Footer customization

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Select custom_functions.php form drop down menu and Click Edit Selected File.

Place this code below custom_functions.php :

/* Remove thesis attribution link ONLY IF YOU HAVE A DEVELOPERS LICENSE!!! */

remove_action('thesis_hook_footer', 'thesis_attribution');

/*  Add Custom Footer Content by: allhelpz.blogspot.com */

function wpb_att_link (){

?>

<div class="wpb_att_link">

<p align="center">&copy; copyright: 2012 | All right reserved.</p></br>

<p align="center">Blog customized by: <a href="http://www.example.com">YOUR-NAME</a></p>

</div>

<?php 

}

add_action ('thesis_hook_footer', 'wpb_att_link');

 Now save it.

[Please comment for any Problem]

Thesis Themes Customization: 9 | Add Breadcrumbs or Blog Location

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Select custom_functions.php form drop down menu and Click Edit Selected File.

Place this code below custom_functions.php :

function the_breadcrumbs() {

    if (!is_home()) {

        echo 'You are here: <a href="';

        echo get_option('home');

        echo '">';

        echo 'Home';

        echo "</a> /";

        if (is_category() || is_single()) {

            the_category(', ','&title_li=');

            if (is_single()) {

                echo " /";

                the_title();

            }

        } elseif (is_page()) {

            echo the_title();

}}}

function show_breadcrumbs() { ?>

<div id="breadcrumbs">

    <?php the_breadcrumbs(); ?>

</div>

<?php }

add_action('thesis_hook_before_content','show_breadcrumbs');

 Select custom.css file and place this code below it:

#breadcrumbs {

    background: #535637;

    padding: 10px;

    border-bottom-left-radius: 18px;

    border-top-right-radius: 18px;

    font-size: 14px;

    font-family: Arial, Helvetica, sans-serif, SolaimanLipi;

    color: #fff;

}

#breadcrumbs a {

    color: #CCC;

    font-weight: bold;

}

#breadcrumbs a:hover {

    text-decoration: none;

}

 Now save it.

[Please comment for any Problem]

Thesis Themes Customization: 8 | Add related post after Post or Page

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Select custom_functions.php form drop down menu and Click Edit Selected File.

Place this code below custom_functions.php :

//related post shortcode
function related_posts_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'limit' => '7',
    ), $atts));
    global $wpdb, $post, $table_prefix;
    if ($post->ID) {
        $retval = '
<ul>';
        // Get tags
        $tags = wp_get_post_tags($post->ID);
        $tagsarray = array();
        foreach ($tags as $tag) {
            $tagsarray[] = $tag->term_id;
        }
        $tagslist = implode(',', $tagsarray);
        // Do the query
        $q = "
            SELECT p.*, count(tr.object_id) as count
            FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p
            WHERE tt.taxonomy ='post_tag'
                AND tt.term_taxonomy_id = tr.term_taxonomy_id
                AND tr.object_id  = p.ID
            AND tt.term_id IN ($tagslist)
                AND p.ID != $post->ID
                AND p.post_status = 'publish'
                AND p.post_date_gmt < NOW()
            GROUP BY tr.object_id
            ORDER BY count DESC, p.post_date_gmt DESC
            LIMIT $limit;";
        $related = $wpdb->get_results($q);
        if ( $related ) {
            foreach($related as $r) {
            $retval .= '
    <li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>
';
        }
        } else {
            $retval .= '
    <li>No related post found :(</li>
';
        }
        $retval .= '</ul>
';
        return $retval;
    }
    return;
}
add_shortcode('related_posts', 'related_posts_shortcode');
function single_post_relatedpost() {
if (is_single()) { ?>
<h3>Related Post:</h3>
<?php echo do_shortcode("[related_posts]"); ?>
<?php }
}
add_action('thesis_hook_after_post', 'single_post_relatedpost');

 Now save it.

[Please comment for any Problem]

Thesis Themes Customization: 7 | Author Details after post

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Select custom_functions.php form drop down menu and Click Edit Selected File.

Place this code below custom_functions.php :

function post_footer() {

if (is_single())

{

?>

<div class="postauthor">

<img src="YOUR-IMAGE-RL" height="60" width="60"/>

<h4>Author: <a href="<?php the_author_url(); ?>">

<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>

<p><?php the_author_firstname(); ?> Has written <strong><?php the_author_posts(); ?></strong> posts for this blog.<br/><?php the_author_description(); ?></p>

</div>

<?php

}

}

add_action('thesis_hook_after_post_box', 'post_footer');

 Select custom.css file and place this code below it:

.postauthor { background: #BDF7CF; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border-top: 1px solid #048BB7; border-bottom: 1px solid #048BB7; border-left: 1px solid #048BB7; border-right: 1px solid #048BB7; overflow: hidden; padding: 1.5em; }.postauthor img { -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 2px solid #048BB7; float: left; margin-right: 1.5em; }

.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }

.postauthor p { color: #000000; font-size: 13px; margin-bottom: 12px; }

 Now save it.

[Please comment for any Problem]

Thesis Themes Customization: 6 | Add fidex follow up / social Button

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Place this code below custom.css :

/* Sidebar Social Icon */

.custom #fixed-social-icons {background-color:#fff; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 3px solid #048bb7; width:35px; position:fixed; top:320px; right:0px; }

 .custom #fixed-social-icons a { display:block; height:32px; width:35px; }

  .custom #fixed-social-icons a.social-twitter { background: url('TWITTWE IMAGE URL') 0 0 no-repeat; }

  .custom #fixed-social-icons a.social-rss { background: url('RSS IMAGE URL') 0 0 no-repeat; }

   .custom #fixed-social-icons a.social-facebook { background: url('FACEBOOK IMAGE URL') 0 0 no-repeat; }

.custom #fixed-social-icons a.social-YouTube { background: url('YOUTUBE IMAGE URL') 0 0 no-repeat; }

DOWNLOAD IMAGE FORM HERE.

Now go to Widget and Put this code in sidebar:

<div id="fixed-social-icons">

  <a href="http://twitter.com/YOUR-NAME" class="social-twitter" rel="nofollow" target="_blank" title="Follow us on Twitter"></a>

  <a href="http://feeds.feedburner.com/YOUR-NAME" class="social-rss" rel="nofollow" target="_blank" title="Subscribe to RSS Feed" rel="nofollow"></a>

  <a href="http://www.facebook.com/YOUR-NAME" rel="nofollow"  class="social-facebook" target="_blank" title="Join us on Facebook"></a>

  <a href="http://www.youtube.com/user/YOUR-NAME" class="social-YouTube" rel="nofollow" target="_blank" title="All helpz"></a></div>

To add Go Up and Go Down button put this code:

<div id="fixed-social-icons">

  <a href="http://twitter.com/YOUR-NAME" class="social-twitter" rel="nofollow" target="_blank" title="Follow us on Twitter"></a>

  <a href="http://feeds.feedburner.com/YOUR-NAME" class="social-rss" rel="nofollow" target="_blank" title="Subscribe to RSS Feed" rel="nofollow"></a>

  <a href="http://www.facebook.com/YOUR-NAME" rel="nofollow"  class="social-facebook" target="_blank" title="Join us on Facebook"></a>

  <a href="http://www.youtube.com/user/YOUR-NAME" class="social-YouTube" rel="nofollow" target="_blank" title="All helpz"></a></div>

<a href="#header" class="social-up" title="Go to Up"><img src="YOUR UP BUTTON IMAGE URL" height="32" width="35px"/></a>

<a href="#footer" class="social-up" title="Go to Bottom"><img src="YOUR DOWN BUTTON IMAGE URL" height="32" width="35px"/></a></div>

NOW SAVE.

[PLEASE COMMENT FOR PROBLEM]

How to add related posts below/after every post in Blogger

Do you want to add Related posts/Similar posts widget below every post on your blog?
Lets do this :

Although you do not have to use this file as I have already linked the file in STEP #5. So, store this file as a back up on your PC.

1. Go to Blogger.com
2. Now go to "Template" then to "Edit HTML" section
3. Back up your present template.
4. Now click on "Expand widget templates".
5. Find this code:

]]></b:skin>

Paste BEFORE/ABOVE this code:

<!-- Related Post css -->
<!--start related posts css Info : http://www.allhelpz.blogspot.com-->

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

<!--end related posts css.Info : http://www.allhelpz.blogspot.com-->

6. Now search for this code line:

 <div class='post-footer'>

And after that line, paste this code:

<!--start related posts code Info : http://www.allhelpz.blogspot.com-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Related Posts:</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2s1GFfPjdUP1TeeIuiW7yYr_kw0a8CfuyYeZurGZsv7DohugU_mBPHLeXME6RIHSPYRdOqp4R1A4bKf-4vkgbBt1DHvanxDu1YUfq1SkNaCr0Hdrl92yfJTsYQSLR1rGkLWKPgGiV_U/s1600/no-image.gif&quot;;
var maxresults=5;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>

</b:if>
<div style='clear:both'/>
<br/>
<!--end related posts code Info : http://www.allhelpz.blogspot.com-->

To change the number of similar/related posts to be displayed, change the code max-results=6
Now save your template.
*(Remember to add labels after your posts, during publishing them)

[Please comment for any Problem]

Thesis Themes Customization: 5 | Add category Nav menu after Header

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Select custom_functions.php form drop down menu and Click Edit Selected File.

Place this code below custom_functions.php :

function category_navigation(){

?>

<ul class="catnav">

    <?php wp_list_categories('title_li=') ?> 

</ul>

<?php

}

add_action('thesis_hook_after_header','category_navigation');

 Select custom.css file and place this code below it:

/* Layer of Category navigation */

.catnav {

    border-top: 1px solid #DDDDDD;

    border-bottom: 3px solid #CC0000;

    list-style: none;

    font-size: 13px;

    height: 30px;

    line-height: 30px;

}

 

.catnav li {

    line-height: 30px;

    float: left;

    list-style:none;

}

.catnav li a {

    color: #888888;

    display: block;

    padding: 0 13px;

    font-size: 13px;

    border-right:1px solid #DDDDDD;

}

 

.catnav li a:hover {

    text-decoration: none;

    color: #FFFFFF;

    background: #CC0000;

}

 

.catnav li ul {

    display: none;

}

Use this code for round shape:

/* Layer of Category navigation */

.catnav {

    border-top: 1px solid #DDDDDD;

    border-bottom: 3px solid #CC0000;

    list-style: none;

    font-size: 13px;

    height: 30px;

    line-height: 30px;

}

 

.catnav li {

    line-height: 30px;

    float: left;

    list-style:none;

}

.catnav li a {

    color: #888888;

    display: block;

    padding: 0 13px;

    font-size: 13px;

    border-right:1px solid #DDDDDD;

-moz-border-radius: 3px;

    -khtml-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

}

 

.catnav li a:hover {

    text-decoration: none;

    color: #FFFFFF;

    background: #CC0000;

}

 

.catnav li ul {

    display: none;

}

 Now save it.

[Please comment for any Problem]

Thesis Themes Customization: 4 | Move Nav Menu after Header

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Select custom_functions.php form drop down menu and Click Edit Selected File.

Place this code below custom_functions.php :

remove_action('thesis_hook_before_header', 'thesis_nav_menu');

add_action('thesis_hook_after_header', 'thesis_nav_menu');

 Now save it.

[Please comment for any Problem]

Thesis Themes Customization: 3 | Add Header Logo

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Place this code below custom.css :

.custom #header #logo a {

    display:block;

    width:384px;

    height:100px;

    /* insert the file path to your logo below */

    background:url(YOUR LOGO URL HERE) center no-repeat;

    color:#000000;

    text-indent: -9999px;

    padding: 2px 0px;

}

Now Save it.

[Please comment for any Problem]

Thesis Themes Customization: 2 | Nav Menu Color/Style

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Place this code below custom.css :

.custom .menu a{color:#FFF; font-size:13px; background:#CC0000;}

.custom .menu a:hover,#topMenu a:hover{text-decoration:none; background:#610000; color:#FFF;}

.custom .current a{cursor:default;background:#000;}

For roud shape place this code:

.custom .menu a{-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color:#FFF; font-size:13px; background:#CC0000;}

.custom .menu a:hover,#topMenu a:hover{text-decoration:none; background:#610000; color:#FFF;}

.custom .current a{cursor:default;background:#000;}

Now save it.

[Comment Here For Any Problem]

Thesis Theme Customize:1 | Add Container Border

I will use 1.8 Developer version of Thesis Theme

LogIn to your Dashboard and Go to Thesis > Custom File Editor

 

Place this code below custom.css :

.custom #container{border:0.4em solid #048BB7;margin-bottom:2em;}

Give this code for round shape :

.custom #container{-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;border:0.3em solid #048BB7;margin-bottom:2em;}

Now save it.

[Please comment for any Problem]

Add Comment's Pagination in Wordpress without any Plugin

Comment's Pagination help you to load your site if there are a lot of comment in any blog post. There are many Wordpress plugin to do this. But sometimes it don't shows what you want. But now I am shearing a tricks to do this without any plugin.

Lets start..

LogIn to your account and go to comments.php

Now find this default code below:

<div class="alignleft"><?php previous_comments_link() ?></div>

<div class="alignright"><?php next_comments_link() ?></div>

 Place this code after this:

<div class="paginate">

<?php

//Create pagination links for the comments on the current post

paginate_comments_links( array('prev_text' => '‹ New comment', 'next_text' => 'Old comment  ›'));

?>

</div>

N.B: If you don't find default code then place above commentlist code.

Generally "commentlist" code is like:

<ol class="commentlist">

    <?php wp_list_comments('avatar_size=64&style=ol'); ?>

    </ol>

Now place this code in style.css :

.paginate {

margin: 10px 0 20px 0;

padding: 5px 1px 5px;

text-align: center;

font-family: Arial, Helvetica, sans-serif, SolaimanLipi;

}

.paginate a {

padding: 3px 6px 4px 6px;

margin: 3px;

text-decoration: none;

border: 1px solid #ccc;

color: #666;

background-color: inherit;

font-family: Arial, Helvetica, sans-serif, SolaimanLipi;

}

.paginate a:hover {

border: 1px solid #444;

color: #444;

background-color: #eee;

}

.paginate .current {

padding: 3px 6px 4px 6px;

margin: 3px;

font-weight:bold;

border: 1px solid #666;

color: #444;

background-color: #eee;

}

 Now go to Dashboard > Settings > Discussion Settings
Then chose the value of Break comments into pages with top level comments per page and the page displayed by default as you like.

[Please comment for any Problem]

How to redirect your website to its mobile version

Have you created a mobile version of your site? Do you want to redirect your real site to mobile version if any one visit from mobile device? 

 Example:

I have a website. Url is : www.myweb.com

Also have a mobile version of this. Url: m.myweb.com

I want: If anyone go to www.myweb.com from mobile he will be redirect to m.myweb.com automatically.

Its not so hard. Lets do this :D

Javascript Method

Mobile phones have a small screen width. You can redirect visitors to your mobile site if they have a screen width of less than or equal to 800 pixels. Use this code:

<script type="text/javascript">
 <!--
 if (screen.width <= 800) {
  window.location = "http://m.myweb.com";
 }
 //-->
</script>

You will Change m.domain.com to your personal domain name.

To get the best results, you should  have to test with various smart phones. Please remember however that if the user does not have javascript enabled, this will not work.

.htaccess redirects

Useing .htaccess file you can do this easily. You can easily do this to any web site created by any CMS (Wordpress,Joomla) useing .htaccess file.
Put this code to your .htaccess file and change url:

RewriteEngine On
# Check for mime types commonly accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.myweb.com%{REQUEST_URI} [R,L]

Add 4 Column Footer to Blogger

See How to Add a 3 Column Footer to Blogger:

1. Log in to Blogger if not already logged in
2. Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes.
3. Navigate to Template > Edit HTML
4. Back up your template as a precaution by downloading it to your computer.
5. Find the following section
   
   

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

   
   If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
6. To Add a 3 Column Footer to Blogger:
   Replace all the code located in Step 5 with the following
   
   

   <div id='footer-columns'>
   <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>

   
   To Add a 3 Column Footer with a Lower Footer Section:
   Replace all the code located in Step 5 with the following
   
   

   <div id='footer-columns'>
   <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   <p/>
   <div id='footer-bottom' style='text-align: center; padding: 10px;'>
   <b:section class='footer' id='col-bottom' preferred='yes'>
   </b:section>
   </div>
   <div style='clear:both;'/>
   </div>

   That's all. Now try your self. Enjoy...

[Please Comment Here for any Help]

Add 3 Column Footer to Blogger

See How to Add a 3 Column Footer to Blogger:

1. Log in to Blogger if not already logged in
   
2. Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes.
   
3. Navigate to Template > Edit HTML
   
4. Back up your template as a precaution by downloading it to your computer.
   
5. Find the following section
   
   

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

   
   If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
   
6. To Add a 3 Column Footer to Blogger:
   Replace all the code located in Step 5 with the following
   
   

   <div id='footer-columns'>
   <div id='footer1' 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='footer2' 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='footer3' 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;'/>
   </div>

   
   To Add a 3 Column Footer with a Lower Footer Section:
   Replace all the code located in Step 5 with the following
   
   

   <div id='footer-columns'>
   <div id='footer1' 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='footer2' 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='footer3' 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/>
   <div id='footer-bottom' style='text-align: center; padding: 10px;'>
   <b:section class='footer' id='col-bottom' preferred='yes'>
   </b:section>
   </div>
   <div style='clear:both;'/>
   </div>

   
   3 column footer

[Please Comment Here for any Help]