Chen nhieu anh cho Banner

Rotating image banners for blogger

Some of you were curious to find out how to create a rotating banner in blogger, here's how I managed to do it:

1) Enabling image header display on blogger first.
Theoratically, this is not necessary if you knew your way around blogger's template language, but since I embed my code inside the useImageconditional block, it has to be enabled before header images will be shown. Select the Template->Page Elements tab and click 'edit' on the (Header)element, which the following window appears:



Select the image that you want, from an external URL. You won't be using the 'From your computer' option, because there's no way you can know how the url of the image is managed in order to use it. The actual picture doesn't matter, but it is usually the one you want to be showing when javascript is not enabled. Click on 'Save changes' once you are done selecting the image.

Blogger is stingy in the sense that it only allows one image to be uploaded at a time, so you'll need to use an external hosting site to host your other pictures in order for rotation. You can use any image hosting site, and I useflickr for this task.

2) Modifying the blogger template.
The template needs to be modified to use javascript to perform the random image rotation. Select the Edit HTML tab, and find the following lines in your template, and insert the modification highlighted in red:

<b:if cond='data:useImage'>
  <b:if cond='data:imagePlacement == "REPLACE"'>
  <!--Show just the image, no text-->
  <div id='header-inner'>
    <a expr:href='data:blog.homepageUrl' style='display: block'>
    <img expr:alt='data:title' expr:height='data:height' 
    expr:id='data:widget.instanceId + 
    "_headerimg"' expr:src='data:sourceUrl' 
    expr:width='data:width' style='display: block'/>
    </a>
  </div>
  <b:else/>
  <!--Show image as background to text-->
    <div class='titlewrapper' style='background: transparent'>
    <h1 class='title' style='background: transparent; border-width: 0px'>
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <data:title/>
        <b:else/>
        <a expr:href='data:blog.homepageUrl'><data:title/></a>
        </b:if>
      </h1>
      </div>
      <div class='descriptionwrapper'>
      <p class='description'><span><data:description/></span></p>
      </div>
<!-- Start Modification. -->
<script type='text/javascript'>
var banner= new Array()
banner[0]="http://your.image.url"
banner[1]="http://your.image.url"
banner[2]="http://your.image.url"
banner[3]="http://your.image.url"
banner[4]="http://your.image.url"
var random=Math.round((banner.length-1)*Math.random());
document.write("<img src='"+banner[random]+"' style='display: block'/>");
</script>
<noscript>
    <img expr:alt='data:title' expr:height='data:height' 
    expr:id='data:widget.instanceId + 
    "_headerimg"' expr:src='data:sourceUrl' 
    expr:width='data:width' style='display: block'/>
</noscript>
<!-- End Modification. -->
</b:if>

Make sure you replace "http://your.image.url" with the actual url of your images, which should now allow you to display changing image banners for blogger.

Tham khao blog nay: http://7seeds-pro.blogspot.com/