Cara memasang icon sosial bookmark
|
16 Agu 2013
|
Tutorial
|
annyeong ^^ 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'>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. Icon nya mau ditaruh di kanan atau kiri, atas atau bawah tinggal mengubah top left nya :D.
.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>
