blog tasarimi
demo
Tasarım üzerindeki yazı kodu:
<div id="Bulutv3">
<div id="logo">
<div style="margin-left:15px;padding-top:5px;"><a href="#"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/dfhfgh.png" height="68" width="230" title="css tasarımlar" alt="css tasarımlar" /></a></div>
<div id="ustreklam">reklam3</div>
<div id="ustkisim">
<div class="ustmenu">
<ul id="page-bar">
<li><a title="acıklama" href="#">Ana Sayfa</a></li>
<li><a title="acıklama" href="#">baslık</a></li>
<li><a title="acıklama" href="#">baslık</a></li>
<li><a title="acıklama" href="#">baslık</a></li>
<li><a title="acıklama" href="#">baslık</a></li>
<li><a title="acıklama" href="#">baslık</a></li>
</ul>
</div>
<div id="arama">
<form method="get" action="#">
<input type="text" value="Ara..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="s" id="s" /> <input type="hidden" />
</form>
</div>
</div>
<div id="ortakisim" class="clearfix">
<div id="solkisim">
<div class="cerceve">
<div class="yazibaslik"> </div>
<div class="post">
Tasarım altındaki yazı kodu:
</div>
</div>
<div class="cerceve">
<div class="yazibaslik">
<h3>Spon</h3>
</div>
<center style="padding-bottom:5px;padding-top:5px;border: 1px solid #c0c0c0;">
<div id="icerikreklam">reklam1</div>
</center></div>
</div>
<div id="sagkisim">
<div class="cerceve">
<div class="yazibaslik">
<h3>Reklam</h3>
</div>
<div class="liste">
<ul class="sponsorlar">reklam2</ul>
</div>
</div>
<div class="cerceve">
<div class="yazibaslik">
<h3>Kategoriler</h3>
</div>
<div class="kategoriler">
<ul style="float:left;">
<li class="cat-item cat-item-22"><a href="#" title="acıklama">baslık</a></li>
<li class="cat-item cat-item-22"><a href="#" title="acıklama">baslık</a></li>
<li class="cat-item cat-item-22"><a href="#" title="acıklama">baslık</a></li>
<li class="cat-item cat-item-22"><a href="#" title="acıklama">baslık</a></li>
<li class="cat-item cat-item-22"><a href="#" title="acıklama">baslık</a></li>
<li class="cat-item cat-item-22"><a href="#" title="acıklama">baslık</a></li>
</ul>
</div>
</div>
<div class="cerceve">
<div class="yazibaslik">
<h3>Sosyal Ağlar</h3>
</div>
<div style="overflow:hidden;" class="liste baglantilar">
<div style="margin-left:15px;"><span class="social-icon twitter"><a href="http://www.twitter.com/" title="twitter">twitter</a></span> <span class="social-icon facebook"><a href="http://www.facebook.com/" title="facebook">facebook</a></span> <span class="social-icon gplus"><a href="http://plus.google.com/" title="gplus">gplus</a></span> <span class="social-icon linkedin"><a href="http://www.linkedin.com/" title="linkedin">linkedin</a></span> <span class="social-icon youtube"><a href="http://www.youtube.com/" title="youtube">youtube</a></span> <span class="social-icon rss"><a href="http://css-tasarimdeneme.tr.gg/" title="rss">rss</a></span></div>
</div>
</div>
<div class="cerceve">
<div style="padding-bottom:5px;" class="yazibaslik">
<ul style="margin-left:10px;margin-top:5px;" id="tabs">
<li>
<h2 style="font-size:12px; margin-top:2px; "><a href="#" title="tab1">Son Eklenenler</a></h2>
</li>
</ul>
</div>
<div class="liste yazilar">
<div style="margin-top:4px;" class="content">
<div style="list-style:none;" id="tab1">
<ul>
<li><a href="#" title="acıklama">baslık</a></li>
<li><a href="#" title="acıklama">baslık</a></li>
<li><a href="#" title="acıklama">baslık</a></li>
<li><a href="#" title="acıklama">baslık</a></li>
<li><a href="#" title="acıklama">baslık</a></li>
<li><a href="#" title="acıklama">baslık</a></li>
<li><a href="#" title="acıklama">baslık</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="altkisim">
<div style="margin-left:5px;margin-top:6px;">© 2011 - 2012 css-tasarimdeneme.tr.gg</div>
</div>
</div>
</div>
Css kodu:
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;}
table[height="102"] {
margin: auto; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin : 0;
padding : 0;
border : 0;
outline : 0;
vertical-align : baseline;
background : transparent;
}
.fix:after {
content : ".";
display : block;
clear : both;
visibility : hidden;
line-height : 0;
height : 0;
}
.fix {
display : inline-block;
}
ol, ul {
list-style : none;
}
blockquote, q {
quotes : none;
}
blockquote:before, blockquote:after, q:before, q:after {
content : '';
content : none;
}
:focus {
outline : 0;
}
ins {
text-decoration : none;
}
del {
text-decoration : line-through;
}
p {
padding : 4px 0;
}
.clearfix:after {
content : ".";
display : block;
clear : both;
visibility : hidden;
line-height : 0;
height : 0;
}
.clearfix {
display : inline-block;
}
html[xmlns] .clearfix {
display : block;
}
* html .clearfix {
height : 1%;
}
body {
line-height : 1;
}
.clear {
clear : both;
}
.hidden {
display : none;
float : none;
width : 1%;
}
.float_left, .alignleft {
float : left;
display : inline;
}
.float_right, .alignright {
float : right;
display : inline;
}
acronym, abbr {
cursor : help;
border-bottom : 1px dotted #999;
}
body {
background : url('https://img.webme.com/pic/c/css-tasarimdeneme/bg45.png') repeat #EEE;
color : #535252;
background-position : -64px 0%;
}
.overflow {
overflow : hidden;
}
.wp-caption {
background : #eee;
text-align : center;
padding-top : 4px;
border : #ddd solid 1px;
}
.wp-caption img {
border : 0;
padding : 0;
}
.wp-caption p.wp-caption-text {
font-size : 11px;
line-height : 17px;
margin : 0;
padding : 0 4px 5px;
}
code, blockquote {
background : #fff;
color : #000;
border : silver solid 1px;
font-size : 12px;
overflow : auto;
display : block;
margin : 0 0 1px;
padding : 5px 10px;
}
a:link, a:visited {
color : #000;
text-decoration : none;
}
a:hover, a:active {
text-decoration : none;
}
h1, h2, h3, h4, h5, h6 {
color : #333;
margin : 10px 0 6px;
}
h1 {
font-size : 17px;
}
h2 {
font-size : 30px;
}
h3 {
font-size : 15px;
}
h4 {
font-size : 14px;
}
h5 {
font-size : 13px;
}
h6 {
font-size : 12px;
}
.smalltext {
font-size : 11px;
}
.largetext {
font-size : 16px;
font-weight : bold;
}
img {
border : 0;
vertical-align : text-top;
}
img.aligncenter {
background : #fff;
display : block;
margin-left : auto;
margin-right : auto;
border : #dddada solid 1px;
padding : 1px;
}
img.alignright {
padding : 4px;
margin : 0 0 2px 7px;
display : inline;
}
img.alignleft {
padding : 4px;
margin : 0 7px 2px 0;
display : inline;
}
#Bulutv3 {
font : 100% "Segoe UI";
font-size : smaller;
width : 1000px;
min-width : 720px;
position : relative;
margin : 0 auto;
padding : 0;
}
#logo img:hover {
opacity : 0.800000011920928955078125;
transition : all 0.2s ease;
}
#ustkisim {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/siyahbg.gif);
border-top-left-radius : 30px;
border-top-right-radius : 30px;
box-shadow : 0 1px 6px rgba(0, 0, 0, 0.4);
margin : 10px auto 0;
padding : 15px 10px;
}
#ortakisim {
background-color : #FFF;
box-shadow : 0 1px 6px rgba(0, 0, 0, 0.4);
overflow : hidden;
width : 995px;
padding : 10px 0 0 5px;
}
#altkisim {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/siyahbg.gif) repeat;
box-shadow : 0 1px 6px rgba(0, 0, 0, 0.4);
overflow : hidden;
height : 30px;
margin : 0 auto 20px auto;
border-bottom-right-radius : 8px;
border-bottom-left-radius : 8px;
color : #FFF;
font : 12px Regular;
}
#altkisim a {
text-decoration : none;
color : #FFF;
}
#altkisim h1 {
font : 12px Regular;
color : #FFF;
margin-top : 2px;
}
#content {
margin : 10px;
padding : 0;
}
#solkisim {
width : 687px;
float : left;
}
#sagkisim {
width : 29%;
padding : 0 0 0 699px;
}
#mansetsol {
width : 350px;
margin-top : 2px;
float : left;
}
#mansetorta {
left : 20px;
}
#mansetsag {
width : 29%;
padding : 0 0 0 699px;
}
.ustmenu {
margin-left : 15px;
float : left;
margin-top : -9px;
font : 13px Regular;
}
.ustmenu h3 {
font-size : 14px;
}
#page-bar ul {
margin-top : -6px;
list-style : none;
}
#page-bar li {
margin-top : -6px;
float : left;
list-style : none;
cursor : pointer;
display : block;
}
#page-bar li:hover {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/tcatbg.png) repeat-x #182846;
text-shadow : 0 0 20px #fff;
}
#page-bar a, #page-bar a:visited {
color : #FFF;
display : block;
margin : 0;
padding : 7px 17px;
}
#page-bar a:hover {
text-decoration : none;
display : block;
color : #000;
text-shadow : 0 0 20px #fff;
}
.menualt {
width : 976px;
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/tcatbg.png) repeat-x #182846;
color : #000;
padding : 5px 5px;
overflow : hidden;
border : #c0c0c0 solid 1px;
font : 15px Regular;
margin-bottom : 10px;
}
.menualt2 {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/tcatbg.png) repeat-x #182846;
color : #000;
padding : 5px 5px;
overflow : hidden;
border : #c0c0c0 solid 1px;
font : 11px Regular;
margin-bottom : 10px;
}
#ustreklam {
background : url("https://img.webme.com/pic/c/css-tasarimdeneme/ustreklam.png") 0% 0% repeat scroll transparent;
float : right;
height : 60px;
padding : 1px 1px 1px 10px;
margin-top : -65px;
margin-right : 10px;
width : 468px;
}
#icerikreklam {
background : url("https://img.webme.com/pic/c/css-tasarimdeneme/ustreklam.png") 0% 0% repeat scroll transparent;
height : 60px;
padding : 1px 1px 1px 10px;
width : 468px;
}
ul.yanreklam {
background : url("https://img.webme.com/pic/c/css-tasarimdeneme/reklam.png") no-repeat;
margin : 0 0 0 5px;
overflow : auto;
padding : 0 0 0 5px;
width : 336px;
}
ul.yanreklam li {
float : left;
height : 250px;
margin : 4px;
padding : 0;
width : 250px;
}
ul.yanreklam li a {
float : left;
}
ul.sponsorlar {
background : url("https://img.webme.com/pic/c/css-tasarimdeneme/sponsorlar.png") no-repeat;
margin : 0 0 0 1px;
overflow : auto;
padding : 0 0 0 5px;
width : 336px;
}
ul.sponsorlar li {
float : left;
height : 125px;
margin : 4px;
padding : 0;
width : 125px;
}
ul.sponsorlar li a {
float : left;
}
.yazibaslik {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/siyahbg.gif) repeat-x #182846;
padding : 5px 10px;
border-top-left-radius : 14px;
border-top-right-radius : 14px;
box-shadow : 0 1px 6px rgba(0, 0, 0, 0.4);
list-style : none;
}
.yazibaslik img {
opacity : 0.699999988079071044921875;
}
.yazibaslik h3 {
color : #fff;
display : inline;
font-size : 12px;
font : 100% Regular;
list-style : none;
}
.yazibaslik span {
float : right;
color : #fff;
font-size : 11px;
margin : 1px 0 0;
font-family : Medium;
}
.yazibaslik a:link, .yazibaslik a:visited {
color : #FFF;
text-decoration : none;
}
.liste {
font-size : 11px;
padding : 7px;
border : #c0c0c0 solid 1px;
text-align : justify;
}
.post {
font : 100% "Segoe UI";
background-color : #FFF;
padding : 7px;
border : #c0c0c0 solid 1px;
border-top : none;
overflow : hidden;
text-align : justify;
}
.post1 {
background-color : #FFF;
padding : 7px;
border : #c0c0c0 solid 1px;
border-top : none;
overflow : hidden;
text-align : justify;
}
.onecikar img {
float : left;
border : #DBDBDB solid 1px;
margin : 3px;
padding : 4px;
height : 130px;
margin : 3px;
opacity : 0.89999997615814208984375;
transition : 0.5s ease;
}
.onecikar img:hover {
opacity : 0.5;
transition : 0.5s ease;
}
.post h4 {
color : #666;
font-size : 16px;
border-bottom : 1px dashed #e1e1e1;
padding : 0 0 5px;
margin : 16px 0;
}
.yazilar {
font-size : 11px;
}
.yazilar li {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/ok.png) 5px 0% no-repeat;
border-bottom : 1px dashed #ddd;
padding : 5px 5px 5px 20px;
}
.kategoriler {
border-top : none;
padding : 5px;
margin : 0 auto;
border : #c0c0c0 solid 1px;
font-size : 11px;
padding-bottom : 20px;
overflow : hidden;
}
.kategoriler ul li {
border-bottom : 1px dashed #ddd;
float : left;
width : 119px;
}
.kategoriler ul li a {
padding : 5px 5px 5px 20px;
display : block;
color : #656565;
background : url("https://img.webme.com/pic/c/css-tasarimdeneme/ok.png") 5px no-repeat;
}
.cerceve {
background : #fff;
width : 100%;
margin : 0 auto 10px;
padding : 1px;
}
.yazibilgi1 {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/tcatbg.png) repeat-x #182846;
color : #000;
font-size : 11px;
padding : 5px 5px;
text-align : right;
border : #c0c0c0 solid 1px;
border-top : none;
}
.yazibilgi1 ul li {
float : right;
display : inline;
margin-left : 10px;
}
.yazar {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/iconcuklar.png) left no-repeat;
background-position : -394px 0%;
float : left;
margin : 0 2px 2px 0;
padding : 0 0 0 20px;
}
.kategori {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/iconcuklar.png) left no-repeat;
background-position : -262px 0%;
float : left;
margin : 0 2px 2px 0;
padding : 0 0 0 20px;
overflow : hidden;
}
.yorumsayisi {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/iconcuklar.png) left no-repeat;
background-position : -460px 0%;
float : left;
padding : 0 0 0 20px;
overflow : hidden;
}
.goruntulenme {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/iconcuklar.png) left no-repeat;
background-position : -132px 0%;
float : left;
padding : 0 0 0 20px;
overflow : hidden;
}
.tarih {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/iconcuklar.png) left no-repeat;
background-position : -328px 0%;
float : left;
padding : 0 0 0 20px;
overflow : hidden;
}
.devami {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/iconcuklar.png) left no-repeat;
background-position : 0% 0%;
float : left;
padding : 0 0 0 20px;
overflow : hidden;
}
.etiket {
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/iconcuklar.png) left no-repeat;
background-position : -66px 0%;
float : left;
padding : 0 0 0 20px;
overflow : hidden;
}
#benzer-yazilar ul li {
list-style : none !important ;
}
.benzeryazilar span {
font-weight : bold;
color : #525252;
margin-left : 5px;
}
.benzeryazilar {
font : 12px Regular;
border-bottom : 1px dotted #DDD;
padding : 7px 12px 12px !important ;
margin : 0 !important ;
text-align : justify;
}
.benzeryazilar:hover {
background : #EFEFEF !important ;
}
.benzeryazilar p {
padding : 0;
margin : -30px 0 0 86px;
font-size : 11px;
line-height : 15px;
}
.benzeryazilar p a, .benzeryazilar p a:visited, .benzeryazilar p a:hover {
color : #666;
text-decoration : none;
}
.benzeryazilar img {
width : 70px;
height : 50px;
float : left;
margin-right : 10px;
border : #DDD solid 1px;
}
.temizle {
clear : both;
}
#s {
float : right;
padding : 3px 6px 5px 23px;
position : relative;
border-radius : 30px;
background-clip : padding-box;
color : #aaa;
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/ara.png) center 6px no-repeat #f9f9f9;
border : rgba(0, 0, 0, 0.2) solid 1px !important ;
margin-right : 2px;
margin-top : -13px;
width : 140px;
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.1) inset;
transition : all 0.3s ease-in-out;
transition-duration : 0.3s;
}
#s:focus {
width : 200px;
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/ara.png) center 6px no-repeat #fff;
transition : all 0.3s ease-in-out;
transition-duration : 0.3s;
}
textarea:focus {
border-radius : 2px;
box-shadow : 0 0 8px #000000;
border : #56b4ef solid 1px;
padding : 2px;
outline : none;
}
blog kodu:
<div class="cerceve">
<div class="yazibaslik">
<h3><a href="#">baslık</a></h3>
<span class="yorumsayisi">Yorum Yok</span></div>
<div class="post">
<div class="onecikar" style="float:left;"><img width="150" height="150" src="https://img.webme.com/pic/h/html-kodlari-dene/maskot1.png" class=" wp-post-image" alt="maskot" /></div>
<div style="margin-left:5px;">acıklama...</div>
</div>
<div class="yazibilgi1">
<ul class="fix">
<li class="devami"><b><a href="#">Devamını Oku </a></b></li>
<li class="goruntulenme"><b> Görüntülenme : </b>18</li>
<li class="kategori"><b> Kategori : </b>yok</li>
<li class="tarih"><b> Tarih : </b> 01 Aralık 2012</li>
</ul>
</div>
</div>
<div class="cerceve">
<div class="yazibaslik">
<h3>Reklam Alanı</h3>
</div>
<div style="overflow:hidden; border: 1px solid #c0c0c0;"><center>reklam 4</center></div>
</div>
Bugün 101 ziyaretçi (113 klik) kişi burdaydı!