Renkli Sosyal İconlar Kodu

Merhaba arkadaşlar bu yayında sizlere renkli sosyal icon kodunu sunacağım. Bu kodu bulmak için çok uğraştım bazı sitelerin footerinda bazı sitelerin ise headerinde olan bu kısmı ne sonunda buldum bir kaç yerini düzelttikten sonra sizlere sunmaya karar verdim. Lafı uzatmadan koda geçelim.

Önizle ;

Aşağıdaki kodu istediğiniz yere ekliyebilirsiniz.

<style> .isocial{margin-left:50px; margin-bottom:5px!important; margin-left:25px!important;} ul.isocial{margin-left:50px;list-style:none;margin:0;padding:5px 20px 0 0} ul.isocial li{margin-left:50px; float:left;margin:0 5px;padding:0} ul.isocial li a{float:left;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJGivh2Adnqy66CJeexXLYZvou510maCRdpDrsPdxp1GMMCLsZ_7_VN0B_hyHyMJPFYDUH-lFXmaHpq54jy9qXOJn7mgPf75pzL_drays2WVmHorE9dN_uWRdGPP27CAPzFbjE5rN2lrM/s1600/social+letter.png);background-position:0 0;background:repeat:no-repeat;display:inline-block;text-indent:-9999px;overflow:hidden;width:24px;height:24px;position:relative} ul.isocial li a.rss{background-position:0 0} ul.isocial li a.rss:hover{background-position:0 -25px} ul.isocial li a.facebook{background-position:-25px 0} ul.isocial li a.facebook:hover{background-position:-25px -25px} ul.isocial li a.twitter{background-position:-50px 0} ul.isocial li a.twitter:hover{background-position:-50px -25px} ul.isocial li a.google{background-position:-75px 0} ul.isocial li a.google:hover{background-position:-75px -25px} ul.isocial li a.youtube{background-position:-100px 0} ul.isocial li a.youtube:hover{background-position:-100px -25px} </style><div class="headline-right"> <div class="isocial"> <ul class="isocial"> <li><a class="rss" href="view-source:http://e-kocin.blogspot.com/" target="_blank" title="RSS Kaynak"></a></li> <li><a class="facebook" href="https://www.facebook.com/erenk55" target="_blank" title="Facebook Hesabım"></a></li> <li><a class="twitter" href="https://twitter.com/Erenfbkocin" target="_blank" title="Takip Et"></a></li> <li><a class="google" href="https://plus.google.com/u/0/111888890588684254889" target="_blank" title="Google Profilim"></a></li> <li><a class="youtube" href="http://www.youtube.com/channel/UCY-ZC-W8B6_F7-3eZrM3xEw?feature=guide" target="_blank" title="Youtube Kanalım"></a></li> </ul> </div> </div>