Blogger Hover Efekli Sosyal Medya Widget
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 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
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 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 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.
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.
---Blogger Animasyonlu Sayfa İçi Sosyal Paylaşım Eklentisi
<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
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
« Prev Post
Önceki Yazılar
Next Post »
Next Post »
Henüz Yorum Yapılmamış " Blogger Hover Efekli Sosyal Medya Widget "