Hover Efekti Olan Sosyal Medya Paylaşım Butonları Yapma

Farklı ve hareketli bir sosyal medya paylaşım butonu ile beraberiz. Bu yazımızda Hover efekti eklenmiş sosyal medya butonlarını sizinle paylaşıyoruz. Oldukça basit bir yöntemle oldukça kullanışlı ve fark yaratan butonlara sahip olabileceksiniz.

Önce blogger yönetici paneline giriş yapıyoruz. Daha sonra yerleşim sekmesinden gadget ekle yazısına tıklıyoruz. Hemen ardından açılacak olan sayfada html / javascript kod kısmına tıklayarak yeni bir eklenti eklemek için ilk adımları atmış oluyoruz.

Sosyal Medya Butonları HTML Kodları – Blogger

Sıra geldi ekleyeceğimiz kod’a. Aşağıdaki kodu kopyala yapıştır yaparak html kısmına ekliyoruz. Eğer kodların nasıl olduğunu merak ediyorsanız, aşağıdaki kodları kopyaladıktan sonra HTML kod deneme sayfamıza giderek kodu deneyebilirsiniz.

Html Önizleme Sayfası

.social_Wrap li, .social_Wrap li a{color: #000000;font-size: 150%;display: inline-block;}

.social_Wrap ul li:nth-child(1) .fa:hover{color:#425F9C;} .social_Wrap ul li:nth-child(2) .fa:hover{color:#28A9E2;} .social_Wrap ul li:nth-child(3) .fa:hover{color:#D01717} .social_Wrap ul li:nth-child(4) .fa:hover{color:#C72123}
.social_Wrap ul li:nth-child(5) .fa-stumbleupon-circle:hover{color: #EB4822;} .social_Wrap ul li:nth-child(6) .fa:hover{color:#E87B37}

.social_Wrap .fa{
margin:0px 2px;
transition: color 0.5s linear 0s;
list-style:none;
animation: trendingWidgets 1s linear 0s infinite alternate;
}
@-webkit-keyframes trendingWidgets {
from {transform:rotate(25deg;) }
to { transform: rotate(-25deg);} }
@-moz-keyframes trendingWidgets {
from {transform:rotate(25deg;) }
to { transform: rotate(-25deg);} }
@keyframes trendingWidgets {
from {transform:rotate(25deg;) }
to { transform: rotate(-25deg);} }

.social_Wrap .fa:hover{
animation-play-state:paused;
transform: rotate(0deg);
font-size: 160%;
}

Kodu kopyalayıp yapıştırdıktan sonra /style yazısının altında yer alan bazı alanların doldurulması gerekmektedir. Örneğin your-facebook-url yazan kısma kendi facebook url’nizi yazmalısınız. Aynı şekilde diğer sosyal medya adreslerinizi de tek tek ekleyin.

Artık sizinde hareketli ve fark yaratan sosyal medya butonlarınız var. Soru ve görüşleriniz için yorum kısmını kullanabilirsiniz.