Bloggers web site හදන අයට මෙන්න මගෙන් facebook temple එක

අද වන විට බොහෝ දෙනා blogger site පවත්වාගෙන යති. සමහර අයට තිබෙන ප්‍රධනතම ගැටලුව තමා හිතට වදින temple එකක් හොයාගන්න එක.සමහර අයට ගැලපෙන්නේ word press තීම්ස් වෙන්න පුවන්, නැතහොත් සමහරු උත්සහ කරන්නේ වෙන්නත් වෙබ් අඩවියක් ආකාරයට තමාගේ වෙබ් අඩවිය සාදාගැනීමට වෙන්න පුළුවන්. අද වන විට බොහෝ ජනප්‍රියතම වෙබ් අඩවියක් වන්නේ facebook වෙබ් අඩවියයි. බොහෝ අය මගෙන් ඇහැව්වා මෙම වෙබ් අඩවියේ temple එක හොයාගන්න බැරිවයිද කියා. එයට පිළිතුරක් වශයෙන් තමා මම මේ ලිපිය ලියන්නේ.
එහෙනම් පහල තිබෙන්නේ facebook template එකයි. පහල තිබෙන html එක copy කරගන්න.
<?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>     <meta content='Type your blog description' name='description'/>         <meta content='As suggestion, add 10 keywords related to your blog' name='keywords'/>    <meta content='global' name='distribution'/>    <meta content='7 days' name='revisit'/>    <meta content='7 days' name='revisit-after'/>    <meta content='document' name='resource-type'/>    <meta content='all' name='audience'/>    <meta content='general' name='rating'/>    <meta content='English' http-equiv='content-language'/>    <meta content='all' name='robots'/>    <meta content='index, follow' name='robots'/>    <meta content='Type your name here' name='author'/>    <meta content='en' name='language'/>    <meta content='blogger' name='generator'/> <b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> : <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if> <link href='http://static.ak.fbcdn.net/rsrc.php/z9Q0Q/hash/8yhim1ep.ico' rel='shortcut icon'/> <b:skin><![CDATA[/* THEME NAME: Facebook Style DESIGNER: Felipe Calvo: http://pasaralanacho.blogspot.com Date: March 2010 BASED ON:  Ainun Nazieb template "Smells Like Facebook" http://nazieb.com/  */  .navbar { visibility:hidden; display: none; }  * { margin: 0px; padding: 0px; border: 0; outline: 0; list-style: none; }  body {         font-family: "lucida grande",tahoma,verdana,arial,sans-serif;         font-size: 11px;         background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumVlshJD8pCJ_d5z6ya-G7hPwUUvyJ1YBHUAK8mE2o5_tD0Aow4bEIE3L5Znssd4yt9W2FKwI6Auk9ZO0ql6saZbkau71zQKTcMfbdCX1PvLMDJgcJWIXY0FfUPiBjN59tJa9fQsP3_tT/s1600/Cabezera%20Plantilla.png) repeat-x scroll left top; }  input[type=text], textarea {         color: #777777;         font-size: 11px;         padding: 3px; }  input, textarea {         font-family: "lucida grande",tahoma,verdana,arial,sans-serif; }  input.submit {         background-color:#3B5998;         border-color:#D9DFEA #0E1F5B #0E1F5B #D9DFEA;         border-style:solid;         border-width:1px;         color:#FFFFFF;         font-size:11px;         padding:2px 15px 3px;         text-align:center; }  a {         color: #3B5998;         text-decoration: none; }  a:hover {         text-decoration: underline; }  blockquote {         background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi68flwr9ZVASCicCLbuqeOUBbb3AQCPD2IioOW1A3M76PWAnP3xoMqVdYIkb71eXPafzLe7g_HWD323nyiupZzcuf5BFuzcQXY93it3zFCpdprvPJ1M0_cGlNZN_a6Nm9WAcBiiYnaQKQd/s1600/quote.png) no-repeat left top;         padding-left: 19px;         color: gray; }  #wrapper {         width: 964px;         margin: 0 auto; }  #menu {         background:transparent url(http://img291.imageshack.us/img291/3993/fbbg.png) no-repeat scroll left bottom;         float: left;         width: 964px;         font-size: 11px; }  #logo {         float: left;         margin: 10px 0px 3px 3px; }  #menu li {         float: left;         padding: 7px 0px 8px 0px;         margin-top: 6px; }  #menu li a {         color: #fff;         text-decoration: none;         padding: 7px; }  #pagemenu a {         font-weight: bold; }  #pagemenu a:hover {         background-color: #5C75AA; }  #menu #mas {          float: right;         width: 750px; }  /* #moremenu {         float: left; }  #moremenu li {         margin-right: 5px; }  #moremenu li a:hover {         background-color: #5C75AA; }  #moremenu li #feedmenu {         position: absolute;         border: 1px solid #3B5998;         background: #fff;         margin-top: 5px;         left: -999em; }  #feedmenu li {         float: none;         padding: 0px;         margin: 0px; }  #feedmenu li a {         color: #3B5998;         padding: 5px 20px;         display: block; }  #feedmenu li a:hover {         color: #fff;         position: static;         left: auto;         margin-top: 25px; } */ #moremenu { margin: 0px; padding: 0px; float: left; } #moremenu ul { float: left; list-style: none; margin: 0px; padding: 0px; border: 1px solid #3B5998; } #moremenu li { list-style: none; margin: 0px; padding: 0px; } #moremenu li a, #moremenu li a:link, #moremenu li a:visited { display: block; margin: 0px; padding: 7px 8px;         margin-top: 11px; } #moremenu li a:hover, #moremenu li a:active { margin: 0px; padding: 7px 8px;         margin-top: 11px; text-decoration: none; background-color: #5C75AA; } #moremenu li li a, #moremenu li li a:link, #moremenu li li a:visited { color: #3B5998; float: none; margin: 0px; padding: 5px 20px; background: #fff; } #moremenu li li a:hover, #moremenu li li a:active { color: #fff; background: #3B5998; padding: 5px 20px; }  #moremenu li { float: left; padding: 0px; } #moremenu li ul { z-index: 9999; position: absolute; left: -999em; height: auto; margin: 0px; padding: 0px; width: 130px; } #moremenu li li { } #moremenu li ul a { width: 90px; } #moremenu li ul a:hover, #moremenu li ul a:active { } #moremenu li ul ul { margin: -29px 0 0 171px; } #moremenu li:hover ul ul, #moremenu li:hover ul ul ul, #moremenu li.sfhover ul ul, #moremenu li.sfhover ul ul ul { left: -999em; } #moremenu li:hover ul, #moremenu li li:hover ul, #moremenu li li li:hover ul, #moremenu li.sfhover ul, #moremenu li li.sfhover ul, #moremenu li li li.sfhover ul { left: auto; } #moremenu li:hover, #moremenu li.sfhover { position: static; }  #search {         float: left;         margin-top: 15px;         margin-left: 0px;         margin-right: 450px; }  #search-text {         float: left;         margin-center: 2px; }  #search-submit {         float: left; }  #sidebar {         margin-top: 20px; }  #title {         margin-top: 20px; }  #title h1 {         font-size: 16px;         display: inline; }  #title h1 a {         color: #000; }  #desc {         display: inline;         font-size: 13px; }  #categories {         margin-top: 11px;         margin-bottom: 45px;         z-index: 900;         position: relative; }  #categories li {         text-transform: capitalize;         float: left;         background: #D8DFEA;         margin-left: 3px; } #categories li a {         font-size:13px;         font-weight:bold;         padding:4px 11px;         display: block; }  #categories li a:hover {         color: #fff;         text-decoration: none;         background: #627AAD; }  #categories .current-cat {         background: #fff;         border:1px solid #D8DFEA;         border-bottom:0px }  #categories .current-cat a {         background: #fff;         color: #000; }  #categories .current-cat a:hover {         background: #fff;         color: #000; }  #categories #plus {         background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_jp8Lu_yWDULMuPp6Xnpa8QjdPyo1s3dm5XLLnKHOAiwEf5HruBX6j4fMSaBe6zquOYwUSLmxXAfrCSuR7XRLVHCIenfqRmcfOye1soMfzkeloDNixCcRNus6Avc6ZrPmK0XKNyTr-uP/s1600/plus.gif) no-repeat top left;         height:16px;         position:relative;         width:2px;         z-index:999; }  #categories #plus:hover, #categories #plus.hover {         background: #627AAD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_jp8Lu_yWDULMuPp6Xnpa8QjdPyo1s3dm5XLLnKHOAiwEf5HruBX6j4fMSaBe6zquOYwUSLmxXAfrCSuR7XRLVHCIenfqRmcfOye1soMfzkeloDNixCcRNus6Avc6ZrPmK0XKNyTr-uP/s1600/plus.gif) no-repeat left -25px; }  #hiddencats {         left:-3px;         position:relative;         top:-28px; }  #hiddencats li {         padding: 0px; /*        padding: 8px 5px 4px 8px; */         background: #eee;         border-left: 1px solid #000;         border-right: 1px solid #000;         float: none;         margin-left: 0px; }  #hiddencats li.browsecat {         background: #fff;         border: 1px solid #000;         border-left: 1px solid #fff;         border-bottom: none;         padding: 9px;         width: 150px;         color: #666; }  #hiddencats li a{         font-weight: normal;         font-size: 11px;         padding: 7px 12px; }  #hiddencats li a:hover {         background: #899BC1; }  #hiddencats .current-cat {         background: #eee; }  #hiddencats .current-cat a {         background: #eee;         color: #3B5998; }  #hiddencats .current-cat a:hover {         background: #899BC1;         color: #fff; }  #hiddencats ul {         border-bottom: 1px solid #000; }  #hiddenleft {         width: 30px;         height: 30px;         border: 1px solid #000;         border-right: none;         position: absolute;         background: #fff; }  #hiddenright {         position: absolute;         margin-left: 31px; }  #hiddencats #plus {         background: #627AAD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_jp8Lu_yWDULMuPp6Xnpa8QjdPyo1s3dm5XLLnKHOAiwEf5HruBX6j4fMSaBe6zquOYwUSLmxXAfrCSuR7XRLVHCIenfqRmcfOye1soMfzkeloDNixCcRNus6Avc6ZrPmK0XKNyTr-uP/s1600/plus.gif) no-repeat left -25px;         height:16px;         width:2px; }  .post {         /*clear: both;*/         float: left;         border-top:1px solid #D8DFEA;         margin-top: 5px;         margin-bottom: 5px;         padding-top: 8px; }  .post-gravatar {         float: left;         margin-right: 10px; }  .post-text {         float: right;         width: 450px; }  .post-text input {         background-color:#3B5998;         border-color:#D9DFEA #0E1F5B #0E1F5B #D9DFEA;         border-style:solid;         border-width:1px;         color:#FFFFFF;         font-size:11px;         padding:2px 15px 3px;         text-align:center; }  .post-text label input {         border:1px solid #BDC7D8;         margin-bottom: 3px;         color: #777777;         font-size: 11px;         padding: 3px;         text-align: left;         background: #fff; }  .post .title {         margin-bottom: 10px;         font-size: 13px; }  .post p {         margin-bottom: 10px;         line-height: 15px; }  .post p img {    border: 1px solid #ddd;    background-color: #f3f3f3;    padding: 4px; }  .post ol {         list-style: decimal inside; }  .post li {         margin-bottom: 10px; }  .post .meta, .post .post-meta {         color: #777;         margin-top: 5px;         margin-bottom: 5px; }  .post-meta {         border-top: 1px solid #DDDDDD;         padding-top: 3px; }  .navigation {         background:#ECEFF5 none repeat scroll 0 0;         border-top:1px solid #D8DFEA;         margin-top:8px;         padding:3px 7px 4px 0;         float: left;         width: 100%; }  .next {         margin-left:52px;         float: left; }  .prev {         margin-right:52px;         float: right; }  #sidebar {         float: left;         width: 200px; }  .large-avatar {         margin-bottom: 10px; }  .user-desc {         border:1px solid #D8DFEA;         color:#333333;         margin-bottom:20px;         padding:7px; }  #sidebar .widget {         border-top:1px solid #94A3C4;         padding-bottom:10px;         border-right:1px solid #D8DFEA; }  #BlogArchive1 {         padding-bottom:20px !important; }  #sidebar .widget h2 {         background:#ECEFF5 none repeat scroll 0 0;         border-top:0 none;         display:block;         font-size:11px;         margin-bottom:5px;         padding:5px 8px; }  #sidebar .widget h2 a {         text-decoration: none;         color: #000; }  #sidebar .widget h2 img {         display: none; }  #sidebar .widget ul {         padding:0px 7px 10px 8px; }  #sidebar .widget li {         margin-top: 5px; }  #ArchiveList ul li a {         margin-left: 8px; }  #content { float: left;         width: 540px; padding: 0 0 0 10px; }     #sidebar2 { float: right; width: 200px; padding-top: 90px; } #sidebar2 .widget { border-top:1px solid #94A3C4; padding-bottom:10px; border-right:1px solid #D8DFEA; }  #sidebar2 .widget h2 { background:#ECEFF5 none repeat scroll 0 0; border-top:0 none; display:block; font-size:11px; margin-bottom:5px; padding:5px 8px; } #sidebar2 .widget h2 a { text-decoration: none; color: #000; } #sidebar2 .widget h2 img { display: none; } #sidebar2 .widget ul { padding:0px 7px 10px 8px; } #sidebar2 .widget li { margin-top: 5px; }   #comments {margin: 0 0 0 60px; padding:0;}  .index-comment{         background: #ECEFF5;         width: 360px;         float: left;         /*clear: both;*/         margin-top: 2px;         padding: 7px;         overflow: hidden; }  .ic-avatar {         float: left; }  .ic-text {         width: 315px;         float: right; }  .ic-meta {         margin-bottom: 3px; }  #comment_form input[type=text], #comment_form textarea {         border:1px solid #BDC7D8;         margin-bottom: 3px; }  #comment_form textarea {         width: 352px; }  #footer { border-top:1px solid #DDDDDD; clear:both; float:center; margin-bottom:20px; margin-top:10px; padding-top:5px; text-align:left; width:100%; }  .archive {         background:#F7F7F7 none repeat scroll 0 0;         border-bottom:1px solid #D8DFEA;         border-top:1px solid #3B5998;         padding:4px 6px 5px;         color:#333333;         font-size:13px;         font-weight:bold;         line-height:15px; }  .nofloat {         float: none;         width: 100%; }  /* Wordpress requirement */ .aligncenter, div.aligncenter {    display: block;    margin-left: auto;    margin-right: auto; }  .alignleft {    float: left; }  .alignright {    float: right; }  .wp-caption {    border: 1px solid #ddd;    text-align: center;    background-color: #f3f3f3;    padding-top: 4px;    margin: 10px; }  .wp-caption img {    margin: 0;    padding: 0;    border: 0 none; }  .wp-caption p.wp-caption-text {    font-size: 11px;    line-height: 17px;    padding: 0 4px 5px;    margin: 0; }  ]]></b:skin><!--[if IE 8]><style type="text/css" media="screen" >.post .meta {margin-top:0;} .post .post-meta {margin-top:0;margin-bottom:0;} #comments {margin: -45px 0 0 60px;} </style><![endif]--><!--[if IE 7]><style type="text/css" media="screen" >#menu #mas {width:256px;} #comments {margin: -50px 0 0 60px;} #catright {border-bottom: 1px solid #000;} </style><![endif]--><!--[if IE 6]><style type="text/css" media="screen" >#menu #mas {width:256px;} #categories #plus {background: #D8DFEA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_jp8Lu_yWDULMuPp6Xnpa8QjdPyo1s3dm5XLLnKHOAiwEf5HruBX6j4fMSaBe6zquOYwUSLmxXAfrCSuR7XRLVHCIenfqRmcfOye1soMfzkeloDNixCcRNus6Avc6ZrPmK0XKNyTr-uP/s1600/plus.gif) no-repeat top left;position:absolute;top:0;left:0;} #hiddencats {position:absolute;left:0;top:0;margin:-4px 0 0 -4px;} #search {margin-right:6px;} #search-text {font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; color: #777777; padding: 3px;} #comments {margin: -50px 0 0 60px;} #catright {border-bottom: 1px solid #000;} </style><![endif]--> <script type='text/javascript'><!--//--><![CDATA[//><!-- function showbox(elmnt) {  box = document.getElementById('hiddencats').style;  if(box.display == 'none') {    elmnt.className = 'hover';   box.display = 'block';  } else {   elmnt.className = 'none';   box.display = 'none';  } }  function showbox2(elmnt) {  box = document.getElementById('chat').style;  if(box.display == 'none') {       box.display = 'block';  } else {      box.display = 'none';  } }  function showbox3(elmnt) {  box = document.getElementById('menubot').style;  if(box.display == 'none') {      box.display = 'block';  } else {     box.display = 'none';  }   }  //--><!]]></script>   </head>   <body>   <div id='wrapper'>
 <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'>       <a href='#main'>skip to main </a> |        <a href='#sidebar'>skip to sidebar</a> </span> <!-- End skip links  -->     <div id='header'>
      <div id='menu'>
        <ul id='pagemenu'>          <a href='data:blog.homepageUrl'><img alt='My Home Page' id='logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6RRImFpJgZnI9FwM5v67IehkwKDVlYUKjFkPIkzroYHaLiX3q9-SypqsgLgcjXF4Aioqoo0s36O66hdRnTacEM9mWuZpP3rKCdUvdUSTFwu7N92hfn95cu5ahIpSE2wuNWeFr4_iJo5Yb/s1600/Facebook%20Logo.jpg'/></a>
<li><a href='edit' title='edit'>          <img alt='edit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqovLs3yKbU01rLctoeGP-b3Ne1uV6_oq8HBshZq6_kQr7LUe04IsXq0JMC5KDruc8oWgEcbULh1U3hE9xXnxSh-hZveq5ejMEcKk-BebccOuPNDZnqxQZuxNoyRW2jG6z-StYW9g8waO/s1600/Facebook%20Friends%20Request%20Logo.png'/></a></li>
<li class='page_item'>          <a href='edit' title='edit'>          <img alt='edit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEw8CO5FxEjtkYPrLX0SSTDwqW4ot1F1kWR0t2c3lDZUMhmPzR7apalYk4vYsyhprlGfJsOncOAjxtsfdOS72aUYmr6MqC4mpLKM8BePcR7jaOTu8piw9ZVNlFTPEWwVSxYTcIgU6RT86j/s1600/Facebook%20Messages.png' title=''/></a></li>
<li class='page_item'>          <a href='edit' title='edit'>          <img alt='edit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbaLabZssOlWor213TvEQx8ayv7wbpHkLr25jfJyDjjpQgmHktDmZi8Ej_eLr1uuTJ70XzcTzRonQNBHSXUG-pxiaWj_qOTR2xskackRm2tGLR8FbJcoixr8N81lp8D_339u6-o9SILSkg/s1600/Facebook%20Notes.png' title=''/></a></li>
</ul>
<div id='mas'>
          <ul id='moremenu'>     <form action='/search' id='search' method='get'>
          <input id='search-text' name='q' onfocus='this.value=""' type='text' value='Search'/>          <input alt='Search' id='search-submit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvNrwAhghW1sIpR_U0t2pgnkXx2pg89UxAbYKuKWFcWDepHHuL84Ax8byHZ0c_RJp39Nh2FeGabeuUsz6-qA-99Wq7sqX67kew_m_TAH_3947OgS5PdQKsiLQbZ6X7aBYUb65pkWIY60Gh/s1600/search.gif' type='image'/>          </form>
<li>            <a href='#'><b>Feed</b></a>            <ul id='feedmenu'>
<li><a href='/feeds/posts/default'>Last Posts</a></li>
<li><a href='/feeds/comments/default'>Last Comments</a></li>
</ul>
</li>
<li>            <a href='#'><b>Info</b></a>            <ul id='feedmenu'>
<li><a href='edit' target='_blank'><b>My Facebook</b></a></li>
<li><a href='edit' target='_blank'><b>Me On Twitter</b></a></li>
</ul>
</li>
<li>            <a href='http://www.blogger.com'><b>Edit ▼</b></a>            </li>
</ul>
</div>
</div>
</div>
<!-- end header -->     <div id='container'>
 <div id='sidebar'>

<li class='large-avatar'><img alt='Edit' class='avatar avatar-200 photo' height='200' src='http://3.bp.blogspot.com/_wBQMdVMQU9U/R0G3iNCjLYI/AAAAAAAAAN4/2fAJ5cHrfMU/s200/blogger.png' width='200'/></li>
<li class='user-desc'>  <a href='edit'>  <b><h4 align='center'>
Write your information</h4>
</b></a></li>
<b:section id='sidebr' preferred='yes'><b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'><b:includable id='main'>  <b:if cond='data:title'>    <h2>
<data:title/></h2>
</b:if>  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>     <b:include data='data' name='interval'/>    </b:if>    <b:if cond='data:style == "FLAT"'>      <b:include data='data' name='flat'/>    </b:if>    <b:if cond='data:style == "MENU"'>      <b:include data='data' name='menu'/>    </b:if>  </div>
</div>
<b:include name='quickedit'/>  </div>
</b:includable><b:includable id='flat' var='data'>  <ul class='flat'>    <b:loop values='data:data' var='i'>
<li class='archivedate'>        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)       </li>
</b:loop>  </ul>
</b:includable><b:includable id='menu' var='data'>  <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>    <option value=''><data:title/></option>    <b:loop values='data:data' var='i'>      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>    </b:loop>  </select></b:includable><b:includable id='interval' var='intervalData'>  <b:loop values='data:intervalData' var='i'>      <ul class='hierarchy'>
<li expr:class='"archivedate " + data:i.expclass'>          <b:include data='i' name='toggle'/>          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>          <b:if cond='data:i.data'>            <b:include data='i.data' name='interval'/>          </b:if>          <b:if cond='data:i.posts'>            <b:include data='i.posts' name='posts'/>          </b:if>        </li>
</ul>
</b:loop></b:includable><b:includable id='toggle' var='interval'>  <b:if cond='data:interval.toggleId'>  <b:if cond='data:interval.expclass == "expanded"'>    <a class='toggle' href='javascript:void(0)'>      <span class='zippy toggle-open'>▼ </span>    </a>  <b:else/>    <a class='toggle' href='javascript:void(0)'>      <span class='zippy'>        <b:if cond='data:blog.languageDirection == "rtl"'>          ◄          <b:else/>          ►          </b:if>      </span>    </a>  </b:if> </b:if></b:includable><b:includable id='posts' var='posts'>  <ul class='posts'>    <b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>  </ul>
</b:includable></b:widget></b:section>     </div>
<!-- end sidebar -->       <div id='content'>
        <div id='title'>
        <b:section class='titlelogo' id='titlelogo' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Facebook Style Template (cabecera)' type='Header'><b:includable id='title'>  <a expr:href='data:blog.homepageUrl'><data:title/></a></b:includable><b:includable id='description'>  <div id='desc'>
<data:description/></div>
</b:includable><b:includable id='main'>   <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. You can't really calculate the width       reliably in JS because margins are not taken into account by any of       clientWidth, offsetWidth or scrollWidth, so we don't force a minimum       width if the user is using shrink to fit.       This results in a margin-width's worth of pixels being cropped. If the       user is not using shrink to fit then we expand the header.       -->      <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "                      + "background-position: "                      + data:backgroundPositionStyleStr + "; "                      + data:widthStyleStr                      + "min-height: " + data:height + "px;"                      + "_height: " + data:height + "px;"                      + "background-repeat: no-repeat; "' id='header-inner'>
          <div class='titlewrapper' style='background: transparent'>
  <h1 class='title' style='background: transparent; border-width: 0px'>
  <b:include name='title'/></h1>
</div>
<b:include name='description'/></div>
</b:if>  <b:else/>    <!--No header image -->    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>        </h1>
<b:include name='description'/>      </div>
</div>
</b:if></b:includable></b:widget></b:section>    </div>
<!-- end title -->        <div id='categories'>
          <ul>
<li class='current-cat'><a expr:href='data:blog.homepageUrl'>Edit</a></li>
<li class='cat-item'><a href=''>Edit</a></li>
<li class='cat-item'><a href=''>Edit</a></li>
<li class='cat-item'><a href=''>Edit</a></li>
<li id='liplus'>          <a class='none' href='#' id='plus' onclick='showbox(this)' title='More'/>          <div id='hiddencats' style='display: none;'>
          <div id='hiddenleft'>
 </div>
<div id='hiddenright'>
<ul>
<li class='browsecat'>More Links</li>
<li class='cat-item cat-item-1'><a href=''>Edit</a></li>
<li class='cat-item cat-item-1'><a href=''>Edit</a></li>
<li class='cat-item cat-item-1'><a href=''>Edit</a></li>
<li class='cat-item cat-item-2'><a href=''>Edit</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<!-- end categories -->       <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='yes'><b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'><b:includable id='nextprev'>  <div class='navigation'>
    <b:if cond='data:newerPageUrl'>      <div class='prev'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Recent Posts...</a>      </div>
</b:if>     <b:if cond='data:olderPageUrl'>      <div class='next'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Older Posts...</a>      </div>
</b:if>   </div>
<div class='clear'/>
</b:includable><b:includable id='backlinks' var='post'>  <a name='links'/><h4>
<data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>      <b:loop values='data:post.backlinks' var='backlink'>        <div class='collapsed-backlink backlink-control'>

<dt class='comment-title'>            <span class='backlink-toggle-zippy'> </span>            <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>            <b:include data='backlink' name='backlinkDeleteIcon'/>          </dt>
<dd class='comment-body collapseable'>            <data:backlink.snippet/>          </dd>          <dd class='comment-footer collapseable'>            <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>            <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>          </dd>        </div>
</b:loop>    </dl>
</b:if>  <p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>  </p>
</b:includable><b:includable id='post' var='post'>  <div class='post'>
    <div class='post-gravatar'>
    <img alt='gravatar' class='avatar' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9O-yC-hcbBtEgJnAnWqsDlommIqxPM8FGdY3XlQ7UbgQjBIxRqqNMLvyZAvWVN_P9D6wnGEwwqlJqJcVEr3X3gkxq9tNv1LfRTOys1GDhILqcCXpm5kBh9mSFytMfRv9E0yOC7Ia6vgco/s1600/Loading%20Image.png' width='50'/>    </div>
<div class='post-text'>
    <a expr:name='data:post.id'/>    <b:if cond='data:post.title'>      <h2 class='title'>
     <b:if cond='data:post.link'>       <a expr:href='data:post.link' rel='bookmark'><data:post.title/></a>     <b:else/>        <b:if cond='data:post.url'>          <a expr:href='data:post.url' rel='bookmark'><data:post.title/></a>        <b:else/>          <data:post.title/>        </b:if>     </b:if>      </h2>
</b:if> <div style='float:right;padding:4px;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>  <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>
<div class='post-header-line-1'/>
     <div class='post-body entry-content'>
       <b:if cond='data:blog.pageType == "item"'><style>.fullpost{display:inline;}</style><p>
<data:post.body/></p>
<b:else/><style>.fullpost{display:none;}</style> <p>
<data:post.body/></p>
<br/><a expr:href='data:post.url'>Permalink</a></b:if> <div style='clear: both;'/>
 <!-- clear for photos floats -->    </div>
<div class='post-footer'>
       <b:if cond='data:blog.pageType != "item"'>       <div class='meta'>
          <data:post.dateHeader/>         <b:if cond='data:top.showTimestamp'>          at <data:post.timestamp/>        </b:if>        <!-- Comentarios --> <span class='post-comment-link'><b:if cond='data:post.allowComments'> <img alt='Write your comment' imageanchor='1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5D2I7fwYFaOHWJH52qLdLgwnwZHQTV7zmDIFPWB92xq7siyadmmu29PukHCxpKETl3X0B0Sjt6Pgnm_Sor5SVa8wXbsz1Ktng3iZDXPfPR8O937BqoVvVTfM0rO4DqnV_arQLmn5ucq2r/s1600/Comments%20Facebook%20Template.png' style='vertical-align: middle;' title='Write a comment'/>   <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Write your comment'> <b:if cond='data:post.numComments == 0'> Write a comment! </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment. ¡Write yours! </b:if> <b:if cond='data:post.numComments > 1'>   This post has <data:post.numComments/> comments. ¡Write yours1 </b:if></a></b:if></span><br/>         <!-- quickedit pencil -->        <b:include data='post' name='postQuickEdit'/>      </div>
</b:if>        <span class='reaction-buttons'>        <b:if cond='data:top.showReactions'>          <table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>              <span class='reactions-label'>              <data:top.reactionsLabel/></span> </td>            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>           </tr>
</table>
</b:if>      </span>       <span class='star-ratings'>        <b:if cond='data:top.showStars'>           <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
        </b:if>      </span>         <b:if cond='data:blog.pageType == "item"'>        <b:if cond='data:post.labels'>          <div class='post-cat'>
          Category:           <b:loop values='data:post.labels' var='label'>            <a expr:href='data:label.url' expr:title='"Lihat semua postingan " + data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>          </b:loop>          </div>
</b:if>        <div class='post-meta'>
          <b:if cond='data:post.dateHeader'>            <data:post.dateHeader/>          </b:if>          <b:if cond='data:top.showTimestamp'>            at <data:post.timestamp/>          </b:if>        </div>
</b:if>        <span class='post-icons'>        <!-- email post links -->        <b:if cond='data:post.emailPostUrl'>          <span class='item-action'>          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>          </a>          </span>        </b:if>       </span>        <div class='post-footer-line post-footer-line-3'>
       <span class='post-location'>        <b:if cond='data:top.showLocation'>          <b:if cond='data:post.location'>            <data:postLocationLabel/>            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>          </b:if>        </b:if>       </span>       </div>
</div>
</div>
</div>
</b:includable><b:includable id='commentDeleteIcon' var='comment'>  <span expr:class='"item-control " + data:comment.adminClass'>    <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>      <img src='http://www.blogger.com/img/icon_delete13.gif'/>    </a>  </span></b:includable><b:includable id='feedLinks'>  <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->    <b:if cond='data:feedLinks'>      <div class='blog-feeds'>
        <b:include data='feedLinks' name='feedLinksBody'/>      </div>
</b:if>     <b:else/> <!--Post feed links -->    <div class='post-feeds'>
      <b:loop values='data:posts' var='post'>        <b:if cond='data:post.allowComments'>          <b:if cond='data:post.feedLinks'>            <b:include data='post.feedLinks' name='feedLinksBody'/>          </b:if>        </b:if>      </b:loop>    </div>
</b:if></b:includable><b:includable id='status-message'>  <b:if cond='data:navMessage != data:label.name'>  <h2 class='archive'>
<data:navMessage/></h2>
<b:else/>  <b:if cond='data:blog.url != data:blog.homepageUrl'>  <b:if cond='data:blog.pageType != "item"'>  <b:if cond='data:navMessage == data:i.name'>  <h2 class='archive'>
Archives</h2>
</b:if>  </b:if>  </b:if>  </b:if><div style='clear: both;'/>
</b:includable><b:includable id='comment-form' var='post'>  <span id='respond'/>    <div class='index-comment' id='comment_form'>
    <a name='respond'/>    <p>
<data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='245' id='comment-editor' scrolling='auto' src='' width='100%'/>    <data:post.iframeColorizer/>  </div>
</b:includable><b:includable id='backlinkDeleteIcon' var='backlink'>  <span expr:class='"item-control " + data:backlink.adminClass'>    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>      <img src='http://www.blogger.com/img/icon_delete13.gif'/>    </a>  </span></b:includable><b:includable id='feedLinksBody' var='links'>  <div class='feed-links'>
  <data:feedLinksMsg/>  <b:loop values='data:links' var='f'>     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>  </b:loop>  </div>
</b:includable><b:includable id='postQuickEdit' var='post'>  <b:if cond='data:post.editUrl'>    <span expr:class='"item-control " + data:post.adminClass'>      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>        <img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>      </a>    </span>  </b:if></b:includable><b:includable id='comments' var='post'>  <span id='comments'/>  <div id='comments'>
    <a name='comments'/>      <b:if cond='data:post.allowComments'>       <b:if cond='data:post.commentPagingRequired'>        <span class='paging-control-container'>          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>                      <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>                      <data:post.commentRangeText/>                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>        </span>      </b:if>       <b:loop values='data:post.comments' var='comment'>        <div class='index-comment'>
          <div class='ic-avatar'>
          <b:if cond='data:comment.author == data:post.author'>            <data:comment.authorAvatarImage/>            <b:else/>            <data:comment.authorAvatarImage/>          </b:if>          </div>
<div class='ic-text'>
            <div expr:class='"ic-meta " + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <a expr:name='data:comment.anchorName'/>            <b:if cond='data:comment.authorUrl'>              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>            <b:else/>              <data:comment.author/>            </b:if> on             <a expr:href='data:comment.url' title='Comment Permalink'>             <data:comment.timestamp/>            </a>            <b:include data='comment' name='commentDeleteIcon'/>            </div>
<div>
            <b:if cond='data:comment.isDeleted'>              <span class='deleted-comment'><data:comment.body/></span>            <b:else/>              <p>
<data:comment.body/></p>
</b:if>            </div>
</div>
</div>
</b:loop>       <b:if cond='data:post.commentPagingRequired'>        <span class='paging-control-container'>          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>            <data:post.oldestLinkText/>          </a>          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>            <data:post.olderLinkText/>          </a>                      <data:post.commentRangeText/>                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>            <data:post.newerLinkText/>          </a>          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>            <data:post.newestLinkText/>          </a>        </span>      </b:if>       <p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>          <b:if cond='data:post.allowNewComments'>            <b:include data='post' name='comment-form'/>          <b:else/>            <data:post.noNewCommentsText/>          </b:if>        <b:else/>          <b:if cond='data:post.allowComments'>            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>          </b:if>        </b:if>       </p>
</b:if>     <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
       <b:if cond='data:post.showBacklinks'>         <b:include data='post' name='backlinks'/>       </b:if>    </div>
</div>
</div>
</b:includable><b:includable id='main' var='top'>  <!-- posts -->  <div class='blog-posts hfeed'>
     <b:include data='top' name='status-message'/>     <data:adStart/>    <b:loop values='data:posts' var='post'>      <b:include data='post' name='post'/>      <b:if cond='data:blog.pageType == "item"'>      <b:include data='post' name='comments'/>      </b:if>      <b:if cond='data:post.includeAd'>        <data:adEnd/>        <data:adCode/>        <data:adStart/>      </b:if>      <b:if cond='data:post.trackLatency'>        <data:post.latencyJs/>      </b:if>    </b:loop>    <data:adEnd/>  </div>
<b:if cond='data:blog.pageType != "item"'>  <b:if cond='data:navMessage == data:label.name'>  <!-- navigation -->  <b:include name='nextprev'/>  </b:if>  </b:if>   <b:if cond='data:top.showStars'>    <script src='http://www.google.com/jsapi' type='text/javascript'/>    <script type='text/javascript'>      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});       function initialize() {         google.annotations.setApplicationId(<data:top.blogspotReviews/>);         google.annotations.createAll();         google.annotations.fetch();       }       google.setOnLoadCallback(initialize);     </script>  </b:if> </b:includable></b:widget></b:section>      </div>
</div>
<!-- end content --> <div id='sidebar2'>
        <b:section id='sidebr2' preferred='yes'><b:widget id='Label1' locked='false' title='Tags' type='Label'><b:includable id='main'>  <b:if cond='data:title'>    <h2>
