Blogger için sosyal medya butonları nasıl yapılır?

10 Eylül, 2017
Blogger için sosyal medya butonları
Blogger için sosyal medya butonları
Blogger kullanıcılarının çoğu, blog sayfalarına sosyal medya butonları eklemekte. Tabi bu eklenti çoğu temada hazır olarak ta bulunuyor. Peki nasıl yapıldığı konusunda bir fikriniz var mı?

İçerik hazırlamak için kullandığımız Blogger editör sayfasında aslında bir çok eklenti oluşturabiliriz. Bu eklentilerden biri de sosyal medya sayfalarımızın takipçi sayısını arttırmak için oluşturduğumuz butonlar.
Blogger için sosyal medya butonları
Örneğin yukarıdaki gibi sosyal medya iconlarıyla bu eklentiyi oluşturmak mümkün. Yapılması gereken iconları görsel olarak editör sayfasına yüklemek ve her iconu sosyal medya sayfalarına yönlendirmek.

Detaylı olarak anlatırsak:

İlk olarak yayın ekler gibi "yeni yayın" butonuna tıklıyoruz. Ardından görsel aramalardan ya da farklı kaynaklardan eşit boyutlarda bulduğumuz sosyal medya iconlarını bu alana yüklüyoruz.

Daha sonra, önceden paylaştığım şu içerikle bu iconları yan yana sıralarıyoruz. Ardından sol üst köşede bulunan HTML butonuyla kodların yer aldığı kısıma ulaşıyoruz. Bir icon ya da görsel için görünecek kod aşağıdaki gibi olacaktır.
<a href="https://2.bp.blogspot.com/-I35tiZhnowM/WbMXg99_3PI/AAAAAAAACmw/SFLr0oSVZGYRP1O0n73jhIzanKbHFhrWQCLcBGAs/s1600/sosyalmedya%2Bbuton.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="74" data-original-width="325" height="72" src="https://2.bp.blogspot.com/-I35tiZhnowM/WbMXg99_3PI/AAAAAAAACmw/SFLr0oSVZGYRP1O0n73jhIzanKbHFhrWQCLcBGAs/s320/sosyalmedya%2Bbuton.png" width="320" /></a>
Bu kodlar arasında kırmızı renkle belirttiğim, görsele tıklayınca yönlendireceği sayfanın linki. Bu alana sosyal medya hesaplarınızın linkini eklemelisiniz.

Tüm bu işlemlerin ardından editör sayfasının HTML kısmında yer alan tüm kodları kopyalayıp yerleşim alanında yeni bir eklenti olarak blogunuza ekleyin. Tüm yapılması gerekenler bunlar.

Bu arada kendi blogum için oluşturduğum sosyal medya buton eklentisinin kodları:

<div class="separator" style="float: left; text-align: center;">
<a a target="_blank" href="https://www.facebook.com/blogtecrubem" rel="nofollow" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Blog Tecrübem Facebook Sayfası" border="0" data-original-height="32" data-original-width="50" src="https://1.bp.blogspot.com/-s_1Yzn7BAZc/WaiZiN6xm-I/AAAAAAAACkM/KJNvHGFp5W83x7Q08C7xvuNTW4ipGhcwACLcBGAs/s1600/facebook-icon-1.png" title="Blog Tecrübem Facebook Sayfası" /></a></div>
<div class="separator" style="float: left; text-align: center;">
<a a target="_blank" href="https://plus.google.com/+Blogtecrubem" rel="nofollow" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Blog Tecrübem Google+ Sayfası" border="0" data-original-height="32" data-original-width="50" src="https://2.bp.blogspot.com/-8mzlZqAFrRw/WaiZiOdBPUI/AAAAAAAACkU/7D0ItIWDD849usu2nSJqoqARq9PHlurfACLcBGAs/s1600/googlep-icon-1.png" title="Blog Tecrübem Google+ Sayfası" /></a></div>
<div class="separator" style="float: left; text-align: center;">
<a a target="_blank" href="https://www.instagram.com/blogtecrubem/" rel="nofollow" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Blog Tecrübem Instagram Sayfası" border="0" data-original-height="32" data-original-width="50" src="https://4.bp.blogspot.com/-80irJ7tisDE/WaiZiJhJ2DI/AAAAAAAACkQ/RapZBUn7y4sTGkHVhWGFxylHEXSAKPhZgCLcBGAs/s1600/instagram-icon-1.png" title="Blog Tecrübem Instagram Sayfası" /></a></div>
<div class="separator" style="float: left; text-align: center;">
<a a target="_blank" href="https://feeds.feedburner.com/blogtecrubem" rel="nofollow" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Blog Tecrübem RSS Sayfası" border="0" data-original-height="32" data-original-width="50" src="https://2.bp.blogspot.com/-LGkJ446WpAE/WaiZimWjK9I/AAAAAAAACkY/Og-TQfDN18kgHL5ILRf-HlzN_VuIL5HdQCLcBGAs/s1600/rss-icon-1.png" title="Blog Tecrübem RSS Sayfası" /></a></div>
<div class="separator" style="float: left; text-align: center;">
<a a target="_blank" href="https://twitter.com/blogtecrubem" rel="nofollow" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Blog Tecrübem Twitter Sayfası" border="0" data-original-height="32" data-original-width="50" src="https://2.bp.blogspot.com/-Lt5zcwCBkLo/WaiZiq47p6I/AAAAAAAACkc/QoIml_RTBg0uOCz2mdO_W5IzOTINOAm0wCLcBGAs/s1600/twitter-icon-1.png" title="Blog Tecrübem Twitter Sayfası" /></a></div>
<div class="separator" style="float: left; text-align: center;">
<a a target="_blank"  href="https://www.youtube.com/channel/UCnH2mMih3tBcmWCsZrSt9jA?sub_confirmation=1" rel="nofollow" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img alt="Blog Tecrübem YouTube Sayfası" border="0" data-original-height="32" data-original-width="50" src="https://4.bp.blogspot.com/-hMVzXe_s1zU/WaiZimy8dTI/AAAAAAAACkg/Jg5tx6G_vnsXUVki4I_wq3-FGvzNfqkwQCLcBGAs/s1600/youtube-icon-1.png" title="Blog Tecrübem YouTube Sayfası" /></a></div>
<br />

4 yorum:

  1. Faydalı bir bilgi. Teşekkür ederim.

    YanıtlaSil
  2. Genelde temalarda hazir olarak geliyor ve şık oluyorlar. Yani gerek kalmıyor.

    Lakin hazir temalarinda bir gün patlak vereceği veya eksik kalacagi noktalar olacaktir. Baska temalara geçtiğimiz belki bu özellik olmayabilir.

    Onun icin herkes blog arsivi açıp isine yaramasa dahi suan icin daha sonrasinicin yarayabilecegi dusuncesi ile kaydetneli diye düşünüyorum.

    Eline sağlık üstad

    YanıtlaSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın, aksi taktirde yorumunuz silinir.
3. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2016 - 2019 www.blogtecrubem.com · Duyuru · İletişim · Yasal Uyarı