Blogger İçin Sosyal Medya Butonları - Yeni

10:35 | 0 yorum

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDPpXJNzAoCQGnc5lieQekGXpt-xqgcAbwQOvRhM8vUJZ_CVQQnYD5GGhdD7cDKYunkabIzcJw0uAJP3Cwy3RwsKEqrNyRHGfuvjLGeFpJOr2Y7bYPjZ3_choZZcKwQ5dxIpBsgEvtSU/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. 

Kategori: , , , ,

0 yorum