Menu

Blogger Animasyonlu Sayfa İçi Sosyal Paylaşım Eklentisi

Sosyal Medya sitelerin vazgeçilmezleri arasında ilk sırada yer alır,çünkü her site sahibi yayınladığı yazıların çok okunmasını ister.Organik Backlink siteler için oldukça değerlidir Sosyal Medya siteleri bedava Organik Backlink sağlamaktadır.Ayrıca site ziyaretçileri açısından da Sosyal Medya oldukça faydalıdır bol miktarda sitemize yeni ziyaretçiler gönderilir.

Aşağıda yayınladığım kodlar Sosyal Medya yı oldukça etkili kullanan site sahiplerinin çok işlerine yarayacaktır.Bu eklenti animasyon halinde çıkan üst yazı ve yan tarafında sitenizin logosu eklenmektedir.Yazmış olduğunuz makalenin isterseniz en başına isterseniz yazınızın en alt tarafına ekleyebilirsiniz.

Blogger Animasyonlu Sayfa İçi Sosyal Paylaşım Eklentisi


---Kaliteli 15 Adet Blogger Menü

---Blogger Sevimli Popüler Yayınlar Widget

---Yeni Clickbank İçin En İyi Eğitim Seti GooMass

Tamamen CSS kodları ile oluşturulmuştur bütün arama motorlarını desteklemektedir ve site açılış hızına hiçbir zarar vermemektedir.


Blogger Animasyonlu Sayfa İçi Sosyal Paylaşım Eklentisi
                                                                       Demo

Blogger Animasyonlu Sayfa İçi Sosyal Paylaşım Eklentisini Yükleme Adımları

1.Adım:
Aşağıda verdiğim kodu Css kodlarının bulunduğu yer olan ]]></b:skin> kodundan önce ekleyiniz.


/* --sayfa içi üst sosyal medya---- */
#seomektebi_profiles-wrap{
width: 450px;
height: 80px;
background:url("https://lh4.googleusercontent.com/-6HoHACkrsMQ/UeqWyWH2YzI/AAAAAAAAHP8/zvwkibvz_pY/w82-h69-no/Ads%25C4%25B1z.png") no-repeat 15px 10px;
padding:22px 0px 15px 100px;
margin: 14px auto;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.seomektebi_profiles{
height: auto;
margin: 0 auto;
}
.seomektebi_profiles li{
float: left;
list-style: none;
}
.seomektebi_profiles li a{
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
margin-top: 20px;
outline: none;
position: relative;
z-index: 2;
text-indent: -9000px;
text-decoration: none;
}
.seomektebi_profiles li .facebook{
background: url("https://lh5.googleusercontent.com/-cnzTobc2v2s/U7nSwMJ0hQI/AAAAAAAAJ6g/oU0l1BZ6SRc/w40-h400-no/seo+mektebi+sosyal+medya.png") no-repeat;
}
.seomektebi_profiles li .twitter{
background: url("https://lh5.googleusercontent.com/-cnzTobc2v2s/U7nSwMJ0hQI/AAAAAAAAJ6g/oU0l1BZ6SRc/w40-h400-no/seo+mektebi+sosyal+medya.png") no-repeat 0px -45px;
}
.seomektebi_profiles li .gplus{
background: url("https://lh5.googleusercontent.com/-cnzTobc2v2s/U7nSwMJ0hQI/AAAAAAAAJ6g/oU0l1BZ6SRc/w40-h400-no/seo+mektebi+sosyal+medya.png") no-repeat 0px -90px;
}
.seomektebi_profiles li .pinterest{
background: url("https://lh5.googleusercontent.com/-cnzTobc2v2s/U7nSwMJ0hQI/AAAAAAAAJ6g/oU0l1BZ6SRc/w40-h400-no/seo+mektebi+sosyal+medya.png") no-repeat 0px -135px;
}
.seomektebi_profiles li .rss{
background: url("https://lh5.googleusercontent.com/-cnzTobc2v2s/U7nSwMJ0hQI/AAAAAAAAJ6g/oU0l1BZ6SRc/w40-h400-no/seo+mektebi+sosyal+medya.png") no-repeat 0px -180px;
}
.seomektebi_profiles li .linkedin{
background: url("https://lh5.googleusercontent.com/-cnzTobc2v2s/U7nSwMJ0hQI/AAAAAAAAJ6g/oU0l1BZ6SRc/w40-h400-no/seo+mektebi+sosyal+medya.png") no-repeat 0px -225px;
}
.seomektebi_profiles li .tumblr{
background: url("https://lh5.googleusercontent.com/-cnzTobc2v2s/U7nSwMJ0hQI/AAAAAAAAJ6g/oU0l1BZ6SRc/w40-h400-no/seo+mektebi+sosyal+medya.png") no-repeat 0px -270px;
}
.seomektebi_profiles li .youtube{
background: url("https://lh5.googleusercontent.com/-cnzTobc2v2s/U7nSwMJ0hQI/AAAAAAAAJ6g/oU0l1BZ6SRc/w40-h400-no/seo+mektebi+sosyal+medya.png") no-repeat 0px -315px;
}
.seomektebi_profiles li .mail{
background: url("https://lh5.googleusercontent.com/-cnzTobc2v2s/U7nSwMJ0hQI/AAAAAAAAJ6g/oU0l1BZ6SRc/w40-h400-no/seo+mektebi+sosyal+medya.png") no-repeat 0px -360px;
}
.seomektebi_profiles li a span{
width: 80px;
height: 20px;
line-height: 20px;
padding: 5px;
left: 50%;
margin-left: -52px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #446cb3;
background: #446cb3;
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 5%;
opacity: 0;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
-moz-transform: translate(35px) rotate(25deg) scale(1.5);
-o-transform: translate(35px) rotate(25deg) scale(1.5);
-ms-transform: translate(35px) rotate(25deg) scale(1.5);
transform: translate(35px) rotate(25deg) scale(1.5);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.seomektebi_profiles li a span:before,
.seomektebi_profiles li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 11px solid rgba(0,0,0,0.1);
}
.seomektebi_profiles li a span:after{
bottom: -15px;
margin-top: 6px;
margin-left: -12px;
border-top: 10px solid #446cb3;
}
.seomektebi_profiles li a:hover span{
opacity: 0.9;
bottom: 50px;
-webkit-transform: translate(0px) rotate(0deg) scale(1);
-moz-transform: translate(0px) rotate(0deg) scale(1);
-o-transform: translate(0px) rotate(0deg) scale(1);
-ms-transform: translate(0px) rotate(0deg) scale(1);
transform: translate(0px) rotate(0deg) scale(1);
}


