Inserting SWF into HTML/XML

programming web dev
1

Hello peeps, this is my first time working with HTML and I am in need of some help. I have recently found this really cool blog template for my blog (You can view it HERE) and I would like to replace the menu bar “Home” “Flash” etc to swf buttons I create in flash. Problem is, I have no idea how to do that. Can anyone help me out or point me to some good tutorials?

Thanks!

Btw, heres the code for the template:


<?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 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: Widgetlike
Blogger by: http://blogandweb.com/
Distributed by: http://btemplates.com/
Designer: http://www.freecsstemplates.org/
Date: Nov 08
***************************** 

*//* Definicion de variables
   ====================
 <Variable name="textocolor" description="Text Color"
             type="color" default="#B9B9B9" value="#B9B9B9">
   <Variable name="enlacecolor" description="Link Color"
             type="color" default="#8AC800" value="#8AC800">
   <Variable name="colortituloblog" description="Blog Title Color"
             type="color" default="#FFFFFF" value="#000000">
   <Variable name="colortituloentrada" description="Post Title Color"
             type="color" default="#FFFFFF" value="#FFFFFF">
   <Variable name="colormenu" description="Color Menu"
             type="color" default="#FFFFFF" value="#FFFFFF">
   <Variable name="colortituloslateral" description="Sidebar Title Color"
             type="color" default="#FFFFFF" value="#FFFFFF">
*/

#outer-wrapper {
}

#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
}

/*-- (Generales) --*/

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0px;
    background: #002F43 url(http://1.bp.blogspot.com/_73i0fjAB_Hw/SRU7N2ZKloI/AAAAAAAAAhw/jJtVD4wufDY/s1600/bg01.jpg) repeat-x;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: $textocolor;
}

h1, h2, h3 {
    margin-bottom: 1.5em;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.4em;
}

h3 {
    font-size: 1em;
}

p, ul, ol {
    margin-bottom: 1.5em;
    line-height: 180%;
}

ul, ol {
    margin-left: 3em;
}

blockquote {
    margin-left: 3em;
    margin-right: 3em;
}

a {
    color: $enlacecolor;
}

a:hover {
    text-decoration: none;
}

strong {
    color: #D7D7D7;
}

img {
    border: none;
}

img.left {
    float: left;
    margin: 5px 25px 0px 0px;
       border: none
}

img.right {
    float: right;
    margin: 5px 0px 0px 25px;
}

#main-wrapper {overflow:hidden;} 

.clear {clear:both;}  
  
#blog-pager-newer-link {float: left;} 

#blog-pager-older-link {float: right;} 

#blog-pager {text-align: center; }

/*-- (Cabecera) --*/

#header-wrapper {
    background: url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SRU7N1ujDEI/AAAAAAAAAh4/XxMLE39hYf4/s1600/bg02.jpg) no-repeat center top;
}

#header-inner {
    width: 475px;
    height: 145px;
    margin: 0px auto;
    color: $colortituloblog;
}

#header-wrapper h1 {
    float: left;
    margin: 0px;
    padding: 70px 0px 0px 25px;
    font-size: 40px;
}

#header-wrapper p {
    float: right;
    margin: 0px;
    padding: 95px 25px 0px 0px;
    font-size: 14px;
}

#header-wrapper a {
    text-decoration: none;
    color: $colortituloblog;
}

/*-- (Menu) --*/

#bg2 {
    background: url(http://4.bp.blogspot.com/_73i0fjAB_Hw/SRU7OL20_mI/AAAAAAAAAiA/lkwNFfFUmuU/s1600/bg03.jpg) no-repeat center top;
}

#header2 {
    width: 900px;
    height: 88px;
    margin: 0px auto;
}

#menu {
    float: left;
}

#menu ul {
    margin: 0px;
    padding: 34px 0px 0px 0px;
    list-style: none;
}

#menu li {
    float: left;
}

#menu a {
    padding-left: 50px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color: $colormenu;
}

#search {
    float: right;
}

#search form {
    margin: 0px;
    padding: 35px 80px 0px 0px;
}

#search fieldset {
    margin: 0px;
    padding: 0px;
    border: none;
}

#search input.text {
    width: 160px;
    background: none;
    border: none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #AEC38B;
}

#search input.button {
    display: none;
}

/*-- (Contenedor) --*/

#content-wrapper {
    background: url(http://1.bp.blogspot.com/_73i0fjAB_Hw/SRU7OXfQPPI/AAAAAAAAAiI/F-qLa4WBTC0/s1600/bg04.jpg) repeat-y center top;
}

#bg4 {
    background: url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SRU7OcFS09I/AAAAAAAAAiQ/zEQzsAY0scw/s1600/bg05.jpg) no-repeat center top;
}

#bg5 {
    background: url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SRU7M2RcAhI/AAAAAAAAAhA/EIRehhvur74/s1600/bg06.jpg) no-repeat center bottom;
}

#page {
    width: 846px;
    margin: 0px auto;
    padding: 40px 0px 0px 0px;
}

/*-- (Principal) --*/

#main-wrapper {
    float: left;
    width: 583px;
}

.post-title {
    height: 49px;
    background: url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SRU7NIpnF-I/AAAAAAAAAhI/uD_d0JFh_Pw/s1600/img02.gif) no-repeat;
}
.post-title h3 {
    float: left;
    padding: 12px 0px 0px 24px;
    font-size: 24px;
}
.post-title h3 a {
    text-decoration: none;
    color: $colortituloentrada;
}
.post-title h3 a:hover {
    color: #8AC800;
}
.post-title .post-timestamp {
    float: right;
    padding: 12px 24px 0px 0px;
    font-size: 15px;
    font-weight: bold;
    color: #343434;
}

