S-Puding

Tasarım Sepeti yapımı olan S-puding alışılmışın dışında bir sol menüye sahip.

Kullanıcıları sayfada kalmaya yönlendirecek şık ve etkileyici bir görünüme sahip S-puding temamız, özellikle eğlence ve paylaşım meraklısı tr gg site sahiplerine yönelik bir tasarım.

Tasarım özellikle site içi arama ve TS Reklam Saklayıcı içermesi açısından denenmeye değer.

Tasarımın
Önizlemesini Gör

Yorumları Gör / Yorum Yap

Nasıl Eklemeliyim?

Tasarım Özellikleri:

Site İçi Arama
TS Reklam Saklayıcı
Sağ Menü

Tasarımın üzerindeki yazı:

<div id="HEADERIM">
<div style="position:absolute;top:36px;left:25px;background-color:#efefef;border:3px solid #ccc;width:360px;height:70px;-webkit-border-radius: 16px;
border-radius: 16px;">

<a href="http://tasarimsepeti.blogspot.com" style="display:block;height:60px;width:110px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihVh9BR2VoAmnxpSE81Puagmq_cFDWCBYn0YN-xMVJKScCeWiFqbF8Q037_Nd3SwRJBO8KrSXZQ2iojDvI0p17_BKoXNRYYHNfrcwp2IST8oTQBD72BIhPjaNaS1PGyU0qCoEONRFG0LU/s110/tasar%C4%B1m+sepeti.png) no-repeat center;margin-top:6px;margin-left:12px;">
</a><a style="display:inline-block;position:absolute;top:20px;left:130px;font-family:Tahoma, Arial, sans-serif;font-size:25px;font-weight:normal;color:#b43737">Tasarım Sepeti</a></div>
<script>
function tasarimsepetinoadd(){
window.scrollTo(0,110)
}
tasarimsepetinoadd();
</script>
<script>
function aramacibigi(){
var siteadresim = location.href;
var terim = document.getElementById('aramaformu').value;
window.open('http://www.google.com.tr/#hl=tr&output=search&q=site:' + siteadresim + '+' + terim);
}
</script>
<div style="background-color:transparent;width:200px;height:26px;position:absolute;top:152px;right:30px;z-index:300;"><input id="aramaformu" type="text" style="font-family:Trebuchet MS, sans-serif;font-size:14px;width:140px;height:18px;color:#4f4f4f;border:3px solid #f48b05;-webkit-border-radius: 6px;border-radius: 6px;-moz-box-shadow: 0 0 5px #888;-webkit-box-shadow: 0 0 5px #888;box-shadow: 0 0 5px #888;margin-top:3px;" value="Sitede ara..." />
<a href="javascript:void(0)" onclick="aramacibigi();" style="position:absolute;top:0px;right:0px;display:block;width:32px;height:32px;background:transparent url(http://icons.iconarchive.com/icons/fasticon/comic-3/32/find-icon.png);float:right;"></a>
</div>
<style onload="window.scrollTo(0,110)">.HEADERIM2{line-height:16px;}</style>

</div>
<DIV ID="HEADERIM2"></DIV>
<DIV ID="SAYFAVEBARLAR">
<DIV ID="SOL_BAR">
<a onfocus="this.blur();" href="javascript:void(0)" style="display:inline-block;width:48px;height:48px;background:transparent url(http://icons.iconarchive.com/icons/double-j-design/childish/48/Home-icon.png);position:absolute;left:3px;top:35px;"></a>
<a onfocus="this.blur();" href="javascript:void(0)" style="display:inline-block;width:48px;height:48px;background:transparent url(http://icons.iconarchive.com/icons/double-j-design/childish/48/Help-icon.png);position:absolute;left:3px;top:130px;"></a>
<a onfocus="this.blur();" href="javascript:void(0)" style="display:inline-block;width:48px;height:48px;background:transparent url(http://icons.iconarchive.com/icons/double-j-design/childish/48/Music-icon.png);position:absolute;left:3px;top:220px;"></a>
<a onfocus="this.blur();" href="javascript:void(0)" style="display:inline-block;width:48px;height:48px;background:transparent url(http://icons.iconarchive.com/icons/double-j-design/childish/48/Search-icon.png);position:absolute;left:3px;top:305px;"></a>
<a onfocus="this.blur();" href="javascript:void(0)" style="display:inline-block;width:48px;height:48px;background:transparent url(http://icons.iconarchive.com/icons/double-j-design/childish/48/Mail-icon.png);position:absolute;left:3px;top:390px;"></a>


</DIV>

<DIV ID="SAYFA">

Tasarımın altındaki yazı:

</DIV>

<DIV ID="SAG_BAR">
<a href="javascript:void(0)" class="trymii">Sağ menü 1</a>
<a href="javascript:void(0)" class="trymii">Sağ menü 2</a>
<a href="javascript:void(0)" class="trymii">Sağ menü 3</a>
<a href="javascript:void(0)" class="trymii">Sağ menü 4</a>
<a href="javascript:void(0)" class="trymii">Sağ menü 5</a>
<a href="javascript:void(0)" class="trymii">Sağ menü 6</a>
</DIV>
</DIV>

CSS kodu:

