Hallo soba blogger, setalah kemarin saya membahas bagaimana cara membuat gambar melayang di blog, sekarang kita akan membahas cara membuat menu sosial media yang melayang di blogger. Letak melayangnya berada di samping, lebih jelas bisa lihat gamabr berikut ini :
Mungkin saya gk akan lama basa-basinya, kita langsung ajah ke tutorial, simak baik baik yah :
1. Buka Blog Sobat
2. Pilih Tata Letak
3. Pilih Tambahkan Widget
4. Pilih HTML/JavaScript
5. Tempel kode di bawah ini di widget sobat
<style>
.cyber88-fixedmenufb{ background:url(‘https://1.bp.blogspot.com/-yEbcrFFEeZ0/XSiKxKkbd3I/AAAAAAAAAgs/qV9AE4CpvS0kmPOxAYjDIyhwR7RCkXc0wCLcBGAs/s1600/fb.png‘);background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:160px; z-index:1000;}
.cyber88-fixedmenufb1{ background:url(‘https://1.bp.blogspot.com/-pxmKptSzu0I/XSiKxJjtjHI/AAAAAAAAAgo/nRKop-LfgrcI_4uPyXPlX84uEw8Ml4PngCLcBGAs/s1600/fb1.png‘);background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:160px; z-index:1100;}
.cyber88-fixedmenufb_1{margin:0px 0 0 43px}
.cyber88-fixedmenutw{background:url(‘https://1.bp.blogspot.com/-nn9LCe-hF2M/XSiKzV6ZB8I/AAAAAAAAAhA/GdgbflU9sCUG0C0D9oq8PpwYmLA_u2s-ACLcBGAs/s1600/tw.png‘);background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:205px;z-index:1000;}
.cyber88-fixedmenutw1{background:url(‘https://1.bp.blogspot.com/-oeRnDwLkB20/XSiKz8YLwiI/AAAAAAAAAhE/4TcZr93AVPorliyseDSAOCF5Yk3txXKEACLcBGAs/s1600/tw1.png‘);background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:205px; z-index:1100;}
.cyber88-fixedmenuuc{background:url(‘https://1.bp.blogspot.com/-rA8BgouIOHY/XSiSdCPUBnI/AAAAAAAAAiM/actB62R2-uc9OL0ZuxR6rvBYADfybMwFACLcBGAs/s1600/uc.png‘);background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:250px; z-index:1000;}
.cyber88-fixedmenuuc1{background:url(‘https://1.bp.blogspot.com/-WO-AvGdkEbU/XSiSdRVJS-I/AAAAAAAAAiQ/AYu_QCu3m7MTA9PShRDozHUhAW-qdjLsgCLcBGAs/s1600/uc1.png‘);background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:250px; z-index:1100;}
.cyber88-fixedmenuuc_1{margin:0px 0 0 43px}
.cyber88-fixedmenuin{background:url(‘https://1.bp.blogspot.com/-VIUxGuKaluM/XSiScYjHIlI/AAAAAAAAAiA/VkObgEcCBuYZALFlGyfWPx4OT-Erpw9yACLcBGAs/s1600/in.png‘);background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:295px; z-index:1000;}
.cyber88-fixedmenuin1{background:url(‘https://1.bp.blogspot.com/-PQdaM7yGg64/XSiScdFT0yI/AAAAAAAAAiE/0aulc3wZhI4CzMJDXfA0BammBoWIuvDTwCLcBGAs/s1600/in1.png‘);background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:295px; z-index:1100;}
</style>
<div class=’cyber88-fixedmenufb’ onmouseout=’this.className='cyber88-fixedmenufb'’ onmouseover=’this.className='cyber88-fixedmenufb1'’>
<div class=’cyber88-fixedmenufb_1′>
<a href=’https://www.facebook.com/dodhiinsankamil/’ target=’_blank’>
<img alt=’Follow me on Facebook’ src=’https://1.bp.blogspot.com/-hQgCXv4a-KI/XSiKxN6X_wI/AAAAAAAAAgw/He9Bk80N2OULMV2VAIlKUDPMfovEiuZ1QCLcBGAs/s1600/fb2.png‘ title=’Follow me on Facebook’/>
</a>
<br/>
</div>
</div>
<div class=’cyber88-fixedmenutw’ onmouseout=’this.className='cyber88-fixedmenutw'’ onmouseover=’this.className='cyber88-fixedmenutw1'’>
<div class=’cyber88-fixedmenutw_1′>
<a href=’https://twitter.com/dodiinsankamil‘ target=’_blank’>
<img alt=’Follow me on Twitter’ src=’https://1.bp.blogspot.com/-UZ7bFhY7w1s/XSiK0Rw9KYI/AAAAAAAAAhI/VTHV2ilXHXIffWQEieq9HldzaPFGVHMvwCLcBGAs/s1600/tw2.png‘ title=’Follow me on Twitter’/>
</a>
<br/>
</div>
</div>
<div class=’cyber88-fixedmenuuc’ onmouseout=’this.className='cyber88-fixedmenuuc'’ onmouseover=’this.className='cyber88-fixedmenuuc1'’>
<div class=’cyber88-fixedmenuuc_1′>
<a href=’https://con.uctalks.ucweb.com/personal/index/f4200f77f0cdf71b0f905a408097df56?uc_param_str=dnvebifrmintcppcwidsudsvnwpflameefutch&stat_entry=detail&stat_second_entry=meta‘ target=’_blank’>
<img alt=’Follow me on Uc Media’ src=’https://1.bp.blogspot.com/-ssHbc08B9Y8/XSiSdvG641I/AAAAAAAAAiU/IhEJNhcuJwwiDbQSaFV7_ai6tkwo1XoYwCLcBGAs/s1600/uc2.png‘ title=’Follow me’/>
</a>
<br/>
</div>
</div>
<div class=’cyber88-fixedmenuin’ onmouseout=’this.className='cyber88-fixedmenuin'’ onmouseover=’this.className='cyber88-fixedmenuin1'’>
<div class=’cyber88-fixedmenuin_1′>
<a href=’https://www.linkedin.com/in/dodi-insan-kamil-50298b167/’ target=’_blank’>
<img alt=’Subscribe me on Linkedin’ src=’https://1.bp.blogspot.com/-vek1Z8yp8OQ/XSiScUATDmI/AAAAAAAAAiI/DZ0zcf5iqVIa6N8MjttOVaOXEnA8xJPDwCLcBGAs/s1600/in2.png‘ title=’Subscribe me’/>
</a>
<br/>
</div>
</div>
Hijau : Ini adalah link icon, sobat bisa menggantinya sesuai dengan icon yang sobat punya. ini boleh di ganti, kalo tidak di gantipun tidak apa-apa. Silahkan kreasikan sendiri 😀
Merah : Warna merah adalah link sosial media, tinggal ganti link sosial medianya dengan link sosial media milik sobat.
6. Pilih Simpan
Cukup sampai disini tutorial kali ini, nah bagi yang ingin mengganti icon dengan bentuk kotak silahkan dowload kumpulan icon sosial media di bawah ini.
Download Kumpulan Icon Sosial Media
Terima kasih, semoga bermanfaat. Silahkan berkreasi sekreatif mungkin, dan jangan pernah putus asa walaupun gagal. haha.
