Creative-Blog

Mavi Gri Blog Sitesi

Mavili-Grili Blog Sitesi Tasarımı

Öncelikle hemen şunu acıklayayım bu tasarım html-codum.tr.gg sitesi için tasarlamıştım. Fakat başkalarınada yararlı olabileceğini düşünerek size değerli ziyaretçilerimize sunuyorum. Tasarım özellikleri genel olarak şunlar;

- Mavi ve gri tonları ağırlıklı olarak kullanıldı.

- Gri yıldızlı hoş bir arkaplanla tasarım görünümü canlandırıldı.

- Tasarımın hoverli gri bir üst menü ekledi paylaşım olanağı arttırıldı.

- Tasarım üstü flash bir kedi ve küçük konuşma balonu ile süslenmiş bir ikonla süslendi.

- İçerik ve menü altına 468x60 reklam alanı ve günün sözü bölümü eklendi.

- Alt kısmına link takas bölümü eklenerek sitede link takas olanağı sağlandı.

- Güzel hoverli menüler, haftanın videosu ve 80x80 reklam alanları konularak reklam olanağı sunuldu.

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 border="0" cellspacing="0" cellpadding="0" width="920">     <tbody>         <tr>             <td width="920" valign="bottom" height="68" background="https://img.webme.com/pic/c/creative-blog/m-g-t_01.png">             <table width="920" cellspacing="0" cellpadding="0" border="0">                 <tbody>                     <tr>                         <td width="249"> </td>                         <td width="129" valign="bottom"><a href="#" _fcksavedurl="#">                         <div id="Ust-Menu1"> </div>                         </a></td>                         <td width="11"> </td>                         <td width="128" valign="bottom"><a href="#" _fcksavedurl="#">                         <div id="Ust-Menu2"> </div>                         </a></td>                         <td width="12"> </td>                         <td width="128" valign="bottom"><a href="#" _fcksavedurl="#">                         <div id="Ust-Menu3"> </div>                         </a></td>                         <td width="263"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>         <tr>             <td width="920" height="121" background="https://img.webme.com/pic/c/creative-blog/m-g-t_02.png">             <table width="920" cellspacing="0" cellpadding="0" border="0">                 <tbody>                     <tr>                         <td width="64" height="117"> </td>                         <td width="314" valign="top" align="center">                         <div id="Site">Logo&İsim</div>                         </td>                         <td width="153" valign="bottom" align="center"> <embed width="100" height="100" wmode="transparent" src="http://img1.xooimage.com/files/9/d/b/kedi-225f32c.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" play="true" loop="true" menu="true"></embed></td>                         <td width="389"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>         <tr>             <td width="920" valign="middle" height="56" background="https://img.webme.com/pic/c/creative-blog/m-g-t_03.png"><div id="Orta-Menu">               <ul>                 <li class="Orta-Special-Left"><a href="#" _fcksavedurl="#">Menü Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Menü Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Menü Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Menü Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Menü Eklenecek</a></li>                 <li class="Orta-Special-Right"><a href="#" _fcksavedurl="#">Menü Eklenecek</a></li>               </ul>             </div></td>         </tr>         <tr>             <td width="920" valign="bottom" height="82" background="https://img.webme.com/pic/c/creative-blog/m-g-t_04.png">             <div id="Ekstra-Sosyal">             <a href="http://tr-tr.facebook.com/" _fcksavedurl="http://tr-tr.facebook.com/"><img src="https://img.webme.com/pic/c/creative-blog/mrs-facebook.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/mrs-facebook.png" alt="" width="31" height="31" border="0" /></a>             <a href="http://twitter.com/" _fcksavedurl="http://twitter.com/"><img src="https://img.webme.com/pic/c/creative-blog/mrs-twitter.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/mrs-twitter.png" alt="" width="31" height="31" border="0" /></a>             <a href="http://www.google.com.tr/webhp?sourceid=navclient&hl=tr&ie=UTF-8" _fcksavedurl="http://www.google.com.tr/webhp?sourceid=navclient&hl=tr&ie=UTF-8"><img src="https://img.webme.com/pic/c/creative-blog/mrs-google.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/mrs-google.png" alt="" width="31" height="31" border="0" /></a>             <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/mrs-rss.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/mrs-rss.png" alt="" width="31" height="31" border="0" /></a></div>             <div id="Ekstra-Dil"><a href="#" _fcksavedurl="#" target="_self"> <img src="https://img.webme.com/pic/d/denenmek/flagtr.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/flagtr.png" border="0"></a>  <a href="#" _fcksavedurl="#" target="_self"> <img src="https://img.webme.com/pic/d/denenmek/flagen.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/flagen.png" border="0"></a>  <a href="#" _fcksavedurl="#" target="_self"> <img src="https://img.webme.com/pic/d/denenmek/flagde.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/flagde.png"  border="0"></a>  <a href="#" _fcksavedurl="#" target="_self"> <img src="https://img.webme.com/pic/d/denenmek/flagfr.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/flagfr.png" border="0"></a>  <a href="#" _fcksavedurl="#" target="_self"> <img src="https://img.webme.com/pic/d/denenmek/flages.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/flages.png" border="0"></a></div>             </td>         </tr>         <tr>             <td width="920" valign="top" height="162" background="https://img.webme.com/pic/c/creative-blog/m-g-t_05.png">             <table width="920" cellspacing="0" cellpadding="0" border="0">                 <tbody>                     <tr>                         <td width="52"> </td>                         <td width="630" valign="top" align="center"> <div id="Icerik">

