Menu

Blogger Sosyal Medya Menü Eklentisi

Blogger Sosyal Medya Menü Eklentisi eklenti oldukça kullanışlıdır sitenizin renklerine uygun olarak istediğiniz renklerde ve ölçülerde kullanabilirsiniz.

Blogger Html veya css kodlarından, Css kodları ile oynayarak site tasarımınıza uygun şekli ve renklerini de kendinize göre,zevkinize göre ayarlamak da mümkündür.  

Html veya css kodlar her internet tarayıcı ile uyuşmaktadır.İstediğiniz gibi düzenleyerek kendimize uygun bir menü elde edebilirsiniz.Bu menüyü bloğunuza ekleyerek etikete bağlı olarak da kullanabilirsiniz.

Blogger Sosyal Medya Menü Eklentisi


---Google Kazançları Affiliate Satış Ortaklığı

---Adwords Üzerinden İnternetten Para Kazanmak

Blogger Sosyal Medya Menü Eklentisi


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

---Blogger CSS3 Siyah Açılır Menu Yapma

---Blogger Yeşil Navigation Menü Tasarımı

İlk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.

Blogger CSS Kodlar Turuncu Renkli Açılır Menü

Blogger CSS Kodlar Turuncu Renkli Açılır Menü

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

<style>
.Mbt-Social-metro {
    width: 960px;
    float: left;
    margin: 0;
    padding: 1em 0;
}
.Mbt-Social-metro ul {
    margin: 0;
    padding: 0;
}
.Mbt-Social-metro ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    text-transform: none;
    margin: 0;
    float: left;
    display: inline-block;
    width: 20%;
}
.Mbt-Social-metro ul li a {
    font-size: 80%;
    color: #fff!important;
    display: block;
}
.Mbt-Social-metro ul li a:hover {
    color: #000!important;
    background-color: #999;
    text-decoration: none;
}
idc-scoail ul li a, ul li a:hover {
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.Mbt-Social-metro ul li .rss {
    background: url("http://3.bp.blogspot.com/-ngdRXBFRpUM/UeKuk3z0WKI/AAAAAAAADBQ/bbRi4AgjIAo/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12;
    background-size: 20px;
    padding: 10px 50px;
}
.Mbt-Social-metro ul li .twitter {
    background: url("http://2.bp.blogspot.com/-vhpRbg4K92E/UeKun8idaJI/AAAAAAAADBk/njAvOwkBtaQ/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE;
    background-size: 20px;
    padding: 10px 50px;
}
.Mbt-Social-metro ul li .facebook {
    background: url("http://2.bp.blogspot.com/-rPP0q6LhkZs/UeKukkKYMgI/AAAAAAAADBM/hrOR8EhJ-DE/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998;
    background-size: 20px;
    padding: 10px 50px;
}
.Mbt-Social-metro ul li .google {
    background: url("http://2.bp.blogspot.com/-2P6YjCu0rY0/UeKuoELnV9I/AAAAAAAADBo/tqBSANktEFA/s1600/google.png") no-repeat scroll 10px center #D44937;
    background-size: 20px;
    padding: 10px 50px;
}
.Mbt-Social-metro ul li .linkedin {
    background: url("http://2.bp.blogspot.com/-5VGeWSSRZj0/UeKuk_FD9tI/AAAAAAAADBc/7QaZlCk9TmU/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;
    background-size: 20px;
    padding: 10px 50px;
}
/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .Mbt-Social-metro ul li {
        width: 50%;
    };
}
/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .Mbt-Social-metro ul li {
        width: 50%;
    };
}
/* width of 320px */
@media only screen and (max-width: 480px) {
    .Mbt-Social-metro ul li {
        width: 100%;
    };
}
</style>
<div class='Mbt-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/bl0gger-tricks'>Subscribe our Feed</a></li>
<li><a class='twitter' href='https://twitter.com/mybloggertriks'>Follow me on Twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/mybloggertriks'>Find me on Facebook</a></li>
<li><a class='google' href='https://plus.google.com/#'>Join me on Google+</a></li>
<li><a class='linkedin' href='http://in.linkedin.com/in/mybloggertriks'>Connect with LinkedIn</a></li>
</ul>
</div>


Düzenleme:
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.

SEO Mektebi CSS Renk Kodlarına Buradan Ulaşabilirsiniz

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

Önerilen Yazı
×