How to add images to a main banner

Tue Aug 02, 2011 4:45 am

Hi guys, Could you please tell how can I add images with a link for each image to the main banner of this template:
http://famproperties-realestate.blogspot.com/

Code:: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[/* ----------------------------------------------- Name : City Blog URL : http://buymythemes.com/ City Blog comes under a Creative Commons license. They are free of charge to use as a theme for your blog and you can make changes to the templates to suit your needs. but please you must keep the footer credit links intact which provides credit to its author. -----------------------------------------------*/ /* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff"> <Variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333"> <Variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#5588aa"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#666666"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#ff0000"> <Variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999"> <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#999999"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif"> <Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> <Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"> <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"> */ body#layout #menu{ display: none; } *{margin:0;padding:0} #navbar-iframe{height:0;visibility:hidden;display:none} body{margin:0px;padding:0px;color:#aaa;font-family:Tahoma,Geneva,sans-serif;font-size:12px;line-height:1.5em;background-color:#121212;background-image:url(https://lh6.googleusercontent.com/-XCbahd-Sstc/ThoEF6V0v3I/AAAAAAAAB6U/i9NMKdPHTAM/body.jpg);background-repeat:repeat-x;background-position:top} a,a:link,a:visited{color:#fff;text-decoration:none}a:hover{text-decoration:underline} p{margin:0 0 10px 0;padding:0} img{border:none} h2,h3,h4,h5,h6{color:#00baf2;font-weight:normal} h1{font-size:34px;margin:0 0 30px 0;padding:5px 0} h3{font-size:26px;margin:0 0 20px 0;padding:0} h2{font-size:21px;margin:0 0 15px;padding:0} h4{font-size:18px;margin:0 0 15px;padding:0} h5{font-size:16px;margin:0 0 10px;padding:0} h6{font-size:14px;margin:0 0 5px;padding:0} .cleaner{clear:both} .h10{height:10px} .h20{height:20px} .h30{height:30px} .h40{height:40px} .h50{height:50px} .h60{height:60px} a.more{display:block;width:98px;height:27px;padding:7px 0 0 10px;color:#000;font-weight:bold;background:url(https://lh4.googleusercontent.com/-Fiq9VO9Jj-4/ThoEGJ1dDOI/AAAAAAAAB6Y/WeA6TDfE1BY/button.png) no-repeat} a.more:hover{color:#fff;text-decoration:none}.fl{float:left}.fr{float:right} blockquote{font-style:italic;margin-left:10px} cite{font-weight:bold;color:#000}cite span{color:#333} em{color:#ca5005;font-weight:700} .tmo_list{margin:0 0 0 10px;padding:0;list-style:none} .tmo_list li{color:#fff;margin:0 0 10px;padding:3px 0 3px 15px;background:transparent url(https://lh4.googleusercontent.com/-K0vFrTUB4KQ/ThoEI5SWk7I/AAAAAAAAB6w/-0cL4Gh2Qrk/list.jpg) no-repeat scroll 0 8px} .tmo_list li a{color:#fff} .tmo_list li a:hover{color:#fff} #wrapper{width:960px;margin:0 auto} #header{color:#fff;width:960px;height:100px;padding-top:50px;text-align:center;background:url(https://lh5.googleusercontent.com/-4K-YP-i1rWU/ThoEIWIZ8FI/AAAAAAAAB6o/oZQHOLU4gTI/s1600/header.jpg) no-repeat top center} #title {color:#fff;text-decoration:none} #title a:hover{color:#fff;text-decoration:none} #title a{display:block;width:300px;margin:0 auto;text-align:center;padding:0 0 0 0;font-size:24px;color:#fff;font-weight:normal;text-decoration:none} #title a span{display:block;font-size:14px;color:#fff} #menu{width:900px;height:81px;padding:0 30px; background:url(https://lh6.googleusercontent.com/-ixYt6csiI-U/ThoEJ59Y2zI/AAAAAAAAB7A/LdBhLoFde0U/s1600/menu.jpg) no-repeat top center} #menu ul{height:56px;margin:0;padding:25px 0 0 0;list-style:none} #menu ul li{padding:0;margin:0;display:block} #menu ul li a{float:left;display:block;height:56px;padding:0 20px;margin-right:1px;font-size:14px;color:#b1b1b1;text-align:center;text-decoration:none;font-weight:bold;outline:none;border:none} #menu ul li a span{display:block;font-size:11px;font-weight:normal;color:#454545} #menu ul li a:hover,#menu ul .current{color:#cd7e00;background:url(https://lh6.googleusercontent.com/-dJjMffhJb44/ThoEJjwhq9I/AAAAAAAAB64/9BYqhekPtTE/menu_hover.jpg) center bottom no-repeat} #main-wrapper{width:900px;padding:30px; background:url(https://lh4.googleusercontent.com/-NMuYkbAjQiA/ThoEJWJM75I/AAAAAAAAB60/kfj2QsH3i3o/s1600/main.jpg) repeat-y} #content{float:left;width:600px;padding:0 50px 0 30px} #featured{width:590px;background:#111;height:380px;padding:2px;border:1px solid #000;margin-bottom:40px} h2.date-header{display:none} .post{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid #4c4c4c}.post h3{margin:0;padding:0px 0 10px 0;line-height:30px} .post .post_meta{padding:5px;margin-bottom:20px;background:#131313} .post p{text-align:justify;margin-bottom:20px} .post img{float:left;margin-right:20px;padding:5px;border:1px solid #000;background:#221c1c;display:inline-block} #sidebar-wrapper{float:left;width:180px;padding-left:30px} .sidebar_box{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #433d3a} #footer-wrapper{width:100%;background:#000 url(https://lh5.googleusercontent.com/-ECB_3HEbrkA/ThoEHItyJcI/AAAAAAAAB6g/j-LAAYvM_4Y/footer.jpg) top repeat-x} #footer{width:900px;text-align:center;margin:0 auto;padding:40px 30px 20px;color:#4b4b4b;background:url(https://lh4.googleusercontent.com/-1mvrtT74120/ThoEHX3casI/AAAAAAAAB6k/XxWi-p_iBpw/s1600/footer_top.jpg) top center no-repeat} #footer a{color:#71695c} .sliderwrapper{position:relative;margin:0;overflow:hidden;width:580px;height:330px; border:5px solid #232323} .pagination{background:#232323; text-align:right;padding:10px 15px} .pagination a{font-size:11px;color:#999;padding:2px 5px;background-color:#111;border:1px solid #000} .pagination a:hover,.pagination a.selected{color:#111;background-color:#3af;border:1px solid #00baf2} .featuredPost{width:580px;padding:5px 10px;background:url(https://lh5.googleusercontent.com/-XYYXGWTNS9w/TfxVcMBMa9I/AAAAAAAAAQs/oc17wYBaBIw/trans.png);color:#dedde5;position:absolute;bottom:0} .sliderwrapper h2{width:580px;padding:10px 10px;background:url(https://lh5.googleusercontent.com/-XYYXGWTNS9w/TfxVcMBMa9I/AAAAAAAAAQs/oc17wYBaBIw/trans.png);color:#dedde5;position:absolute;top:0;font-size:16px;color:#fff} .sliderwrapper h2 a{color:#ccc}.sliderwrapper h2 a:hover{color:#00baf2} .featuredPost a{color:#999} .featuredPost a:hover{color:#00baf2} .featuredPost span{font-size:10px} .featuredPost p{font-size:11px;margin-right:10px} ]]></b:skin> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> summary_noimg = 800; summary_img = 620; img_thumb_height = 200; img_thumb_width = 250; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>  <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = ""; showRandomImg = true; postDesc = 150; sliderQty = 5; specialLabel = "Features"; function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s} function showImageSlider(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<sliderQty;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}} if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break; }} var daystr = day+ ' ' + m + ' ' + y ; var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img width="580" height="360" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,postDesc)+'...</p></div></div>'; document.write(trtd); j++; }} //]]> </script>  </head> <body> <div id='wrapper'> <div id='header'> <div id='title'> <b:section class='title' id='title' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Real-Estate (Header)' type='Header'/> </b:section> </div>  </div>  <div id='menu'> <ul> <li><a class='current' href='/'>Home<span>Donec Magna</span></a></li> <li><a href='about.html'>About Us<span>Praesent Nec</span></a></li> <li><a href='gallery.html'>Gallery<span>Cras Eget Urna</span></a></li> <li><a href='contact.html'>Contact Us<span>Phasellus Sodales</span></a></li> </ul> </div>  <div id='main-wrapper'> <div id='content'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div id='featured'> <div class='sliderwrapper' id='slider'> <script> document.write("<script src=\"/feeds/posts/default/-/"+specialLabel+"?max-results="+sliderQty+"&orderby=published&alt=json-in-script&callback=showImageSlider\"><\/script>"); </script> </div> <div class='pagination' id='paginate-slider'> </div> </div> </b:if></b:if> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div>  <div id='sidebar-wrapper'> <div class='sidebar_box'> <a href='#'><img alt='banner' src='http://www.9m.com/upfiles/YfN22617.jpg'/></a> </div> <div class='sidebar_box'> <b:section class='sidebar' id='sidebarright' preferred='yes'> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> <b:widget id='Slideshow1' locked='false' title='Slideshow' type='Slideshow'/> <b:widget id='Label1' locked='false' title='Labels' type='Label'/> </b:section></div> </div>  <div class='cleaner'/> </div>  </div>   <div id='footer-wrapper'> <div id='footer'> <div class='cleaner h10'/> Copyright © 2011 Design by <a href='http://www.bloggertricksandtoolz.com/search/label/Wordpress%20Theme' title='Wordpress Theme'>Wordpress Theme</a>, <a href='http://www.templatemo.com/'>TemplateMo</a> And <a href='http://alltimetrading.com/' title='Wholesale Jewelry'>Wholesale Jewelry</a>.<div class='cleaner'/> </div> </div> <script src='http://buymythemes-lab.googlecode.com/svn/trunk/contentslider.js' type='text/javascript'/> <script type='text/javascript'> featuredcontentslider.init({ id: "slider", contentsource: ["inline", ""], toc: "#increment", nextprev: ["Previous", "Next"], enablefade: [true, 0.3], autorotate: [true, 4000], onChange: function(previndex, curindex){ //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script> </body> </html>

How to add images to a main banner

How to add images to a main banner

How to add images to a main banner

Related Topics