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/AVvXsEgCvezgHeV8THXDlCvCn_866PRjvMRg_iWTJg-PGgNCs7hHKw-swHTxi7u0mQzk2lG8RtM41nI4erVnCg1qy0EO2Q7WOd-xRKq6h1Gg74rUTaNkbeB61urpgd4R4l9UuPg_YUlXn5v3CUc/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/AVvXsEizDobsgRKdK6dQqoKjo2eDANmfAMBY6OFaszCmPfpTNkuATtaFg23UJ4aIDF6U78j1M9jWlOuS2SXUX1EB4AqRMZ3qcmfqGBAb6H5zMpbGg-jXBTWkkKUiuaU-iSSdrN5HIKy5HbcOJ-g/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/AVvXsEjNMMyn9-wjMtPwYIr5E6KMW3fldKr3zoJpPRosBemK-57S22NBBz0yEMKB_L47b2o5uRcqKnyR3VRdIi9-5TRmIB0l66HxDfaf-tesLN9v_BWyGIDL3JuN7R2L2qkLGxQ4Ukw5TNGO8zA/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/AVvXsEg8OhtPDdEDQhMGz-OzUbzHx_n4W9fYkxQr8rTNDXtZhgKFPQ5CWqQJ__sWwb3jDcF1G6EjGFVwHD9SH-VYWkyhqquUF6p423AZA800HAEfJ6vsK7Ir39MKNyZUHB2Bq5dMURblW0pB9VM/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/AVvXsEjiy4oMXgUWVyqP1wZ6UrIRu-Fg59JrBiB8L8yBcHDdKpNsgLqKwTIJcYwnr_uArmNrUx6O4VmwiRBfaoJ3cfvM3LGa5YL847xqwE9TWuGqC3m-W5hRMuVWwbsyEM0FPjSNWrKhapFTTus/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/AVvXsEhg1DGA4CHg9kWmyuXSfbQ58tuKV6BAl0hh_GccU0BzZnnWIpFrAyqkMGQZ-yw3Nh0jbm3nnsdz2QDilnojWLtLkmmkT4kFA3M7rebtktgzC4D3UwVfqBjm5N-w-pEFfoqI1gPY4HzBi2M/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/AVvXsEjiy4oMXgUWVyqP1wZ6UrIRu-Fg59JrBiB8L8yBcHDdKpNsgLqKwTIJcYwnr_uArmNrUx6O4VmwiRBfaoJ3cfvM3LGa5YL847xqwE9TWuGqC3m-W5hRMuVWwbsyEM0FPjSNWrKhapFTTus/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: