MetaCSSspb Sosyal Paylaşım Butonları [CSS Destekli]

Uygulamaya geçmeden önce mutlaka yedek alınız!

Blogunuzda CSS destekli sosyal medya paylaşım butonları ekleyip hit arttırmak ister misiniz ?
Aşağıda ki adımları uygulayarak butonları sitenize yerleştirin;

1. Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;

/*
MetaCSSspb Code Start
-------------------------------*/

.facebook {
color:#fff;
}

.facebook  a{
background: #3A64BF url(https://cdn4.iconfinder.com/data/icons/flat-social-media-icons-1/32/facebook-2.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 70px;
height: 20px;
font-family:verdana;
color:#fff;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}
.facebook a:hover{
background: #8BAFFF url(https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/facebook-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 70px;
height: 20px;
font-family:verdana;
color:#3A64BF;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}

.twitter {
color:#fff;
}

.twitter  a{
background: #6BB1FD url(https://cdn4.iconfinder.com/data/icons/flat-social-media-icons-1/32/twitter-2.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 70px;
height: 20px;
font-family:verdana;
color:#fff;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}
.twitter  a:hover{
background: #D3E8FF url(https://cdn0.iconfinder.com/data/icons/shift-logotypes/32/Twitter-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 70px;
height: 20px;
font-family:verdana;
color:#3A64BF;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}

.google {
color:#fff;}

.google a{
background: #F97676 url(https://cdn3.iconfinder.com/data/icons/follow-me/256/google-plus-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 70px;
height: 20px;
font-family:verdana;
color:#fff;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}

.google a:hover{
background: #FFBBBB url(https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/google-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 70px;
height: 20px;
font-family:verdana;
color:#3A64BF;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}

/*
MetaCSSspb Code Finish
-------------------------------*/

2. Şimdi de bu kodu aratalım.  

<div class='post-footer'> 


3. Bulduğumuz bu kodun altına aşağıda ki kodları ekleyelim.

<b>Paylas:</b>
<div class="facebook">
<a href='#'>Facebook</a></div>
<div class="twitter">
<a href='#'>Twitter</a></div>
<div class="google">
 <a href='#'>Google+</a></div>

Kırmızı # ile belirtilen yerlere sosyal medya sitelerinin paylaşım linklerini yerleştirmeniz gerekiyor.

Yazıyla alakalı etiketler;
blogger, blogspot, blog, eklenti, widget, gadget, eklenti, eklentiler, eklentileri, eklentisi
blogger eklenti, blogspot eklenti, blogger eklentisi,
blogger eklentileri, blogger eklentiler, blogger widget, blogger widgets, blogger gadget,
blogger 2015, blogger 2016, blogger eklenti indir, blogger kodu, blogger kodları,