Blogger Sosyal Medya Profil Butonları

Kodları yabancı bir siteden aldım.Aslında bu kodların yanında abonelik formu ve  reader sayacı bulunmaktaydı.Sadeleştirerek sizlere sosyal medya butonları'nı sunacağım.Dileyen internetten araştırıp orijinal halini bulabilir.



Kodlarımız CSS3 ile oluşturulmuş ve butonlarımıza hover efekti verilmiş.Hemen anlatıma geçiyorum.

Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript

yukarıdaki işlemleri yaptıktan sonra aşağıdaki kodlarımızı gadgetımıza ekleyelim.

<style>ul.social {  list-style: none;  margin: 10px;  overflow: hidden;}.social li {  float: left;  background: none !important;  padding: 0 !important;  margin: 0 8px;}.social li a {  display: block;  width: 50px;  height: 40px;  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc4O054koPAbtpfHtYzNjdHraphtClE908oO6M3pd8SkrwW46H_5zIfbpOGz3iAlho6WPB4_oKCfR5LhvSn-g3xtpVXxgt-0DoMcEJ75NNHP93Gl-ztAeua-D7fYlUJR3eeTbgJqRBqDs/s1600/social.png") no-repeat transparent;  text-indent: -99999em !important;-webkit-transition: ease-in 0.15s all;  -moz-transition: ease-in 0.15s all;  -o-transition: ease-in 0.15s all;  -ms-transition: ease-in 0.15s all;  transition: ease-in 0.15s all;}.social li a:hover {  padding: 0 !important;}.social li.rssicon a {  background-position: 0 0;border-right: 1px solid #e6e6e6;}.social li.twicon a {  background-position: -50px 0;border-right: 1px solid #e6e6e6;}.social li.fbicon a {  background-position: -100px 0;border-right: 1px solid #e6e6e6;}.social li.gicon a {  background-position: -150px 0;}.social li.rssicon a:hover {  background-position: 0 -50px;border-right: 1px solid #e6e6e6;}.social li.twicon a:hover {  background-position: -50px -50px;border-right: 1px solid #e6e6e6;}.social li.fbicon a:hover {  background-position: -100px -50px;border-right: 1px solid #e6e6e6;}.social li.gicon a:hover {  background-position: -150px -50px;}
</style>
<div class="subicons"><ul class="social">
<li class="fbicon"><a href="http://facebook.com/websehri" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="twicon"><a href="http://twitter.com/ardaerakman" rel="nofollow" target="_blank">Twitter</a></li>
<li class="gicon"><a href="https://plus.google.com/111946372959768014016" rel="nofollow" target="_blank">Google +</a></li>
<li class="rssicon"><a href="http://feeds.feedburner.com/aerakmanBlog" rel="nofollow" target="_blank">Rss</a></li></ul>
</div>

Uyarı:Benim vermiş olduğum sosyal medya profil linkleri yerine kendi profil renklerinizi yazmanız yeterli olacaktır.Zaten o kısımları kırmızı ile gösterdim.

Eğer işlemlerimizi sorunsuz yaptıysanız,sosyal profil butonlarımız kullanıma hazırdır.İyi bloglamalar.

Devamı »

Sosyal Medya Butonları v3

Merhabalar,Sosyal Medya Butonları'nın 3.sürümü ile karşınızdayım :) v2 arasında büyük farklar var diyebilirim arkadaşlar :) Sözü fazla uzatmadan biraz yeniliklerden bahsedelim.
Sosyal Medya Butonları v3'ün Özellikleri:

1-Başlık yazısı ve diğer yazılar ortalandı.
2-"Gönder" butonu eklendi.
3-Yeni sosyal ağ butonları eklendi.
4-Gereksiz kodlardan arındırıldı.
5-Abonelik işlemi yeni "pop-up" pencereye taşındı.

Değiştirilmesi gereken yerler belirli bu yüzden yazmıyorum...




Sosyal Medya Butonları v3 Kodları:

<div id="contentright"><div class="clearfix" id="sidebar"><div class="widget1 subscribebox" id="subscribebox-widget-3"><div class="widget-wrap"><h2 class="widgettitle"><span>ærakman | Blog'a Abone Ol</span></h2>
<center><div class="intro">
<p>Bloguma Abone Olun,Yeni Yazılarım Mailinize Gelsin!</p><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">
<p class="email-form">                                    <input class="sub" name="email" type="text" />                                 <input alt="submit" class="subbutton" src="http://img517.imageshack.us/img517/3158/blankdb.gif" type="image" /></p><center style="font-weight: normal; "><input type="hidden" value="aerakmanBlog" name="uri" /><input type="hidden" name="loc" value="en_US" /><input type="submit" value="Gönder" /></center>
<div style="clear: both;"><small>Mailinize gelen onay linkine tıklamayı unutmayın.</small></div>
</form><div class="intro">
</div>
                   
<center style="font-weight: normal; "><div class="sub-icons">
<a href="http://feeds.feedburner.com/aerakmanBlog" title="RSS Abone Ol"><img align="top" alt="RSS Abone Ol" class="rss-sub" src="http://yemre.com/wp-content/themes/yemrev2/img/sosyal/rss.png" /></a> <a href="http://www.twitter.com/ardaerakman" rel="external" target="_blank" title="Twitter da Takip Et"><img align="top" alt="Twitter da Takip Et" class="twitter-sub" src="http://yemre.com/wp-content/themes/yemrev2/img/sosyal/twitter2.png" /></a> <a href="http://www.facebook.com/websehri" rel="external" target="_blank" title="Facebook ile Beğen"><img align="top" alt="Facebook ile Beğen!" class="facebook-sub" src="http://yemre.com/wp-content/themes/yemrev2/img/sosyal/facebook2.png" /></a>
</div></center></div></center></div></div></div></div>

Nasıl Ekleriz ?

Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript gadgetını seçin ve verdiğim kodları bu alana ekleyin.

Devamı »