tasarimduragi - css design blog

css design blog

Desing Blog

Desing Blog Karşınızda!
Alışılmadık renkleri ve edebi havasıyla sizi kesinlikle etkileyecek bir tema.

Hoş sanatsal ve tarihi temasıyla ziyaretçilerinizi çok eskilere götürmenize olanak sağlayacak bu tr gg tasarımını mutlaka önizlemelisiniz.

Özellikle şiir veya çeşitli edebi eserler paylaşan siteler için uygun olacağını düşündüğümüz bu hoş css tasarım, beraberinde çalışan bir arama motorunu da getiriyor. Zengin sağ menü, kesinlikle ihtiyacınızı karşılayacak türden.

Tasarımın sunduğu bir diğer avantaj ise, küçük boyutu sayesinde sitenizin yüklenmesini bir hayli hızlandırması.

Tasarım üstüne yazı :

Tasarım altına yazı :

<div id="templatemo_right_column"> <div class="templatemo_section"> <form> <input name="search" type="text" value="Ara" id="keyword" /> <button onclick_fckprotectedatt="%20onclick%3D%22aramacibigi()%3B%22" class="button">Bul</button> </form> </div> <script>
function aramacibigi(){
var siteadresim = location.href;
var terim = document.getElementById('keyword').value;
window.open('http://www.google.com.tr/#hl=tr&output=search&q=site:' + siteadresim + '+' + terim);
}
</script> <div class="templatemo_section"> <div class="section1_top"></div> <div class="section1_middle"> <h1 style="text-align: center;"><span id=":11g" dir="ltr"><strong>Menü Link</strong></span></h1> <ul> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#" target="_parent">» Menu Link</a></li> </ul> </div> <div class="section1_bottom"></div> </div>  <div class="templatemo_section"> <div class="section2_top"></div> <div class="section2_middle"> <h1 style="text-align: center;"><span id=":11g" dir="ltr"><strong>Menü Link</strong></span></h1> <ul> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> </ul> </div> <div class="section2_bottom"></div> </div>  <div class="templatemo_section"> <div class="section3_top"></div> <div class="section3_middle"> <h1 style="text-align: center;"><span id=":11g" dir="ltr"><strong>Menü Link</strong></span></h1> <ul> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#" target="_parent">» Menu Link</a></li> <li><a href="#" _fcksavedurl="#" target="_parent">» Menu Link</a></li> </ul> </div> <div class="section3_bottom"></div> </div> </div> </div> <div id="templatemo_bottom"></div> <div id="templatemo_footer"> <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> | <a href="#" _fcksavedurl="#">Dost Link</a> <br /> Copyright © 2012 <a href="#" _fcksavedurl="#">Sitenizin Ismi</a> | <a href="http://bs-csstasarim.tr.gg/#kapat" _fcksavedurl="http://bs-csstasarim.tr.gg/#kapat" title="Tasarim">Tasarim</a> </div> </div> </div>

Css Kodu :

