#Cara Pasang Tombol Media Sosial Diblog Responsif Dan Ringan!

Awaknyo >>

Cara Pasang Tombol Media Sosial Diblog Responsif Dan Ringan!

Selamat datang, pada kesempatan ini kita mau share tentang cara pasang atau cara membuat tombol sosial media diblog, atau berupa widget sosial media. karena soial media ini dapat mempererat silaturrahmi dan membuat kita semakin dekat dengan pengunjung. ini sangat penting, karena jika anda mendapat pembaca setia tentu akan berupatasi baik untuk blog anda kedepannya. berikut ini caranya:
style 1

taruh di diatas kode </style>

/*sosial media*/
.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:&quot; &quot;;display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}

letakkan script berikut di widget
tata letak > add widget > html/javascript dan paste kode berikut

<div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
<span class="app_count">7845</span> <span class="app_type">Fans</span> </a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
<span class="app_count">32</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
<span class="app_count">4774</span> <span class="app_type">People</span> </a></div>
<div class="app_social instagram">
<a href="https://www.instagram.com/" target="_blank">
<span class="app_icon"><i class="fa fa-instagram"></i></span>
<span class="app_count">65684</span> <span class="app_type">Followers</span> </a></div>
<div class="app_social google">
<a href="https://www.google.com/" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
<span class="app_count">65684</span> <span class="app_type">People</span> </a></div>
<div class="app_social linkedin">
<a href="https://www.linkedin.com/" target="_blank">
<span class="app_icon"><i class="fa fa-linkedin"></i></span>
<span class="app_count">65684</span> <span class="app_type">Fans</span> </a></div>
<div class="app_social flickr">
<a href="https://www.flickr.com/" target="_blank">
<span class="app_icon"><i class="fa fa-flickr"></i></span>
<span class="app_count">44</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social vine">
<a href="https://www.vine.com/" target="_blank">
<span class="app_icon"><i class="fa fa-vine"></i></span> <span class="app_count">574</span> <span class="app_type">People</span> </a></div>
</div>

silahkan ganti linknyya sesuai punya kamu sob..

style 2

paste kode berikut di tata letak > add widget > html/javascript

<div class="awaknyo">
<li><a class="fb" href="http://www.facebook.com"></a></li>
<li><a class="tw" href="http://twitter.com"></a></li>
<li><a class="gp" href="https://plus.google.com"></a></li>
<li><a class="pi" href="http://pinterest.com"></a></li>
<li><a class="in" href="https://www.linkedin.com"></a></li>
<li><a class="yt" href="http://www.youtube.com"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com"></a></li>
</div>
<div style="text-align: center;">
<style>
.awaknyo{width:285px}
.awaknyo{position:relative;cursor:pointer;padding:0;list-style:none}
.awaknyo .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.awaknyo .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.awaknyo .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.awaknyo .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.awaknyo .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.awaknyo.in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.awaknyo .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.awaknyo .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.awaknyo li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.awaknyo li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.awaknyo li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.awaknyo li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.awaknyo li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.awaknyo li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.awaknyo li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

 itulah tutorial cara memasang tombol sosial media facebook twitter google plus dan lain lain. jadi orang atau pembaca lebih kenal dan lebih dekat sampai terjalin silaturrahmi yang sangat erat. semoga cara pasang social media button ini bermanfaat dan dapat anda praktekkan dengan segera dan secepatnya diblog anda sob.

Berbagi :