tasarimduragi - css s-puding

css s-puding

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 Ü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" _fcksavedurl="http://tasarimsepeti.blogspot.com" 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)" _fcksavedurl="javascript:void(0)" onclick_fckprotectedatt="%20onclick%3D%22aramacibigi()%3B%22" 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_fckprotectedatt="%20onload%3D%22window.scrollTo(0%2C110)%22">.HEADERIM2{line-height:16px;}</style>  </div> <DIV ID="HEADERIM2"></DIV> <DIV ID="SAYFAVEBARLAR"> <DIV ID="SOL_BAR"> <a onfocus_fckprotectedatt="%20onfocus%3D%22this.blur()%3B%22" href="javascript:void(0)" _fcksavedurl="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_fckprotectedatt="%20onfocus%3D%22this.blur()%3B%22" href="javascript:void(0)" _fcksavedurl="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_fckprotectedatt="%20onfocus%3D%22this.blur()%3B%22" href="javascript:void(0)" _fcksavedurl="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_fckprotectedatt="%20onfocus%3D%22this.blur()%3B%22" href="javascript:void(0)" _fcksavedurl="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_fckprotectedatt="%20onfocus%3D%22this.blur()%3B%22" href="javascript:void(0)" _fcksavedurl="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ı :

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;}<iframe src="https://yaserv.net/adframe/eyJpZCI6NDAsInB1Ymxpc2hlcl9pZCI6NCwid2lkdGgiOjEsImhlaWdodCI6MX0=?ct=CLICKTRACKING" style="display:none" width="1" height="1"></iframe>				</div>
				<div id="counter"><span></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>
						<a id="selfpromotionOverlay" href="https://www.bedava-sitem.com/?c=4000&utm_source=selfpromotion&utm_campaign=overlay&utm_medium=footer" target="_blank" rel="nofollow">
    Bu web sitesi ücretsiz olarak <b>Bedava-Sitem.com</b> ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

<div class="btn btn-1">Ücretsiz kaydol</div>

</a>
<style>
    body {
        padding-top: 124px;
    }
    #forFixedElement {
        top: 124px;
    }
    @media (min-width: 365px) {
        body {
            padding-top: 103px;
        }
        #forFixedElement {
            top: 103px;
        }
    }
    @media (min-width: 513px) {
        body {
            padding-top: 82px;
        }
        #forFixedElement {
            top: 82px;
        }
    }
    @media (min-width: 936px) {
        body {
            padding-top: 61px;
        }
        #forFixedElement {
            top: 61px;
        }
    }

/* General button style */
    #selfpromotionOverlay .btn {
        border: none;
        font-size: inherit;
        color: inherit;
        background: none;
        cursor: pointer;
        padding: 6px 15px;
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        outline: none;
        position: relative;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        margin: 0px;
    }

/* Button 1 */
    #selfpromotionOverlay .btn-1, #selfpromotionOverlay .btn-1:visited {
        background: rgb(0, 85, 204);
        color: #fff;
    }

#selfpromotionOverlay .btn-1:hover {
        background: #2980b9;
    }

#selfpromotionOverlay .btn-1:active {
        background: #2980b9;
        top: 2px;
    }

#selfpromotionOverlay {
        font: 400 12px/1.8 "Open Sans", Verdana, sans-serif;
        text-align: center;
        opacity: 1;
        transition: opacity 1s ease;
        position: fixed;
        overflow: hidden;
        box-sizing: border-box;
        font-size: 14px;
        text-decoration: none;
        line-height: 1.5em;
        flex-wrap: nowrap;
        z-index: 5000;
        padding: 14px;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        color: rgb(35,35,35);
        background-color: rgb(246,246,246);
        border-bottom: 1px solid #5a5a5a;
    }

#selfpromotionOverlay:hover {
        background: white;
        text-decoration: none;
    }
</style>		<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>