Hover efektli sosyal medya butonları eklentisi

08 Ekim, 2017
Tema değişikliğinin ardından sosyal medya sayfaları için butonların nasıl Blogger bloglarına ekleneceğinden bahsetmiştim. Bu işlem oldukça basit bir şekilde, içerik hazırlarken kullandığımız editör sayfasında yapılıyordu. Bu yazımda ise yaptığımız sosyal medya butonlarına hover effect yani mouse ile üzerine gelince belirginleşen özellikler ekleyeceğiz.
Hover efektli sosyal medya butonları eklentisi
Blogger için sosyal medya butonları nasıl yapılır?
Bir önceki içerikle hazırladığımız sosyal medya butonlarının görünümü şu şekildeydi:
Hover efektli sosyal medya butonları eklentisi
Şimdiki sosyal butonlar eklentisinin görünümü ise bu şekilde:
Hover efektli sosyal medya butonları eklentisi
Zaten canlı görünümü sağ tarafta sidebar kısmında görebilirsiniz.

Hover efektli sosyal medya butonları eklentisi
Önizleme
Şimdi gelelim bu hover efektli sosyal medya buton eklentisini blogumuza eklemeye. İlk olarak Blogger kullanıcı panelinde sağ tarafta yer alan Yerleşim kısmına ulaşıyoruz. Daha sonra eklentiyi eklemek istediğimiz alan için Gadget Ekle seçeneği ve daha sonra açılan seçeneklerden HTML/ JavaScript'i tercih ediyoruz ve aşağıdaki kodları bu alana ekleyip kaydediyoruz.
<style>

p#hb_socialicons img {

    -moz-transition: all 0.4s ease-in-out;

    -webkit-transition: all 0.4s ease-in-out;

    -o-transition: all 0.4s ease-in-out;

    -ms-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

}

p#hb_socialicons img:hover {

-moz-transform: rotate(340deg);

    -webkit-transform: rotate(340deg);

    -o-transform: rotate(340deg);

    -ms-transform: rotate(340deg);

    transform: rotate(340deg);

}

</style>

<center><p id="hb_socialicons">

<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>

<a a target="_blank" href="https://plus.google.com/+Blogtecrubem" rel="nofollow" imageanchor="1" style="margin-left: -0.3em; 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>

<a a target="_blank" href="https://www.instagram.com/blogtecrubem/" rel="nofollow" imageanchor="1" style="margin-left: -0.3em; 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>

<a a target="_blank" href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=5580794704114414739" rel="nofollow" imageanchor="1" style="margin-left: -0.3em; margin-right: 0em;"><img alt="Blog Tecrübem Blogger Okuyucu" border="0" data-original-height="32" data-original-width="50" src="https://4.bp.blogspot.com/-5qxP6PJJf2w/Wbm-xN-_oVI/AAAAAAAACo0/lsu51Qdy8DMasgm1Jl3VuPl7k-tp2wg0wCLcBGAs/s1600/Blogger.svg.png" title="Blog Tecrübem Blogger Okuyucu" /></a>

<a a target="_blank" href="https://twitter.com/blogtecrubem" rel="nofollow" imageanchor="1" style="margin-left: -0.3em; 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>

<a a target="_blank"  href="https://www.youtube.com/channel/UCnH2mMih3tBcmWCsZrSt9jA?sub_confirmation=1" rel="nofollow" imageanchor="1" style="margin-left: -0.3em; 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></p></center>
Farklı renklerle belirginleştirdiğim kısımları kendi sayfalarınız için tekrar düzenlemeyi unutmayın. Eğer içlerinden her hangi bir butonu çıkarmak isterseniz eğer,
<a...ile başlayan ve ........</a>
 ile biten kod satırını silmeniz gerekir.
Hover efektli sosyal medya butonları eklentisi
Konuyla ilgili sorularınız olursa yorum yaparak bana bildirebilirsiniz. 

12 yorum:

  1. Hem yer kaplamiyor hemde şekilli.
    Elinize sağlık hocam.

    YanıtlaSil
  2. Ne güzelmiş gerçektem cıvıl cıvıl :) Yapabilenler kaçırmazlar sanırım. Elinize saglik

    YanıtlaSil
  3. Bu anlatılan da güzel ancak ben uzuuuuun zamandır müzik eklentisi yayını bekliyorum. :) Eskiden bazı sayfalar vardı, istediğimiz şarkıyı minicik sevimli ikoncukla beraber yayınlayabiliyorduk. Şimdi o sayfaları bulamıyorum. Sadece youtube dan müzik yayınlamak hoşuma gitmiyor. Aynı şekilde çektiğimiz bir videoyu da eklemek için yapabileceğimiz bir şey var mı? :)) zor sordum biliyorum.

    YanıtlaSil
    Yanıtlar
    1. Video yüklemek ve paylaşmak için en iyi sistem YouTube diyebilirim. Bunun dışında direk bilgisayardan Blogger'a video yükleme seçeneği var ama çok uzun sürüyor. Müzik eklentisi için en geç bir iki güne bir paylaşımda bulunurum :)

      Sil
  4. Hocam emeğinize sağlık. Siteme ekledim çok da şık durdu. Ancak Pinterest içinde ekleyecektim ama bir türlü kod bulamadım aynı şekilde pinterest logosunuda paylaşma ihtimaliniz var mı? Teşekkür ederim...Selam ve Dua ile...

    YanıtlaSil
    Yanıtlar
    1. Rica ederim. Tabi, Pinterest için alt kısımda sıralanan Facebook, Google+, ... listesine Pinterest'i eklemeniz gerekir. Örneğin Facebook içeren kod satırını kopyalayın ardından istediğiniz kısma yapıştırıp ve Facebook yerine Pinterest ile ilgili bilgileri ekleyin. Daha sonra logo görseli için ise şu (https://i.hizliresim.com/Wqygb4.png) linki ekleyebilirsiniz.

      Sil
    2. Hocam teşekkür ederim... Ben sadece uygun fotoğrafı bulmakta sıkıntı çekmiştim onu da siz link verdiniz güzel oldu...Selam ve Dua ile...

      Sil
  5. Çok teşekkürler bu şekilde yapmak çok güzel olacak gibi.

    YanıtlaSil
    Yanıtlar
    1. Hareketli butonlar, mutlaka ilgi çekecektir :)

      Sil

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 · İletişim · Yasal Uyarı