TUTORIAL membuat floating social network di blog
Friday, March 21, 2014
Hallo semua, saya akan berbagi cara membuat floating social network di blog. Di google uda banyak. Ya gakpapa la nambah nambah biar makin banyak gitu hehe. Disini saya juga berbagi url image social network yang saya buat sendiri. Buat yang gak tau apa itu floating social network saya kasih tahu dulu ya.
nah itu yang ada dalam kotak merah melayang itu namanya floating social network.
ok langsung aja ya ke intinya.
1. Log in Blog dulu, sudah masuk dasbor
2. Pilih Tata Letak/Layout
3. Add Gadget
4. Pilih Add HTML/Java Script
5. Copy dan paste kode di bawah ini ke dalam kotak content. untuk judul/tittle biarkan saja kosong, karena floating ini di buat melayang.
<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' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border="0" src="http://www.image-maps.com/m/private/0/fl1snasanj2nm32vs6toldt1v7_fb.png" /></a><br />
<a class='linkopacity' href='URL TWITTER' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border="0" src="http://www.image-maps.com/m/private/0/fl1snasanj2nm32vs6toldt1v7_twitter.png" /></a><br />
<a class='linkopacity' href='URL GOOGLE PLUS' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border="0" src="http://www.image-maps.com/m/private/0/fl1snasanj2nm32vs6toldt1v7_g.png" /></a><br />
<a class='linkopacity' href='URL YOUTUBE' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border="0" src="http://www.image-maps.com/m/private/0/fl1snasanj2nm32vs6toldt1v7_youtube.png" /></a><br />
<a class='linkopacity' href="mailto:EMAIL" imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border="0" src="http://www.image-maps.com/m/private/0/fl1snasanj2nm32vs6toldt1v7_yahoo.png" /></a><br />
</div>
KETERANGAN :
WARNA HIJAU : itu adalah posisi floating. scroll;position adalah posisi melayang (saat di scroll ke atas atau ke bawah posisi floating mengikuti) top:140px adalah jarak floating ke atas, sedangkan left:-12px jarak floating ke kiri
WARNA BIRU : itu adalah url social network anda. ganti dengan url link social anda. jika tidak memiliki social network yang ada di code , bisa hapus dari kode <a class blablabla sampai </a>
WARNA MERAH : link gambar social networknya, jika ingin merubah bisa ganti dengan social network yang ada di google atau mau buat sendiri juga boleh.
6. Selesai. klik Save dan lihat hasilnya
Good Luck :D
