News Update
Loading...
Tuesday, January 13, 2015

Cara Membuat Icon Social Media Di Header (Template JP Station)

Holaaaaa ketemu sama Sang Cacing lagi :D kali ini aku mau share cara membuat icon social media di header tepat nya sih di samping menu hehe tapi ini hanya untuk template JP Station aja yang lain belum coba ^_^ yooook langsung aja...


1.  Login akun Blogger
2.  Masuk Template pilih Edit HTML
3. Cari ]]></b:skin> dengan fitur pencarian CTRL+F, Masukkan kode berikut di atas kode ]]></b:skin>

ul#icon-socialmn{float:right}
ul#icon-socialmn li{float:left;display:inline-block;position:relative}
ul#icon-socialmn li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGXfpiTlKTp_2hnBH7uj2dJepeDbL_2lDseC8CSvx4lJEn9YhH8QKc2XIWwxqK00reOLoLbUgOeWHTBuxpY2DfAR7NYwFRwBFGLZR2rbnljiYAvkuYmji8Ytk59cCzWFOlhp2siPpHGYTw/s1600/team-social-icons.png);background-repeat:no-repeat;display:block;width:40px;height:47px;text-indent:-9999px;-webkit-transition:background .2s ease-out;-moz-transition:background .2s ease-out;-o-transition:background .2s ease-out;transition:background .2s ease-out}
ul#icon-socialmn li.social-twitter a{background-position:4px 7px}
ul#icon-socialmn li.social-twitter a:hover{background-color:#2DAAE1}
ul#icon-socialmn li.social-facebook a{background-position:-25px 7px}
ul#icon-socialmn li.social-facebook a:hover{background-color:#3C5B9B}
ul#icon-socialmn li.social-google a{background-position:-54px 7px}
ul#icon-socialmn li.social-google a:hover{background-color:#F63E28}
ul#icon-socialmn li.social-rss a{background-position:-85px 7px}
ul#icon-socialmn li.social-rss a:hover{background-color:#FA8C27}
ul#icon-socialmn li.social-linkedin a{background-position:-116px 7px}
ul#icon-socialmn li.social-linkedin a:hover{background-color:#0173B2}

4. Replace script


</ul>
</li>
<li><a href='#'>Comments</a></li>
</ul>
</nav>

Dengan Script di bawah ini!!!


</ul>
</li>
<div dir='ltr' style='text-align: left;' trbidi='on'>
<ul class='sociico' id='icon-socialmn'>
<li class='social-twitter'><a href='https://twitter.com/cintyafipii' target='_blank'>twitter</a></li>
<li class='social-facebook'><a href='https://www.facebook.com/cintyafipii' target='_blank'>facebook</a></li>
<li class='social-google'><a href='https://plus.google.com/108535626611989333876' target='_blank'>google</a></li>
<li class='social-rss'><a href='http://feeds.feedburner.com/SangCacingsBlog' target='_blank'>rss</a></li>
<li class='social-linkedin'><a href='http://id.linkedin.com/pub/cintya-fahyuliani-putri/92/83a/268' target='_blank'>linkedin</a></li>
</ul>
</div>
</ul>
</nav>

Biru : Ganti dengan link akun social media anda



5. Simpan template dan coba lihat hasilnya ^_^ hehe semoga bermanfaat ya dan jangan lupa jika ingin copy paste tolong sertakan sumber blog ya :)

3 komentar:

No SARA no SPAM no NITIP LINK !!! Tolong sertakan sumber jika ingin Copy-Paste!!!

 
HELLO!!!