Metro Tarzı Sosyal Medya Eklentisi

Windows 8 ile birlikte hayatımıza giren “METRO” tarzı web dünyasındaki tasarımlara da yansıdı ve kısa sürede metro tarzında pek çok tema ve eklenti tasarlandı. Ben Windows 8’i sevmediğim gibi bu metro tarzına da pek ısınamadım. Bu yüzden metro tarzı tasarımlara hiç yönelmedim. Ancak bazı blogcular tarafından tercih edildiğini görünce metro tarzına benzer görünümü olan bir sosyal medya eklentisi paylaşmaya karar verdim.

 

Sosyal medyanın önemi hakkında daha önce çok şey yazdığım için tekrarlamak istemiyorum. Söyleyebileceğim tek şey eğer hala sosyal medya hesaplarınız yoksa hemen birer tane açın ve ziyaretçilerinizi bu hesaplara yönlendirin.

 

İşte metro tarzı bu sosyal medya eklentisi dikkat çekici olması sebebiyle blogunuzu ziyaret eden kişilerin, sosyal medya hesaplarınıza kolaylıkla erişmesini sağlayacaktır. Bu eklentinin, sosyal medya hesaplarınızdaki takipçi sayınızı arttıracağından emin olabilirsiniz.

 

Metro Tarzı Sosyal Medya Eklentisi

 

Metro tarzı sosyal medya eklentisini blogunuza eklemek çok basit. Kırmızı ile gösterdiğim yerleri kendinize göre düzenledikten sonra Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript gadget yolunu izleyin ve kodları kutuya yapıştırın.

 

<!--Blog Hocam Metro Tarzı Sosyal Medya Eklentisi-->
<div align="center"><table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"><tbody><tr>
<td><center><a href="https://www.facebook.com/BlogHocam" rel="nofollow" target='_blank'><img border="0" alt="contact" width="125" src="https://lh4.googleusercontent.com/-Uu5LNxFFtGI/UdvXk5vdixI/AAAAAAAAI6U/oCp_4IIUPM8/s135/facebook.png" height="125"/></a></center></td>
<td><center><a href="https://plus.google.com/108761595756468128383" rel="nofollow" target='_blank'><img border="0" alt="contact" width="125" src="https://lh6.googleusercontent.com/-MpPsaHsrM-k/UdvXk5jHmlI/AAAAAAAAI6o/bBiYc4IeCLI/s135/google.png" height="125"/></a></center></td></tr><tr>
<td><center><a href="http://feeds2.feedburner.com/BlogHocam" rel="nofollow" target='_blank'><img border="0" alt="contact" width="125" src="https://lh4.googleusercontent.com/-GMNs6N80cd4/UdvXk0NR9QI/AAAAAAAAI6c/2KHe8pUNljY/s135/rss.png" height="125"/></a></center></td>
<td><center><a href="http://www.twitter.com/BlogHocam" rel="nofollow" target='_blank'><img border="0" alt="Contact" width="125" src="https://lh5.googleusercontent.com/-qtGt7HDv2yM/UdvXlLqVA7I/AAAAAAAAI6g/kW4gQ8nYn-M/s135/twitter.png" height="125"/></a></center></td></tr>
</tbody></table><table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"><tbody>
</tbody></table></div>
<!--Blog Hocam Metro Tarzı Sosyal Medya Eklentisi—>

 

Kodlardan da farkedeceğiniz gibi tablo sistemi kullanılarak oluşturulmuş bir eklenti. Sosyal medya butonlarının her biri 125px genişliğinde ve hücreler arasında boşluk var. Dolayısıyla eğer sidebar genişliğiniz 265px’den daha dar ise eklenti taşacaktır. Bu durumda butonların genişliklerini 125px’den, tablonun genişliğini ise 265px’den küçük yaparsanız eklentiyi sidebara sığdırabilirsiniz.

 

Herkese hayırlı ramazanlar!

13 yorum:

  1. Teşekkürler, hayırlı ramazanlar...

    YanıtlaSil
  2. Eklenti için teşekkürler, hayırlı ramazanlar bloghocam.

    YanıtlaSil
  3. Sayın blog hocam,
    Eklentiyi bloga ekledim.Ancak blog'umun renkleri birbirine girdi.Yukarıda söylediğiniz sidebar'ın genişliğinden olduğunu düşünüyorum. Kodları düşürmeme rağmen bir türlü düzenleyemedim. Yardımcı olabilirmisiniz?
    eticaretyolcusu.blogspot.com
    Teşekkür ederim.

    YanıtlaSil
  4. hocam kodlarda bir hata var gibi.eklenti çalışıyor ama diğer bütün eklentileri görünmez hale geliyor.
    ya da ben bir hata yapıyorum.

    YanıtlaSil
  5. @hepsi nefis
    Sanırım siz bir hata yapıyorsunuz.

    YanıtlaSil
  6. çok teşekkür ederim hocam.

    YanıtlaSil
  7. Ben pek anlayamadim, bunun yazilarin altindaki twit,face butonlarindan bir farki mi var
    Cevabinizi bekliyorum :-)

    YanıtlaSil
  8. Çok teşekkürler... Sizle birlikte blogumu güzelleştiriyorum. :-) Bloguma göz atabilirsiniz : http://uzaydakisirlar.blogspot.com/

    YanıtlaSil
  9. Yerleşim > Gadget Ekle > den sonra HTML/JavaScript gadget kısmını bulamıyorum. nasıl ekleyeceğiz

    YanıtlaSil
  10. tesekkurler guzel paylaşım ...

    YanıtlaSil
  11. MÜKEMMEL.ÇOK ŞIK.FAKAT BUNU NASIL İNGİLİZCE YAPABİLİRİM.EN KISIMLARINI TR YAPTIM AMA OLMADI.

    YanıtlaSil
  12. @COH PARTA
    Kodlardaki png uzantılı dosyaları bir resim düzenleyicide açarak türkçe kısımların yerine ingilizce yazmalı, daha sonra bunları bir hosta upload ederek yeni linkleri eskisiyle değiştirmelisiniz.

    YanıtlaSil

Blogger tarafından desteklenmektedir.