WordPress Sitenize Eklentisiz Sosyal Medya Simgeleri

WordPress sitede her ihtiyaca göre mutlaka bir eklenti bulunması,tasarım için önemli bir avantajdır.

Çok fazla eklenti kullanmanın, site hızını olumsuz etkilediği de untulmamalı.Site tasarımının etkili bir tamamlayıcı olan Sosyal Medya Düğmeleri ve butonlarıSosyal Medya Ağları üzerinden içerik paylaşmak  için en çok tercih edilen paylaşım araçlarıdır. Ancak; aynı zamanda site yükleme hızı üzerinde de olumsuz etkileri olmaktadır.Bu durumda yapılması gereken,zorunlu olmadıkça eklenti kullanmayı azaltmaktır.

Sitenizde kullanacağınız Sosyal Medya düğmeleri ve butonlarını profilinize bağlantılı olarak, eklentisiz  HTML versiyonu olarak kullanabilirsiniz.

Ziyaretçilerinizle daha iyi iletişim kurmak ve düşüncelerinizi kolayca paylaşmak için sitenizin kenar çubuğunda Sosyal Medya Düğmeleri bulundurmanızda yarar vardır.

Üç farkl farklı stil paylaşıyoruz.Dilediğinizi seçin ve kullanın.

1.STİL

social-icons-add-sidebar

Sitenize giriş yaptıktan sonra;

*Başlangıç>Görünüm> Bileşenler> Metin ve alttaki kodu yapıştırın.

Kod üzerinde kendi profilinize uygun düzenlemeleri yapın.
<div id="social-profiles">
<a title="Like us on Facebook" alt="facebook" rel="external nofollow" class="social facebook" href="http://www.facebook.com/wpsquare">Facebook</a>
<a title="Follow us on Twitter" alt="twitter" rel="external nofollow" class="social twitter" href="http://twitter.com/wpsquare">Follow Us</a>
<a title="Subscribe to our Feed" alt="feeds" rel="external nofollow" class="social subscribe" href="http://feeds2.feedburner.com/wpsquare">Subscribe</a>
<a title="Contact Us" alt="contact" rel="external nofollow" class="social contact" href="http://www.wpsquare.com/contact/">Contact Us</a>
</div>

Şimdi de altta verilen kodu Style.css  içine yerleştirin
/* Add this code to style.css file in your theme folder */
#social-profiles {
float: left;
margin: 5px 0;
}
#social-profiles .social {
background: url("http://i.imgur.com/eedpu.png") no-repeat scroll center top transparent;
border: medium none;
float: left;
height: 20px;
padding: 40px 0 0;
text-align: center;
width: 64px;
}
#social-profiles a.social {
color: #666666;
font-family: Arial,Helvetica,Tahoma,sans-serif;
font-size: 11px;
text-shadow: 1px 1px #FFFFFF;
}
#social-profiles .facebook {
background-position: 0 0;
}
#social-profiles .twitter {
background-position: -64px 0;
}
#social-profiles .subscribe {
background-position: -128px 0;
}
#social-profiles .contact {
background-position: -192px 0;
}

2.STİL

social-media-icons-sidebar

Sitenize giriş yaptıktan sonra;

*Başlangıç>Görünüm> Bileşenler> Metin ve alttaki kodu yapıştırın.

Kod üzerinde kendi profilinize uygun düzenlemeleri yapın.
/* Add this code to sidebar text widget in your blog */
<ul class="social">
<li><a title="RSS Feed" class="social-feed" href="http://feeds2.feedburner.com/wpsquare/">RSS feed</a></li>
<li><a title="Twitter" class="social-twitter" href="http://twitter.com/wpsquare">Twitter</a></li>
<li><a title="Facebook" class="social-facebook" href="http://www.facebook.com/wpsquare">Facebook</a></li>
<li><a title="Youtube" class="social-youtube" href="http://www.youtube.com/user/wpsquare">YouTube</a></li>
<li class="last"><a title="Google Plus" class="social-gplus" href="https://plus.google.com/106412545300888534854/">Google </a></li>
</ul>

Editör düzenleme Stil.CSS içine alttaki kodu yerleştirin
/* Add this code to style.css file in your theme folder */
.social {
background: none repeat scroll 0 0 #FFFFFF;
clear: both;
font-family: georgia;
list-style-type: none;
margin-top: 12px;
overflow: hidden;
padding: 0 0;
}
.social li {
float: left;
margin-right: 10px;
text-align: center;
width: 50px;
}
.social li.last {
margin-right: 0;
}
.social li a {
color: #666666;
font-size: 11px;
line-height: 34px;
opacity: 0.7;
padding-top: 42px;
}
.social li a:hover {
color: #000000;
opacity: 1;
text-decoration: none;
}
.social .social-feed {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 0 transparent;
display: block;
}
.social .social-twitter {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -79px transparent;
display: block;
}
.social .social-facebook {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -158px transparent;
display: block;
}
.social .social-youtube {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -237px transparent;
display: block;
}
.social .social-gplus {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -316px transparent;
display: block;
margin-right: 0;
}

3.Stil :Dönme efektli çok hoş bir sosyal paylaşım eklentisi

Altta verilen kodu sidebarda göstermek için  bileşenlere yada single.php dosyanıza ekleyiniz.Profil bilgilerini kendinize ait linklerle değiştiriniz.

<!--MozaliMetro Spinning Sosyal Takip Eklentisi-->
<div class="subscribe">
<ul> <li class="rss"><a href="http://feeds.feedburner.com/profiliniz" target='_blank'><span></span>RSS</a></li>
<li class="twitter"><a href="http://twitter.com/kullanıcı adınız" target='_blank'><span></span>Twitter</a></li>
<li class="gplus"><a href="https://plus.google.com/ıd numaranız" target='_blank'><span></span>Google Plus</a></li>
<li class="facebook"><a href="https://www.facebook.com/profiliniz/" 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;
}
.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;
}
.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;
}
.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;
}
</style>
<!--Mozali Metro Spinning Sosyal Takip Eklentisi-->

Sosyal medya araçlarını eklentiyle kullanmak isterseniz https://wordpress.org/plugins/ sitesinden farklı eklentileri deneyebilirsiniz.

Sosyal medya paylaşım sitelerini de kullanabilirsiniz

addthis.com

http://www.sharethis.com/get-sharing-tools/