li.nav_element{display: none;} li.nav_element a{display: none;} 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;} /* Tasarim : Tasarim Isim : Desing Blog v1 Tasarim Tarih : 20.09.2012 Bs Cevirme Saati : 20:25 Tasarim Sitesi : http://bs-csstasarim.tr.gg/ | UgurluForum Tasarim Düzenleyen : AbdullahUgurlu */    body { margin:0; padding:0; line-height: 1.5em; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #000000; background: #604a40; }  a:link, a:visited { color: #3e3939; text-decoration: none; } a:active, a:hover { color: #cc0000;}  h1 { margin: 0px; padding: 20px 0px 0px 0px; font-size: 20px; font-weight: bold; color:#990000; height: 20px; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_h1_background.png) left center no-repeat; }  h2 { margin: 0px 0px 8px 0px; padding: 10px 0px 0px 15px; font-size: 14px; color: #000000; }  p { margin: 10px 0px; color: #5b5847; text-align: justify; }  img { margin: 2px 20px 2px 0px; float:left; border: 1px solid #333333; }  #templatemo_container_wrapper1 { background: url(http://resimciyiz.domain.lc/desingblog//background.gif) top center repeat-x; }  #templatemo_container_wrapper2 { background: url(http://resimciyiz.domain.lc/desingblog//templatemo_mainbackground.jpg) top center no-repeat; }  #templatemo_container { margin: 0px auto; width: 900px; }   /* ----- Header ----- */  #templatemo_header { clear: both; padding: 30px 0px 0px 30px; width: 870px; height: 140px; }  #templatemo_logo { height: 120px; background: url(http://1.bp.blogspot.com/-EQ8jZv2U2M4/T-xizNYGHKI/AAAAAAAALoA/hl_RSxeuiYI/s400/tasar%25C4%25B1m%2Bsepeti%2B-%2BKopya.png) no-repeat; }  #templatemo_site_title { padding: 60px 0px 10px 30px; font-size: 40px; font-weight:bold; color: #ff0000; }  #templatemo_site_slogan { padding: 90px 0px 10px 160px; font-size: 17px; color: #000; font-weight:bold; text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87 } /* ----- End of Header ----- */  /* ------------- Menu ------------------ */ #templatemo_menu { clear: both; margin: 0px; padding: 0px; width: 900px; height: 42px; text-align: right; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_menu_bg.png) no-repeat; }  #templatemo_menu ul { margin: 0px; padding: 18px 20px 0px 0px; list-style: none; }  #templatemo_menu ul li { margin: 0px; display: inline; }  #templatemo_menu ul li a { margin: 0px; padding: 0px 20px 0px 0px; font: 14px arial; font-weight: bold; color:#999999; text-decoration: none; }  #templatemo_menu ul li a:hover, #templatemo_menu ul li .current { color: #cccccc; }  /* ---------- End of Menu ------------- */  /* ----------------- Content ----------------------- */  #templatemo_content { float: left; margin: 0px; width: 900px; background: #c3b595 url(http://resimciyiz.domain.lc/desingblog//templatemo_content_bg.png) no-repeat; }  #templatemo_left_column { float: left; margin: 40px 0px 0px 40px; padding: 0px; width: 570px; }  /* IE6 Only */ * html #templatemo_left_column { float: left; margin: 40px 20px 0px 20px; padding: 0px; width: 570px; }  #templatemo_right_column { float: right; margin: 40px 40px 0px 0px; padding: 0px; width: 200px; }  * html #templatemo_right_column { float: right; margin: 40px 20px 0px 20px; padding: 0px; width: 200px; }  /* IE6 Only */ #templatemo_bottom { clear: both; margin: 0px; padding: 0px; width: 900px; height: 90px; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_content_bg_bottom.png) no-repeat;  }  /* ----------------- End of Content ------------------- */  /* ------------- Section ------------------ */ .templatemo_section { margin: 0px 0px 15px 0px; padding: 0px; color: #3e3939; }  .templatemo_section .section1_top { height: 40px; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_section1_top.png) no-repeat; } .templatemo_section .section1_middle { background: url(http://resimciyiz.domain.lc/desingblog//templatemo_section1_middle.png) repeat-y; } .templatemo_section .section1_bottom { height: 37px; background:url(http://resimciyiz.domain.lc/desingblog//templatemo_section1_bottom.png) no-repeat; }  .templatemo_section .section2_top { height: 40px; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_section2_top.png) no-repeat; } .templatemo_section .section2_middle { background: url(http://resimciyiz.domain.lc/desingblog//templatemo_section2_middle.png) repeat-y; } .templatemo_section .section2_bottom { height: 37px; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_section2_bottom.png) no-repeat; }  .templatemo_section .section3_top { height: 40px; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_section3_top.png) no-repeat; } .templatemo_section .section3_middle { background: url(http://resimciyiz.domain.lc/desingblog//templatemo_section3_middle.png) repeat-y; } .templatemo_section .section3_bottom { height: 37px; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_section3_bottom.png) no-repeat; }   .templatemo_section ul { margin: 0px 0px 0px 15px; padding: 0px; list-style: none; }  .templatemo_section ul li { display: block; }  .templatemo_section ul li a { padding: 0px; margin: 0px; color: #3e3939; text-decoration: none; }  .templatemo_section ul li a:hover { color: #990000; }  /* ---------- End of Section ------------ */  /* ----- Post ------ */ .templatemo_postbody { padding: 0px; margin-bottom: 40px; border-bottom: 1px dotted #333333; }  .publish_info { clear: both; margin: 0px; padding: 0px; color:#3e3939;  }  .comment { clear: both; margin: 10px 0px 0px 0px; width: 570px; text-align: right; padding: 0px; }  .comment a { padding: 5px 0px 5px 0px; font-size: 11px; font-weight: bold; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_comment_icon.gif) left center no-repeat; } /* ----- End of Post ------ */  /* ----- Form ----- */ form { width: 190px; margin: 0px; padding: 13px 0px 0px 10px; height: 50px; background: url(http://resimciyiz.domain.lc/desingblog//templatemo_search_box.gif) no-repeat;  }  input { width: 130px; background: none; color: #CCCCCC; border: none; }  .button { margin: 2px 0px 0px 8px; height: 32px; width: 40px; color: #000000; font-size: 15px; font-weight: bold; border: none; background: #990000; } /* ----- End of Form ----- */  /* ----- Footer ----- */  #templatemo_footer { clear: both; padding: 10px 0px 0px 15px; width: 870px; height: 60px; text-align: center; color: #999999; text-align: center; }  #templatemo_footer a { color: #999999; }  #templatemo_footer a:hover { color: #ffffff; }  /* ----- End of Footer ----- */

Anasayfaya eklencek Kod :

<div id="templatemo_left_column">  <div class="templatemo_postbody"> <h1>Buraya Başlık</h1> <div class="publish_info">Tarih: 01-01-2012 · Konu: "Konu İsim" · <a href="#" _fcksavedurl="#">"Konu İsim"</a> - "Konu İsim"</div> <p><img src="http://resimciyiz.domain.lc/desingblog//templatemo_photo03.gif" _fcksavedurl="http://resimciyiz.domain.lc/desingblog//templatemo_photo03.gif" alt="image"/> This layout is provided as a free CSS template and this is designed by <b>Saw Htoo</b> exclusively for <a href="http://www.templatemo.com" _fcksavedurl="http://www.templatemo.com" target="_parent">templatemo.com</a> website. Feel free to edit and apply this template layout for your personal or commercial websites. You may put a credit link back to templatemo.com at the footer. Thank you.</p> <p>Duis pulvinar scelerisque ante. Morbi tristique, risus quis congue pulvinar, nisl nisi commodo diam, a porta nisi ligula ac massa. Vestibulum blandit lacus sed sapien. Nunc quis sem nec tellus blandit tincidunt.</p> <div class="comment"><a href="#" _fcksavedurl="#">Devamını Gör</a></div> </div>   <div class="templatemo_postbody"> <h1>Buraya Başlık</h1> <div class="publish_info">Tarih: 01-01-2012 · Konu: "Konu İsim" · <a href="#" _fcksavedurl="#">"Konu İsim"</a> - "Konu İsim"</div> <p>IE PNG Fix: http://www.twinhelix.com<br /> Szuia: http://szuia.deviantart.com/art/grunge-brushes-78728649<br /> gvalkyrie: http://gvalkyrie.deviantart.com</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum.</p> <div class="comment"><a href="#" _fcksavedurl="#"><a href="#" _fcksavedurl="#">Devamını Gör.</a></div> </div>  <div class="templatemo_postbody"> <h1><span dir="ltr" id=":11g">Buraya Başlık</h1> <div class="publish_info">Tarih: 01-01-2012 · Konu: "Konu İsim" · <a href="#" _fcksavedurl="#">"Konu İsim"</a> - "Konu İsim"</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. </p> <p><a href="http://validator.w3.org/check?uri=referer" _fcksavedurl="http://validator.w3.org/check?uri=referer"></a> <a href="http://jigsaw.w3.org/css-validator/check/referer" _fcksavedurl="http://jigsaw.w3.org/css-validator/check/referer"></a><br /> </p> <div class="comment"><a href="#" _fcksavedurl="#">Devamını Gör.</a></div> </div> </div>