Hover efektli sosyal medya butonları eklentisi

Hover efektli sosyal medya butonları eklentisi

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.

Bir önceki içerikle hazırladığımız sosyal medya butonlarının görünümü şu şekildeydi:

Şimdiki sosyal butonlar eklentisinin görünümü ise bu şekilde:

Zaten canlı görünümü sağ tarafta sidebar kısmında görebilirsiniz.

Ö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://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>

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHThxihmw4Obac3TPMwWf6tDenRkd_G1PpoPz0UgZ6vQykp8p7qgqrR2_7BwV3Ao7IU7sSopsCZEGJbmE93lWWfrqCstUMDYuGsIHENrHqGjmnUUR70vCPHSh5ATTkCmC6nckPPHhuQfo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtq_rXc95XDAuouUnIshGj2e2TLnm5AUexiCj97QUr-o8tzo_EdVEWURMalRKJ6iULTyPsBUKYBHxEzJpVBUeSp2Af8mKVtum9vuTYk2pk1q5uxbSi8WPn1KxPrH0LbNHHNEPL_FN1JI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxdUeJ8kYrCzT0yCB43O4q2WONPt-vZwVMD4SmIy1duDoqRtGZ4YalDJZWAwUjaxFu_gnNV_sQtxlW0i_lBpE4s9KrgIttybYUTWie-XLnBWtsjIq1I0nn3DY8v4S-F-iLm6Av4UrRa7I/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEu4lZO7Z929YfsvoDGu5a8zqRn4ELxNb3036zvWFHqaO3AWc-sWOzxBai8M11fbJcctjwqiuLo2rbs2fMoRBBhKUCuwkMnys58Ze4RYTnEvn1RZer6ih2FfZA_LdrAegGfxJG7gs96Gg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUXQlrdgMoyiWEnqLaXyg4_09n7sOAE8Cln_bfSnhi7Pks7FfiE-9GQpks6b7UmnT1mzmfCvyYr9MdqGbiY62414nXbPet3b3U_OSHEglg9Za3lOffVvl8TMIYF4X1X_xJ7Iko7cSllM/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.

Konuyla ilgili sorularınız olursa yorum yaparak bana bildirebilirsiniz.