Konu Üstü Sosyal Medya Paylaşım Butonu Yapımı

[Treebzy]

Konu Üstü Sosyal Medya Paylaşım Butonu Yapımı
Css Kodlarımız;

Kod: Tümünü Seç Tümünü Kopyala

}

.showthread-social {
background-color: #495F6A;
margin-bottom: 18px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-border-radius: 4px;
border-radius: 4px;
}

.showthread-social > ul {
margin: 0;
padding: 0;
list-style: none;
}

.showthread-social > ul > li {
width: 25%;
float: left;
}

.showthread-social > ul > li > a {
display: block;
height: 42px;
line-height: 42px;
padding: 0 16px;
text-align: center;
color: #f5f5f5;
-webkit-transition: background-color .4s ease;
  transition: background-color .4s ease;
}

.showthread-social > ul > li:first-child > a {
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}

.showthread-social > ul > li:last-child > a {
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}

.showthread-social > ul > li > a > i {
line-height: 42px;
font-size: 16px;
-webkit-transition: transform .4s ease;
  transition: transform .4s ease;
}

.showthread-social > ul > li > a.facebook {
background-color: #3b5998;
}

.showthread-social > ul > li > a.twitter {
background-color: #00aced;
}

.showthread-social > ul > li > a.google-plus {
background-color: #d34836;
}

.showthread-social > ul > li > a.linkedin {
background-color: #0077b5;
}

.showthread-social > ul > li > a:hover i {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

TEMANIZ -> Konu Gösterimi [showthread] Şablonlar -> showthread Seçiyoruz
ŞU KODU BULUYORUZ;

Kod: Tümünü Seç Tümünü Kopyala

{$codebutquickedt}
{$header}

HEMEN ALTINA KODU YAPIŞTIRIYORUZ;
KODUMUZ;

Kod: Tümünü Seç Tümünü Kopyala

<div class="showthread-social">
<ul class="clearfix">
<li>
<a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u={$mybb->settings['bburl']}/{$sosyal_imleme}&amp;t={$thread['subject']}" title="{$thread['subject']} Facebookta Paylaş" class="facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk={$mybb->settings['bburl']}/{$sosyal_imleme}&amp;title={$thread['subject']}" title="{$thread['subject']} Googlede Paylaş" class="google-plus">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</li>
<li>
<a rel="nofollow" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={$mybb->settings['bburl']}/{$sosyal_imleme}&amp;title={$thread['subject']}" title="{$thread['subject']} Linkedinde Paylaş" class="linkedin">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
                                  <li>
<a rel="nofollow" target="_blank" href="http://twitter.com/home?status={$thread['subject']}+-+{$mybb->settings['bburl']}/{$sosyal_imleme}" title="{$thread['subject']} Twitterda Paylaş" class="twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>

</ul>
</div>

GÖRÜNÜŞ

Alıntı: mybbtr.info

[Dream41]

Hocam alıntı olduğunu belirtirseniz iyi olur.

[Ciri]

mobil uyumlu mu?

[xoxox]

Paylaşım için teşekkürler Murat :)

[mehmetext]

Edward hocam evet uyumlu.