Aralık 14, 2012

Blogger İçin Sosyal Medya Butonları - Yeni

Blogger İçin CSS ile Tasarlanmış Yeni Sosyal Medya Butonları
Blogger'a her geçen gün yeni bir tasarım ve yeni bir eklenti daha tasarlanıyor. Onlardan bir tanesi de Css ile tasarlanmış yeni sosyal medya butonları. Bir blogcu için vazgeçilmezlerinden biri blog yazmak ve bir diğeri ise sosyal medya ağları. Bu sitelerin bloga uygun hale getirmek için tasarlanan kodlar ile kullanıcılarında zevkine göre kullanılmasını arttırıyor. 
Daha önce sayısını unuttuğum sosyal medya butonlarına bir yenisini de şimdi ekliyorum. 
Bu tasarım da Twitter, Facebook, Google +1 ve Rss içeriği mevcut. Yukarıdaki resimde görüldüğü gibi kullanılan tasarım birçok site teması için uygun olduğunu düşünüyorum. 
Şimdi bu eklentiyi blogumuzda nasıl uygulayabiliriz ? Ona gelelim...
  • Kumanda Paneli
  • Şablon
  • HTML'yi Düzenle
  • Widget Genişlet yolunu izleyerek aşağıdaki kodu bulun;
]]></b:skin>
Bulduğunuz kodun hemen üzerine gelecek şekilde aşağıdaki kodu ekleyin;
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(http://1.bp.blogspot.com/-265epqUBMdU/UMtslsfmcaI/AAAAAAAAHbQ/MqK5xdj7qPc/s1600/blogger-icin-sosyal-medya-butonlari-css-tasarimi-ile-eklenti.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}
#bloglamazamani {
margin-bottom:20px;}​
Yukarıdaki kodu yapıştırdıktan sonra şablonu kaydedip çıkın. Daha sonra 
  • Kumanda Paneli 
  • Yerleşim
  • Gadget Ekle seçeneği ile
  • HTML/Javascript ekleyin ve açılan kutuya aşağıdaki kodları yapıştırın.
<ul id='m-soc2'><li><a class='twitter' href='#'><span>Twitter</span></a></li>
<li><a class='facebook' href='#'><span>Facebook</span></a></li>
<li><a class='google' href='#'><span>Google+</span></a></li>
<li><a class='rss' href='#'><span>RSS</span></a></li></ul></div>​
Yukarıda # ile göstermiş olduğum yerleri; kendi kullanıcı hesaplarınızı eklemeyi unutmayınız. Son olarak beni Facebooktan takip etmek için: fb.com/bloglamazamani , Twitter'dan takip etmek için: @bloglamazamani sosyal ağlardan takip ederek sorularınızı iletebilirsiniz.
Yapamadığınız bir şey olursa "YORUM" bölümünde belirtebilirsiniz, iyi bloglamalar. Kolay gelsin..

0 yorum :

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.