tasarimduragi - css city blue Xs

css city blue Xs

City Blue XS

Tasarım Sepeti olarak sizler için dizayn ettiğimiz bu sade ve şık site tasarımı, tr gg sitelerini özellikle eğlence platformu olarak kullanmaya hevesli kişiler için ideal.

Mavi ve beyaz ağırlıklı temanın en güzel özellikleri kuşkusuz sayfa altındaki şehir manzarası ve header bölümündeki kayarak açılabilen duyuru panosu.

Tasarım ayrıca sosyal paylaşım ve haber widgetleri de bulunduruyor. Özellikle tr.gg kullanmaya yeni başlamış kullanıcılara öneririz.

Tasarımın Üzerinde Yazı :

<div class="tamheader"> <div class="ststyu"> <a style="position:absolute;top:10px;left:15px;font-family:Arial, sans-serif;font-size:26px;font-weight:bold;color:white;">Site Adı</a><center><a class="ctctyu"></a></center> </div> <div style="width:860px;height:152px;background:white url(http://4.bp.blogspot.com/-Z4lgZiMv2eY/T-7NlF7ZOhI/AAAAAAAALr0/UbMlJwtDcBM/s1600/cbats.png) no-repeat top left;position:relative;">  <a target="_blank" href="http://tasarimsepeti.blogspot.com" _fcksavedurl="http://tasarimsepeti.blogspot.com" style="display:block;width:220px;height:119px;position:absolute;top:20px;left:95px;background:transparent url(http://3.bp.blogspot.com/-3F6gUmeKsQ0/T-i6ZxXKUSI/AAAAAAAALhg/YDmWb7xF5Mg/s1600/tasar%25C4%25B1m+sepeti.png) no-repeat center;"> </a>      <div style="width:506px;height:150px;float:right;"> <center> <SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></SCRIPT> <div id="contentt"><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" style="margin:0px;padding:0px;background-color:transparent;border:none;text-decoration:none;font-family:Calibri, Arial;font-size:16px;font-weight:bold;color:#fff;float:left;text-align:center;width:100%;height:36px;line-height:26px;" id="animate">Yeni Duyuru!</a> <input style="float:right;margin-top:1px;margin-right:10px;" id="resett" type="button" value="Kapat"><br/><div style="display:none;text-align:center;"id="duyurun"><a style="text-align:center;font-family:Calibri, Arial;font-size:16px;font-weight:bold;color:#e5e5e5;margin:0px;padding:0px;background-color:transparent;border:none;text-decoration:none;"> <br/><br/> Tasarım Sepeti tarafından oluşturulan yeni tasarımımız nihayet sizlerle!   </a></div>    <div id="eklesseyi" style="display:none;position:absolute;bottom:1px;right:3px;">  <a title="sitene açılır duyuru panosu kodu ekle" href="http://siteneeklekodlari.blogspot.com/2012/01/sitene-aclr-duyuru-panosu-koddostu.html" _fcksavedurl="http://siteneeklekodlari.blogspot.com/2012/01/sitene-aclr-duyuru-panosu-koddostu.html" target="_blank" style="float:right;margin:0px;padding:0px;background-color:transparent;border:none;text-decoration:none;"><img alt="kod dostu duyuru panosu" src="http://4.bp.blogspot.com/-xtuPxjTyUKY/TwQmZLDs3LI/AAAAAAAAD-Y/YosLOoCQY70/s1600/225h2.png" _fcksavedurl="http://4.bp.blogspot.com/-xtuPxjTyUKY/TwQmZLDs3LI/AAAAAAAAD-Y/YosLOoCQY70/s1600/225h2.png" style="opacity:0.4;filter:alpha(opacity=40);margin:0px;padding:0px;background-color:transparent;border:none;"/></a></div></div> <script type="text/javascript">
$("#animate").click(function() {
$("#contentt")
.animate({"width": "500px"}, 500)
.animate({"height": "140px"}, 500);
document.getElementById('resett').style.display='block';
document.getElementById('animate').style.display='none';
document.getElementById('duyurun').style.display='block';
document.getElementById('eklesseyi').style.display='block';
});
$("#resett").click(function() {
$("#contentt")
.animate({"height": "26px"}, 500)
.animate({"width": "130px"}, 500);
document.getElementById('duyurun').style.display='none';
document.getElementById('animate').style.display='block';
document.getElementById('resett').style.display='none';
document.getElementById('eklesseyi').style.display='none';
});
</script>     </center>   </div>                  </div> <div class="ststyu"> <center><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="tsenu">Ana Sayfa</a><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="tsenu">sayfa1</a><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="tsenu">sayfa2</a><a class="ctctyu"></a><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="tsenu">sayfa3</a><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="tsenu">sayfa4</a><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="tsenu">sayfa5</a></center> </div>  </div>  <div style="width:860px;overflow:hidden;margin-right:auto;margin-left:auto;margin-top:16px;"> <div style="float:left;width:550px;-webkit-border-radius: 8px;border-radius: 8px;overflow:hidden;background:white url(http://2.bp.blogspot.com/-_6KuIye4A88/T-7U7zbF8BI/AAAAAAAALsU/rPJsniVlgE8/s1600/cats.jpg) repeat-y top left;border-top:1px solid #3f6cb8;border-bottom:1px solid #3f6cb8;margin-top:16px;min-height:700px;margin-bottom:250px;">

