Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Random Changing Banners in BLOGGER

    I know there are lots of posts on the scripts to use. My question is different.

    How do you put this into BLOGGER? I'm not a complete newbie to coding but I can't figure this out.

    The BLOGGER template is coded in CSS. I don't know how to insert the code that is supposed to be in the BODY, as all the header body is defined in CSS.

    Here is the BLOGGER code and I've been able to insert my own banner.
    Code:
    #header {
      background:#476 url("http://www.members.shaw.ca/slark/BLOG/blog_banner4.jpg") no-repeat left bottom;
      margin:0 0 0;
      padding:0 0 8px;
      color:#fff;
      }
    How would I add javascript into it.


    Many people say that javascript isn't a good choice but PHP might not be a choice for me.
    I have a free webserver provided by my ISP but it DOESN'T SUPPORT PHP. Unless someone can suggest a free server from where I can host my PHP script, I can rule PHP out. I only need to host a PHP script.


    I've searched and searched the web, but no results. Lots of scripts but I can't insert them.

    TIA

    VoD

    PS. Here is the full BLOGGER template code if that helps:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title><$BlogPageTitle$></title>
    
      <$BlogMetaData$>
    
      <style type="text/css">
    /*
    -----------------------------------------------
    Blogger Template Style
    Name:     Rounders 4
    Designer: Douglas Bowman
    URL:      www.stopdesign.com
    Date:     27 Feb 2004
    ----------------------------------------------- */
    
    
    body {
      background:#bca;
      margin:0;
      padding:20px 10px;
      text-align:center;
      font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
      color:#333;
      font-size/* */:/**/small;
      font-size: /**/small;
      }
    
    
    /* Page Structure
    ----------------------------------------------- */
    /* The images which help create rounded corners depend on the 
       following widths and measurements. If you want to change 
       these measurements, the images will also need to change.
       */
    #content {
      width:740px;
      margin:0 auto;
      text-align:left;
      }
    #main {
      width:485px;
      float:left;
      background:#466 url("http://www.blogblog.com/rounders4/corners_main_bot.gif") no-repeat left bottom;
      margin:15px 0 0;
      padding:0 0 10px;
      color:#ced;
      font-size:97%;
      line-height:1.5em;
      }
    #main2 {
      float:left;
      width:100%;
      background:url("http://www.blogblog.com/rounders4/corners_main_top.gif") no-repeat left top;
      padding:10px 0 0;
      }
    #sidebar {
      width:240px;
      float:right;
      margin:15px 0 0;
      font-size:97%;
      line-height:1.5em;
      }
    
    
    /* Links
    ----------------------------------------------- */
    a:link {
      color:#475;
      }
    a:visited {
      color:#798;
      }
    a:hover {
      color:#c63;
      }
    a img {
      border-width:0;
      }
    #main a:link {
      color:#fff;
      }
    #main a:visited {
      color:#ced;
      }
    #main a:hover {
      }
    
    /* Blog Header
    ----------------------------------------------- */
    
    #header {
      background:#476 url("http://www.members.shaw.ca/slark/BLOG/blog_banner4.jpg") no-repeat left bottom;
      margin:0 0 0;
      padding:0 0 8px;
      color:#fff;
      }
    #header div {
      background:url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
      padding:80px 15px 0;
      }
    #blog-title {
      margin:0;
      padding:10px 30px 5px;
      font-size:200%;
      line-height:1.2em;
      }
    #blog-title a {
      text-decoration:none;
      color:#fff;
      }
    #description {
      margin:0;
      padding:5px 30px 10px;
      font-size:94%;
      line-height:1.5em;
      }
    
    
    /* Posts
    ----------------------------------------------- */
    .date-header {
      margin:0 28px 0 43px;
      font-size:85%;
      line-height:2em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color:#cf4;
      }
    .post {
      margin:.3em 0 25px;
      padding:0 13px;
      border:1px dotted #6a7;
      border-width:1px 0;
      }
    .post-title {
      margin:0;
      font-size:135%;
      line-height:1.5em;
      background:url("http://www.blogblog.com/rounders4/icon_arrow.gif") no-repeat 10px .5em;
      display:block;
      border:1px dotted #6a7;
      border-width:0 1px 1px;
      padding:2px 14px 2px 29px;
      color:#fff;
      }
    a.title-link, .post-title strong {
      text-decoration:none;
      display:block;
      }
    a.title-link:hover {
      background-color:#355;
      color:#000;
      }
    .post-body {
      border:1px dotted #6a7;
      border-width:0 1px 1px;
      border-bottom-color:#485;
      padding:10px 14px 1px 29px;
      }
    html>body .post-body {
      border-bottom-width:0;
      }
    .post p {
      margin:0 0 .75em;
      }
    p.post-footer {
      background:#577;
      margin:0;
      padding:2px 14px 2px 29px;
      border:1px dotted #6a7;
      border-width:1px;
      border-bottom:1px solid #577;
      font-size:100%;
      line-height:1.5em;
      color:#acb;
      text-align:right;
      }
    html>body p.post-footer {
      border-bottom-color:transparent;
      }
    p.post-footer em {
      display:block;
      float:left;
      text-align:left;
      font-style:normal;
      }
    a.comment-link {
      /* IE5.0/Win doesn't apply padding to inline elements,
         so we hide these two declarations from it */
      background/* */:/**/url("http://www.blogblog.com/rounders4/icon_comment.gif") no-repeat 0 45%;
      padding-left:14px;
      }
    html>body a.comment-link {
      /* Respecified, for IE5/Mac's benefit */
      background:url("http://www.blogblog.com/rounders4/icon_comment.gif") no-repeat 0 45%;
      padding-left:14px;
      }
    .post img {
      margin:0 0 5px 0;
      padding:4px;
      border:1px solid #586;
      }
    blockquote {
      margin:.75em 0;
      border:1px dotted #596;
      border-width:1px 0;
      padding:5px 15px;
      }
    .post blockquote p {
      margin:.5em 0;
      }
    
    
    /* Comments
    ----------------------------------------------- */
    #comments {
      margin:-25px 13px 0;
      border:1px dotted #6a7;
      border-width:0 1px 1px;
      padding:20px 0 15px 0;
      }
    #comments h4 {
      margin:0 0 10px;
      padding:0 14px 2px 29px;
      border-bottom:1px dotted #6a7;
      font-size:120%;
      line-height:1.4em;
      color:#fff;
      }
    #comments-block {
      margin:0 15px 0 9px;
      }
    .comment-data {
      background:url("http://www.blogblog.com/rounders4/icon_comment.gif") no-repeat 2px .3em;
      margin:.5em 0;
      padding:0 0 0 20px;
      color:#ced;
      }
    .comment-poster {
      font-weight:bold;
      }
    .comment-body {
      margin:0 0 1.25em;
      padding:0 0 0 20px;
      }
    .comment-body p {
      margin:0 0 .5em;
      }
    .comment-timestamp {
      margin:0 0 .5em;
      padding:0 0 .75em 20px;
      color:#fff;
      }
    .comment-timestamp a:link {
      color:#fff;
      }
    .deleted-comment {
      font-style:italic;
      color:#ccc;
      }
    
    
    /* Profile
    ----------------------------------------------- */
    #profile-container {
      background:#9b5 url("http://www.blogblog.com/rounders4/corners_prof_bot.gif") no-repeat left bottom;
      margin:0 0 15px;
      padding:0 0 10px;
      color:#fff;
      }
    #profile-container h2 {
      background:url("http://www.blogblog.com/rounders4/corners_prof_top.gif") no-repeat left top;
      padding:10px 15px .2em;
      margin:0;
      border-width:0;
      font-size:115%;
      line-height:1.5em;
      color:#fff;
      }
    .profile-datablock {
      margin:0 15px .5em;
      border-top:1px dotted #ce9;
      padding-top:8px;
      }
    .profile-img {display:inline;}
    .profile-img img {
      float:left;
      margin:0 10px 5px 0;
      border:4px solid #dfa;
      }
    .profile-data strong {
      display:block;
      }
    #profile-container p {
      margin:0 15px .5em;
      }
    #profile-container .profile-textblock {
      clear:left;
      }
    #profile-container a {
      color:#fff;
      }
    .profile-link a {
      background:url("http://www.blogblog.com/rounders4/icon_profile.gif") no-repeat 0 .1em;
      padding-left:15px;
      font-weight:bold;
      }
    ul.profile-datablock {
      list-style-type:none;
      }
    
    
    /* Sidebar Boxes
    ----------------------------------------------- */
    .box {
      background:#fff url("http://www.blogblog.com/rounders4/corners_side_top.gif") no-repeat left top;
      margin:0 0 15px;
      padding:10px 0 0;
      color:#666;
      }
    .box2 {
      background:url("http://www.blogblog.com/rounders4/corners_side_bot.gif") no-repeat left bottom;
      padding:0 0 8px;
      }
    .box3 {
      background:url("http://www.blogblog.com/rounders4/rails_side.gif") repeat-y;
      padding:0 13px;
      }
    .sidebar-title {
      margin:0;
      padding:0 0 .2em;
      border-bottom:1px dotted #9b9;
      font-size:115%;
      line-height:1.5em;
      color:#566;
      }
    .box ul {
      margin:.5em 0 1.25em;
      padding:0 0px;
      list-style:none;
      }
    .box ul li {
      background:url("http://www.blogblog.com/rounders4/icon_arrow_sm.gif") no-repeat 2px .25em;
      margin:0;
      padding:0 0 3px 16px;
      margin-bottom:3px;
      border-bottom:1px dotted #eee;
      line-height:1.4em;
      }
    .box p {
      margin:0 0 .6em;
      }
    
    
    /* Footer
    ----------------------------------------------- */
    #footer {
      clear:both;
      margin:0;
      padding:15px 0 0;
      }
    #footer div {
      background:#466 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
      padding:8px 0 0;
      color:#fff;
      }
    #footer div div {
      background:url("http://www.blogblog.com/rounders4/corners_cap_bot.gif") no-repeat left bottom;
      padding:0 15px 8px;
      }
    #footer hr {display:none;}
    #footer p {margin:0;}
    #footer a {color:#fff;} 
      </style>
    
    
    </head>
    
    
    
    <body>
    
    
    
    <!-- Begin #content - Centers all content and provides edges for floated columns -->
    
    <div id="content">
    
    
    
    <!-- Blog Header -->
    
    <div id="header"><div>
    
      <h1 id="blog-title">
        <ItemPage><a href="<$BlogURL$>"></ItemPage>
    	&nbsp;
    	<ItemPage></a></ItemPage>
      </h1>
      <p id="description"><$BlogDescription$></p>
    
    </div></div>
    
    
    <!-- Start of StatCounter Code -->
    <script type="text/javascript" language="javascript">
    var sc_project=932377; 
    var sc_invisible=1; 
    var sc_partition=7; 
    var sc_security="65a6458e"; 
    </script>
    
    <script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com/" target="_blank"><img  src="http://c8.statcounter.com/counter.php?sc_project=932377&amp;java=0&amp;security=65a6458e&amp;invisible=1" alt="free stats" border="0"></a> </noscript>
    <!-- End of StatCounter Code -->
    
    
    
    <!-- Begin #main - Contains main-column blog content -->
    
    <div id="main"><div id="main2"><div id="main3">
    
    <Blogger>
    
        <BlogDateHeader>
      <h2 class="date-header"><$BlogDateHeaderDate$></h2>
      </BlogDateHeader>
    
      
    
         
    
      <!-- Begin .post -->
    
      <div class="post"><a name="<$BlogItemNumber$>"></a>
    
         
    
        <BlogItemTitle>
    	 <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>
        <h3 class="post-title">
    <a href="<$BlogItemPermalinkUrl$>" title="<$BlogItemTitle$>">
    	 <$BlogItemTitle$>
    </a>
        </h3>
    	 <BlogItemUrl></a></BlogItemUrl>
        </BlogItemTitle>
    
        <div class="post-body">
    
          <p>
          <$BlogItemBody$>
        </p>
    
        </div>
    
        <p class="post-footer">
          <em>posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemTitle$>: <$BlogItemDateTime$></a></em> &nbsp;
          <BlogItemCommentsEnabled>
             <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
          </BlogItemCommentsEnabled>  <$BlogItemControl$>
        </p>
    
      
    
      </div>
    
      <!-- End .post -->
    
      
    
    
      <!-- Begin #comments -->
     <ItemPage>
    
      <div id="comments">
    
    	<BlogItemCommentsEnabled><a name="comments"></a>
    
        <h4><$BlogItemCommentCount$> Comments:</h4>
    
        <dl id="comments-block">
          <BlogItemComments>
          <dt class="comment-data" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
            At <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>,
            <$BlogCommentAuthor$> said...
          </dt>
          <dd class="comment-body">
            <p><$BlogCommentBody$></p>
    	  <$BlogCommentDeleteIcon$>
          </dd>
    	  </BlogItemComments>
        </dl>
    	
    	<p class="comment-timestamp">
        <$BlogItemCreate$>
        </p>
      
      </BlogItemCommentsEnabled>
    	
    	<p style="padding-left:20px;">
    	<a href="<$BlogURL$>">&lt;&lt; Home</a>
        </p>
        </div>
    
    </ItemPage>
    
      <!-- End #comments -->
    
    </Blogger>
    
    
    
    </div></div></div>
    
    <!-- End #main -->
    
    
    
    
    
    
    
    
    
    <!-- Begin #sidebar -->
    
    <div id="sidebar">
    
      
    
      <!-- Begin #profile-container -->
    
       <$BlogMemberProfile$>
    
      <!-- End #profile -->
    
    
    
      
    
      <!-- Begin .box -->
    
      <div class="box"><div class="box2"><div class="box3">
        
            <MainOrArchivePage>
      <h2 class="sidebar-title">Click Me's</h2>
        <ul>    	
            <li><a href="http://help.blogger.com/bin/answer.py?answer=110">Paintful Productions Home</a></li>
        	<li><a href="http://flyingjunk.zippyvideos.com/gallery.z">Direct Link to Animations</a></li>
        	<li><a href="http://members.shaw.ca/slark/links/links.htm">My Portfolio</a></li>
        	<li><a href="http://members.shaw.ca/slark/">Zelenovsky Gallery</a></li>
    
      </ul>
      </MainOrArchivePage>
    
        <h2 class="sidebar-title">Previous Posts</h2>
      
      <ul id="recently">
        <BloggerPreviousItems>
            <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
         </BloggerPreviousItems>
      </ul>
      
      <MainOrArchivePage>
      <h2 class="sidebar-title">Archives</h2>
      
      <ul class="archive-list">
       	  <BloggerArchives>
        	<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
    	  </BloggerArchives>
          <ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
      </ul>
      </MainOrArchivePage>
      
      
      <p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>
    
        
    
        <!--
    
        <p>This is a paragraph of text that could go in the sidebar.</p>
    
        -->
    
      
    
      </div></div></div>
    
      <!-- End .box -->
    
    
    
      <!-- Begin .box -->
    
      <div class="box"><div class="box2"><div class="box3">
        
            <MainOrArchivePage>
      <h2 class="sidebar-title">Catch me at these great sites:</h2>
        <ul>    	
            <li><a href="http://help.blogger.com/bin/answer.py?answer=110"></a></li>
         </ul>
    
      <h2 class="sidebar-title">Proud Supporter of:</h2>
        <ul>    	
            <li><a href="http://spreadfirefox.com/community/?q=affiliates&amp;id=104888&amp;t=85"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/80x15/firefox_80x15.png"/></a></li>
         </ul>
    
    
    
      
    
      </div></div></div>
    
      <!-- End .box -->
    
    
    
    </div>
    
    <!-- End #sidebar -->
    
    
    
    
    
    
    
    
    
    <!-- Begin #footer -->
    
    <div id="footer"><div><div><hr />
    
    
    
      <p><!-- This is an optional footer. If you want text here, place it inside these tags, and remove this comment. -->&nbsp;</p>
    
    
    
    </div></div></div>
    
    <!-- End #footer -->
    
    
    
    
    
    
    
    
    
    </div>
    
    <!-- End #content -->
    
    
    
    </body>
    
    </html>
    Last edited by Visions of Domi; 09-23-2005 at 06:15 PM.

  • #2
    New Coder
    Join Date
    Sep 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not too sure your question is very clear...it sounds like you're having problems finding a spot to insert code into the template...can you clarify this at all?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •