Hover efektli sosyal medya butonları eklentisi - Vektörel Çizim indir - Kişiye Özel Hediye

Güncel Yayınlar

Vektörel Çizim indir - Kişiye Özel Hediye

Vektörel Çizim indir - Kişiye Özel Hediye

Post Top Ad

8 Ekim 2017 Pazar

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

Hiç yorum yok:

Yorum Gönder