.post-body {
    padding: 30px 23px 0px 23px;
}

.date-header {
}

.post-footer {
    height: 70px;
    clear: left;
    margin: 0px 23px;
    padding: 15px 0px 0px 0px;
    border-top: 1px solid #262626;
}

.post-footer-line-1 {
    float: left;
}

.post-footer-line-3 {
    float: right;
}

.post-footer-line-3 a.comment-link {
    padding-left: 19px;
    background: url(http://4.bp.blogspot.com/_73i0fjAB_Hw/SRU7Nd0HitI/AAAAAAAAAhY/m7yXeg12pYo/s1600/img04.gif) no-repeat left center;
}

/*-- (Lateral) --*/

#sidebar-wrapper {
    float: right;
    width: 236px;
}

#sidebar-wrapper ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#sidebar-wrapper li{
    padding: 8px 0px;
    background: none;
    border-bottom: 1px solid #262626;
}

#sidebar-wrapper h2 {
    margin: 0px;
    padding: 16px 0px 30px 0px;
    font-size: 14px;
    color: $colortituloslateral;
}

.sidebar .widget {
    background: url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SRU7NYdFRjI/AAAAAAAAAhQ/u2cl9fcaDQA/s1600/img03.gif) no-repeat;
    padding: 0px 23px 20px 23px;
}

/*-- (Pie de pagina) --*/

#footer-wrapper {
}

#footer-wrapper .links {
    margin: 0px;
    padding: 20px 0px;
    text-align: center;
    color: #566D77;
}

#footer-wrapper a {
    color: #8097A1;
}

/*-- (Comentarios) --*/

#comments h4 {
background:transparent url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SRU7NIpnF-I/AAAAAAAAAhI/uD_d0JFh_Pw/s1600/img02.gif) no-repeat scroll 0 0;
height:49px;
font-size:22px;
padding:12px 0 0 24px;
}

#comments dl {
padding:30px 23px 0;
}

.comment-author {
font-size:12px;
}

.comment-body {
padding:5px 0;
}

p.comment-footer {
    text-align:center;
        font-size:13;
}

dd.comment-footer, dd.comment-body {
margin:0; 
}

dd.comment-footer {
margin-bottom:15px;
}

body#layout #content-wrapper { 
  margin: 0px;
 }
body#layout #footer-wrapper p.links, body#layout #menu, body#layout #search {
display:none;
}
]]></b:skin>
</head>

  <body>
  <div id='outer-wrapper'><div id='wrap2'>

    <!-- links para navegadores de texto -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>ir a principal </a> |
      <a href='#sidebar'>Ir a lateral</a>
    </span>

<!-- (Cabecera) -->
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Dream Studios (Header)' type='Header'/>
</b:section>
    </div>

<div id='bg2'>
<div id='header2'>
<div id='menu'>
<ul>
    <li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>About</a></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Flash</a></li>
    <li><a href='#'>Edit</a></li>
</ul>
</div>
<!-- end #menu -->
<div id='search'>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'>
    <fieldset>
    <input class='text' id='q' name='q' type='text' value='Search'/>
    <input class='button' type='submit' value='Search'/>
    </fieldset>
</form>
</div>
<!-- end #search -->
</div>
<!-- end #header2 -->
</div>

<!-- (Contenedor) -->    
    <div id='content-wrapper'>
<div id='bg4'>
<div id='bg5'>
<div id='page'>

<!-- (Principal) -->
      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Gadget1' locked='false' title='' type='Gadget'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='HTML1' locked='false' title='Flash' type='HTML'/>
</b:section>
      </div>

<!-- (Lateral) -->
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='News' type='BlogArchive'/>
</b:section>
      </div>

<!-- Limpiar flotacion-->
      <div style='clear: both; height: 40px;'> </div>


    </div></div></div></div> <!-- fin de capa content-wrapper -->

<!-- (Pie de pagina) -->
    <div id='footer-wrapper'>
<!-- 

Este es un incentivo al trabajo en disenar y adaptar esta plantilla, llega a ti de forma muy facil y sin costo, tampoco cuesta nada dejes los link, gracias y que te sea util!

This is an incentive to work in design and adapt this template, comes to you in a very easy and without cost, not cost anything let the link, thank you and this work is useful.

Dies ist ein Anreiz zur Arbeit in Design und Anpassung dieser Vorlage, kommt zu Ihnen in einem sehr einfach und ohne Kosten, nichts kosten lassen Sie den Link, ich danke Ihnen, und diese Arbeit sinnvoll ist.

 -->
<p class='links'> Copyright © 2008 <a expr:href='data:blog.homepageUrl' style='text-decoration: none;'><data:blog.title/></a> - Dise&amp;ntilde;o de <a href='http://www.nodethirtythree.com/'>nodeThirtyThree</a> y <a href='http://www.freewpthemes.net/'>Free CSS Templates</a> 
  | <a href='http://btemplates.com/' title='Templates Blogger'>Plantillas blogger</a> por  
  <a href='http://blogandweb.com/' title='Todo acerca de los blogs'>Blog and Web</a></p>
    </div>

  </div></div> <!-- fin de capa outer-wrapper -->
</body>
</html>