Blogger Hareketli Sosyal Paylaşım Buton Yapımı

Blogger Dersleri - Blogger Dönen Sosyal Paylaşım Sitesi Butonları

Blogger Dersleri - Blogger içerisinde dönen butonları nasıl yapabileceğinizi ve nerelerde kullanabileceğinizi Blogger 3D Buton konusunda anlatmıştım. Şimdi kodlar yardımı ile sitemiz için uygun sosyal paylaşım butonları oluşturalım.

Blogger Hareketli Sosyal Paylaşım Butonları Demo :

Blogger Hareketli Sosyal Paylaşım Butonları Kodları

<!-- 3D SosyalPaylasimimgeleri blogger-hakkinda.blogspot.com Kodu Baslat --><style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">

<!--Baslangic Rss Icon--> <a title="Grab Our Rss Feed" href="FEED-URL-ADRESİNİZ" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7YpluX2maazfxGnMKE_y3XtyJXjT1dgtPtsiJZBfczp-oYrG3b7srY3EYCGE-XLPgqrsZNKl47pbfTcY92edCk2TLrCQUp67PVEUoTzBWG26QT2c3IuBob0gkEh5rmfWjZqHfx4IGE5T/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Rss Icon-->

 <!--Baslangic Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="E-MAİL-RSS-ADRESİNİZ" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMxHkWOw25oAv69WQey9RgeKXOpzspk6N_XO4cucd9SHIftVlx2APLK0KxGoxD6bY304J6xYszr942deW9Zq1XaXDSiJ-0yaNMuXg6wNQ1dBIoVEWMOJ0vMDKPNdGGIUwB7_VuIY-LU88/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Email Rss Icon-->

 <!--Baslangic Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="https://www.facebook.com/BloggerDersleri" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_cQ9sYjt6baq5vGQzZrcIHSvY2yseHU0amCFtZ63YPJZMpe2CouGdyjgEPwTFbWNe8-kNrtW7l7BG76__lj5TKi6wtkbk9mznAAKN2CEHfL7JnvV0XTA48FwPzaxfI8eT2YfCbiZ6idst/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Facebook Icon-->

 <!--Baslangic Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="https://twitter.com/Bloggerblog_" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHPdzOWA7KgCHbGgFdJBnThvvbazToJrXQx_H01AnyTKibzkE84VoabfyPu4s-OX6cFz4nTTQKLWc9ODXC-qm1cItjGLtD-rRCObPeewMWopv8jsawNDwsbsy5kBKJ4wXSPg4rJCVGcInM/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Twitter Icon-->

<!--Baslangic Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="GOOGLE-PLUS-URL-ADRESİNİZ" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPgg3lMtus5M-E1iZL4amo8joN-Ok-HNtzXtm1lG5q192giJXJCmsSGmrQ04sUlzEjZFLw6DVDivAF1oEXsgS_lRMCuDhIlj6v6yrlYyRovasD1ovORQHhYvLAWvNFo7ZQSY3wggS6WEWS/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--Bitis Google+ Icon-->

<!--Baslangic Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/atolyye/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhof4LDmfrw3fgK0wbFXqu9exoyl8HgZbiYjZqozJGGc_HwWsY4RNlw5MYPlMYygRnzYdfOxJBc_SC-_CSXmKlE0rkInd-1FI3Cj-w4GE88C8vYnkrvtGOgOqsp7kSD-sAK3jdhmm2wAEVF/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--Bitis Pinterest Icon-->

</div><br/></center><!-- 3D SosyalPaylasimimgeleri blogger-hakkinda.blogspot.com Kodu Bitir -->

Blogger Hareketli Sosyal Paylaşım Butonları Kullanımı

Varsayalım ki Google+ olmasın istiyorsunuz yapmanız gereken  ile başlayıp  sonlanan kodu komple kaldırmak bu sayede sadece Google+ için hazırlanmış bölümden kurtulabilirsiniz.

Düzenleme :

 <!--Baslangic Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="GOOGLE-PLUS-URL-ADRESİNİZ" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPgg3lMtus5M-E1iZL4amo8joN-Ok-HNtzXtm1lG5q192giJXJCmsSGmrQ04sUlzEjZFLw6DVDivAF1oEXsgS_lRMCuDhIlj6v6yrlYyRovasD1ovORQHhYvLAWvNFo7ZQSY3wggS6WEWS/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--Bitis Google+ Icon-->

Title : Resimler için gerekli olan arka plan açıklamaları
Nofollow href : Sosyal paylaşım sitenizin linki
Src='' kodu ise görünecek olan resim linki