Merhaba arkadaşlar bu gün size Bedava Sitem Mikro Blog Tasarımını paylaşacağım.Arkadaşlar bu tasarım bana ait deil ben kodlamadım ancak temayı düzelttim.Üst menüyü orta ve yan menüleri ve alt menüyü düzelttm.Tasarımın yapımcısı Mikro-Blog şuanda sitesi online ancak 2011 yılında paylaşımlar durmuş bende şans eseri rastladım bu tasarıma editledim ve size sundum.Umarım bedava sitemde hizmet veren arkadaşlarımız beğenir:Tasarımın özelliklerini,demosu ve kodlarını vereceğim.
...Tasarımın Özellikleri;
•Oval üst menü
•Ortada bir menü(isterseniz kaldırabilirsiniz.)
•Sol oval menü
•Alt menü
Not=Kullanacak arkadaşlar sağ taraftaki sitemizin iconunu kaldırmassalar seviniriz..
Tasarımın Görüntüsü;
</table></div> <center><br /> <table style="width: 772px; height: 122px"> <tbody> <tr> <td background="http://img.webme.com/pic/o/osmantalay/bsreklambg13.png"><center> <iframe src="http://ads.webme.com/banner.php?pos=bw" frameborder="0" width="728" height="90" scrolling="no"></iframe> <center></center></td> <td> </td> </tr> </tbody> </table> </center>
<div class='ustcubuk'/> </div>
<div id="tas">
<div id="mikro">
<div id="enustmenu">
<ul>
<li><a href="#" class="birinci">Link 1</a></li>
<li><a href="#">Hakkimda</a></li>
<li><a href="#">Ziyaretci Defteri</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Abone Ol</a></li>
<li><a href="#">Iletisim</a></li>
</ul>
</div>
<div id="usttaraf">
<div class="logo"><a href="#"><img src="http://a1302.hizliresim.com/16/5/jssfm.png"></a></div>
<div class="ustreklam"><a href="#"><img src="http://img.webme.com/pic/m/mikro-blog/mikro-blog_468x60.png"></a></div>
</div>
<div id="ustmenu">
<ul>
<li><a href="#">Css-Grafik</a></li>
<li><a href="#">JavaScript-Jquery</a></li>
<li><a href="#">Css Tasarımlar</a></li>
<li><a href="#">İceblue Tasarımlar</a></li>
<li><a href="#">Bedava-Sitem Ekstraları</a></li>
<li><a href="#">Facebook / Sayfa</a></li>
<li><a href="#">Müzik / Video</a></li>
</ul>
</div>
<div class="soltaraf">
<div class="menubaslik">Bagış Kutusu;</div>
<div class="menuicerik"><a href="#"><img src="http://img.webme.com/pic/m/mikro-blog/mikro-blog_250x250.png" /></a></div>
<div class="menubaslik">Kategoriler;</div>
<div class="menuicerik">
<ul>
<li><a href="#">Css-Grafik</a></li>
<li><a href="#">JavaScript-Jquery</a></li>
<li><a href="#">Css Tasarımlar</a></li>
<li><a href="#">İceblue Tasarımlar</a></li>
<li><a href="#">Bedava-Sitem Ekstraları</a></li>
<li><a href="#">Facebook / Sayfa</a></li>
<li><a href="#">Müzik / Video</a></li>
</ul>
</div>
<div class="menubaslik">Resimli Kategori</div>
<div class="menuicerik"><a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://1.bp.blogspot.com/-rIV1I8VCaSs/UK4RFX7OvvI/AAAAAAAABOo/veM70DNIzwE/s1600/fotogaleri-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;" /></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-W50ZiNh9HGs/UK4RJzL2TbI/AAAAAAAABPM/5MF7N-5hRzY/s1600/videogaleri-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;" /></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-fhbGrSSN5Bk/UK4SRw1v7yI/AAAAAAAABPg/O53KsL_za9M/s1600/haberler-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;" /></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-Sm5UgMX2P6U/UK4SCnCG4XI/AAAAAAAABPY/HF6RYYyS3v4/s1600/oyunlar-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;" /></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-lCP6mt3jIdc/UK4RHfPsV1I/AAAAAAAABOw/-Z8rWeBaxTM/s1600/kadinlar-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;" /></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-393irbm6TDc/UK4RI2LM2hI/AAAAAAAABPA/2ukIXhjzWAk/s1600/sinema-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;" /></a></div>
</div>
<div class="sagtaraf">
</div>
</div>
<div style="margin-top: 0px;" id="ustcizgi"></div>
<div style="margin-bottom: 10px;" class="alt"><div style="float: left; width: 800px; color: rgb(166, 166, 166); font-family: tahoma; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); " id="footersol">
<ul style="padding: 0px; margin: 10px 0px 0px; ">
<li style="list-style: none; float: left; padding: 0px 10px; border-right-width: 1px; border-right-style: dotted; border-right-color: rgb(153, 153, 153); "><a style="color: rgb(102, 102, 102); font-size: 11px; text-decoration: none; " href="http://ibrahimahii.blogspot.com/">Anasayfa</a></li>
<li style="list-style: none; float: left; padding: 0px 10px; border-right-width: 1px; border-right-style: dotted; border-right-color: rgb(153, 153, 153); "><a style="color: rgb(102, 102, 102); font-size: 11px; text-decoration: none; " href="http://ibrahimahii.blogspot.com/">Hakkımda</a></li>
<li style="list-style: none; float: left; padding: 0px 10px; border-right-width: 1px; border-right-style: dotted; border-right-color: rgb(153, 153, 153); "><a style="color: rgb(102, 102, 102); font-size: 11px; text-decoration: none; " href="http://ibrahimahii.blogspot.com/">Bana Ulaş</a></li>
<li style="list-style: none; float: left; padding: 0px 10px; border-right-width: 1px; border-right-style: dotted; border-right-color: rgb(153, 153, 153); "><a style="color: rgb(102, 102, 102); font-size: 11px; text-decoration: none; " href="http://ibrahimahii.blogspot.com/">Siteni Ekle</a></li>
<li style="list-style: none; float: left; padding: 0px 10px; border-right-width: 1px; border-right-style: dotted; border-right-color: rgb(153, 153, 153); "><a style="color: rgb(102, 102, 102); font-size: 11px; text-decoration: none; " href="http://ibrahimahii.blogspot.com/">Yorum Yap</a></li>
<li style="list-style: none; float: left; padding: 0px 10px; border-right-width: 1px; border-right-style: dotted; border-right-color: rgb(153, 153, 153); "><a style="color: rgb(102, 102, 102); font-size: 11px; text-decoration: none; " href="http://ibrahimahii.blogspot.com/">Destek Ol</a></li>
<li style="list-style: none; float: left; padding: 0px 10px; border-right-width: 1px; border-right-style: dotted; border-right-color: rgb(153, 153, 153); "><a style="color: rgb(102, 102, 102); font-size: 11px; text-decoration: none; " href="http://ibrahimahii.blogspot.com/">Site Arşivi</a></li>
<li style="list-style: none; float: left; padding: 0px 10px; border-right-width: 1px; border-right-style: dotted; border-right-color: rgb(153, 153, 153); "><a style="color: rgb(102, 102, 102); font-size: 11px; text-decoration: none; " href="http://ibrahimahii.blogspot.com/">Arama Yap</a></li>
<li style="list-style: none; float: left; padding: 0px 10px; border-right-width: 1px; border-right-style: dotted; border-right-color: rgb(153, 153, 153); "><a style="color: rgb(102, 102, 102); font-size: 11px; text-decoration: none; " href="http://ibrahimahii.blogspot.com/">Html Kodları</a></li>
</ul>
</div>
<script type="text/javascript">
<!-- wmaraci html şifreleyici http://wmaraci.com -->
document.write(unescape('%3C%64%69%76%20%63%6C%61%73%73%3D%27%72%69%67%68%74%27%3E%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%69%62%72%61%68%69%6D%61%68%69%69%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%20%74%69%74%6C%65%3D%22%57%65%62%6D%61%73%74%65%72%22%3E%3C%69%6D%67%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%62%6C%6F%67%67%65%72%2E%63%6F%6D%2F%66%61%76%69%63%6F%6E%2D%69%6D%61%67%65%2E%67%3F%62%6C%6F%67%49%44%3D%39%31%36%36%35%33%36%36%32%34%38%38%38%30%37%35%35%36%30%22%20%61%6C%74%3D%22%57%65%62%6D%61%73%74%65%72%22%20%77%69%64%74%68%3D%22%31%35%22%20%68%65%69%67%68%74%3D%22%31%35%22%20%2F%3E%3C%2F%61%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%6D%61%72%61%63%69%2E%63%6F%6D%2F%61%2F%22%20%74%69%74%6C%65%3D%22%57%65%62%6D%61%73%74%65%72%22%3E%3C%69%6D%67%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%77%6D%61%72%61%63%69%2E%63%6F%6D%2F%69%6D%61%67%65%73%2F%62%75%74%74%6F%6E%34%2E%70%6E%67%22%20%61%6C%74%3D%22%57%65%62%6D%61%73%74%65%72%22%20%77%69%64%74%68%3D%22%32%34%22%20%68%65%69%67%68%74%3D%22%32%34%22%20%2F%3E%3C%2F%61%3E'));
</script></div> <div style='clear: both;'></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;}
table {margin-left: auto;margin-right: auto}
img{
border: none;
}
body{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghFx20wFqmelNHmtnRUjDqlquKfr4u0pp8SnBOZklCm1GwoOrrpcIQGHwEoY5LrMg_BIOuGSi3OXXL_Iq2QygJc7VD7NVpksnHXlTf4hVLLeJ7k4NNYZfgORr5GvxX3drPOjGm4DBUvT4/s1600/body.png);
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #A40606;
}
a:visited {
color: #A40606;
}
a:hover {
color: #A40606;
}
a:active {
color: #A40606;
}
#tas{
width: 950px;
margin-left: auto;
margin-right: auto;
}
#mikro{
width: 950px;
height: auto;
border: 1px solid #cecece;
border-top:none;
background: #ffffff;
overflow: hidden;
}
#ustcizgi{
width: 952px;
height: 3px;
background: #363636;
}
#enustmenu{
width: 950px;
height: 35px;
background: #ffffff;
border-bottom: 1px solid #cecece;
float: left;
background:url(http://f1302.hizliresim.com/16/5/jsrqf.png);
border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; -moz-border-radius:4px 4px 4px 4px;margin:0 auto;padding:5px 0
}
#tas #mikro #enustmenu ul {
width: 950px;
height: 35px;
margin-top: 9px;
margin-left: -30px;
}
#tas #mikro #enustmenu ul li {
display: inline;
padding-right: 30px;
}
#tas #mikro #enustmenu ul li a {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #f5f5f5;
text-decoration: none;
}
#tas #mikro #enustmenu ul li a:hover {
color: #a40606;
text-decoration: none;
}
#usttaraf{
width: 950px;
height: 145px;
float: left;
}
.logo{
width: 428px;
height: 129px;
float: left;
margin: 5px 0 0 15px;
}
.ustreklam{
width: 468px;
height: 60px;
float: right;
margin: 40px 15px 0 0;
}
#ustmenu{
width: 950px;
height: 35px;
background: #ffffff;
border: 1px solid #cecece;
border-left: none;
border-right: none;
float: left;
}
#tas #mikro #ustmenu ul {
font-family: Verdana, Geneva, sans-serif;
margin-top: 10px;
margin-left: -40px;
}
#tas #mikro #ustmenu ul li {
display: inline;
}
#tas #mikro #ustmenu ul li a {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-decoration: none;
color: #333333;
padding: 11px;
}
#tas #mikro #ustmenu ul li a:hover {
text-decoration: none;
background-color: #808080;
padding: 10px;
}
.soltaraf{
width: 250px;
height: auto;
float: left;
margin: 12px 12px 0 12px;
}
.sagtaraf{
width: 660px;
height: auto;
float: right;
margin: 0px 10px 0 0;
}
.menubaslik{
width: 237px;
height: 27px;
background: #dcdcdc;
border: 1px solid #cecece;
border-top-left-radius:4px;
border-top-right-radius:4px;
float: left;
font-family: Myriad Pro;
font-weight: bold;
font-size: 18px;
padding: 8px 5px 5px 8px;
color: #3a3a3a;
}
.menuicerik{
width: 250px;
height: auto;
background: #f0eeee;
border: 1px solid #cecece;
border-top: none;
float: left;
margin-bottom: 15px;
}
#tas #mikro .soltaraf .menuicerik ul {
display: block;
margin: 0px;
padding: 0px;
}
#tas #mikro .soltaraf .menuicerik ul li {
padding-left: 2px;
padding-top: 2px;
padding-bottom: 2px;
list-style: none;
}
#tas #mikro .soltaraf .menuicerik ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #3a3a3a;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicd4VQbudvOx2YLDccnGuTmwehGKPm8rx7skOppbJEpiXvKYWJ2g_0fSuW9djJafurbTddG2VVw5S8HxF5ud0tGlbwVrkJ8uy3ZboyjRFdTOSmEYEfZ66CUBS92lrXnMOG3wB-ixjVZR8/s1600/li-arrow.png) no-repeat center left;
text-decoration: none;
display: block;
padding-left: 20px;
padding-top: 8px;
padding-bottom: 8px;
font-weight: bold;
}
#tas #mikro .soltaraf .menuicerik ul li a:hover {
display: block;
background-color: #ffffff;
}
.konubaslik{
width: 647px;
height: 27px;
background: #ffffff;
border: 1px solid #cecece;
float: right;
font-family: Myriad Pro;
font-weight: bold;
font-size: 18px;
padding: 8px 5px 5px 8px;
color: #3a3a3a;
}
.konuicerik{
width: 650px;
height: auto;
background: #ffffff;
border: 1px solid #cecece;
border-top: none;
float: right;
padding: 5px;
}
.konualt{
width: 650px;
height: 15px;
background: #ffffff ;
border: 1px solid #cecece;
border-top: none;
float: right;
padding: 5px;
margin-bottom: 15px;
}
.alt{
width: 937px;
height: 35px;
background: #ffffff;
border: 1px solid #cecece;
float: left;
font-family: Myriad Pro;
font-weight: bold;
font-size: 14px;
padding: 8px 5px 5px 8px;
color: #3a3a3a;
}
.right {
float:right;
}
::-webkit-scrollbar-thumb {background:#333 url(http://img.webme.com/pic/g/gonez/scrollbar.gif) no-repeat center center; border:1px solid #222}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {display:none;}
::-webkit-scrollbar-track-piece { background-color: #5b5b5b;}
::-webkit-scrollbar {width: 17px; height: 10px; }
#osmantalay {display:none;}
//--></style> <div id="osmantalay"><style type="text/css">
<!--table {margin-left: auto;margin-right: auto}
Hiç yorum yok: