Skip to content Skip to sidebar Skip to footer

Cara memasang icon sosial bookmark


Cara memasang icon sosial bookmark

Icon sosial bookmark yang akan aku tuliskan tutorialnya adalah seperti gambar di atas, kalau cursor mouse mengarah ke icon tersebut, akan ada hover gelap terang dan jangan kuatir semua kodenya hasil aditan sendiri dan VALID HTML5 hehehe...silahkan ambil kodenya hanya perlu menambahkan widget nya ke gadget tata letak.

Cara memasang icon sosial bookmark:
1.Masuk dashboard > tata letak > tambahkan gadget
2.Pilih HTML/JavaScript
3.Copy paste dan masukkan kode di bawah ini:
<style type='text/css'>
.sosbook{display:scroll; position:fixed; top:10px; left:-12px;}
.linkopacity{margin:0 1em;display:block;clear:both;}
.linkopacity img {
border:0;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div class='sosbook'>
<a class='linkopacity' href='url facebook' rel='nofollow' target='_blank' title='Facebook'><img alt='Facebook' src="http://i1243.photobucket.com/albums/gg546/alice4ja/fb_zpse77b64f6.png" /></a>
<a class='linkopacity' href='url twitter' rel='nofollow' target='_blank' title='Twitter'><img alt='Twitter' src="http://i1243.photobucket.com/albums/gg546/alice4ja/twitt_zps2b0f5f6f.png" /></a>
<a class='linkopacity' href='url google plus' rel='nofollow' target='_blank' title='Google+'><img alt='Google+' src="http://i1243.photobucket.com/albums/gg546/alice4ja/g_zps118437fe.png" /></a>
<a class='linkopacity' href='url linkedin' rel='nofollow' target='_blank' title='Linkedin'><img alt='Linkedin' src="http://i1243.photobucket.com/albums/gg546/alice4ja/lindin_zps43239b48.png" /></a>
<a class='linkopacity' href='url foursquare' rel='nofollow' target='_blank' title='Foursquare'><img alt='Foursquare' src="http://i1243.photobucket.com/albums/gg546/alice4ja/4sq_zps7463dcaa.png" /></a>
<a class='linkopacity' href='url instagram' rel='nofollow' target='_blank' title='Instagram'><img alt='Instagram' src="http://i1243.photobucket.com/albums/gg546/alice4ja/insta_zps4bf7a24e.png" /></a>
<a class='linkopacity' href='url pinterest' rel='nofollow' target='_blank' title='Pinterest'><img alt='Pinterest' src="http://i1243.photobucket.com/albums/gg546/alice4ja/pinterest_zps88bbaab5.png" /></a>
</div>
Silahkan pilih icon sosial bookmark yang ingin anda masukkan di blog dan masukkan link url bookmark nya di tempat yang aku tandai dengan warna merah kemudian simpan dan lihatlah hasilnya. O iya lupa, icon nya mau ditaruh di kanan atau kiri, atas atau bawah tinggal mengubah top left nya xD.

1 comment for "Cara memasang icon sosial bookmark"