Sosyal Medya Butonları

Merhabalar,bugün gerçek anlamı ile blog ile ilgilenemedim öyle boş boş gezindim internette ve siteyi geliştirebilmek için blogger widgetslerine bakınıyordum birden yabancı bir site ile karşılaştım ve bu kodları gördüm orada hemen aldım güzelce editledim,fazlalık kodlardan arındırdım ve ortaya güzel bir şey çıktı.
Bu kodları sizin ile paylaşmak istiyorum umarım hoşunuza gider :) Tabii kodda değişecek alanlar var bunları da anlatacağım :) Öncelikle bu kodlarımızın görsel halini bir görelim!

DEMO

Ben şu anlık böyle yaptım siz daha da geliştirebilirsiniz :)

Nasıl Ekliyoruz?

Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript gadgetını seçiyoruz ve aşağıdaki kodları yapıştırıyoruz.

<style> .mbtbar{width: 100%; float: left;} .mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;} .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;} .mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;} .mbtbar .subicons a{text-decoration: none; color:#333333;} .mbtbar .subicons a:hover{text-decoration: underline; color:#333333;} .mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/24/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/24/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .twittericon{background: url(http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/24/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;} .mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;} .mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-ZtXRLHYBXiYT8nwX0sE7yEb0Rp-RHWX-XSk_5wRL0lH-NSh2JRlHiU7QmzUFbQsveOWsYHCddN1IKPl57s-Jw_LnLTxaefmUjFb_rGaFZpNVFwxqRSLnxU3EgRnhh7vQvyv7cq2lH4/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; } .mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;} .mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} </style> <!--[if IE 7]> <style> .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; } .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; } </style> <![endif]--> <div class="mbtbar"><div class="count">Blogumu <span class="bigcount">+100</span> kişi takip ediyor!</div><div class="subicons"><div class="rssicon"><a href="http://aerakman.blogspot.com/feeds/posts/default" target="_blank">RSS Abone O</a>l</div><div class="fbicon"><a href="http://www.facebook.com/websehri" target="_blank" rel="nofollow nofollow nofollow nofollow">Facebook'ta Beğen</a></div><div class="twittericon"><a href="http://twitter.com/ardaerakman" target="_blank" rel="nofollow nofollow nofollow nofollow">Twitter da Takip Et!</a></div></div> <div class="emailsub"> <div class="emailicon">Yeni Yazılarım E-Posta Adresinize Gelsin</div> <div class="emailupdatesform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=aerakmanBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput-" name="email" value="E-Posta Adresinizi Yazınız" type="text" onblur="if (this.value == '') {this.value = 'E-Posta adresinizi yazınız...';}" onfocus="if (this.value == 'E-Posta adresinizi yazınız...') {this.value = '';}"><input value="feedburnerhesabinizinadi" name="uri" type="hidden"><input value="Gönder" class="joinemailupdates-" type="submit"></form></div></div></div>

Değiştirmeniz gereken yerler standart ama yine de söyleyelim :)

www.facebook.com/websehri yerine kendi facebook kullanıcı adınızı yazın.
www.twitter.com/ardaerakman yerine kendi twitter kullanıcı adınızı yazın.
aerakmanBlog yazan yere ise kendi feedburner kullanıcı adınızı yazıyorsunuz.