Blogger Sosyal Paylaşım Butonları v2

İlk Paylaşımım olan Css ile Oluşturulan Sosyal Ağ Menüsü yazımıza bakmanızı öneririm.Bu yazımda ise bunlardan çok farklı ikinci versiyonunu paylaşmak istedim.Çok sade ve şık bir tasarımı var gerçekten.Aşağıdaki adımları takip ederek kolayca kullanabilirsiniz.

İlk olarak Css kodumuzu ekleyelim.Aşağıdaki Css kodunu ]]></b:skin> kodunun hemen üstüne eklememiz gerekiyor.

.social-wrap {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.social-wrap ul li{
list-style:none;
border-bottom:none;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.social-wrap 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: 0px;
-moz-border-radius-topright:0px;
-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;
}
.social-wrap li a.facebook {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxldtg01o2XVhz9jleC9e6XiXl5m1skDguLhANUH08gFb3XFhLtUNkyGxS5GTrx2GlEfSaRNyKIYMjRu0sMFm2w9ryyz_U8a2gKk1_GrNyVXeLYGwZkugr2tQvJqLWAy7VojQ0Th5oQ/s1600/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;
}
.social-wrap li a.facebook:hover {
background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxldtg01o2XVhz9jleC9e6XiXl5m1skDguLhANUH08gFb3XFhLtUNkyGxS5GTrx2GlEfSaRNyKIYMjRu0sMFm2w9ryyz_U8a2gKk1_GrNyVXeLYGwZkugr2tQvJqLWAy7VojQ0Th5oQ/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitter {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTSHxKQlKhVwmhUYJnNdH_eH0Lzlxj02pjmvQKMwuf572KQBa8FERy9g6jwP0SZKb7yBAXwHc7QK69Z66ftU4IodKYv2j9GxhkAB13IQpNcfQ70YEij0C7CbNtJLPwA3qOThUwpsvDQ/s1600/twitter-1.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;
}
.social-wrap li a.twitter:hover {
background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTSHxKQlKhVwmhUYJnNdH_eH0Lzlxj02pjmvQKMwuf572KQBa8FERy9g6jwP0SZKb7yBAXwHc7QK69Z66ftU4IodKYv2j9GxhkAB13IQpNcfQ70YEij0C7CbNtJLPwA3qOThUwpsvDQ/s1600/twitter-1.png) no-repeat -0px -0px;
}
.social-wrap li a.google-p {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGNeBA58j2xgkcRDSmnX-AOLykFuYR-3prlfoCQSZ3caamlwiAzKasZm3cLQmVA-iT-vQ6T71tSocplXwhnom4WP0Hl3LAIr4S9cxy0478UIVNYkt_5vQhj_sIDzgE3qwoE7RQxw20w/s1600/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;
}
.social-wrap li a.google-p:hover {
background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGNeBA58j2xgkcRDSmnX-AOLykFuYR-3prlfoCQSZ3caamlwiAzKasZm3cLQmVA-iT-vQ6T71tSocplXwhnom4WP0Hl3LAIr4S9cxy0478UIVNYkt_5vQhj_sIDzgE3qwoE7RQxw20w/s1600/google.png) no-repeat -0px -0px;
}
.social-wrap li a.rss {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Bd6suuNFtIBC-zF_-qw1gNTVKxjjGm4G6RZof_PbAw271CqK5Qkl7LDZ3E8uv6Pzc3PgZWmc9JKzroEeXkISLcrSf7UDuLsZSOyt5oKmIMwkQBsBWCZb64fMUdOMh_B1JGjOyKFn9Q/s1600/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;
}
.social-wrap li a.rss:hover {
background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Bd6suuNFtIBC-zF_-qw1gNTVKxjjGm4G6RZof_PbAw271CqK5Qkl7LDZ3E8uv6Pzc3PgZWmc9JKzroEeXkISLcrSf7UDuLsZSOyt5oKmIMwkQBsBWCZb64fMUdOMh_B1JGjOyKFn9Q/s1600/twitter.png) no-repeat -0px -0px;
}

Şimdi aşağıda bulunan kodları ise bir gadgete eklememiz gerekli.Blogger > Kumanda Paneli > Yerleşim > Gadget ekle kısmından ekleyebilirsiniz.Benden bu yazılık bu kadar.Demosuna buradan bakabilirsiniz..İyi Bloglamalar.

<div class="social-wrap">
<ul>
<li><a class="facebook" href="http://www.facebook.com/" target="_blaank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/" target="_blaank">Twitter</a></li>
<li><a class="google-p" href="https://plus.google.com/" target="_blaank">Google Plus</a></li>
<li><a class="rss" href="http://www.blogger.com/blogger.g?blogID=3230679417635010393#" target="_blaank">Rss</a></li>
</ul>
</div>