Hazır Sosyal Paylaşım Eklentisi - 11

Merhaba Arkadaşlar,

bu yayınımda sizlere yeni bir sosyal paylaşım eklentisinden bahsedeceğim.Sade ve şık bir eklenti üzerine gelince renk değiştiren güzel bir eklenti.

Nasıl Eklenir?

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu ekliyoruz.

-Gerekli düzenlemeleri aşağıda belirttim.

<style>
.social-wrap {
margin:0;
padding:0;
}
.social-wrap ul li{
list-style:none;
border-bottom:none;
margin:0;
padding:0;
}
.social-wrap li a {
margin:0 5px;
padding:0;
width:60px;
height:60px;
float:left;
text-indent:-99999px;
background: #fff;
border:solid 1px #eee;
-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;
}
.social-wrap li a.facebook {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qRU2e9XO3zg0u02BsL8jplmX8vYoUESCn64SIWWcVPKC1BCmawsKWC_C0F_WSCLzZm7kTW1CrdF26h7pGv0Bz5LezIFRPMD4ARl9Gt1D9XQBFXBwFLmoPI-lMXXTEg7z9ZBBU3NL5g/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: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qRU2e9XO3zg0u02BsL8jplmX8vYoUESCn64SIWWcVPKC1BCmawsKWC_C0F_WSCLzZm7kTW1CrdF26h7pGv0Bz5LezIFRPMD4ARl9Gt1D9XQBFXBwFLmoPI-lMXXTEg7z9ZBBU3NL5g/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitter {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtIomWa0cj_LKUEB1tGJdE6GyqpOghc1HsmSovChfv6S_eooNg-zo9jzzyqOhk9dh1tTHqlzurUJafyKhyphenhypheniW5_QxMIqVKkJm1lxkWaNFh8pRctvGbzIOIfLb7AMfgxKqZK9hRdGvQZXw/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: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtIomWa0cj_LKUEB1tGJdE6GyqpOghc1HsmSovChfv6S_eooNg-zo9jzzyqOhk9dh1tTHqlzurUJafyKhyphenhypheniW5_QxMIqVKkJm1lxkWaNFh8pRctvGbzIOIfLb7AMfgxKqZK9hRdGvQZXw/s1600/twitter-1.png) no-repeat -0px -0px;
}
.social-wrap li a.google-p {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESnb9PCmCIX9G6ZZIeShE5C-zgzWvJ95tlBfNh6XtfCZQ-tc1Qsjf0GKE92EoJHcUMOyoQLKEy-Qacuf8OkBI9s5LOXay3JXB20MFcaQIXoZhd63rEfrMUOn3-IuQLxgdT-HCVVhwTA/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: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESnb9PCmCIX9G6ZZIeShE5C-zgzWvJ95tlBfNh6XtfCZQ-tc1Qsjf0GKE92EoJHcUMOyoQLKEy-Qacuf8OkBI9s5LOXay3JXB20MFcaQIXoZhd63rEfrMUOn3-IuQLxgdT-HCVVhwTA/s1600/google.png) no-repeat -0px -0px;
}
.social-wrap li a.rss {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmlrqna6vwSIuyfju_tfEVQ7BjiO-Wnixrcv5Dpj48JZebSsfMt6IsHjLPpJLG6_xTeVDCOzwgpf33KfEX2ajq1PwDigRr5PhbNJ0g-6Tx4vxBE0whlO-6xLZzL1GIqZOywTW-3qikFg/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: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmlrqna6vwSIuyfju_tfEVQ7BjiO-Wnixrcv5Dpj48JZebSsfMt6IsHjLPpJLG6_xTeVDCOzwgpf33KfEX2ajq1PwDigRr5PhbNJ0g-6Tx4vxBE0whlO-6xLZzL1GIqZOywTW-3qikFg/s1600/twitter.png) no-repeat -0px -0px;
}</style>

<div class='social-wrap'>
<ul>
<li><a class='facebook' href='http://www.facebook.com/#' target='_blank'>Facebook</a></li>
<li><a class='twitter' href='http://twitter.com/#' target='_blank'>Twitter</a></li>
<li><a class='google-p' href='https://plus.google.com/#' target='_blank'>Google Plus</a></li>
<li><a class='rss' href='#' target='_blank'>Rss</a></li>
</ul>
</div>

# yazan yerlere sosyal medya adreslerimizi yazıyoruz...

• Facebook
• Twitter
• Google Plus
• Rss

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...