Tasarımın Altındaki Yazı :

<br/></div>  <div style="width:300px;float:right;"> <div style="width:298px;height:80px;position:relative;padding:0px;margin:0px;overflow:hidden;margin-top:17px;border:1px solid #3f6cb8;-webkit-border-radius: 8px;border-radius: 8px;background-color:white;"><center> <a style="display:block;font-family:Trebuchet MS, sans-serif;font-size:15px;font-weight:bold;color:#4f4f4f;margin-top:8px;">Bu sayfayı paylaş</a>    <table border="0" cellspacing="0" style="border-spacing: 0px;"><tr><td class="nucrelerim"> <a href="javascript:void(0);" _fcksavedurl="javascript:void(0);" onclick_fckprotectedatt="%20onclick%3D%22window.open('http%3A%2F%2Fwww.facebook.com%2Fsharer.php%3Fu%3D'%2BencodeURIComponent(location.href)%2B'%26t%3D'%2BencodeURIComponent(document.title)%2C%20'facebook'%2C'toolbar%3Dno%2Cwidth%3D600%2Cheight%3D310')%3B%20return%20false%3B%22" class="sosyalkoddostu" style="background-image:url(http://2.bp.blogspot.com/-TQTA5kvc1eU/Tx10YPUXDOI/AAAAAAAAEUc/HjbMb5Bdz-Q/s1600/face.png);"></a>  </td><td class="nucrelerim"> <a href="javascript:(function(){var hght=400;var nmbr=Number((window.screen.width-wdth)/2);var wdth=490;var y=Number((window.screen.height-hght)/2);window.open('https://plusone.google.com/_/+1/confirm?hl=tr&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'','width='+wdth+',height='+hght+',left='+nmbr+',top='+hght+',scrollbars=no');})();" _fcksavedurl="javascript:(function(){var hght=400;var nmbr=Number((window.screen.width-wdth)/2);var wdth=490;var y=Number((window.screen.height-hght)/2);window.open('https://plusone.google.com/_/+1/confirm?hl=tr&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'','width='+wdth+',height='+hght+',left='+nmbr+',top='+hght+',scrollbars=no');})();" class="sosyalkoddostu" style="background-image:url(http://4.bp.blogspot.com/-R2diZQeOnuY/Tx15jcL6xsI/AAAAAAAAEVA/wwngTXs0lK0/s1600/gp.png);"></a>  </td><td class="nucrelerim"> <a onclick_fckprotectedatt="%20onclick%3D%22window.open('http%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D'%2BencodeURIComponent(document.title)%2B'%40koddostu%26url%3D'%2BencodeURIComponent(location.href)%2C%20'facebook'%2C'toolbar%3Dno%2Cwidth%3D600%2Cheight%3D310')%3B%20return%20false%3B%22" href="javascript:void(0);" _fcksavedurl="javascript:void(0);" class="sosyalkoddostu" style="background-image:url(http://1.bp.blogspot.com/-HjRHedZKtwE/Tx10Z1IIrTI/AAAAAAAAEU0/0oAiRm0nn4w/s1600/twi.png);"></a>  </td><td class="nucrelerim"> <a href="javascript:void(0);" _fcksavedurl="javascript:void(0);" onclick_fckprotectedatt="%20onclick%3D%22window.open('http%3A%2F%2Fwww.netlog.com%2Fgo%2Fmanage%2Fblog%2Fview%3Dadd%26origin%3Dexternal%26title%3D'%2BencodeURIComponent(document.title)%2B'%26referer%3D'%2BencodeURIComponent(location.href)%2C%20'netlog'%2C'toolbar%3Dno%2Cwidth%3D550%2Cheight%3D550')%3B%20return%20false%3B%22" class="sosyalkoddostu" style="background-image:url(http://3.bp.blogspot.com/-ZXqK4pBLgM8/Tx21IWqOyhI/AAAAAAAAEWs/4aec4Qzrg5Y/s1600/net.png);"></a>    </td></tr></table>  </div>     <a href="http://tasarimsepeti.blogspot.com" _fcksavedurl="http://tasarimsepeti.blogspot.com" target="_blank" style="border:1px solid #3f6cb8;margin-top:17px;-webkit-border-radius: 8px;border-radius: 8px;display:block;width:298px;height:250px;background:transparent url(http://2.bp.blogspot.com/-kF3sD74HO34/T-7fVW1X9lI/AAAAAAAALsg/KGi5OGnpp6A/s1600/cats+-+Kopya+%282%29.png) no-repeat center;border:1px solid #bbb;"></a>  <div style="width:298px;height:250px;position:relative;padding:0px;margin:0px;overflow:hidden;margin-top:17px;border:1px solid #3f6cb8;-webkit-border-radius: 8px;border-radius: 8px;"><iframe src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?topic=e,p,s,n&rsz=small&format=300x250" frameborder="0" width="300" height="250" marginwidth="0" marginheight="0" style="position:absolute;top:0px;left:0px;margin:0px;padding:0px;border:none;"></iframe> <Script Language='Javascript'>


