bscsskodlari

Gri Beta Tasarım

TEMANIN GÖRÜNTÜSÜNÜ GÖRMEK İSTİYORSANIZ TIKLAYINIZ > DEMO GÖRÜNTÜSÜ

TASARIM ÜSTÜ : 

<table width="950" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="950" valign="bottom" height="108" background="https://img.webme.com/pic/c/creative-blog/g-r-b_01.png" align="center"> <table width="951" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="340" height="60"> </td> <td width="272" align="center"> <div id="Site-Isim">Buraya Sitenizin İsmi Gelebilir</div> </td> <td width="339"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td width="950" height="60" background="https://img.webme.com/pic/c/creative-blog/g-r-b_02.png" align="left"><a href="#" _fcksavedurl="#" _fcksavedurl="#"> <div id="Ust-Menu1"> </div> </a> <a href="#" _fcksavedurl="#" _fcksavedurl="#"> <div id="Ust-Menu2"> </div> </a> <a href="#" _fcksavedurl="#" _fcksavedurl="#"> <div id="Ust-Menu3"> </div> </a> <a href="#" _fcksavedurl="#" _fcksavedurl="#"> <div id="Ust-Menu4"> </div> </a> <a href="#" _fcksavedurl="#" _fcksavedurl="#"> <div id="Ust-Menu5"> </div> </a> <a href="#" _fcksavedurl="#" _fcksavedurl="#"> <div id="Ust-Menu6"> </div> </a></td> </tr> <tr> <td width="950" height="55" background="https://img.webme.com/pic/c/creative-blog/g-r-b_03.png"> </td> </tr> <tr> <td width="950" valign="top" height="200" background="https://img.webme.com/pic/c/creative-blog/g-r-b_04.png"> <table width="951" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="10"> </td> <td width="684" valign="top" height="980" align="center"> <div id="Icerik">

TASARIM ALTI :  

</div> </td> <td width="43"> </td> <td width="203" valign="top" align="center"> <table width="202" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> </td> </tr> <tr> <td width="203" height="37" background="https://img.webme.com/pic/c/creative-blog/g-r-b-menu-baslik.png" style="text-align: center"> <div class="Yan-Baslik">Başlık Buraya</div> </td> </tr> <tr> <td valign="top"> <div id="Yan-Menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Creative-Blog </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek</a></li> </ul> </div> </td> </tr> <tr> <td width="203" height="37" background="https://img.webme.com/pic/c/creative-blog/g-r-b-menu-baslik.png" style="text-align: center"> <div class="Yan-Baslik">Başlık Buraya</div> </td> </tr> <tr> <td> <div id="Yan-Menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Creative-Blog </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> Eklenecek</a></li> </ul> </div> </td> </tr> <tr> <td width="203" height="37" background="https://img.webme.com/pic/c/creative-blog/g-r-b-menu-baslik.png" style="text-align: center"> <div class="Yan-Baslik">Reklam Alanı</div> </td> </tr> <tr> <td align="center"> <div id="Reklam"> <table width="190" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" /></a></td> <td><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" /></a></td> </tr> <tr> <td><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" /></a></td> <td><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-90x90.png" /></a></td> </tr> </tbody> </table> </div> </td> </tr> <tr> <td width="203" height="37" background="https://img.webme.com/pic/c/creative-blog/g-r-b-menu-baslik.png" style="text-align: center"> <div class="Yan-Baslik">Haftanın Videosu</div> </td> </tr> <tr> <td valign="top"> <div id="Video"><iframe height="200" src="http://www.youtube.com/embed/WgKExOneYqs" frameborder="0" width="200" allowfullscreen=""></iframe></div> </td> </tr> </tbody> </table> </td> <td width="11"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td width="950" height="110" background="https://img.webme.com/pic/c/creative-blog/g-r-b_05.png" align="center"> <table width="951" height="71" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="772" height="71">  <div id="Link-Takas"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Siteni Ekle</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Siteni Ekle</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Siteni Ekle</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Siteni Ekle</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Siteni Ekle</a></li> </ul> </div> </td> <td width="135" valign="middle"><a href="#" _fcksavedurl="#" _fcksavedurl="#"> <div id="Yukari"> </div> </a></td> <td width="44"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br />

CSS KODU : 

