Blogger Sosyal Takip Butonları Eklentisi

Blogunuza sosyal takip butonları eklentisi koymak isterseniz bu eklenti tam size göre bir çok sosyal medya butonlarını barındıran bloglarda olması gereken bir eklenti olduğunu düşünüyorum. Eklenti css ile tasarlanmış şık görünüme sahiptir.

Eklentiyi 2 aşamada kolay bir şekilde yükleyebilirsiniz. 

Blogger - Kumanda Paneli - Şablon - Html'yi Düzenle - Ctrl + F tuş kombinasyonu ile şu kodu bulun ]]></b:skin>  ve hemen üst kısmına aşağıdaki kodları ekleyin.

.social-icons {
width: 100%;
margin-bottom: 10px;
}
footer .social-icons a {
margin-right: 5px;
}
footer .social-icons a {
margin-bottom: 10px;
}
footer .social-icons a {
background-color: #363636;
}
footer .social-icons a {
width: 40px;
height: 40px;
background-repeat: no-repeat;
border-radius: 3px;
display: inline-block;
position: relative;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}
.social-icons a.facebook,a.twitter,a.linkedin,a.dribbble,a.flickr,a.skype,a.pinterest,a.github,a.instagram,a.google,a.soundcloud,a.youtube,a.tumblr,a.vimeo {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgekJEzdkU4-prplGVYyARc3Hv_tG3w87_Z976jJaBnn013yYM_20_ekavne4uNbcwmqloDTgO62j-cIcJiR-rZQUP6cGPQlcmdn_IrHc8sjk6g86FN119FIl4u_kIvrnqDVY7dY7pRwGI/s1600/featherimages.png);
}
footer .social-icons a.facebook{
    background-position: 0px -38px;
}
.social-icons a.facebook:hover{
    background-color: #aab123;
}
footer .social-icons a.twitter{
    background-position: 0px -78px;
}
.social-icons a.twitter:hover{
    background-color: #aab123;
}
footer .social-icons a.linkedin{
    background-position: 0px -530px;
}
.social-icons a.linkedin:hover{
    background-color: #aab123;
}
footer .social-icons a.github{
    background-position: 0px -888px;
}
footer .social-icons a.google{
    background-position: 0px -158px;
}
footer .social-icons a.vimeo{
    background-position: 0px -688px;
}
footer .social-icons a.youtube{
    background-position: 0px -768px;
}
footer .social-icons a.skype{
    background-position: 0px -648px;
}
footer .social-icons a.tumblr{
    background-position: 0px -728px;
}
footer .social-icons a.instagram{
    background-position: 0px -848px;
}
footer .social-icons a.dribbble{
    background-position: 0px -568px;
}
footer .social-icons a.flickr{
    background-position: 0px -608px;
}
footer .social-icons a.pinterest{
    background-position: 0px -118px;
}
footer .social-icons a.soundcloud{
    background-position: 0px -808px;
}
.social-icons a.github:hover{
    background-color: #aab123;
}
.social-icons a.google:hover{
   background-color: #aab123;
}
.social-icons a.vimeo:hover{
    background-color: #aab123;
}
.social-icons a.youtube:hover{
    background-color: #aab123;
}
.social-icons a.skype:hover{
    background-color: #aab123;
}
.social-icons a.tumblr:hover{
    background-color: #aab123;
}
.social-icons a.instagram:hover{
    background-color: #aab123;
}
.social-icons a.dribbble:hover{
    background-color: #aab123;
}
.social-icons a.flickr:hover{
    background-color: #aab123;
}
.social-icons a.pinterest:hover{
    background-color: #aab123;
}
.social-icons a.soundcloud:hover{
    background-color: #aab123;
}

2. aşamada yapmanız gereken işlem Blogger - Kumanda Paneli - Yerleşim - Gadget ekle - Html Javascript kısmına aşağıdaki kodları ekleyin.

<div class='footer container'>

 <div class='social-icons'>

 <a class='facebook' href='#'/>

 <a class='twitter' href='#'/>

 <a class='linkedin' href='#'/>                                    

 <a class='skype' href='#'/>

 <a class='pinterest' href='#'/>                  

 <a class='tumblr' href='#'/>

 <a class='youtube' href='#'/>

 <a class='google' href='#'/>

 <a class='instagram' href='#'/>

 <a class='github' href='#'/>

 </a></a></a></a></a></a></a></a></a></a></div>

</div>