3.Edit Html
Lalu Sobat Letakkan CSS dibawah tepat di atas
]]></b:skin> atau </style>
untuk mempermudah pencarian gunakan CTRL+F
/* CSS Social Bar */ #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}
Lalu Dilanjutkan Memasukkan Kode Pemanggil , Letakkan Kode Dibawah tepat di atas <footer> Atau yang mendekati dengan <footer> , Karena Setiap Template Mempunyai Struktur Kode yang Berbeda.
<div id='social-bar'> <a class='social-blogger mar10t' href='Your Social Link' target='_blank' title='Follow on Blogger'><i class='blogger-24'/><span class='phapus'><br/>Blogger</span></a> <a class='social-googleplus mar10t' href='Your Social Link' target='_blank' title='Follow on G+'><i class='googleplus-24'/><span class='phapus'><br/>Google+</span></a> <a class='social-facebook mar10t' href='Your Social Link' target='_blank' title='Follow on Facebook'><i class='facebook-24'/><span class='phapus'><br/>Facebook</span></a> <a class='social-twitter mar10t' href='Your Social Link' target='_blank' title='Follow on Twitter'><i class='twitter-24'/><span class='phapus'><br/>Twitter</span></a> <div style='clear: both;'/> </div>
Lalu Ganti Tulisan Your Social Link Dengan link kalian masing-masing.
Lihat contoh disini :<<< DEMO >>>
Tidak ada komentar:
Posting Komentar