Blogger Sosyal Medya Profil Butonları

Kodları yabancı bir siteden aldım.Aslında bu kodların yanında abonelik formu ve  reader sayacı bulunmaktaydı.Sadeleştirerek sizlere sosyal medya butonları'nı sunacağım.Dileyen internetten araştırıp orijinal halini bulabilir.



Kodlarımız CSS3 ile oluşturulmuş ve butonlarımıza hover efekti verilmiş.Hemen anlatıma geçiyorum.

Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript

yukarıdaki işlemleri yaptıktan sonra aşağıdaki kodlarımızı gadgetımıza ekleyelim.

<style>ul.social {  list-style: none;  margin: 10px;  overflow: hidden;}.social li {  float: left;  background: none !important;  padding: 0 !important;  margin: 0 8px;}.social li a {  display: block;  width: 50px;  height: 40px;  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc4O054koPAbtpfHtYzNjdHraphtClE908oO6M3pd8SkrwW46H_5zIfbpOGz3iAlho6WPB4_oKCfR5LhvSn-g3xtpVXxgt-0DoMcEJ75NNHP93Gl-ztAeua-D7fYlUJR3eeTbgJqRBqDs/s1600/social.png") no-repeat transparent;  text-indent: -99999em !important;-webkit-transition: ease-in 0.15s all;  -moz-transition: ease-in 0.15s all;  -o-transition: ease-in 0.15s all;  -ms-transition: ease-in 0.15s all;  transition: ease-in 0.15s all;}.social li a:hover {  padding: 0 !important;}.social li.rssicon a {  background-position: 0 0;border-right: 1px solid #e6e6e6;}.social li.twicon a {  background-position: -50px 0;border-right: 1px solid #e6e6e6;}.social li.fbicon a {  background-position: -100px 0;border-right: 1px solid #e6e6e6;}.social li.gicon a {  background-position: -150px 0;}.social li.rssicon a:hover {  background-position: 0 -50px;border-right: 1px solid #e6e6e6;}.social li.twicon a:hover {  background-position: -50px -50px;border-right: 1px solid #e6e6e6;}.social li.fbicon a:hover {  background-position: -100px -50px;border-right: 1px solid #e6e6e6;}.social li.gicon a:hover {  background-position: -150px -50px;}
</style>
<div class="subicons"><ul class="social">
<li class="fbicon"><a href="http://facebook.com/websehri" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="twicon"><a href="http://twitter.com/ardaerakman" rel="nofollow" target="_blank">Twitter</a></li>
<li class="gicon"><a href="https://plus.google.com/111946372959768014016" rel="nofollow" target="_blank">Google +</a></li>
<li class="rssicon"><a href="http://feeds.feedburner.com/aerakmanBlog" rel="nofollow" target="_blank">Rss</a></li></ul>
</div>

Uyarı:Benim vermiş olduğum sosyal medya profil linkleri yerine kendi profil renklerinizi yazmanız yeterli olacaktır.Zaten o kısımları kırmızı ile gösterdim.

Eğer işlemlerimizi sorunsuz yaptıysanız,sosyal profil butonlarımız kullanıma hazırdır.İyi bloglamalar.