Menu

Blogger Hover Efekli Sosyal Medya Widget

Yazar SEO Mektebi - - Yorum Yok
Blogger eklentileri blogger sitelerinin vazgeçilmez birer parçalarıdır.SEO Mektebi olarak blogger sitelerini tasarlamak isteyen yeni bloggerlara kolaylık olsun diye ve sosyal medyayı etkin kullansınlar diye çok miktarda sosyal medya eklentisini yayınlamaya devam ediyoruz.

Aşağıda yayınladığımız bu eklenti en önemli üç sosyal medya olan twitter,google plus ve facebook eklentilerini sayfa içinde veya widget olarak kullanabilirsiniz.Bu eklenti üzerine gelince alt tarafında açılan uyarıcı yazı ile site takipçilerinizi artırmak için tasarlanmış bir blogger sosyal medya eklentisidir.
Blogger Hover Efekli Sosyal Medya Widget

Blogger için Css kodları ile oluşturulmuş bu Blogger Hover Efekli Sosyal Medya Widget Eklenti Kodlarının nasıl göründüğünü ve kodların çalışıp çalışmadığını test etmek için kod deneme penceresini kullanabilirsiniz.Kod Deneme Penceresi

Ayrıca daha önce yayınladığımız aşağıdaki eklentilerde işinize yarayabilir,deneyebilirsiniz.

---Twitter Tüm Profil Sayfası Ayarları

---SEO ve Web Siteleri Sözlüğü

--Goomass İle Twıtter Eğitimi

Blogger Hover Efekli Sosyal Medya Widget seomektebi.com
Blogger Hover Efekli Sosyal Medya Widget Eklenti Kodları sitenize yüklemek için,ilk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.

Blogger Hover Efekli Sosyal Medya Widget seomektebi.com

---109 GB Bedava Depolama Alanları 

---Yeni Facebook Videoları Nasıl İndirilir 

---Blogger Sayfa İçine Sosyal Medya Ekleme 

HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız,Blogger Hover Efekli Sosyal Medya Widget Eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.


<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 256px;
}
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/seomektebi" class="like"><span class="zocial-twitter"></span>
<span class="tooltip">İzle</span>
</a>
</li>
<li>
<a href="https://plus.google.com/+SEOMektebi" class="favourite"><span class="zocial-googleplus"></span>
<span class="tooltip">Takip et</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/seomktbi" class="comment"><span class="zocial-facebook"></span>
<span class="tooltip">Takip et</span>
</a>
</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=seomektebi&apos" class="share"><span class="zocial-rss"></span>
<span class="tooltip">Abone ol</span>
</a>
</li>
</ul>
</div>




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

---Facebooktan Para Kazanma Yöntemleri

Blogger Hover Efekli Sosyal Medya Widget Düzenleme:

Kodların içinde sarı olarak belirtiğim yerlere kendi sosyal medya adreslerinizi ekleyiniz.Yayınladığımız bu eklentiler içinde ki renk kodları #XXXX şeklinde olan kodlardır bunları aşağıdaki SEO Mektebi renk kodları sayfasından istediğiniz renkleri seçerek ekleyebilirsiniz.


Ayrıca eklentiler içindeki sayısal değerlerle oynayarak site tasarımına uygun olan ölçüleri sağlayabilirsiniz.


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

Henüz Yorum Yapılmamış " Blogger Hover Efekli Sosyal Medya Widget "

Önerilen Yazı
×