Tooltip Şeklinde Sosyal Medya Kodları

Sosyal medya hayatımızın vazgeçilmez olmuş durumda. Her gün olmasa da 2 günde bir kesinlikle giriyoruz. Tabii bazı blogcular bloglarına fan sayfası açıyor veya Twitter profili. Bu açılan profilleri böyle zart diye link olarak koymak hem güzel olmuyor hem de ziyaretçilerin dikkatını çekmiyor. Bu sorunu ortadan kaldırmak amacıyla bu kodu kullabilirsiniz. Peki kodun adındaki tooltip nedir? Tooltip genelde altında küçük ok bulunan bir bildiridir. Bir örnek verecek olursak linklerdeki veya resimlerdeki title bölümü gibi fakat düzenlenmiş hali. İyi kullanımlar.

Önizleme

HTML Kodu

<ul class="tooltip-sosyal-og"> <li><a class="tooltip-facebook" href="#"><span>Facebook</span></a></li> <li><a class="tooltip-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tooltip-youtube" href="#"><span>YouTube</span></a></li> <li><a class="tooltip-blogger" href="#"><span>Blogger</span></a></li> <li><a class="tooltip-rss" href="#"><span>RSS</span></a></li></ul>

CSS Kodu

.tooltip-sosyal-og li{list-style:none!important;float:left} .tooltip-sosyal-og li a span{width:100px;height:auto;line-height:20px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#000;text-shadow:1px 1px 1px rgba(0,0,0,0.1);-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.1);-moz-text-shadow:1px 1px 1px rgba(0,0,0,0.1);text-align:center;border:4px solid #fff;background:#eee;text-indent:0;position:absolute;pointer-events:none;bottom:100px;opacity:0;box-shadow:0 0 1px #000;-webkit-box-shadow:0 0 1px #000;-mozbox-shadow:0 0 1px #000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;padding:10px} .tooltip-sosyal-og li a:hover span{opacity:0.9;bottom:70px} .tooltip-sosyal-og{width:435px;height:70px;margin:80px auto 30px;padding:0} .tooltip-sosyal-og ol,ul{list-style:none;} .tooltip-sosyal-og li a{display:block;width:62px;height:64px;outline:none;background:transparent url(https://lh6.googleusercontent.com/-T9jY7Ap-UA4/UTiODu1bUEI/AAAAAAAAEXE/K4JbbtvegN4/s360/tooltip_sosyal_sprite.png) no-repeat top left;text-indent:-9000px;position:relative;margin:0 2px} .tooltip-sosyal-og li .tooltip-facebook{background-position:0 -148px} .tooltip-sosyal-og li .tooltip-twitter{background-position:0 -296px} .tooltip-sosyal-og li .tooltip-youtube{background-position:0 0} .tooltip-sosyal-og li .tooltip-blogger{background-position:0 -222px} .tooltip-sosyal-og li .tooltip-rss{background-position:0 -74px} .tooltip-sosyal-og li a span:before,.tooltip-sosyal-og li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1)} .tooltip-sosyal-og li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff}

tooltip şeklinde sosyal medya, sosyal medya butonları, tooltip