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
-------------------------------*/
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>
<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ı,