---Facebooktan Para Kazanma Yöntemleri

---Sadece SEO İpuçları-1

---Sosyal LinkWil ve Paravan Blok

2.Adım:
Yandaki <data:post.body/> kodu Ctrl+f tuşuna basarak aratıyoruz bulduğumuz bu koddan sitenizde bir kaçtane olabilir deneme yanılma yolu ile aşağıda verdiğim kodları ekleyerek sayfalarınızın içine ekleyebilirsiniz.


Not:Aşağıdaki kodları <data:post.body/> kodundan önce eklerseniz bu eklenti sayfa yazılarınızın üstünde görülür,eğer altına eklerseniz bu sosyal medya eklentisi yazılarınızın altında görünür.


<div id='seomektebi_profiles-wrap'>
<ul class='seomektebi_profiles'>
<li> <a class='facebook' href=' https://www.facebook.com/seomktbi' target='_blank'> Facebook <span> </ span> </ a> </ li>
<li> <a class='twitter' href=' https://twitter.com/seomektebi'target='_blank'> <span> Twitter </ span> </ a> </ li>
<li> <a class='gplus' href=' https://plus.google.com/u/0/+SEOMektebi/posts' Google Plus'ta target='_blank'> <span> </ span> < / a> </ li>
<li> <a class='pinterest' href=' http://www.pinterest.com/seomektebi'target='_blank'> <span> Pinterest </ span> </ a> </ li>
<li> <a class='rss' href=' http://feeds.feedburner.com/zumbaranedir'target='_blank'> <span> RSS </ span> </ a> </ li>
<li> <a class='linkedin' href=' http://www.linkedin.com/in/seomektebi'target='_blank'> <span> LinkedIn </ span> </ a> </ li>
<li> <a class='tumblr' href=' http://www.tumblr.com/blog/seomektebi' target='_blank'> Tumblr <span> </ span> </ a> </ li>
<li> <a class='youtube' href=' http://www.youtube.com/channel/UCf-A22qCmSyspuHsv_1oCow'target='_blank'> Youtube </ span> <span> </ a> </ li >
<li> <a class='mail' href=' http://feedburner.google.com/fb/a/mailverify?uri=seomektebi' target='_blank'> Postalar </ span> </ a <span> > </ li>
</ul></div>

Düzenleme:

Yukarıdaki kodların içinde kırmızı ile belirtiğim yerlere kendi sosyal medya adreslerinizi eklemeniz yeterlidir.Ayrıca CSS kodları ile oynayarak şekil ve renklerde değişiklikler yapabilirsiniz.



Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger Animasyonlu Sayfa İçi Sosyal Paylaşım Eklentisi "

Önerilen Yazı
×