Creative-Blog

Gri Beta Tasarim

Gri Beta Tasarım

Gri beta tasarımıyla karşınızdayız. Tamamen sizin için kendi yaptığım bir tasarımdır. Aslında bu tasarım başka bir tr.gg sitesinde yayınlanmak için yapılmuştı fakat o sitenin kapanması nedeniyle kendi sitemde siz ziyaretçilere bu css tasarımı sunuyorum. Tasarım özellikleri;

- Farklı yerlerde farklı gri tonları kullanılanarak uyumlu biçimde yerleştirildi.

- Arkaplana çizgili açık renjlerde bir arkaplan eklenerek tasarım aydınlatıldı.

- Farklı ve değişik hoverli bir üst menü eklendi.

- Tasarım üstüne sitenizin ismini yazabilmeniz için süslü başlık yeri yapıldı.

- Alt kısmına link takas bölümü ve yukarı çıkma çapası yerleştirildi.

- Güzel hoverli menülerle son nokta koyuldu

Not: Önizleme için resmin üstüne yada kodların altındaki yazıya tıklayanız.

Css Bölümüne:

Tasarım Üzerine:

<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="#">             <div id="Ust-Menu1"> </div>             </a> <a href="#" _fcksavedurl="#">             <div id="Ust-Menu2"> </div>             </a> <a href="#" _fcksavedurl="#">             <div id="Ust-Menu3"> </div>             </a> <a href="#" _fcksavedurl="#">             <div id="Ust-Menu4"> </div>             </a> <a href="#" _fcksavedurl="#">             <div id="Ust-Menu5"> </div>             </a> <a href="#" _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">

Tasarım Altına:

</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="#"> Creative-Blog </a></li>                                         <li><a href="#" _fcksavedurl="#"> Eklenecek </a></li>                                         <li><a href="#" _fcksavedurl="#"> Eklenecek </a></li>                                         <li><a href="#" _fcksavedurl="#"> Eklenecek</a></li>                                         <li><a href="#" _fcksavedurl="#"> Eklenecek </a></li>                                         <li><a href="#" _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="#"> Creative-Blog </a></li>                                         <li><a href="#" _fcksavedurl="#"> Eklenecek </a></li>                                         <li><a href="#" _fcksavedurl="#"> Eklenecek </a></li>                                         <li><a href="#" _fcksavedurl="#"> Eklenecek</a></li>                                         <li><a href="#" _fcksavedurl="#"> Eklenecek </a></li>                                         <li><a href="#" _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="#"><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" /></a></td>                                                 <td><a href="#" _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" /></a></td>                                             </tr>                                             <tr>                                                 <td><a href="#" _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" /></a></td>                                                 <td><a href="#" _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" /></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="#">Siteni Ekle</a></li>                             <li><a href="#" _fcksavedurl="#">Siteni Ekle</a></li>                             <li><a href="#" _fcksavedurl="#">Siteni Ekle</a></li>                             <li><a href="#" _fcksavedurl="#">Siteni Ekle</a></li>                             <li><a href="#" _fcksavedurl="#">Siteni Ekle</a></li>                         </ul>                         </div>                         </td>                         <td width="135" valign="middle"><a href="#" _fcksavedurl="#">                         <div id="Yukari"> </div>                         </a></td>                         <td width="44"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>     </tbody> </table> <br />

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" /></div>                         <div id="Glof-Icerik">Buraya blog içeriği gelecek...</div>                         <div id="Glof-Devam"><a href="#" _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" /></div>                         <div id="Glof-Icerik">Buraya blog içeriği gelecek...</div>                         <div id="Glof-Devam"><a href="#" _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" /></div>                         <div id="Glof-Icerik">Buraya blog içeriği gelecek...</div>                         <div id="Glof-Devam"><a href="#" _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" /></div>                         <div id="Glof-Icerik">Buraya blog içeriği gelecek...</div>                         <div id="Glof-Devam"><a href="#" _fcksavedurl="#">Devamını Gör...</a></div>                         </div>

Tasarımın Önizlemesini Gör

Gri Beta Tasarim