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.

• DEMO

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.

Paylaş Facebook

Paylaş Twitter

Paylaş Google+

Paylaş LinkedIn