html-tr-gg-kodlari

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 Ö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://html-tr-gg-kodlari.tr.gg/" style="display:block;height:60px;width:110px;background:transparent url(http://4.bp.blogspot.com/-mhb9aCt2msc/T-mVhH5fYFI/AAAAAAAALi0/jAVTC7EZfHk/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(http://3.bp.blogspot.com/-gbS1Lt0mpEQ/T-mU_Z7SfXI/AAAAAAAALis/Llun6fc6ZE4/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(http://4.bp.blogspot.com/-YK1Xc22D-tM/T-mL5dK_vLI/AAAAAAAALiI/3CaDC-XZDiA/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(http://3.bp.blogspot.com/-8tvrRMEBklU/T-mMXZJpgOI/AAAAAAAALiQ/PE0KoVcPfw4/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(http://4.bp.blogspot.com/-bO4Z23q4-k4/T-mNXHC_6UI/AAAAAAAALiY/0fIgZ6L_qQQ/s1600/f4de3pw7.png)} #SAYFA{position:absolute;left:60px;top:0px;width:575px;height:1034px;background-color:transparent;border:none;background-image:url(http://4.bp.blogspot.com/-VUwz6jxYvyE/T-mOOgqdrDI/AAAAAAAALig/sHkQcnRMvTA/s1600/gde3pw7.png)} #SAG_BAR{position:absolute;right:0px;top:0px;width:260px;height:468px;background-color:transparent;border:none;background-image:url(http://4.bp.blogspot.com/-bO4Z23q4-k4/T-mNXHC_6UI/AAAAAAAALiY/0fIgZ6L_qQQ/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}