</Script> </div>  </div> </div>      <!DOCTYPE HTML><style type="text/css">div.ucvuc{line-height:18px;position:fixed;text-align:center;z-index:1000;}div.ixded-s-e{bottom:0px;left:0px;}</style>   <script type="text/javascript">


</script>

Css Kodu :

body{background:white url(http://3.bp.blogspot.com/-Pkq4gb8aCkg/T-7leXscnWI/AAAAAAAALss/RKa0YZtYwHg/s1600/4334148978_840b505926.jpg) repeat center;} .tsenu{display:inline-block;width:90px;height:30px;background-color:white;margin-right:14px;font-family:Trebuchet MS, sans-serif;font-size:14px;font-weight:bold;color:#3f6cb8 !important;line-height:30px;vertical-align:15px;-webkit-border-radius: 8px;border-radius: 8px;overflow:hidden;} #nav_container{display:none;} #header_container{display:none;} body, input{font-family: Calibri, Arial;} #contentt {text-align:left;position:relative;border:2px outset #000;background-color:#3f6cb8;width:130px;height:26px;padding:3px;margin-top:5px;overflow:hidden !important;padding:0px;-webkit-border-radius: 14px;-moz-border-radius: 14px;border-radius: 14px;}  #resett{display:none;} #animate:hover{background-color:#80AFFF !important;-webkit-border-radius: 14px;-moz-border-radius: 14px;border-radius: 14px;} .sosyalkoddostu{display:block;width:55px;height:42px;} .sosyalkoddostu:hover{background-position: 0px -43px;} .nucrelerim{border:none;width:70px;height:45px;} .tamheader{width:860px;height:250px;border:none;-webkit-border-radius: 8px;border-radius: 8px;overflow:hidden;margin-right:auto;margin-left:auto;} .ststyu{position:relative;width:860px;height:49px;background:transparent url(http://4.bp.blogspot.com/-kA27etx19gg/T-7DOJdwCnI/AAAAAAAALro/pxfHhAF_BXE/s1600/g.png) repeat-x center;} #content_container{margin-left:25px;} .ctctyu{display:inline-block;width:154px;height:49px;background:transparent url(http://4.bp.blogspot.com/-w6UX2xDBfGM/T-7CcSj8q1I/AAAAAAAALrg/fxXfLIvp3Ws/s154/g.png) no-repeat center;}