body{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4x29-iJcH4XO3yGzFytPh48XPTCFVLbiZJcuJD2Mgo6EQhi8HwDKV2ibMWDebvN9vVzYW9T8RGDuI_owrAz5KA9lyRk8bQ9PDydtTAcp74HRZJEVtqQzIMRtGXRCc68ozPkKY-Lfcsk/s1600/betile31.png.jpg) repeat center;}
#ad-c81e{text-align:center;width:100%;}
#nav_container{display:none;}
#HEADERIM{margin-left:auto;margin-right:auto;position:relative;width:900px;height:151px;background-color:transparent;border:none;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyh_bmhr5GILcXX4VxY9IaDnvpXq-420LLqpAFiHDIdM02sjbd5EbpUPBP277Vhw6bFT-IXNY5AszVNZLzGjSNXfFSOHXaNlAEO7cHeFPKzjqIbj3P1YKvd8tOi0utMvbgTPalaCIWNHc/s1600/n1zyefgfgfgmy4de3pw7+-+Kopya+%282%29.png)}
#title{text-align:center;}
#title span{color:white;}
#HEADERIM2{margin-left:auto;margin-right:auto;position:relative;width:900px;height:35px;background-color:transparent;border:none;border-top:34px solid #ccc;margin-bottom:14px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9xz3THe8Eq7LrhSWzFmmKSJdW3HJ9vTkYBhRVy45aceZdi_Y3e32WNpR02h8Wv9x1lyTtrFWMW28oh0T7hvwMiFiW1Ul0dKlUZVmVpOvfRYhXnWd8avpssMRB7KSf8oHXUXB3ZIXSDA/s900/n1zyefgfgfgmy4de3pw7+-+Kopya+%283%29.png)}
#SAYFAVEBARLAR{margin-left:auto;margin-right:auto;position:relative;width:901px;height:100%;}
#SOL_BAR{position:absolute;left:0px;top:0px;width:56px;height:468px;background-color:#372e27;border:none;-webkit-border-radius: 16px;border-radius: 20px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNnb7Mya8DJIdBKdLVbRSa3SVIh9UFlLwGYlh_15iesKQ9z2ZB7fhx02gYjU5Am7czMjx4vOgr6kPyBMOWHRuY8xewO-oulmEn114rKVdztfj68UI9zgH0jJfuWaJgC0knsqYBTXo-XLo/s1600/f4de3pw7.png)}
#SAYFA{position:absolute;left:60px;top:0px;width:575px;height:1034px;background-color:transparent;border:none;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8IzSIRO4-Wlpf5Pmr9Ghqwm7p4h-u7St9v2NHNaL21InzKcVF7H6WSuBWvqhtHPziOs9cjvER8qU_lwxVL1KMYq6mXW0z3kNc_hyphenhyphenq1kOJ10vOZq39BZy5es0elN9affknppqqfEeM1cg/s1600/gde3pw7.png)}
#SAG_BAR{position:absolute;right:0px;top:0px;width:260px;height:468px;background-color:transparent;border:none;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNnb7Mya8DJIdBKdLVbRSa3SVIh9UFlLwGYlh_15iesKQ9z2ZB7fhx02gYjU5Am7czMjx4vOgr6kPyBMOWHRuY8xewO-oulmEn114rKVdztfj68UI9zgH0jJfuWaJgC0knsqYBTXo-XLo/s1600/f4de3pw7.png)}
#content{margin-left:40px;}
#container{display:block;width:500px;}
#header_container{display:none;}
#counter{display:none;}
.trymii{display:inline-block;width:260px;height:34px;line-height:34px;text-align:center;margin-top:36px;background-color:#cccccc;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-size:15px;font-weight:bold;color:#921515;text-shadow: #822 0em 0em 0.3em}
.trymii:hover{background-color:#4f4f4f;text-decoration:none;color:#fff;text-shadow: #f66 0em 0em 0.5em}

Ana sayfaya eklenecek kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /><title> Önizleme - Tasarım Sepeti</title><style type="text/css"><!--

   //--></style></head><body id="hpb_cssonly"><style type="text/css">#ad-c81e br {display: none;}</style><table height="102" id="ad-c81e"><tr><td height="102"><a href="http://www.koddostu.com" target="_blank"><img src="http://img864.imageshack.us/img864/3360/anigifdq.gif" width="728" height="90"/></a></td></tr></table>

<div id="container"><div id="header_container"><div id="pre_header"></div><div class="header"><h1 id="header"><span> Site Adı</span></h1></div><div id="post_header"></div></div><div id="nav_container"><h2 id="nav_heading"><span></span></h2><ul id="nav"><li class="nav_element checked_menu" id="nav_AnaSayfa"><a href="javascript:void(0)" class="menu"><span>AnaSayfa</span></a></li><li class="nav_element" id="nav_Resimler"><a href="javascript:void(0)" class="menu"><span>Resimler</span></a></li><li class="nav_element" id="nav_304leti351im"><a href="javascript:void(0)" class="menu"><span>&#304;leti&#351;im</span></a></li></ul></div><div id="content_container"><div id="pre_content"></div><div id="content"><h2 id="title"><span>AnaSayfa</span></h2>

</div><div id="counter"><span>Bugün 809 ziyaret&#231;i (1242 klik) ki&#351;i burdayd&#305;!</span></div><div id="post_content"></div><div id="sidebar_container"><h2 id="sidebar_heading"><span></span></h2><div id="sidebar_content"></div></div></div></div>

<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div><div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div></body></html>

S-Puding

EN POPÜLER TASARIMLAR:

MENÜ KONUMUNA GÖRE:

RENGE GÖRE:

SÜTUN SAYISINA GÖRE:

ÖZELLIK: