Blogger Hareketli Sosyal Paylaşım Sayfa Butonları - II

Blogger Sosyal Paylaşım Sayfa Butonları

Blogger sahipleri için en büyük başarı sabit ziyaretçi / kemik kitle diye tabir ettiğim sürekli sayfanızı ziyaret eden kullanıcı edinmektir. Bunun en kolay yolu ise sosyal paylaşım sayfaları kurarak takipçi elde etmeye çalışmak. Şık görünen sosyal paylaşım sitesi butonları ile ziyaretçilerinizi sizi takip etmeye teşvik edebilirsiniz.


Blogger Sosyal Paylaşım Sayfa Butonları Demo

Sayfa altında '' HAREKETLI SOSYAL PAYLAŞIM SITE BUTONLARI '' başlığı ile demosunu görebilirsiniz.

Blogger Sosyal Paylaşım Sayfa Buton Kodları

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widget şablonlarını genişlet kutucuğunu işaretliyoruz. 

2 ) Ctrl + F yardımı ile ]]></b:skin> kodunu bularak aşağıdaki kodları hemen üzerine ekleyerek, kaydediyoruz. 

/* Pure CSS Expanded "Social Network" Widget By bloggerdersleri.com */
#MoreBlogTools-SNS {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#MoreBlogTools-SNS li {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#MoreBlogTools-SNS .icon {
background: #D91E76 url('http://3.bp.blogspot.com/-unjaHZfdU1k/UK7b1J4pfOI/AAAAAAAAAzA/r7ccqS2FovU/s1600/MoreBlogTools-SNS.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block;
color: #141414;
float:none;
height: 48px;
line-height: 48px;
margin: 5px 0;
position: relative;
text-align: left;
text-indent: 90px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 48px;z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;
}
#MoreBlogTools-SNS span:hover {
visibility: hidden;
}
#MoreBlogTools-SNS span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#MoreBlogTools-SNS .icon {
color: #fafafa;
overflow: hidden;
}
#MoreBlogTools-SNS .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#MoreBlogTools-SNS .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#MoreBlogTools-SNS .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#MoreBlogTools-SNS .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#MoreBlogTools-SNS .linked {
background-color: rgba(0, 87, 114, .42);
background-position: 0 -574px;
}
#MoreBlogTools-SNS .deviant {
background-color: rgba(76, 122, 74, .42);
background-position: 0 -622px;
}
#MoreBlogTools-SNS .ytube {
background-color: rgba(170, 0, 0, .42);
background-position: 0 -670px;
}
#MoreBlogTools-SNS .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#MoreBlogTools-SNS li:hover .icon {
width: 250px;
}
#MoreBlogTools-SNS li:hover .icon {
background-color: #d91e76;
}
#MoreBlogTools-SNS li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#MoreBlogTools-SNS li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#MoreBlogTools-SNS li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#MoreBlogTools-SNS li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#MoreBlogTools-SNS li:hover .linked {
background-color: #005772;
background-position: 0 -190px;
}
#MoreBlogTools-SNS li:hover .deviant {
background-color: #4C7A4A;
background-position: 0 -238px;
}
#MoreBlogTools-SNS li:hover .ytube {
background-color: #A00;
background-position: 0 -286px;
}
#MoreBlogTools-SNS li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#MoreBlogTools-SNS .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
/* Pure CSS Expanded "Social Network" Widget By bloggerdersleri.com */

3 ) Ardından Blogger kullanıcı panelinden yerleşim kısmına geçiyoruz.  Butonları kullanmak istediğiniz yere , Gadget ekle diyerek aşağıda ki kodları ekliyoruz.

<ul id="MoreBlogTools-SNS">
<li ><a href="https://www.facebook.com/BloggerDersleri" class="icon fb">Facebook'tan Takip Et</a><span>Facebook'tan Takip Et  </span>
</li>
<li ><a href="https://twitter.com/Bloggerblog_" class="icon twit" >Twitter'dan Takip Et</a><span>Twitter'dan Takip Et</span>
</li>
<li ><a href="https://plus.google.com/117069198363134832012/" class="icon google" >Google+ dan Takip Et</a><span> Google+ dan Takip Et</span>
</li>
<li ><a href="http://pinterest.com/atolyye/" class="icon pint">Pinterest'ten Takip Et</a><span>Pinterest'ten Takip Et</span>
</li>
<li ><a href="http://www.linkedin.com/pub/blogger-dersleri/51/264/847" class="icon linked" >LinkedIn'den Takip Et</a><span> LinkedIn'den Takip Et</span>
</li>
<li ><a href="https://www.facebook.com/BloggerDersleri" class="icon deviant" >DeviantArt'tan Takip Et</a><span>  DeviantArt'tan Takip Et</span>
</li>
<li ><a href="http://www.youtube.com/4h6o" class="icon ytube">Youtube'tan Takip Et</a><span> Youtube'tan Takip Et</span>
</li>
<li ><a href="http://feeds.feedburner.com/bloggerdersleri/MOiP" class="icon rss" >RSS Takip</a><span>RSS Takip</span>
</li>
</ul>

Hareketli Sosyal Paylaşım Sitesi Butonları Düzenleme 

• Mavi olarak verilmiş alanlar buton ile görülecek yazı içeriği 
• Kırmızı olanlar ise sosyal paylaşım sitelerinizin linkleridir. Kendi sayfa linkleriniz ile değişitiriniz. 
• Kullanmak istemediğiniz sosyal paylaşım sitesi butonu var ise : Li ile başlayan kod dizinini başından sonuna silebilirsiniz.

 Eğer RSS kısımını çıkarmak istiyorsanız silmeniz gereken kod dizini : 

<li ><a href="http://feeds.feedburner.com/bloggerdersleri/MOiP" class="icon rss" >RSS Takip</a><span>RSS Takip</span>