Creative-Blog

Renkli Dizayn Tasarim

Renkli Blog Sitesi Tasarımı

Şimdide renkli designle karşınızdayız. Ona bu ismi vermemin nedeni başlıca en üstündeki yerlerin rekli olması. Ayrıca bu tasarımda menülerimiz biraz farklı tasarımı inceledikten sonra sizinde beyeneceğinize eminim. Lafı çok uzatmadan tasarımın genel özelliklerine geçelim;

- Gri, kırmızı, mor, mavi, turuncu, ten rengi tonları tasarım içinde barındırmakta.

- Tasarım arkaplanı çizgili gri tonlarında olup tasarımı aydınlattı.

- Tasarımın üst menüsü olmamasına rağmen yan menüleri harika şekilde düzenlendi.

- Tasarım üstü 5 farklı renk kullanılarak renkli bir görünüm sağladı.

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

- Ayrıca (Ana sayfa, İletişim, Z.defteri) Olmak üzeri küçük bir üst bölüm ayrıldı. Hemen bunların yanınada duyurular bölümü açılarak sitede duyuru yapılabilmesi sağlandı.

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="960" border="0" cellspacing="0" cellpadding="0">     <tbody>         <tr>             <td width="960" height="91" background="https://img.webme.com/pic/c/creative-blog/r-d-t_01.png">             <div id="Logo"><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/g-r-b-210x70.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-210x70.png"></a></div>             <div id="Buyuk-Reklam"><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/g-r-b-468x60.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-r-b-468x60.png" alt="" width="468" height="60" border="0" /></a></div></td>         </tr>         <tr>             <td width="960" valign="bottom" height="84" background="https://img.webme.com/pic/c/creative-blog/r-d-t_02.png">             <table width="960" cellspacing="0" cellpadding="0" border="0">                 <tbody>                     <tr>                         <td width="112"> </td>                         <td width="571">                         <div id="Duyuru"><marquee onmouseout_fckprotectedatt_fckprotectedatt="%20onmouseout_fckprotectedatt%3D%22%2520onmouseout%253D%2522this.start()%253B%2522%22" onmouseover_fckprotectedatt_fckprotectedatt="%20onmouseover_fckprotectedatt%3D%22%2520onmouseover%253D%2522this.stop()%253B%2522%22">Duyurular buraya gelecek!!!</marquee></div>                         </td>                         <td width="98"><a href="#" _fcksavedurl="#">                         <div id="Ust-Menu1"> </div>                       </a></td>                         <td width="71" height="40"><a href="#" _fcksavedurl="#">                         <div id="Ust-Menu2"> </div>                       </a></td>                         <td width="83"><a href="#" _fcksavedurl="#">                         <div id="Ust-Menu3"> </div>                       </a></td>                         <td width="25"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>         <tr>             <td width="960" valign="top" height="150" background="https://img.webme.com/pic/c/creative-blog/r-d-t_03.png">             <table width="960" cellspacing="0" cellpadding="0" border="0">                 <tbody>                     <tr>                         <td width="25"> </td>                         <td width="665" valign="top" align="center">                         <div id="Icerik">

Tasarım Altına:

</div>                       </td>                         <td width="15"> </td>                         <td width="230" valign="top" align="center">                         <table width="230" cellspacing="0" cellpadding="0" border="0">                             <tbody>                                 <tr>                                     <td>                                     <table width="230" cellspacing="0" cellpadding="0" border="0">                                         <tbody>                                             <tr>                                                 <td width="230" valign="top" height="45" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menukirmizi_01.png" align="center"><div class="Yan-Baslik"><span style="color: #5b0a00">Site Menülerimiz</span></div></td>                                             </tr>                                             <tr>                                                 <td width="230" valign="top" height="40" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menukirmizi_02.png" align="center">                                                 <table width="200" cellspacing="0" cellpadding="0" border="0">                                                     <tbody>                                                         <tr>                                                             <td valign="top">                                                             <div id="Yan-Menu1">           <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>                                                             </ul>                                                             </div>                                                           </td>                                                             <td valign="top">                                                             <div id="Yan-Menu1"> <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>                                                             </ul>                                                             </div>                                                           </td>                                                         </tr>                                                     </tbody>                                                 </table>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="230" height="21" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menukirmizi_03.png"> </td>                                             </tr>                                         </tbody>                                     </table>                                     </td>                                 </tr>                                 <tr>                                     <td><br />                                     <table width="230" cellspacing="0" cellpadding="0" border="0">                                         <tbody>                                             <tr>                                                 <td width="230" valign="top" height="45" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menumavi_01.png" align="center"><div class="Yan-Baslik"><span style="color: #334d59">Son Paylaştıklarımız</span></div></td>                                             </tr>                                             <tr>                                                 <td width="230" valign="top" height="40" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menumavi_02.png" align="center">                                                 <table width="200" cellspacing="0" cellpadding="0" border="0">                                                     <tbody>                                                         <tr>                                                             <td valign="top">                                                             <div id="Yan-Menu2">           <ul>                                                                 <li><a href="#" _fcksavedurl="#"><img width="15" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" /> Paylaştığın Şeyi Yaz</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img width="15" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" /> Paylaştığın Şeyi Yaz</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img width="20" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" /> Paylaştığın Şeyi Yaz</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img width="20" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" /> Paylaştığın Şeyi Yaz</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img width="20" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" /> Paylaştığın Şeyi Yaz</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img width="20" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-ballon.png" /> Paylaştığın Şeyi Yaz</a></li>                                                             </ul>                                                             </div>                                                           </td>                                                         </tr>                                                     </tbody>                                                 </table>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="230" height="21" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menumavi_03.png"> </td>                                             </tr>                                         </tbody>                                     </table>                                     </td>                                 </tr>                                 <tr>                                     <td><br />                                     <table width="230" cellspacing="0" cellpadding="0" border="0">                                         <tbody>                                             <tr>                                                 <td width="230" valign="top" height="45" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menuturunc_01.png" align="center"><div class="Yan-Baslik"><span style="color: #d87356">Reklam Alanı</span></div></td>                                             </tr>                                             <tr>                                                 <td width="230" valign="top" height="40" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menuturunc_02.png" align="center">                                                 <table width="206" cellspacing="0" cellpadding="0" border="0">                                                     <tbody>                                                         <tr>                                                             <td width="206" valign="top">                                                             <div id="Kucuk-Reklam"><a href="#" _fcksavedurl="#"><img width="100" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-reklam.png" /></a><a href="#" _fcksavedurl="#"><img width="100" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-reklam.png" />                                                             <img width="100" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-reklam.png" /><img width="100" border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/r-d-t-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/r-d-t-reklam.png" /> </a></div>                                                           </td>                                                         </tr>                                                     </tbody>                                                 </table>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="230" height="21" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menuturunc_03.png"> </td>                                             </tr>                                         </tbody>                                     </table>                                     </td>                                 </tr>                                 <tr>                                     <td><br />                                     <table width="230" cellspacing="0" cellpadding="0" border="0">                                         <tbody>                                             <tr>                                                 <td width="230" valign="top" height="45" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menumor_01.png" align="center"><div class="Yan-Baslik"><span style="color: #805576">Haftanın Videosu</span></div></td>                                             </tr>                                             <tr>                                                 <td width="230" valign="top" height="40" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menumor_02.png" align="center">                                                 <table width="200" cellspacing="0" cellpadding="0" border="0">                                                     <tbody>                                                         <tr>                                                             <td valign="top">                                                             <div id="Video"> </div>                                                             </td>                                                         </tr>                                                     </tbody>                                                 </table>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="230" height="21" background="https://img.webme.com/pic/c/creative-blog/r-d-t-menumor_03.png"> </td>                                             </tr>                                         </tbody>                                     </table>                                     </td>                                 </tr>                                 <tr>                                     <td> </td>                                 </tr>                             </tbody>                         </table>                         </td>                         <td width="25"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>         <tr>             <td width="960" valign="bottom" height="66" background="https://img.webme.com/pic/c/creative-blog/r-d-t_04.png"><div style="text-align: center" 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>         </tr>         <tr>             <td width="960" height="50" background="https://img.webme.com/pic/c/creative-blog/r-d-t_05.png">             <table width="960" cellspacing="0" cellpadding="0" border="0">                 <tbody>                     <tr>                         <td width="385" height="47"> </td>                         <td width="171"><a href="http://creative-blog.tr.gg/" _fcksavedurl="http://creative-blog.tr.gg/" target="_blank">                         <div id="CB"> </div>                         </a></td>                         <td width="404"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>     </tbody> </table>

Ana Sayfa Kodu:

Buraya blog sitemizin ana sayfa yazısı gelecek. <br>                         Alt tarafta tasarımın blog kutuları bulunmaktadır. <br><br> <div id="Grap-Blog"> <div id="Grap-Baslik"><span class="Grap-Color">Konu Başlığı:</span> Falan Filan <span class="Grap-Color">Paylaşım Zamanı:</span> 12.07.2014</div> <div id="Grap-Resim"><img border="1" src="https://img.webme.com/pic/d/denenmek/lapboo.gif" _fcksavedurl="https://img.webme.com/pic/d/denenmek/lapboo.gif"></div> <div id="Grap-Yazi">Buraya blog içeriği gelecek...</div> <div id="Grap-Devam"><a href="#" _fcksavedurl="#">Konuyu İncele</a></div> </div> <div id="Grap-Blog"> <div id="Grap-Baslik"><span class="Grap-Color">Konu Başlığı:</span> Falan Filan <span class="Grap-Color">Paylaşım Zamanı:</span> 12.07.2014</div> <div id="Grap-Resim"><img border="1" src="https://img.webme.com/pic/d/denenmek/lapboo.gif" _fcksavedurl="https://img.webme.com/pic/d/denenmek/lapboo.gif"></div> <div id="Grap-Yazi">Buraya blog içeriği gelecek...</div> <div id="Grap-Devam"><a href="#" _fcksavedurl="#">Konuyu İncele</a></div> </div> <div id="Grap-Blog"> <div id="Grap-Baslik"><span class="Grap-Color">Konu Başlığı:</span> Falan Filan <span class="Grap-Color">Paylaşım Zamanı:</span> 12.07.2014</div> <div id="Grap-Resim"><img border="1" src="https://img.webme.com/pic/d/denenmek/lapboo.gif" _fcksavedurl="https://img.webme.com/pic/d/denenmek/lapboo.gif"></div> <div id="Grap-Yazi">Buraya blog içeriği gelecek...</div> <div id="Grap-Devam"><a href="#" _fcksavedurl="#">Konuyu İncele</a></div> </div> <div id="Grap-Blog"> <div id="Grap-Baslik"><span class="Grap-Color">Konu Başlığı:</span> Falan Filan <span class="Grap-Color">Paylaşım Zamanı:</span> 12.07.2014</div> <div id="Grap-Resim"><img border="1" src="https://img.webme.com/pic/d/denenmek/lapboo.gif" _fcksavedurl="https://img.webme.com/pic/d/denenmek/lapboo.gif"></div> <div id="Grap-Yazi">Buraya blog içeriği gelecek...</div> <div id="Grap-Devam"><a href="#" _fcksavedurl="#">Konuyu İncele</a></div> </div>

Tasarımın Önizlemesini Gör

Renkli Dizayn Tasarim