Metro Tarzı Sosyal Paylaşım Butonları Yapımı

Kasım 28, 2015
Metro Tarzı Sosyal Paylaşım Butonları Yapımı

Blogger Metro Tarzı Sosyal Paylaşım Butonları Yapımı. 
Bloğunuzun kenar çubuğuna (sidebar) widget olarak ekleyebileceğiniz bu sosyal paylaşım düğmeleri sayesinde Facebook, Twitter, Youtube, Linkedin, Pinterest ve Google üzerindeki sosyal ağlarınıza bağlantı verebilirsiniz. Bu sayede bloğunuzdan sosyal ağdaki hesaplarınıza ziyaretçi çekebilir ve takipçi sayınızı kasabilirsiniz.

Hepsi bir arada bulunan sosyal butonlar bloğunuza şık bir hava katacaktır. Gelelim nası yapıldığına.



Metro Tarzı Sosyal Paylaşım Butonları Yapımı

1. Blogger giriş.
2. Yerleşim
3. Gadget Ekle
4. HTML/Jawascript
5. Aşağıdaki kodları kopyalayıp açılan pencereye yapıştırın ve # işareti olan yerlere kendi hesap adalrınızı yazın.


<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/# rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/#></a></li>
<li><a class="gp" href="https://plus.google.com/#"></a></li>
<li><a class="pi" href=http://pinterest.com/#rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/#rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/#></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/#rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbDiUwmTE3wcyyR9McU8R8K1WrMIzejMQsZ8socPe6HPnDWnHXsvoG9rd2kfD2eRw_5nyBKDebCC0huSfZUwdxo79kkuBoDD8_p5NyFyxYeS6jDe3FY7e64_UH0C2YwNzfMm_mFNtRFwNp/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinod6TxQv9XZEGzyZ67W1ofs40DTGa_5dkvcD5jFlj4ZFGm0FpiqU_SHzPlqjrKHVO1h7Jisbsf8B0lVghY51UDiJcGO9zx2gvsyuNpDpQCoNeVo72Gg1IC24jkjjvbGkdw1PJf_lA9Sok/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvJnZ20gKaacCPI9q61MWTT2z82oHiCKbBF1n3Ch34Ru5qZ6LbvuBom3P6kYeo0PIlah4-5OA-FXnipI77U6EKcoA8lAo3T1ahcYuV4kwRu8yfkOXf-x9rMj1Ll8dniVRGYcnmSxOPJwW/s50/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM83FjDgEoluCsPwluBjojAuMXtNAyZ5kM3fLtb2pENjUlslBLPJ6p1irXEtM4pnEKBLKmzfeNRNW1zugxsD9qKZom7cFwX26cjeYtxNYX5KG6UPJocctUFXUbEsnC_rnAxdc8XFMQ9AE/s40/pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLx6GGvrSrl-srb8_rxE8KccdzyDWfEHlsIYhihhyKyMx2oEL68frIf0DxJczVdvhg0THLWuTzuHcPD_JU0EdS9JocNCegks2aZmjcxW7tpPOZJ78lqwilHnw7yaUibgMOMRi1mEi1Io/s40/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiREUHEiy0VsJzwF_E_LLqogkGKNBwhpNnvBlpXh3IkASvpx2xViCm_077oGndBJAIcQ8oqR6k6AHPPZZdUq4fJZLKn6BM5Q1afIgomucMl8u1Wi8YF9JibzEu8iSfunLOx313tlwwJgao/s40/youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrk7lJ_Fnu29aFnUP2gNOamQfhl007DzY1NH2Woet_CGrT-1PH20p0poxxEIuobrWXxCcK4IgSuwCt4UqQ36rhaYk3h71BGn9_Z2lQuMQEc86DVQoKTuM3vWqnzNff26uQiH1RI-N2K2Mg/s40/feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbDiUwmTE3wcyyR9McU8R8K1WrMIzejMQsZ8socPe6HPnDWnHXsvoG9rd2kfD2eRw_5nyBKDebCC0huSfZUwdxo79kkuBoDD8_p5NyFyxYeS6jDe3FY7e64_UH0C2YwNzfMm_mFNtRFwNp/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinod6TxQv9XZEGzyZ67W1ofs40DTGa_5dkvcD5jFlj4ZFGm0FpiqU_SHzPlqjrKHVO1h7Jisbsf8B0lVghY51UDiJcGO9zx2gvsyuNpDpQCoNeVo72Gg1IC24jkjjvbGkdw1PJf_lA9Sok/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvJnZ20gKaacCPI9q61MWTT2z82oHiCKbBF1n3Ch34Ru5qZ6LbvuBom3P6kYeo0PIlah4-5OA-FXnipI77U6EKcoA8lAo3T1ahcYuV4kwRu8yfkOXf-x9rMj1Ll8dniVRGYcnmSxOPJwW/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM83FjDgEoluCsPwluBjojAuMXtNAyZ5kM3fLtb2pENjUlslBLPJ6p1irXEtM4pnEKBLKmzfeNRNW1zugxsD9qKZom7cFwX26cjeYtxNYX5KG6UPJocctUFXUbEsnC_rnAxdc8XFMQ9AE/s45/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLx6GGvrSrl-srb8_rxE8KccdzyDWfEHlsIYhihhyKyMx2oEL68frIf0DxJczVdvhg0THLWuTzuHcPD_JU0EdS9JocNCegks2aZmjcxW7tpPOZJ78lqwilHnw7yaUibgMOMRi1mEi1Io/s45/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiREUHEiy0VsJzwF_E_LLqogkGKNBwhpNnvBlpXh3IkASvpx2xViCm_077oGndBJAIcQ8oqR6k6AHPPZZdUq4fJZLKn6BM5Q1afIgomucMl8u1Wi8YF9JibzEu8iSfunLOx313tlwwJgao/s45/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrk7lJ_Fnu29aFnUP2gNOamQfhl007DzY1NH2Woet_CGrT-1PH20p0poxxEIuobrWXxCcK4IgSuwCt4UqQ36rhaYk3h71BGn9_Z2lQuMQEc86DVQoKTuM3vWqnzNff26uQiH1RI-N2K2Mg/s45/feed.png) no-repeat center center #e9a01c}
</style>

