Marccus blog have moved to Marccus.net. Do visit there!! =D

Pages

11.03.2008

Add Picture to Header in 3 Column Blogspot

Previously, I'd mention a post about covert the 2 column blogspot to 3 column blogspot (link).
But recently i found a problem in this modification, which is I can't show the picture I uploaded to become Header picture.

And here is the solution, after I crawl from the website. That is, to delete and re-create your header. But if you directly approach this solution, you will find difficulty to remove your header. WHY?? because the "remove" button is made hidden.
Now, let's make the remove button show up.

First, Log-in to your blogger.com
Goto, Layout and into the Edit Html.
(It is ok to either select or not to select the "expand widget templates", cause it still not affect the widget.)

Please download and save a copy of your current template before proceeding.

Now, in the html coding box find the code below,



</head>

<body>

  <div id='outer-wrapper'>

<div id='main-top'/> <!-- placeholder for image -->

<div id='wrap2'><div id='wrap3'>

  <b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Marccus Blog (Header)' type='Header'/>
</b:section>

  <div class='sidebar'>



Replace the "true" to "false"



 </head>

 <body>

   <div id='outer-wrapper'>

 <div id='main-top'/> <!-- placeholder for image -->

 <div id='wrap2'><div id='wrap3'>

   <b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
 <b:widget id='Header1' locked='false' title='Marccus Blog (Header)' type='Header'/>
 </b:section>

   <div class='sidebar'>



Then now Save your template.

Next, Goto Page Elements, you will find out that your header is now can be remove.
Remove your header, and add the new one.

Add your picture and select the picture to be placed "instead of title and description". Save the widget editing box.
Save your editing now and review your blog.

Ta-daa~~~ Your header is now become your Title! =)

....

There is a possible where this solution will not solve the problem.
Which is when your blog template is ordinary do not have a header!?
....

If your blog template is do not have a header originally, just do this! =)

We just do the same thing as mention just now to find the code, then..

Add the following code

 <a href="your blog address">
<img src="your image address">
  </a>

right after body tag 
<body>




So, it will look like this,



</head>

 <body>

 <a href="your blog address">
 <img src="your image address">
    </a>

<div id='outer-wrapper'>

<div id='main-top'/> <!-- placeholder for image -->

<div id='wrap2'><div id='wrap3'>


<div class='sidebar'>



Save your template and review your blog.
You should have see your picture appeared as Header nicely on top.



Hope the information in here will help some =)
Good Luck for the try!

and again..
Please download and save a copy of your current template before proceeding.
Generated by: The M at 23:34:00
Category:

6 comments:

  1. cklim4 November 2008 at 04:31

    wao..great..when i hv free time will switch to 3 column template d

    ReplyDelete
  2. cklim4 November 2008 at 04:44

    BY da way, where u find out the new adsense, it sounds great, i also add in my english blog..haha

    ReplyDelete
  3. The M4 November 2008 at 11:12

    haha, then we will wait for your new look of your blog.

    The new adsense?
    is it you mean the nuffnang or advertlets?

    nuffnang de is http://www.nuffnang.com.my
    advertlets de is http://www.advertlets.com

    ReplyDelete
  4. MsXeRoZ Nicole4 November 2008 at 12:22

    my kepala pusing.. Mr. Marccus, can u kautim my blog for me? i wan the happyometer also...and the nice nice stuff

    ReplyDelete
  5. MsXeRoZ Nicole4 November 2008 at 12:22

    How can i make the blog head like nicolecium? please advice. thanks!

    ReplyDelete
  6. The M4 November 2008 at 15:22

    okie, u go register the nuffnang account first.

    then the nicolecium one u have go snap a photo style macam dia first, ask zi jian help u snap, keke..

    ReplyDelete

Comments here.

Subscribe to: Post Comments (Atom)