Kategori : CSS HTML

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çiler daha az tıklıyor. 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. Neyse bir kod paylaşımında bunlardan bahsetmek biraz saçma. Sizde koddaki gerekli yerleri düzenleyerek istediğiniz yerde kullabilirsiniz.

Önizleme

HTML Kodu

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

İletişim	İletişim
İletişim	İletişim
İletişim	İletişim

Tooltip Şeklinde Sosyal Medya Kodları

Önizleme

HTML Kodu

CSS Kodu

Yorumlar

Yorum Yap !

REKLAM ALANI

KATEGORİLER

POPÜLER YAYINLAR

LİNKLER

IVIR ZIVIR

İÇERİK