Menu

Blogger Animasyonlu Sosyal Medya Dikey Menü

Bloğunuzu bu widgeti kullanarak daha cazip hale getirebilirsiniz.SEO Mektebi olarak bir siteye eklenebilecek en güzel sosyal medya takipçi eklentisi hangisidir derseniz işte budur derim.Bu eklentiyi widget veya sayfa içinde de kullanabilirsiniz.

Oldukça güzel CSS kodları ile oluşturulmuş bu eklenti üzerine gelince renk değiştirerek takipçi sayınızı gösteriyor.

Blogger için Css kodları ile oluşturulmuş bu Blogger Animasyonlu Sosyal Medya Dikey Menü 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.




Blogger Animasyonlu Sosyal Medya Dikey Menü
Blogger Animasyonlu Sosyal Medya Dikey Menü 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 Animasyonlu Sosyal Medya Dikey Menü Eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.





<style>
 .abt-box{
font: 25px/24px normal 'Denk One', sans-serif;
display: inline-block;
position: relative;
width: 95%;
max-width: 280px;
margin: 0 auto 15px auto;
padding: 16px;
background-color: rgba(238, 238, 238, 0.1);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-left:15px;
}
.abt-social {
width: 95%;
max-width: 280px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
.abt-social a {
text-decoration: none !important;
}
.abt-social ul {
margin: 0;
padding: 0;
list-style: none;
}
.abt-social ul li {
display: inline;
margin: 0;
padding: 0;
text-indent: 0
}
.abt-social ul li a.facebook {
border-left: 65px solid rgba(59, 89, 152, 1);
color: rgba(59, 89, 152, 1);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook p {
margin: 2px 35px 0 -70px;
display: inline-block;
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook:hover {
background: rgba(59, 89, 152, 1);
border-left: 0px solid rgba(59, 89, 152, 0.1);
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.twitter {
border-left: 65px solid rgba(64, 153, 255, 1);
color: rgba(64, 153, 255, 1);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter p {
margin: 2px 35px 0 -70px;
display: inline-block;
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter:hover {
background: rgba(64, 153, 255, 1);
border-left: 0px solid rgba(64, 153, 255, 1);
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.gplus {
border-left: 65px solid rgba(219, 74, 57, 1);
color: rgba(219, 74, 57, 1);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus p {
margin: 2px 35px 0 -70px;
display: inline-block;
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus:hover {
background: rgba(219, 74, 57, 1);
border-left: 0px solid rgba(219, 74, 57, 1);
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.pinterest {
border-left: 65px solid rgba(174, 45, 39, 1);
color: rgba(174, 45, 39, 1);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest p {
margin: 2px 35px 0 -70px;
display: inline-block;
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest:hover {
background: rgba(174, 45, 39, 1);
border-left: 0px solid rgba(174, 45, 39, 1);
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.linkedin {
border-left: 65px solid rgba(0, 123, 182, 1);
color: rgba(0, 123, 182, 1);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.linkedin p {
margin: 2px 35px 0 -70px;
display: inline-block;
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.linkedin:hover {
background: rgba(0, 123, 182, 1);
border-left: 0px solid rgba(0, 123, 182, 1);
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.linkedin:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
transition: all 1ms ease-in-out;
}
</style>
<div class="abt-social"><ul>
<li><a class="abt-box facebook" href="https://www.facebook.com/seomktbi" target="_blank"><p>15K+</p>Facebook </a></li>
<li><a class="abt-box twitter" href="https://twitter.com/seomektebi" target="_blank"><p>10K+</p>Twitter</a></li>
<li><a class="abt-box gplus" href="https://plus.google.com/u/0/b/+SEOMektebi" target="_blank"><p>5K+</p>Google+</a></li>
<li><a class="abt-box pinterest" href="http://www.pinterest.com/seomektebi/" target="_blank"><p>4K+</p>Pinterest</a></li>
<li><a class="abt-box linkedin" href="http://www.linkedin.com/company/seomektebi" target="_blank"><p>10K+</p>Linkedin</a></li>
</ul></div>


Blogger Animasyonlu Sosyal Medya Dikey Menü Düzenleme:

Eklentiler içinde yeşil olarak belirtiğim yerlere kendi sosyal medya sayfa adreslerinizi ekleyiniz.

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 Animasyonlu Sosyal Medya Dikey Menü "

Önerilen Yazı
×