<style type="text/css"> 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-right:auto;margin-left:auto;} #webme_footer_textlink_dont_hide { background:none; color:#000000; font-family:Arial Narrow, Graphite; font-size:16px; text-align: center; margin-top:15px; margin-bottom:15px; } body { background-image: url(https://img.webme.com/pic/c/creative-blog/g-r-b-background.png); margin: 0px; padding: 0px; text-align:center; } a { text-decoration:none } a:hover { text-decoration:none } #Site-Isim { font-family: "Comic Sans MS", cursive; font-size: 16px; font-weight: bolder; color: #4D4C4C; } #Ust-Menu1 { height: 60px; width: 156px; float: left; margin-left: 8px; } #Ust-Menu1:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/g-r-b-ust1.png); height: 60px; width: 156px; } #Ust-Menu2 { height: 60px; width: 155px; float: left; } #Ust-Menu2:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/g-r-b-ust2.png); height: 60px; width: 155px; } #Ust-Menu3 { height: 60px; width: 155px; float: left; } #Ust-Menu3:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/g-r-b-ust3.png); height: 60px; width: 155px; } #Ust-Menu4 { height: 60px; width: 155px; float: left; } #Ust-Menu4:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/g-r-b-ust4.png); height: 60px; width: 155px; } #Ust-Menu5 { height: 60px; width: 155px; float: left; } #Ust-Menu5:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/g-r-b-ust5.png); height: 60px; width: 155px; } #Ust-Menu6 { height: 60px; width: 158px; float: left; } #Ust-Menu6:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/g-r-b-ust6.png); height: 60px; width: 158px; } .Yan-Baslik { color: #ACACAC; font-family: Verdana; font-size: 16px; font-weight: bolder; } #Yan-Menu ul { list-style-type: none; margin: 0px; padding: 0px; } #Yan-Menu ul li a { color: #4F4E4E; text-decoration: none; font-family: Verdana; font-size: 15px; display: block; background-repeat: no-repeat; background-position: 5px center; padding-left: 25px; background-image: url(https://img.webme.com/pic/c/creative-blog/menu-ok-gri.png); margin-top: 5px; margin-bottom: 5px; height: 20px; line-height: 20px; } #Yan-Menu ul li a:hover { padding-left: 30px; } #Icerik { font-family: Verdana; margin-top: 5px; margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px; } #Reklam { margin-top: 5px; margin-bottom: 5px; } #Reklam a img { margin-right: 2px; margin-left: 2px; margin-top: 2px; margin-bottom: 2px; -webkit-transition: -webkit-transform 0.8s ease-in-out; -moz-transition: -moz-transform 0.8s ease-in-out; -ms-transition: -ms-transform 0.8s ease-in-out; -o-transition: -o-transform 0.8s ease-in-out; transition: transform 0.8s ease-in-out; } #Reklam a img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 0.8s ease-in-out; -moz-transition: -moz-transform 0.8s ease-in-out; -ms-transition: -ms-transform 0.8s ease-in-out; -o-transition: -o-transform 0.8s ease-in-out; transition: transform 0.8s ease-in-out; } #Link-Takas { margin-left: 155px; } #Link-Takas ul { margin: 0px; padding: 0px; list-style-type: none; float: none; } #Link-Takas ul li { float: left; } #Link-Takas ul li a { font-family: Tahoma; text-decoration: none; color: #000; font-size: 16px; display: block; margin-left: 8px; margin-right: 8px; margin-bottom: 5px; padding-left: 15px; background-image: url(https://img.webme.com/pic/c/creative-blog/menu-ok-gri.png); background-repeat: no-repeat; background-position: left center; padding-top: 5px; padding-bottom: 5px; padding-right: 2px; border: thin solid #898888; } #Link-Takas ul li a:hover { background-color: #ACACAC; border: thin solid #ACACAC; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Chrome*/ } #Video { padding-top: 5px; height: 150px; padding-bottom: 5px; } #Yukari { height: 40px; margin-top: 10px; } #Glof-Blog { margin-top: 10px; margin-bottom: 20px; width: 500px; border: medium solid #4F4E4E; border-radius: 10px; /* Standart */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; height: 180px; } #Glof-Baslik { width: 250px; margin-bottom: 10px; border-right-width: medium; border-left-width: medium; border-right-style: solid; border-left-style: solid; border-right-color: #4F4E4E; border-left-color: #4F4E4E; border-bottom-width: medium; border-bottom-style: solid; border-bottom-color: #4F4E4E; border-radius: 0px 0px 10px 10px; /* Standart */ -moz-border-radius: 0px 0px 10px 10px; /* Firefox */ -webkit-border-radius: 0px 0px 10px 10px; /* Chrome*/ } #Glof-Blog #Glof-Resim { height: 100px; width: 100px; position: relative; right: 185px; top: 17px; border: 2px solid #4F4E4E; } #Glof-Blog #Glof-Icerik { position: relative; width: 365px; left: 60px; font-size: 13px; bottom: 90px; height: 90px; } #Glof-Blog #Glof-Devam { position: relative; width: 140px; left: 180px; bottom: 74px; } #Glof-Blog #Glof-Devam a { font-size: 14px; text-decoration: none; color: #4F4E4E; } #Glof-Blog #Glof-Devam a:hover { text-decoration: underline; } </style>

ANA SAYFA KODU :

<div id="Glof-Blog"> <div id="Glof-Baslik">Buraya Başlık</div> <div id="Glof-Resim"><img border="1" alt="Animated avatar 100x100" src="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" /></div> <div id="Glof-Icerik">Buraya blog içeriği gelecek...</div> <div id="Glof-Devam"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Devamını Gör...</a></div> </div> <div id="Glof-Blog"> <div id="Glof-Baslik">Buraya Başlık</div> <div id="Glof-Resim"><img border="1" alt="Animated avatar 100x100" src="http://www.animated-gifs.eu/avatars-100x100-horror/0029.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0029.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0029.gif" /></div> <div id="Glof-Icerik">Buraya blog içeriği gelecek...</div> <div id="Glof-Devam"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Devamını Gör...</a></div> </div> <div id="Glof-Blog"> <div id="Glof-Baslik">Buraya Başlık</div> <div id="Glof-Resim"><img border="1" alt="Animated avatar 100x100" src="http://www.animated-gifs.eu/avatars-100x100-horror/0046.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0046.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0046.gif" /></div> <div id="Glof-Icerik">Buraya blog içeriği gelecek...</div> <div id="Glof-Devam"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Devamını Gör...</a></div> </div> <div id="Glof-Blog"> <div id="Glof-Baslik">Buraya Başlık</div> <div id="Glof-Resim"><img border="1" alt="Animated avatar 100x100" src="http://www.animated-gifs.eu/avatars-100x100-horror/0016.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0016.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0016.gif" /></div> <div id="Glof-Icerik">Buraya blog içeriği gelecek...</div> <div id="Glof-Devam"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Devamını Gör...</a></div> </div>

Kaynak : Creative-Blog