6. Kaydet deyin ve bloğunuza bakın. Tebrikler! Hepsi bir arada sosyal paylaşım butonlarınız sidebarınıza eklendi.

Destek için bloğumu izlemeyi unutmayın. Yorumlarınızla yazılarıma güzellik katın. Teşekkürler.

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

14 Yorum
avatar

Emeğinize sağlık çok güzel bir paylaşım en kısa zamanda uygulacagım. TEŞEKKÜRLER.

Yanıtla
avatar

Emeğinize sağlık çok güzel bir paylaşım en kısa zamanda uygulacagım. TEŞEKKÜRLER.

Yanıtla
avatar

elinize sağlık adresin değişikliği dıkkatımı cektı çekişilim var yazmıssınız bır blogger arkadasa geldim ne var acaba bakkal blogda nasıl oluyormus dıye buldugum da baya sasırttı acıkcası :) sankı boyle herseyden varmıs gibi geldi ama siz baya ham madde üstünden gidiyorsunuz :) Cok faydalı olmus :)
ELinize sağlık :)

Yanıtla
avatar

Widget olarak eklenmesi çok iyi olmuş. Çok şık teşekkürler.

Yanıtla
avatar

Ben teşekkür ederim Mustafa Bey.

Yanıtla
avatar

Blogger bloglarla ilgili eklenti, ipucu ve şablon satıyorum bedavaya :)

Yanıtla
avatar

hahah :) benımde bı sorunum var ama oa da cozum var mı acaba :) benım etıketlerım blogda baslıgın hemen altında ama 2. satıra kaymıyo bı turlu tek sıraya sıgdıgı kadar oluo bı cozumu var mı bakkal :)

Yanıtla
avatar

alt satıra geçmek için
tagı kullanılır. Yani hangi linkten sonra alt satıra geçmek istiyorsan bu tagı sonuna ekle sonra yeni link yolunu yaz. Şöyleki: <a dir='ltr' href='http://balinkokusu.blogspot.com.tr/search/label/Y%C3%BCz%20ve%20Cilt'>Yüz ve Cilt</a>
</li> <br />

Yanıtla
avatar

<br /> bu tag alt satıra geçmeye yarar.

Yanıtla
avatar

deniyrum hemen bakıcam olursa çok iyi olur mini mini yazılar kaldı sıkıldım :(

Yanıtla
avatar

ama html duzenleme de benım lınkler sızdekı gıbı cıkmıyo lınkler kodlarda gorunmuyo o nedenle beceremedım yıne de tesekkur ederım :) Widgerın kodlarını eklıcektım ama yoruma ızın verılmedı :)

Yanıtla
avatar

yorumlarda kod vs eklemek için aşağıdaki yönergeye uyun o zaman eklersiniz :)

Yanıtla
avatar

ben bu linki sizden aldım zaten bulamadınız siz. isterseniz mail yoluyla ulaşın halledelim.

Yanıtla
avatar

Denedim ama uzun geldi galiba benimki olmadi...
Benim adresim oldugunu farkindayim bisi daha deniyim pcden sonra mail atiyorum :)

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