Mybb güncel 2022 Hoş Sosyal Paylaşım Butonları (Css)

ID: 9159 Kategori: MyBB Eklentiler & Modifikasyonlar Konu Sahibi: teknoloji 0 Yorum 4 Okunma
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Mybb güncel 2022 Hoş Sosyal Paylaşım Butonları (Css)
ChromaX Theme
Yönetici
Kurucu Üye
*******
11
konular
12
mesajlar
Aug 2022
Kayıt Tarihi
2
Forum Puanı

Puan: 7.37 TL
Ürünler: (Ürünleri görüntüle)
Teşekkür Ettiği: 2Aldığı Teşekkür: 2
#1
08-19-2022, 04:27 PM
0
Merhaba arkadaşlar,

Bu konumda sizlere hoş ve güzel bir görünümü olan minimal tasarıma sahip siteleriniz için mükemmel bir sosyal paylaşım butonları paylaşacağım. Kodlar ücretsiz paylaşılmış ve üzerinde bir kaç oynama yaparak sitenize uygun hale getirebilirsiniz.

JavaScript Kodları:

Kod:
$(".d10-hide").hide();

$(".d10-trigger").click(function(){
  $(".d10-social").toggleClass("d10-collapse");
      if($(".d10-social").hasClass("d10-collapse")) {
    $(".d10-hide").fadeIn();
    $(".trigger").removeClass("ion-ios-redo-outline");
    $(".trigger").addClass("ion-ios-close-empty");
    $(".trigger").css("font-size","1.4em");
    $(".trigger").css("line-height","42px");
    }else {
    $(".d10-hide").fadeOut();
    $(".trigger").addClass("ion-ios-redo-outline");
    $(".trigger").removeClass("ion-ios-close-empty");
    }
});


Css Kodları:

Kod:
.d10-social {position:fixed; bottom:5px; right:20px; display:inline-block;}
.d10-social ul {list-style:none;}
.d10-social ul li {list-style:none; margin-top:10px;}

.d10-social ul li a {display:inline-block; color:#fff; border-radius:200px; width:55px; height:55px; background:rgba(0,0,0,0.2); text-align:center;}

.d10-social ul li a i.red {background:#F44336 !important;}
.d10-social ul li a i.blue {background:#2196F3 !important;}
.d10-social ul li a i.purple {background:#9C27B0 !important;}
.d10-social ul li a i.orange {background:#FF5722 !important;}
.d10-social ul li a i.green {background:#2E7D32 !important;}

.d10-social ul li a i.ote {line-height:42.5px;}

.d10-social ul li a i {width:40px; height:40px; display:inline-block; position:relative; line-height:40px; font-size:1.2em; top:7.5px; left:-0.5px; border-radius:999px;}


HTML Kodları:

Kod:
<link rel="stylesheet" type="text/css" media="screen" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div class="d10-social">
  <ul>
    <li><a href="#" class="d10-hide"><i class="blue ote ion-social-twitter-outline"></i></a></li>
    <li><a href="#" class="d10-hide"><i class="red ote ion-social-youtube"></i></a></li>
    <li><a href="#" class="d10-hide"><i class="blue ote ion-social-facebook-outline"></i></a></li>
    <li><a href="#" class="d10-trigger"><i class="orange ion-ios-redo-outline trigger"></i></a></li>
  </ul>
</div>


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  MyBB Öne Çıkan Konular Alanı (Modifikasyon) teknoloji 0 4 08-19-2022, 04:32 PM
Son Yorum: teknoloji
  MyBB Tema Değişkenleri teknoloji 0 5 08-19-2022, 04:24 PM
Son Yorum: teknoloji
  MyBB Forumunuzda Wordpress Blog Yazıları Eklentisi teknoloji 0 3 08-19-2022, 04:20 PM
Son Yorum: teknoloji

Hızlı Menü:

Görüntüleyenler: 1 Ziyaretçi