BLOGUNUZA SOSYAL PAYLAŞIM BUTONLARI EKLEYİN

Blogunuzda yayınladığınız yazılarınızı okuyucularınıza ulaştırmanın bir yolu da sosyal paylaşım sitelerinde yayınlamak ve yayınlanmasını sağlamaktır. Sitenizi ziyaret eden bir birey, beğendiği yazınızı kendi sosyal paylaşım sayfasında yayınlayarak, blogunuza daha fazla ziyaretçi gelmesine yardımcı olurlar.
Blogger'in bu konuda sunduğu hizmetler olmasına rağmen pek kullanışlı ve dikkat çekici olduğunu söylemek biraz zor. Sitenize eklediğiniz ve SEO açısından da önemi büyük olan sosyal paylaşım butonları, blogunuzu ziyaret eden okuyucunuzun ne kadar çok ilgisini çekerse yazınızın paylaşılma ihtimali de o kadar artacaktır.

Aşağıda benimde kullandığım sostal paylaşım butonlarının HTML kodların yer almaktadır. Blogunuzun yönetim panelinden YERLEŞİM /  GADGET EKLE yazısına tıklayın  HTML/Javascript açın ve aşağıdaki kodları kopyalayıp yerleştirin. Kırmızı alana sosyal paylaşım sayfanızın URL'sini yazın. Mavi alana ise çerçevenin uzunluğunu ayarlayabilirsiniz.

<div class="subscribe">
<ul> <li class="rss"><a href="http://feeds.feedburner.com/xxxxxxxxxxxxxx" target='_blank'><span></span>RSS</a></li>
<li class="twitter"><a href="http://twitter.com/xxxxxxxxxxxx" target='_blank'><span></span>Twitter / 774 takipçi</a></li>
<li class="gplus"><a href="https://plus.google.com/xxxxxxxxxxxxxxx" target='_blank'><span></span>Google Plus</a></li>
<li class="facebook"><a href="http://facebook.com/xxxxxxxxxxxx" target='_blank'><span></span>Facebook</a></li> </ul>
</div>
<style>
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe .twitter span {
background-color: transparent;
background: url(http://4.bp.blogspot.com/-4wYTPzOLq3U/UfVpXDkLEQI/AAAAAAAABCE/z9T4Cl3UJnE/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);  
}  
ol, ul {
list-style: none outside none;
}
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li {
display: inline-block;
margin: 0 20px 10px 0;
position: relative;
width: 200px;
}
.subscribe .rss span {
background-color: transparent;
background: url(http://1.bp.blogspot.com/-bLkQLrkm2tc/UfVpXKVcLyI/AAAAAAAABCA/TuUyyebw8Bs/s1600/rss-icon.png) no-repeat;
}
.subscribe .rss a {
background: #F67F00;
width: 100px; 
}
.subscribe li a {
color: #FFFFFF;
display: block;
font-family: verdana;
font-size: 12px;
padding: 10px 10px 10px 40px;
text-decoration: none;
font-weight: bold;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);
}
.subscribe .twitter span {
background-color: transparent;
background: url(http://4.bp.blogspot.com/-4wYTPzOLq3U/UfVpXDkLEQI/AAAAAAAABCE/z9T4Cl3UJnE/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
width: 100px; 
}
.subscribe .gplus span {
background-color: transparent;
background: url(http://4.bp.blogspot.com/-wHxS3NEs3Tc/UfVpWcpqcrI/AAAAAAAABB0/2kcFjAo9BqM/s1600/googleplus.png) no-repeat;
}
.subscribe .gplus a {
background: #D74D2F;
width: 100px;
}
.subscribe .facebook span {
background-color: transparent;
background: url(http://3.bp.blogspot.com/-k6R-0tsbDVw/UfVpWe2S9YI/AAAAAAAABBw/JdcnV2LTaAk/s1600/facebook-icon.png) no-repeat;
}
.subscribe .facebook a {
background: #3B5998;
width: 100px;  
}
</style>

NOT: Bu kodun blogumda olmasını sağlayan bloghocam.blogspot.com'a teşekkür ederim.

Paylaş :