Tasarım Altına:

</div>                         </td>                         <td width="12"> </td>                         <td width="175" valign="top">                         <table width="174" cellspacing="0" cellpadding="0" border="0">                             <tbody>                                 <tr>                                     <td> </td>                                 </tr>                                 <tr>                                     <td width="174" height="35" background="https://img.webme.com/pic/c/creative-blog/m-r-s-menu-baslik.png" align="center"><div class="MRS-Baslik">Menü Başlığı</div></td>                                 </tr>                                 <tr>                                     <td valign="top">                                     <div id="MRS-Menu">                                     <ul>                                         <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>                                         <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                                         <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                                     </ul>                                     </div>                                     </td>                                 </tr>                                 <tr>                                     <td width="174" height="35" background="https://img.webme.com/pic/c/creative-blog/m-r-s-menu-baslik.png" align="center"><div class="MRS-Baslik">Menü Başlığı</div></td>                                 </tr>                                 <tr>                                     <td>                                     <div id="MRS-Menu">                                     <ul>                                         <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>                                         <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                                         <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                                     </ul>                                     </div>                                     </td>                                 </tr>                                 <tr>                                     <td width="174" height="35" background="https://img.webme.com/pic/c/creative-blog/m-r-s-menu-baslik.png" align="center"><div class="MRS-Baslik">Reklam Alanı</div></td>                                 </tr>                                 <tr>                                     <td valign="top" align="center">                                     <div id="Kucuk-Reklam"><a href="#" _fcksavedurl="#"><img width="80" height="80" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/m-g-t-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-g-t-reklam.png" /></a> <a href="#" _fcksavedurl="#"><img width="80" height="80" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/m-g-t-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-g-t-reklam.png" /></a><br />                                     <a href="#" _fcksavedurl="#"><img width="80" height="80" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/m-g-t-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-g-t-reklam.png" /></a> <a href="#" _fcksavedurl="#"><img width="80" height="80" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/m-g-t-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-g-t-reklam.png" /></a></div>                                     </td>                                 </tr>                                 <tr>                                     <td width="174" height="35" background="https://img.webme.com/pic/c/creative-blog/m-r-s-menu-baslik.png" align="center"><div class="MRS-Baslik">Haftanın Videosu</div></td>                                 </tr>                                 <tr>                                     <td valign="top" align="center">                                     <div id="Video"><iframe width="160" height="120" src="http://www.youtube.com/embed/WgKExOneYqs" frameborder="0" allowfullscreen=""></iframe></div>                                     </td>                                 </tr>                             </tbody>                         </table>                         </td>                         <td width="51"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>         <tr>             <td width="920" height="53" background="https://img.webme.com/pic/c/creative-blog/m-g-t_06.png"> </td>         </tr>         <tr>             <td width="920" height="96" background="https://img.webme.com/pic/c/creative-blog/m-g-t_07.png">             <div id="Day-Say"></div>             <div id="Buyuk-Reklam"><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/m-g-t-reklambuyuk.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-g-t-reklambuyuk.png" alt="" border="0" /></a></div></td>         </tr>         <tr>             <td width="920" valign="top" height="98" background="https://img.webme.com/pic/c/creative-blog/m-g-t_08.png">             <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>             <a href="http://creative-blog.tr.gg/" _fcksavedurl="http://creative-blog.tr.gg/">             <div id="CB"></div></a></td>         </tr>     </tbody> </table>

Ana Sayfa Kodu:

<div id="Glof-Blog">     <div id="Glof-Baslik">Buraya Başlık</div>     <div id="Glof-Resim"><img src="https://img.webme.com/pic/d/denenmek/lapboo.gif" _fcksavedurl="https://img.webme.com/pic/d/denenmek/lapboo.gif" border="1" alt="Animated avatar 100x100"></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 src="https://img.webme.com/pic/d/denenmek/lapboo.gif" _fcksavedurl="https://img.webme.com/pic/d/denenmek/lapboo.gif" border="1" alt="Animated avatar 100x100"></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 src="https://img.webme.com/pic/d/denenmek/lapboo.gif" _fcksavedurl="https://img.webme.com/pic/d/denenmek/lapboo.gif" border="1" alt="Animated avatar 100x100"></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 src="https://img.webme.com/pic/d/denenmek/lapboo.gif" _fcksavedurl="https://img.webme.com/pic/d/denenmek/lapboo.gif" border="1" alt="Animated avatar 100x100"></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

Mavi Gri Blog Sitesi