<data:title/></h2>
</b:if>  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>      <ul>      <b:loop values='data:labels' var='label'>
<li>          <b:if cond='data:blog.url == data:label.url'>            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>          <b:else/>            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>          </b:if>          <b:if cond='data:showFreqNumbers'>            <span dir='ltr'>(<data:label.count/>)</span>          </b:if>        </li>
</b:loop>      </ul>
<b:else/>      <b:loop values='data:labels' var='label'>        <span expr:class='"label-size label-size-" + data:label.cssSize'>          <b:if cond='data:blog.url == data:label.url'>            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>          <b:else/>            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>          </b:if>          <b:if cond='data:showFreqNumbers'>            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>          </b:if>        </span>      </b:loop>    </b:if>    <b:include name='quickedit'/>  </div>
</b:includable></b:widget></b:section>      </div>
<!-- end sidebar -->            </div>
<!-- end container -->     <div id='footer'>
        <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> <b:if cond='data:blog.url == data:blog.homepageUrl'><a href="http://www.youtube.com/watch?v=lPkb0OYuRb8">Six Pack abs</a> | <a href="http://www.youtube.com/watch?v=w7O1nSN00o8">Tao of Badass</a> | <a href="http://ctr-themes.com" title="CTR Themes">Visit this page</a> by <a href="http://www.bloggertemplatesblog.com/" title="Blogger Free Templates">Blogger Free Templates</a></b:if></div>
</div>
</body></html>
දැන් ඔබේ blogger home එකේ තිබෙන template > edit template එකේ තිබෙන html එක select all (ctrl+a) කර delete button ඔබන්න.
දැන් ඔබ copy කරගත් html එක එම ස්ථානයට paste කරන්න.
දැන් save කරලා බලන්නකෝ. වැඩේ කොහොමද කියලා. ඔබට කැමති ආකාරයට එහි වෙනස් කම් කරන්න.
හරි ඔන්න එහෙනම් තවත් වැදගත් දෙයක් මම ඔයාලට දුන්නේ. මම හිතනවා මෙම temple එක bloggers හදන අයට ඉතාමත් වැදගත් වන්න ඇති කියලා. හරි එහෙනම් මම දැනට නවතිනවා. මොකක් හරි ගැටළුවක් මතු වුවහොත් කියන්න.
Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.