Cara buat button social media cara 1 : floating

ASSALAMUALAIKUM

Apa itu floating button?


Floating button ni terletak kat bahagian tepi kiri. Fungsinya supaya mudahlah blogger lain untuk tahu korang punya media sosial.. so, let's get start it!

  1. Dashboard > Layout > HTML/JavaScript
  2. Copy code bawah ni 
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:140px; left:-12px;'>
<a class='linkopacity' href='URL FACEBOOK KORANG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src=" URL ICON FACEBOOK" /></a><br />
<a class='linkopacity' href='URL TWITTER KORANG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="URL ICON TWITTER" /></a><br />
<a class='linkopacity' href='URL INSTAGRAM KORANG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='instagram'><img border="0" src="URL ICON INSTAGRAM" /></a><br />

</div>
ABC : url media sosial korang macam facebook, twitter, instagram, tumblr etc.
ABC : url icon media sosial

Nas campak sikit url icon untuk korang.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjadIONBg26urT2GYhDsNmpa-nzbHn8sl7dtw9ZLc7j_xwEJ33RIh4m-z_Gbefj3KbBOhN7XGQfbqkIM0J5gbPVTFBWd0MP5sJV1jWWjmvHB3EYfnV8Q5qdB4PzmhN8ca-WoZzcep5uT8Q/s1600/Facebook-icon.pn
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTNFbxjehyphenhyphenGab-LrWancDlqYOybsePTTOqACF4lAS7YK3Xt-Uvv1UehQU_Q6olYTRDbZbQ1OeSB58qlfTQx_Ui1MMsDEFQ_yv6DuOnAzbpMMlmSCZ-6va6n1zo-jS_CeDNS_DvJqv9pC4/s1600/TwitterIcon.png
https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR0iBM1iODnMIamKJ7viWFj4xX9Tsp88qFwJKm46EP6-ciScUvwpw
http://free-running.eu/wp-content/uploads/2015/07/instagram-icon-logo-vector-01-50x50.png
p/s: icon korang boleh dapat kat google. searchlah icon media sosial yang korang nak tu. pastikan saiznya 50x50 ke bawah. kalau tak buruk nanti! untuk dapat url image, korang right-click gambar tu then pilih copy image address.

4. Dah siap save! pastu view blog korang sambi tersenyum ok?

p/s : kalau 3 tak cukup copy link bawah ni and letak sebelum </div>

<a class='linkopacity' href='URL MEDIA SOSIAL KORANG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='instagram'><img border="0" src="URL ICON " /></a><br />

Share
Tweet
Pin
Share