Bu Tasarımı Siteme Nasıl Eklerim

<div id="container">
<div id="header">
   <div id="headerleft">
      <div id="title"><a href="#">SweetBuzz Template </a><br />
        slogan goes here or maybe a description? Up to you... </div>
   </div>

   <div id="headerright">
    <div id="flickr"></div>
       <div id="search">
            <form id="searchform" method="get" action="">
            <div>
            <input type="text" name="s" id="s" size="30" class="searchbox"/>
            <input class="searchbutton" type="submit" value=" " />
            </div>
         </form>
      </div>
  </div>
</div>

<div id="content">
   <div id="center">
   

    <h3><a href="#">Heading 1</a></h3>
   <div class="meta">Subheading or description</div>

</div>
</div>   
   </div>
   
   <div id="sidebar">
      <div id="left">
         <h4>Menu heading</h4>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam  ultrices mauris. Fusce euismod euismod mi. Vestibulum volutpat ornare  orci. Curabitur pede nisi, commodo et, pharetra et, convallis eu,  sapien.</p>
      <h4>Menu heading</h4>
        <div id="bullet1">
         <ul>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link</a></li>
           </ul>
           </div>
            <div id="bullet2">
         <ul>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link </a></li>
        </ul>
         </div>
         <div id="bullet3">
         <ul>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link </a></li>
        </ul>
         </div>
         <div id="bullet4">
         <ul>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link </a></li>
        </ul>
         </div>
         <div id="bullet5">
         <ul>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link </a></li>
           <li><a href="#">Option or link </a></li>
        </ul>
         </div>

     </div>
      <div id="right">
      
         <h4>Categories</h4>
         
         <ul class="categories">         
             <li><a href="#">Category or link </a></li>
             <li><a href="#">Category or link </a></li>
             <li>
               <ul class="children">         
                  <li><a href="#">Category or link </a></li>
                <li><a href="#">Category or link </a></li>
                   <li><a href="#">Category or link </a></li>
                   <li><a href="#">Category or link </a></li>
                <li><a href="#">Category or link </a></li>
                <li><a href="#">Category or link </a></li>
               </ul>

            </li>
             <li><a href="#">Category or link </a></li>
             <li><a href="#">Category or link </a></li>
             <li><a href="#">Category or link </a></li>
         </ul>
         
         <h4>Archives</h4>
         
         <ul class="archives">
             <li><a href="#">Archives or link </a></li>
            <li><a href="#">Archives or link </a></li>
            <li><a href="#">Archives or link </a></li>
            <li><a href="#">Archives or link </a></li>
            <li><a href="#">Archives or link </a></li>
            <li><a href="#">Archives or link </a></li>
         </ul>
         
      </div>
   </div>


</div>   

<div style="clear: both"><br /></div>

<div id="footer">
   <div id="footernote">
   <!-- Please leave this if you use our template. Thank you -->
   Design by <a href="http://www.darjanpanic.com" title="Webdesigner">Webdesigner Darjan Panic</a> and <a href="http://www.briangreens.com" title="Brian Green">Brian Green</a>
   <!-- Please leave this if you use our template. Thank you -->
   </div>
</div>

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

/*

Theme Name: SweetBuzz Blue

Theme URI: http://www.darjanpanic.com

Description: SweetBuzz Blue designed and coded by Brian Green and Darjan Panic.

Version: 1.0

Author: Brian Green and Darjan Panic

*/



html {
   height: 100%;

}
body {
   padding-left: 30px;
   margin-left: 0;
   background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/bg2.gif) #202020 repeat-y ;
   margin: 0px;
   height: 100%;
   color: #cccccc;
   font-size:11px;
   font-family: "arial";
}

#container {

text-align: left;
}
#header {
width: 965px;
height: 210px;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/hbg.gif) no-repeat;
}

#content {
width: 450px;
margin: 0px;
float: left;
}

#footer {
width: 965px;
height: 150px;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/fbg.jpg) no-repeat;
   color: #ffffff;
   font-size:10px;
   font-family: "trebuchet MS";
}
#footernote {
float: right;
text-align: right;
height: 30px;
margin-right: 80px;
margin-top: 110px;
}

#title {
float: left;
width: 300px;
height: 65px;
margin-left: 20px;
color: #ffffff;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#title a:link {
color: #2b77d3;
font-family: "Trebuchet ms";
font-size: 30px;
text-decoration: none;
}
#title a:visited {
color: #2b77d3;
font-family: "Trebuchet ms";
font-size: 30px;
text-decoration: none;
}
#title a:hover {
color: #2b77d3;
font-family: "Trebuchet ms";
font-size: 30px;
text-decoration: underline;
}

#headerright {
float: right;
width: 450px;
height: 210px;
}
#headerleft {
float: left;
width: 480px;
height: 210px;
}
#search {
float: right;
width: 250px;
height: 30px;
margin-top: 170px;
margin-right: 70px;
text-align: right;
}

.searchbox {
border: 1px solid #ffffff;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/sbg.gif) repeat-x;
color: #ffffff;
font-size: 10px;
font-family: verdana;
padding: 4px;
}

.textarea {
border: 1px solid #ffffff;
color: #ffffff;
font-size: 10px;
font-family: verdana;
padding: 4px;
background: #2b77d3;
}
.searchbutton {
  width: 64px;
  height: 27px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/search.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
.submitcomment {
  width: 119px;
  height: 27px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  background: transparent url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/submitcomment.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#comment-1 {
  margin: 0px;
  padding: 0px;
}

#comment-2 {
  margin: 0px;
    padding: 0px;
  background: #343434;
}
#center {
width: 470px;
float: left;
}
#sidebar {
float: right;
width: 485px;

}
#left {

