Kod

Hareketli Sosyal Menü

Hakan İnan 17 Mart 2019

0 31 Bir dakikadan az

Sitenin Yan Bölümüne Gömülü Olarak Duran Sosyal Ağ Menüsü

Sitenizi çok şık gösterecek sağa dayalı gömülü olarak duran, mouse ile üzerine gittiğinizde kendini gösteren hareketli Sosyal Ağ Menüsü. Yapmanız gereken tek şey aşağıda verdiğim kodu sitenizde görünmesini istediğiniz yere kopyalayıp yapıştırmak. Nasıl göründüğünü merak ediyorsanız aşağıda görsel olarak paylaştım bakabilirsiniz.

<style>div.koddosturenkli{position:fixed;z-index:9999990;}div.sosyal7kd{top:50%;right:0px;margin-top:-250px;width:80px;height:470px;background:transparent;}.a8a{display:block;position:relative;right:-62px;float:right;background:#44f;width:80px;height:60px;margin:0px 0px 6px 0px;background-position:center center;background-repeat:no-repeat;transition: all 0.4s ease-out;-webkit-transition: all 0.4s ease-out;-webkit-box-shadow:-4px 0px 4px -4px #444;-moz-box-shadow:-4px 0px 4px -4px #444;box-shadow:-4px 0px 4px -4px #444;-webkit-border-top-left-radius: 3px;-webkit-border-bottom-left-radius: 3px;border-top-left-radius: 3px;border-bottom-left-radius: 3px;}</style><style>.a8a:hover, .a8a:active, .a8a:focus{outline:0;right:-10px;width:60px;transform: rotate(-11deg);-ms-transform: rotate(-11deg);-webkit-transform: rotate(-11deg);}</style><style>.facebook7a{background-image:url(http://icons.iconarchive.com/icons/danleech/simple/48/facebook-icon.png);background-color:#4a6ea9}.google7a{background-image:url(http://icons.iconarchive.com/icons/danleech/simple/48/google-plus-icon.png);background-color:#e25e43}.twitter7a{background-image:url(http://icons.iconarchive.com/icons/danleech/simple/48/twitter-icon.png);background-color:#30dcf3}.linkedin7a{background-image:url(http://icons.iconarchive.com/icons/danleech/simple/48/linkedin-icon.png);background-color:#0095bc}.youtube7a{background-image:url(http://icons.iconarchive.com/icons/danleech/simple/48/youtube-icon.png);background-color:#e44840}.tumblr7a{background-image:url(http://icons.iconarchive.com/icons/danleech/simple/48/tumblr-icon.png);background-color:#375775}.rss7a{background-image:url(http://icons.iconarchive.com/icons/danleech/simple/48/rss-icon.png);background-color:#f2b63e}div.koddosturenkli{_position:absolute;}div.sosyal7kd{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style>

<koddostu>

<div class="koddosturenkli sosyal7kd">

<a target="_blank" href="http://facebook.com/koddostu" class="facebook7a a8a" rel="noopener noreferrer"></a>

<a target="_blank" href="http://goplus.us/koddostu" class="google7a a8a" rel="noopener noreferrer"></a>

<a target="_blank" href="http://twitter.com/koddostu" class="twitter7a a8a" rel="noopener noreferrer"></a>

<a target="_blank" href="http://www.linkedin.com/profile/view?id=279603409" class="linkedin7a a8a" rel="noopener noreferrer"></a>

<a target="_blank" href="https://www.youtube.com/channel/UCCSePwGYmmwhwXOuhPjMr5g" class="youtube7a a8a" rel="noopener noreferrer"></a>

<a target="_blank" href="http://tumblr.com" class="tumblr7a a8a" rel="noopener noreferrer"></a>

<a target="_blank" href="http://siteniz.com/rss" class="rss7a a8a" rel="noopener noreferrer"></a>

</div>

</koddostu>

<script src="http://www.koddostu.com/duzelt.js?no=131"></script>

Hakan İnan 17 Mart 2019

0 31 Bir dakikadan az

Hakan İnan

2007'den günümüze Web Yazılım ve Grafik Tasarımcıyım.

Bir cevap yazın Cevabı iptal et