Perdeli Sosyal Butonlar Eklentisi

Blogger yeni bir sosyal butonları ekleme eklentisi ile yine paylaşımlardayım.Bu eklentinin özelliği perdeli olarak isimlendirilmesi yani butonlar karanlık perde çekilmiş gibi üzerine gelince butonun rengini belli ettiriyor sizlere.DEMO'sunu bu yazının en altında görebilirsiniz

<style>.bssocialshutter {margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.bssocialshutter ul li{list-style:none;border-bottom:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.bssocialshutter li a {margin:5px 5px 0px 5px;padding:0px 0px 0px 0px;width:60px;height:60px;float:left;text-indent:-99999px;background: #191919;border:solid 1px #222121;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}.bssocialshutter li a.facebook {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooE9F2fDhVRPaLy0cYhrwC5tG218jsT2jw_0Q1B2OOFw22Qug5ESfFN2pZv2UynJyUfh7s2kQMo4HyphPMsqrTVrHgHmoCXU3STCeUdPvQ6chMBDd9KnyLM2G65teqYBuhAhSnGDR5RuE/s320/BS+facebook.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.bssocialshutter li a.facebook:hover {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooE9F2fDhVRPaLy0cYhrwC5tG218jsT2jw_0Q1B2OOFw22Qug5ESfFN2pZv2UynJyUfh7s2kQMo4HyphPMsqrTVrHgHmoCXU3STCeUdPvQ6chMBDd9KnyLM2G65teqYBuhAhSnGDR5RuE/s320/BS+facebook.png) no-repeat -0px -0px;}.bssocialshutter li a.twitter {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWLmvbZYztU7qjpLifgXKCQseV2S8XETxFiEysrR3ogT3TRXHmHQaZ6XgHH8zNwhBFgTGvHEKfDFiE1mxlrVePa6WfuqKVtJ42hDpDMaNuvx1ZBFN2dY-mf1MgDogj24-DsNEw7T5HBefe/s320/BS+twitter.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.bssocialshutter li a.twitter:hover {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWLmvbZYztU7qjpLifgXKCQseV2S8XETxFiEysrR3ogT3TRXHmHQaZ6XgHH8zNwhBFgTGvHEKfDFiE1mxlrVePa6WfuqKVtJ42hDpDMaNuvx1ZBFN2dY-mf1MgDogj24-DsNEw7T5HBefe/s320/BS+twitter.png) no-repeat -0px -0px;}.bssocialshutter li a.google-p {background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4V_inkJSSw2eVs2K1LluE-3t0eXrfBYEKQGdCNG3JzXYtfK_hiTrs_qd_t_j0qe1Ump901lpXfPK92k8stPy5xNChVgZlC3znkU1lpg0yvHBdDg95wS7j-UqGcuNVs3ef9gIOBZUWkSwb/s320/BS+google.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.bssocialshutter li a.google-p:hover {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4V_inkJSSw2eVs2K1LluE-3t0eXrfBYEKQGdCNG3JzXYtfK_hiTrs_qd_t_j0qe1Ump901lpXfPK92k8stPy5xNChVgZlC3znkU1lpg0yvHBdDg95wS7j-UqGcuNVs3ef9gIOBZUWkSwb/s320/BS+google.png) no-repeat -0px -0px;}.bssocialshutter li a.rss {background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFgdW9aQAoLh0XmiCen5bYMDSZzjhf_Xnsf8S9ZTEgyvEbOvv-uSTp_531l7PxDLuivizguVddRWnN3L6fDPJVLRopxdLE8fKcOR9gwqNG-4XoRMX7JyNA1x3Lt6vAm61lY11WOQSIOBzf/s320/BS+RSS+Feed.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.bssocialshutter li a.rss:hover {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFgdW9aQAoLh0XmiCen5bYMDSZzjhf_Xnsf8S9ZTEgyvEbOvv-uSTp_531l7PxDLuivizguVddRWnN3L6fDPJVLRopxdLE8fKcOR9gwqNG-4XoRMX7JyNA1x3Lt6vAm61lY11WOQSIOBzf/s320/BS+RSS+Feed.png) no-repeat -0px -0px;}</style><div class='bssocialshutter'><ul><li><a class='facebook' href='http://www.facebook.com/Blogger Turkey' target='_blaank'>Facebook</a></li><li><a class='twitter' href='http://twitter.com/Blogger Turkey' target='_blaank'>Twitter</a></li><li><a class='google-p' href='https://plus.google.com/Google+ İD' target='_blaank'>Google Plus</a></li><li><a class='rss' href='http://feeds.feedburner.com/Blogger Turkey' target='_blaank'>Rss</a></li></ul></div>

• Yukardaki kodlar içersinde değiştirmeniz gereken yerleri kırmızı renk ile boyadım kendi sosyal sitelerinizi yazın

http://www.bloggerturkey.com/2013/05/perdeli-sosyal-butonlar-eklentisi.html