Cara Membuat Widget Social Media Efek Hover

Unknown

Trik Blog

3 Okt 2013

Belum ada komentar

Halo sahabat blogger semua, hari ini saya ingin berbagi trik blog yaitu cara membuat widget social media efek hover.

Ok langsung saja saya ajarkan caranya :

1. Login ke blog anda

2. Pilih tata letak

3. Pilih tambah gadget

3. Pilih html/java script

4. Copy kan kode dibawah ini

<style>

.fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBozShTzlRFcCz31J0V0kGFOfaVYKEV4ZO9L5uOWXNQ5rLFOnM8FvQlf36ImyCdBvWCi26BYSTSDb0D9vinN_fGuvFE7NrYoKN0Laewu1_3U4wgjsMSR3x0u3QTwyNZBPlRoMPuU_ib0/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}

.fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyniynVLHpiDwWIMC_eC7aYgarAd4J9nppiVCQckTJ6D0x-XwYuYEPitRpxqv8mnSIk107KtPfujQetlJZL-WX2bIw4gvTChjwKEspyZ3mMjudon1-taJoU-b5hWW-h85vjn_qGDV-9y0/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}

.fixedmenu_1{margin:0px 0 0 43px}

.fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwf970CN-vMi7wqD-j55bkRRo6Bp-8HnsGVwmW4T0ZwPI6kgiu8sdKR5vQTARSfOXUvr056UOBsyPKRVvR1h2xx_XHAFpSdOrTOBcYonYRVtg5uY_mQZnxwp7YsIaOoRa8g7sC4wsdqUA/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}

.fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid_ad5iY6Xe4__UEzZw1gTKpC-SmFQWLwkLDcO8cCunheBSipa8ED8tOp4RL3GCbWXySPYE-ypSUZx1Nw5wbYKlw-LT3M7ENJOHEQx2Amof8jV2JM1mZFUrktNr4j6iYVpXq-MrMITVf4/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}

.fixedmenutw_1{margin:0px 0 0 43px}

.fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKdOxsBWhQ9j4GQ-LhgbdPYHMM0ESBbGrJRLECh50qLGze4V4wdJbfqCpO5q4OLggjeRbZb0LmOQjegMsYNnHa8GlrbFlN64CMx7Mom37osUkZcgG-DJAp75KPfvXi6X1AHMDb-eOGb58/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}

.fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6VKBc_3GvnIEgvEkvTxhFJiZLK9WPH0tQb7yM_Uw-muRnWijQWheaX49Kmf_dN46zCy8yYw-I1DJ9ODzhdcVOugLvKBrUiV7IEf03S9e4x226zCKXP7ug4kA9acfjuiWK0BHfzzGBcNA/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}

.fixedmenufb_1{margin:0px 0 0 43px}

.fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQvF4bI0Oo2-Bh08cMI4tANekZJ1Cf-3y8BQgTGp5stsRKtotJEb8ip1IOELXrzeRCPKd9wqtSucAJXnD3w4Es_n43_AeeqzTCCWywSiaV1JMn9JqmP6LVDOHkK2-3w56XKxuzfvSWihg/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}

.fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjctFf5bpdfIuYe8Fc-WjCe8F5yYC5MXM4L2kGW7_OO2QFvqis3X2hrY2n51hIhPh9Zb1NFDcYnp-eCG-D_ihMwVhazez9jBvzcOA7vLeoZk24PcDqX683-fKA27JLLOpD5q3wFkqrhbAA/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}

.fixedmenurss_1{margin:0px 0 0 43px}

</style>

<div class='fixedmenu' onmouseout='this.className=&apos;fixedmenu&apos;' onmouseover='this.className=&apos;fixedmenu1&apos;'><div class='fixedmenu_1'>

<a href='https://www.facebook.com/wayan.susandiarta' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6PoTTJMdOKUkNhzDRU1UeCeiykka2lwMgimws2Ll_LoQ7BqRl-8sDxhyphenhyphenYNkhrFbORvyZ4DCilPSmYSqDLyba3FAy-xlg-DJoZRmYIJ0-ohlKlistzDdyTPj9az5NUm9iATqqXq7Nw4yg/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>

</div></div><div class='fixedmenutw' onmouseout='this.className=&apos;fixedmenutw&apos;' onmouseover='this.className=&apos;fixedmenutw1&apos;'><div class='fixedmenutw_1'>

<a href='https://twitter.com/@susandiarta' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5xnLjkKX-wXGzrCZrBr2TN1G3VarbAOnNB4-PAmgcP4-YZhA1rZnqARuh3hJJVr_KrMOelFS6Q5aso-w1a4hj_euhWRIDfvYl_lVxI1JHKv65QhyphenhyphenPcXz4IbUCKb1fG7uMOsqq3Ad8B94/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>

</div></div><div class='fixedmenufb' onmouseout='this.className=&apos;fixedmenufb&apos;' onmouseover='this.className=&apos;fixedmenufb1&apos;'><div class='fixedmenufb_1'>

<a href='https://plus.google.com/u/0/104348512139625492677' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmn7EtIi8eV_GRvTouQsadcFwx5l3kRIfimIVriHa0FIkVVEiAoA2ub4ngXR6fq28oGZUgZKGQg9JJFAn6OYd8DunDftdslq4Vre7-uEo3wG9tIykIJlbqtNbQAXGGgOmLwPssZ9hOScU/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>

</div></div><div class='fixedmenurss' onmouseout='this.className=&apos;fixedmenurss&apos;' onmouseover='this.className=&apos;fixedmenurss1&apos;'><div class='fixedmenurss_1'>

<a href='http://feeds.feedburner.com/caragratis' target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7eJOBzAaHwHs9syREW1a30ESmWpy4saMipxkE6fjj6_PhbaCDEzWjtUJLID_QfvicckMMJdCXZe80PWc_CVQqCiFyBlqRApzr_PFcsKMTxouK7h57d1pT9Pvqiy_vGG9W83lkFkCzIOc/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>

</div></div>

5. Save dan lihat hasilnya