Blogger Windows 8 (Metro ) Tarzı Sosyal Paylaşım Butonları

Blogger Windows 8 (Metro ) Tarzı Sosyal Paylaşım Butonları

Blog yazarlığında yazıların okunması , ve google'da üst sıralara çıkmak hepimiz için önemlidir. Sosyal medya ' da yazılarımızın paylaşılması ise hit artırma işleminde bize çok yardımcı olan bir sistemdir.

Okuyucuların yazılarınızı sosyal medya ' da paylaşabilmesi için , onlara butonlar oluşturmanız gerekir. Hali hazırda blogger sisteminde var olan butonlar hem boyun olarak hemde görsellik olarak sizi tatmin etmeyebilir.

Ama bu paylaşacağım eklenti ile , windows 8 metro tarzında paylaşım butonlarını blogunuza ekleyebileceksiniz.

Windows 8 Metro Tarzı Paylaşım Butonları Nasıl Eklenir ?

Blogger kullanıcı panelinden Şablon - HTML yi düzenle yollarını izliyoruz. Kodlar içerisinde CTRL+F Kombinasyonu ile   </b:skin> kodunu buluyoruz. ve hemen üstüne aşağıdaki kodları ekliyoruz.

#jocial{width: 305px;
float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8g8uIqtGRF7WdSFbZJwTcijVnrEO0xFbhGm9cT-ZqFxsZ0eV4Q-I1t0o97zWzxvj7liJEOhVo4VvimYZvZuoupMBPtB3p9H691q3Q9tabc4w0YFj7aAv9wfcH8pF-UkLQrj6eGOEp7Scr/s0/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYcZpquC_pU4O22pQvJnMzRuguvGKrzicsszeQzQX48eVol5cPCHrRhQ3SjQqyJxs3K7rftukUcOPlOrWvHVz_QfEj2LBL4xkaKfBxIivSx7XPYmWY1mnBEGB2TVzwQLM7jNoioUOhnTA/s0/twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71YRVFiPJrNRVO_U8XV-iMR1NZJ-1M3zEV_cq_o3h3Ai1Yyy6sEvrllKD-DYd0PRP-tlfLBWpcX3c06G_UEz8JM29Oak4hu2v58Nu7FfIQDHlxgXTxfPc45TTFcfc8h3G1zJ2KNXa70hb/s0/google%25252Bplus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadNYCJyrUmPMFFaeiZ2c8JDFs8_SPbqFA2AjFj0v2hyeeu54TFnthsChOsRyDtSt2Q-OyzFYaEzPSeja5Ma7F9XhqcgPkRdLqPva5sBof8alBH0Fyj8lLsOnLE2tiTzEGHazJ28TpiPaC/s0/rss.png") no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYcZpquC_pU4O22pQvJnMzRuguvGKrzicsszeQzQX48eVol5cPCHrRhQ3SjQqyJxs3K7rftukUcOPlOrWvHVz_QfEj2LBL4xkaKfBxIivSx7XPYmWY1mnBEGB2TVzwQLM7jNoioUOhnTA/s0/twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71YRVFiPJrNRVO_U8XV-iMR1NZJ-1M3zEV_cq_o3h3Ai1Yyy6sEvrllKD-DYd0PRP-tlfLBWpcX3c06G_UEz8JM29Oak4hu2v58Nu7FfIQDHlxgXTxfPc45TTFcfc8h3G1zJ2KNXa70hb/s0/google%25252Bplus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadNYCJyrUmPMFFaeiZ2c8JDFs8_SPbqFA2AjFj0v2hyeeu54TFnthsChOsRyDtSt2Q-OyzFYaEzPSeja5Ma7F9XhqcgPkRdLqPva5sBof8alBH0Fyj8lLsOnLE2tiTzEGHazJ28TpiPaC/s0/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}

Daha sonra blogger kullanıcı panelinden Yerleşim - Gaget Ekle - HTML / Java Script yollarını izleyerek , aşağıdaki kodu ekliyoruz.

<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/YOUR_USERNAME/'></a></li>
<li><a class='icon twitter' href='http://twitter.com/username/'></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/YOUR_USERNAME'></a></li>
</ul>

İkinci kodda bulunan YOUR_USERNAME bölümllerini kendi adreslerimizle değiştirmeyi unutmuyoruz. İşlem bu kadardır, Herhangi bir sorunda yorum bırakmayı unutmayın.


Tavsiye Yazı : Blogger Hareketli ( Dönen ) Sosyal Ağlar Butonları

Benzer Aramalar: Blogger , Blogger Eklentileri , Blogger Sosyal Paylaşım , Blogger Sosyal Paylaşım Butonları , Blogger Seo , Blogger Hit Artırma ,