Teknolojik Bilgiye Ulaşmanın En Teknolojik Yolu

5 Nisan 2013 Cuma

Blogger Sosyal Paylaşım Butonları

Bu yazımda sizlere blogunuzda sidebar çubuğuna ekleyebileceğiniz ve ziyaretçilerinizi sosyal profillerinize yönlendirebileceğiniz eklentiyi paylaşacağım.


Sosyal Takip Butonları

Bu butonlarda css sprite tekniği kullanılmıştır. Aynı zamanda css sprite tekniğini kullanarak butonlara hover eklenmiştir. Ve her resimde açıklama metni bulunuyor. Hemen kodları vereyim.



Sosyal takip butonlarını blogunuza eklemek için ilk olarak aşağıdaki kodu buluyoruz.

]]></b:skin>

Bulduğumuz kodun hemen üstüne aşağıdaki kodları ekliyoruz.

ul#m-soc2{   
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;} 
ul#m-soc2 li{ 
list-style: none;margin: 7px;padding: 0;float:left;border: none;} 
ul#m-soc2 li a{ 
background: url(https://lh4.googleusercontent.com/-n5zj4LjXnmM/T8zwsOI_NhI/AAAAAAAADIg/tD-DgPUODu4/s132/sosyal-butonlar.png) no-repeat 0 0; 
margin:0;padding:0;display: block;position:relative; 
width: 33px; 
height: 33px; 
overflow: visible; 
} 
ul#m-soc2 li a.twitter{ 
background-position: 0 0; 
} 
ul#m-soc2 li a.facebook{ 
background-position: -33px 0; 
} 
ul#m-soc2 li a.google{ 
background-position: -66px 0; 
} 
ul#m-soc2 li a.rss{ 
background-position: -99px 0; 
} 
ul#m-soc2 li a.twitter:hover{ 
background-position: 0 -33px; 
} 
ul#m-soc2 li a.facebook:hover{ 
background-position: -33px -33px; 
} 
ul#m-soc2 li a.google:hover { 
background-position:-66px -33px; 
} 
ul#m-soc2 li a.rss:hover{ 
background-position:-99px -33px; 
} 
ul#m-soc2 li a span{ 
background: #555;position:absolute; 
top:-10px;left:-10px;width:auto;height:auto;opacity:0; 
padding:3px;text-align:left; 
color:#fff;filter:alpha(opacity=0); 
white-space:nowrap;border-radius:3px;font-size:12px; 
-webkit-transition: all 0.25s ease-in-out; 
-moz-transition: all 0.25s ease-in-out; 
-o-transition: all 0.25s ease-in-out; 
-ms-transition: all 0.25s ease-in-out; 
transition: all 0.25s ease-in-out;} ul#m-soc2 li a:hover{text-decoration:none}
ul#m-soc2 li a:hover span{ 
opacity:.7; 
filter:alpha(opacity=70); 
top:-23px}

Ardından yerleşimden aşağıdaki kodu HTML/JavaScript olarak ekliyoruz.

<ul id="m-soc2"><li><a class="twitter" href="http://twitter.com/narqkoz"><span>Twitter</span></a></li><li><a class="facebook" href="http://facebook.com/bayramcoskunx"><span>Facebook</span></a></li><li><a class="google" href="https://plus.google.com/113263141068980170410"><span>Google+</span></a></li><li><a class="rss" href="http://feeds.feedburner.com/antikawebmaster"><span>RSS</span></a></li></ul>



Blogger Sosyal Paylaşım Butonları, kodu
Paylaşmak Güzeldir
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 yorum

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Prof. Dr. Web
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top