Cara Membuat Social Bar (Bloger,Google+,Facebook,Twitter) di Footer Blog ~ Pintu Seo Blog ~ bloganda

Cara Membuat Social Bar (Bloger,Google+,Facebook,Twitter) di Footer Blog

Cara Membuat Social Bar (Bloger,Google+,Facebook,Twitter) di Footer Blog | Pintu Seo - Membuat Social Bar di Dalam Blog Dapat Membantu Mempersatukan Tali persaudaraan antara pengunjung dan pemilik blog , tapi bagaimana cara membuatnya ? simak caranya di bawah ini .(CTRL+D)

Cara Membuat Social Bar (Bloger,Google+,Facebook,Twitter) di Footer Blog [CSS SETTING]

Sekarang masuk menu Template --> Pilih edit HTML
Klik Ctrl+F dan cari kode ]]></b:skin>
Kemudian letakkan kode CSS berikut diatas kode ]]></b:skin>

/* CSS Social Bar WWW.PINTUSEO.BLOGSPOT.COM*/
#social-bar {width:100%;max-width:990px;margin:0 auto;padding:0;background:transparent;border-top:2px solid #222;}
.social-facebook,.social-twitter,.social-googleplus,.social-blogger{float:left;margin:0;padding:8px 0;display:inline;width:10%;text-align:center;color:#eee!important;opacity:0.9;transition:all 0.3s ease-out;}
.social-facebook{background-color:#151515;width:25%}
.social-twitter{background-color:#151515;width:25%}
.social-blogger{background-color:#151515;width:25%}
.social-googleplus{background-color:#151515;width:25%}
.social-facebook:hover{background-color:#015f8f;opacity:1;}
.social-twitter:hover{background-color:#1a87ba;opacity:1;}
.social-googleplus:hover{background-color:#9f433a;opacity:1;}
.social-blogger:hover{background-color:#b77410;opacity:1;}
.blogger-24,.facebook-24,.twitter-24,.googleplus-24{background:url(http://1.bp.blogspot.com/-wNUSXsRj4d4/U0ljiOOrQdI/AAAAAAAACX0/R73l-2i2vsA/s1600/csstuts.png) no-repeat;width:20px;height:20px;display:inline-block;vertical-align:text-top;margin-top:-3px;text-align:center}
.blogger-24{background-position:0 0}
.facebook-24{background-position:0 -100px}
.twitter-24{background-position:0 -150px}
.googleplus-24{background-position:0 -200px}

Simpan Template Anda & Editlah Sesuka anda :D

Cara Membuat Social Bar (Bloger,Google+,Facebook,Twitter) di Footer Blog [HTML SETTING]

Sekarang masuk menu Template --> Pilih edit HTML
Klik Ctrl+F dan cari kode <footer id='footer-wrapper'>
Kemudian letakkan kode HTML berikut diatas kode <footer id='footer-wrapper'>

<div id="social-bar">
<a class="social-blogger mar10t" href="#" target="_blank" title="Follow on Blogger"><i class="blogger-24"></i><span class="phapus">Blogger</span></a>
<a class="social-googleplus mar10t" href="#" target="_blank" title="Follow on G+"><i class="googleplus-24"></i><span class="phapus">Google+</span></a>
<a class="social-facebook mar10t" href="#" target="_blank" title="Follow on Facebook"><i class="facebook-24"></i><span class="phapus">Facebook</span></a>
<a class="social-twitter mar10t" href="#" target="_blank" title="Follow on Twitter"><i class="twitter-24"></i><span class="phapus">Twitter</span></a>
<div style="clear: both;"></div>