Creative-Blog

Agacli Site Tasarim

Agaçlı Blog Sitesi Tasarımı

Epeyden beri paylaşım yapmıyordum ve gece gece yine tasarım çizesim geldi bende başladığım ağaçlı tasarımı bitirdim. Ortaya gayet güzel farklı bir çalışma çıktı bence. Umarım bu farklı dizaynı sever ve kullanırsınız. Tasarım özellikleri genel olarak şunlar;

- Yeşil, mavi, bej renkleri bulunmaktadır.

- Tasarımın arkaplanı tasarımın geçişi ile uyumlu düzenlenerek gerçekçi görünüm verildi.

- Tasarıma yan ve ufak bir üstmenü olmak üzere 2 menü eklendi.

- Tasarım üstünde bulutlar kullanılanarak tablo görünümü verildi.

- Yan menü bir salıncak ortasına oturtularak görüntü güzelleştirildi.

- Tasarıma uygun blog kutuları kodlandı.

- Güzel hoverli menüler, haftanın videosu ve mini 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:

Tasarım Altına:

</div>     <div id="Swing-Menu">       <table width="185" border="0" cellspacing="0" cellpadding="0">         <tr>           <td width="185" height="354" valign="top" background="https://img.webme.com/pic/c/creative-blog/yd-swing-mid.png">           <div class="Swing-Title">Ana Menü</div>           <ul>             <li><a href="#" _fcksavedurl="#">Ana Sayfa</a></li>             <li><a href="#" _fcksavedurl="#">Z. Defteri</a></li>             <li><a href="#" _fcksavedurl="#">İletişim</a></li>             <li><a href="#" _fcksavedurl="#">Hakkımda</a></li>           </ul>           <div class="Swing-Title">Buraya Başlık</div>           <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 class="Swing-Title">Mini Reklam</div>           <div id="Swing-Mini">            <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/yd-32-green.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/yd-32-green.png" alt="" width="32" height="32" border="0"></a>           <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/yd-32-red.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/yd-32-red.png" alt="" width="32" height="32" border="0"></a>           <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/yd-32-green.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/yd-32-green.png" alt="" width="32" height="32" border="0"></a>           <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/yd-32-red.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/yd-32-red.png" alt="" width="32" height="32" border="0"></a>           <br>           <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/yd-32-green.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/yd-32-green.png" alt="" width="32" height="32" border="0"></a>           <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/yd-32-red.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/yd-32-red.png" alt="" width="32" height="32" border="0"></a>           <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/yd-32-green.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/yd-32-green.png" alt="" width="32" height="32" border="0"></a>           <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/yd-32-red.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/yd-32-red.png" alt="" width="32" height="32" border="0"></a>           </div>                      <div class="Swing-Title">Haftanın Videosu</div>           <div id="Swing-Video">            <iframe width="150" height="150" src="//www.youtube.com/embed/ISCQNyfyywM" frameborder="0" allowfullscreen></iframe>            </div>                      </td>         </tr>         <tr>           <td width="185" height="86" background="https://img.webme.com/pic/c/creative-blog/yd-swing-bot.png"> </td>         </tr>       </table>     </div></td>   </tr>   <tr>     <td width="946" height="223" valign="bottom" background="https://img.webme.com/pic/c/creative-blog/yd_03.png"><div id="YD-BS"><a href="http://www.bedava-sitem.com/" _fcksavedurl="http://www.bedava-sitem.com/" target="_blank">Sende ücretsiz bir internet sitesi kurmak istermisin? O zaman buraya tıkla!</a></div></td>   </tr> </table>

Ana Sayfa Kodu:

Buraya ana sayfa yazını yazabilirsin. <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> 11.08.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> 11.08.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> 11.08.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> 11.08.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

Agacli Site Tasarim