float: left;
width: 240px;
border-left: 1px solid #2b77d3;
list-style: none;
}

#left p{

margin:10px;
}

#left img {
    float: left;
    margin: 5px;
}



#right {
float: right;
width: 240px;
border-left: 1px solid #2b77d3;
}


a:link {
color: #2b77d3;
text-decoration: none;
}
a:visited {
color: #2b77d3;
text-decoration: none;

}
a:hover {
color: #2b77d3;
text-decoration: underline;

}

.meta {
   padding-left: 10px;
   padding-right: 10px;
   background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/meta.gif);
   line-height: 30px;
}

blockquote {
border-left: 4px solid #2b77d3;
color: #ffffff;
}
blockquote p {
margin: 5px;
}

h3 {
padding-left: 10px;
display:block;
margin: 0px;
font-family: "trebuchet ms";
font-size: 20px;

}

h3 a:link {
font-family: "trebuchet ms";
font-size: 20px;
text-decoration: none;
}
h3 a:visited {
font-family: "trebuchet ms";
font-size: 20px;
text-decoration: none;
}
h3 a:hover {
font-family: "trebuchet ms";
font-size: 20px;
text-decoration: underline;
}

h4 {
font-family: "trebuchet ms";
font-size: 18px;
width: 213px;
height: 37px;
line-height: 37px;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/h2.gif) no-repeat;
padding-left: 15px;
padding-right: 10px;
list-style-image: none;
font-weight: lighter;
}

#left li {
list-style-image: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/b1.gif) ;
line-height: 14px;
margin-left: 45px;
}
#left ul {
margin-left: 5px;
padding: 0px;
}
.page_item li {
list-style-image: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/b3.gif) ;
margin-left: 15px;
padding: 0px;
}

#wp-calendar {
text-align: center;
padding-left: 20px;
}

::-moz-selection{
   background:#2b77d3;
   color:#ffffff;
}

::selection {
   background:#2b77d3;
   color:#ffffff;
}

code::-moz-selection {
   background: #2b77d3;
}

code::selection {
   background: #2b77d3;
}

#linkcat-1 ul {
list-style-image: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/b4.gif) ;
margin-left: 40px;
padding: 0px;
line-height: 14px;
}

.categories {
line-height: 18px;
list-style: none;
margin-left: 10px;
padding: 0px;
}

.categories ul {
list-style: none;
margin: 0px;
padding: 0px;
}

.categories a:link {
font-family: tahoma;
padding-left: 25px;
display:block;
width: 200px;
color: #ffffff;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/menu1.gif) no-repeat;
}
.categories a:visited {
padding-left: 25px;
display:block;
width: 200px;
color: #ffffff;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/menu1.gif) no-repeat;
}
.categories a:hover {
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/menu1.gif) no-repeat;
background-position: 0px -18px;
}

.children  a:link {
font-family: tahoma;
padding-left: 25px;
display:block;
color: #ffffff;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/menu2.gif) no-repeat;
}
.children  a:visited {
padding-left: 25px;
display:block;
color: #ffffff;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/menu2.gif) no-repeat;
}
.children a:hover {
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/menu2.gif) no-repeat;
background-position: 0px -18px;
}

.archives {
display: block;
line-height: 18px;
list-style: none;
margin-left: 10px;
padding: 0px;

}
.archives ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.archives li {
list-style: none;
margin: 0px;
padding: 0px;
}

.archives a:link {
width: 200px;
font-family: tahoma;
padding-left: 25px;
display:block;
color: #ffffff;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/menu3.gif) no-repeat;
}
.archives a:visited {
width: 200px;
padding-left: 25px;
display:block;
color: #ffffff;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/menu3.gif) no-repeat;
}
.archives a:hover {
width: 200px;
background: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/menu3.gif) no-repeat;
background-position: 0px -18px;
}


.metaa {
text-align: right;
line-height: 18px;
list-style: none;
margin-right: 10px;
padding: 0px;
}

#feed {
width: 65px;
height: 65px;
float: right;
margin-top: 34px;
}

#post {
margin: 0px;
padding: 0px;
}

.storycontent {
padding-left:5px;
margin-left:5px;
padding-right:5px;
margin-right:5px;
}

#bullet1 li {
list-style-image: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/b1.gif) ;
line-height: 14px;
margin-left: 45px;
}
#bullet1 ul {
margin-left: 5px;
padding: 0px;
}

#bullet2 li {
list-style-image: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/b2.gif) ;
line-height: 14px;
margin-left: 45px;
}
#bullet2 ul {
margin-left: 5px;
padding: 0px;
}

#bullet3 li {
list-style-image: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/b3.gif) ;
line-height: 14px;
margin-left: 45px;
}
#bullet3 ul {
margin-left: 5px;
padding: 0px;
}

#bullet4 li {
list-style-image: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/b4.gif) ;
line-height: 14px;
margin-left: 45px;
}
#bullet4 ul {
margin-left: 5px;
padding: 0px;
}
#bullet5 li {
list-style-image: url(http://www.oswd.org/files/designs/3435/SweetBuzzBlue/images/b5.gif) ;
line-height: 14px;
margin-left: 45px;
}
#bullet5 ul {
margin-left: 5px;
padding: 0px;
}