HTML'e Paylaşım Butonu Ekleme

 

HTML'e paylaşım butonu eklemek, içeriğinizi sosyal medyada yaymak ve sitenizin görünürlüğünü artırmak için harika bir yoldur. Bu, ziyaretçilerin tek tıklamayla içeriğinizi Facebook, Twitter, RSS gibi platformlarda paylaşmalarını sağlar.

Aşağıdaki kodu sitenizdeki Gadgetlerden birine ekleyip kullanabilirsiniz...

"Sosyal ağ linkiniz" Yazan yere kendi Sosyal ağ linklerinizi yazınız...

<div class="subscribe">
<ul> <li class="rss"><a href="Sosyal ağ linkiniz" target='_blank'><span></span>RSS</a></li>
<li class="twitter"><a href="Sosyal ağ linkiniz" target='_blank'><span></span>Twitter</a></li>
<li class="gplus"><a href="Sosyal ağ linkiniz" target='_blank'><span></span>Google Plus</a></li>
<li class="facebook"><a href="Sosyal ağ linkiniz" 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9_ACgKNJIqN66dK5IA4hvOR3Um30eMNkYvjUdnDL2WqJ0EPv8_yamNktUtzQYUiKZem9qdmANXVvVmyIdEiWu3aRgDRu2596FI7QbUjRxT5mBJl_s9axHMUVRxgrb8alZwUrpnNKBqiA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpuUUWIiAaCtMlLovILIFPmS-55cvhOCjVboNr0OVG-dyPQiuM3qupWxRyX4zdHe7dZjVj8sAsYKEQ6zgSWU9lsH5JgNBLzMigafx94xMCdQsvV8d0aTN-hhn9epyf6lGdsTWu-UK7T3g/s1600/rss-icon.png) no-repeat;
}
.subscribe .rss a {
background: #F67F00;
}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9_ACgKNJIqN66dK5IA4hvOR3Um30eMNkYvjUdnDL2WqJ0EPv8_yamNktUtzQYUiKZem9qdmANXVvVmyIdEiWu3aRgDRu2596FI7QbUjRxT5mBJl_s9axHMUVRxgrb8alZwUrpnNKBqiA/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe .gplus span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEpeo_sChc8_ttu4g126puN1V2pQAiSuralzaXBit2uYPc5lTIj8CecREs12SQLjYafgfYcjUCNKH4se4cl5f1S5FYlOYawOoN4mNu8aYol3hj5t-fYlSR7eJbwjSQQwK7YuHy8ZhgC6c/s1600/googleplus.png) no-repeat;
}
.subscribe .gplus a {
background: #D74D2F;
}
.subscribe .facebook span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRfGdi8bADAkuLSWn2jOh6rcsm6hLqqgjvJ6uJCxc-I8a4eM0mNST8Pmtp8_Bbcz9EeapAc_CHp-2kv16N-WYiOPDOdpdyJiC3ligsFH3Owm1IBZufofhGDkPiNF4yAevr9cBougg1Q_U/s1600/facebook-icon.png) no-repeat;
}
.subscribe .facebook a {
background: #3B5998;
}
</style>