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

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.

Ö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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH4wcRPFlP7cxLM_1HuRo1DVp6CfFhcFjKFH10bCD5vs6-r4Ppd54CMrhS4s6O3j5J2r9N-QIlUYbVyDNImJ2Jwn0IN9ALNj8YV70UmVjCa0jfawhzKRxz5eV10CWqIB5KJs2l5UQgqhE/s1600/sosyalmedya+buton.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH4wcRPFlP7cxLM_1HuRo1DVp6CfFhcFjKFH10bCD5vs6-r4Ppd54CMrhS4s6O3j5J2r9N-QIlUYbVyDNImJ2Jwn0IN9ALNj8YV70UmVjCa0jfawhzKRxz5eV10CWqIB5KJs2l5UQgqhE/s320/sosyalmedya+buton.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRz0HiPqfyFpOkWl_PhDF3YfMadBSEevRYm9d4g6X60q4qsyd9a-nsF-CduhLbUxtWV_ggNR9XnQH_WpczY6c-fwmcMJYhn3R3pTTUx_d7RZtakp-1p4W9CO-tRw8821KWoPoYEGBPdSs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHThxihmw4Obac3TPMwWf6tDenRkd_G1PpoPz0UgZ6vQykp8p7qgqrR2_7BwV3Ao7IU7sSopsCZEGJbmE93lWWfrqCstUMDYuGsIHENrHqGjmnUUR70vCPHSh5ATTkCmC6nckPPHhuQfo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtq_rXc95XDAuouUnIshGj2e2TLnm5AUexiCj97QUr-o8tzo_EdVEWURMalRKJ6iULTyPsBUKYBHxEzJpVBUeSp2Af8mKVtum9vuTYk2pk1q5uxbSi8WPn1KxPrH0LbNHHNEPL_FN1JI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWv1nQNHW3bTNQ5sGwHQ7qT2mEDIGqgDDYooCPLu5TW2dMMQpjAdwDfWVaCeh2X4z4jyvgTtve5d1xr5K8QFIrl09CdfRRkxl4tNqIIp0diMAdSzn1n2eJU3nl-aSAzqdz7pRij3XqEsE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEu4lZO7Z929YfsvoDGu5a8zqRn4ELxNb3036zvWFHqaO3AWc-sWOzxBai8M11fbJcctjwqiuLo2rbs2fMoRBBhKUCuwkMnys58Ze4RYTnEvn1RZer6ih2FfZA_LdrAegGfxJG7gs96Gg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUXQlrdgMoyiWEnqLaXyg4_09n7sOAE8Cln_bfSnhi7Pks7FfiE-9GQpks6b7UmnT1mzmfCvyYr9MdqGbiY62414nXbPet3b3U_OSHEglg9Za3lOffVvl8TMIYF4X1X_xJ7Iko7cSllM/s1600/youtube-icon-1.png" title="Blog Tecrübem YouTube Sayfası" /></a></div>
<br />