Ali @mintik
16 Haziran 2021 1:26

Fixed SocialMenu

sosyal
Web sayfanızın sağ  tarafına ekleyebileceğiniz kaydırma  çubuğu  ile beraber  aşağı yukarı inip  çıkan  bir menü örneği. Menü  örneği  aslında  sosyal  ağ siteleri için hazırlanmış olsada  kendinizce biraz  değişiklik yaparak güzel bir menü örneği  haline  getirebilirsiniz. Mouse  ile  üzerine geldiğiniz  buton  sol tarafa doğru slayt birşekilde  açılıyor. Bir menü olarak kullanabilmeniz  için tek yapmanız  gereken menülere uyarlanmış  ikonlar  oluşturmak  ve gerekli  url  adreslerini başlıklarıyla beraber  girmek.

 

Kullanım

Head etiketleri arasına eklenmesi gereken bölüm.

Css :

body {
background: url(img/bg.png) repeat scroll 0% 0% black;
color: #E6E6E6;
font: 13px 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;

}

/* social button */
.staticbar {position: fixed;right: 0;top: 35%;width: 25px;animation:static-bar .8s;-moz-animation:static-bar .8s; -webkit-animation:static-bar .8s;}
.staticbar:hover {z-index: 1000;}
.rt-social-buttons a, .loginbtn {background: none repeat scroll 0 0 rgb(34, 34, 34);background-repeat: no-repeat;display: block;height: 20px;margin-bottom: 3px;padding: 4px 0 4px 4px;right: 0px;width: 140px;position: relative;-moz-border-radius: 3px 0px 0px 3px;-webkit-border-radius: 3px 0px 0px 3px;-khtml-border-radius: 3px 0px 0px 3px;border-radius: 3px 0px 0px 3px;background-position: 4px 4px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;border:1px solid rgb(51, 51, 51)}
.rt-social-buttons span, .loginbtn span {background-repeat: no-repeat;color: #FFFFFF;display: block;font-size: 10px;height: 18px;letter-spacing: -1px;line-height: 1.9em;padding-left: 10px;text-transform: uppercase;text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);}
.rt-social-buttons a:hover, .loginbtn:hover {background: none repeat scroll 0 0 rgb(150, 0, 0);border:1px solid rgb(70, 0, 0);
right: 119px;}
.rt-social-buttons a#rt-buzz-btn span {background-image: url(img/socialsprite.png);background-position:-2px -68px;}
.rt-social-buttons a#rt-twitter-btn span {background-image: url(img/socialsprite.png);background-position:-2px -24px;}
.rt-social-buttons a#rt-facebook-btn span {background-image: url(img/socialsprite.png);background-position:-2px -46px;}
.rt-social-buttons a#rt-rss-btn span {background-image: url(img/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(img/socialsprite.png);background-position:-2px 0px;}
@keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-moz-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-webkit-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}

a:link, a:visited {
color: #E6E6E6;
text-align: center;
}
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="staticbar">
<div class="login">
<div id="rt-login-button">
<a class="loginbtn buttontext" href="http://mintik.com/?p=12002" rel="nofollow" target="_blank" title="Login">
<span class="desc">Login</span></a>
</div>
<div class="clear"></div>
</div>
<div class="rt-social-buttons">

<a href="http://twitter.com/Blog_Mintik" id="rt-twitter-btn" rel="nofollow" title="Twitter Blog_Mintik">
<span>Twitter</span></a>

<a href="http://facebook.com/mintiik" id="rt-facebook-btn" rel="nofollow" title="Facebook Mintik">
<span> Facebook</span></a>

<a href="https://plus.google.com/u/0/b/105961267020169631117/105961267020169631117/posts" id="rt-buzz-btn" rel="nofollow" target="_blank" title="Google Plus Mintik">
<span>Google Plus</span></a>

<a href="http://feeds.feedburner.com/mintik" id="rt-rss-btn" rel="nofollow" target="_blank" title="RSS Mintik">
<span>Subscribe to RSS Feed</span></a>
</div>
</div>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • sahra:

    Güzel ve basit kullanım. Oldukça işime yarayacak....

  • isimsiz:

    Senin sitenden buyurindir.org sitemize köpek gibi link çıkışı yapılmış?...

  • fhghg:

    YouPhpTube scriptini kullanan hazır bi site var mı peki varsa ismi nedir?...

  • Ali:

    Eski butonlarda sorun vardı diye yenilerini ekledim. Acaba sende hala eski buto...

  • HASBA:

    hocam nasıl alıcam demoya indire başıyorum hiç birşey olmuyor...

  • Araç çubuğuna atla