Cara Membuat Widget Social Media Melayang di Blog

Cara Membuat Widget Social Media Melayang di Blog - Assalamu'alaikum, sobat blogger? Pada postingan kali ini saya akan kembali membahas tutorial blog tentang Cara Membuat Widget Social Media Melayang di Blog. Berikut adalah contoh preview widgetnya.

Floating Social Media

Nampaknya tidak usah berlama-lama lagi, langsung saja kita simak tutorialnya berikut ini.

1. Login ke Account Blogger.
2. Masuk ke Dasbor Blog.
3. Pilih Layout → Add Gadget → HTML/JavaScript.
4. Copy Paste (copas) kode berikut kedalam konten HTML/JavaScript.

<style>
.tutorialblogz-fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopst2npRxmBOf-5DhROO3HiRkyAAVrIjBZ0BPYG8sh1oPC2LG5h8OBd5zuAQ52pgQoPq1fDj37gcflX-fAuG4711Chex4QXoQKTYidTeMCBXBk_0Jdr9Q6E_FmkJFqwvDWSFUl-Ry0zk/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.tutorialblogz-fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVsJaShJHmAl65oibArQDURq67Y7LmobQeWFonP7CttpyaDYU_LzC7FkDcQGt9a9KdI7IKeW15j-6mK5fyFl_48q4DDf6S_VxaOWN89rFL31JCDsp0KnJJhQejgsPWkBOgEsFSvCMBewM/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.tutorialblogz-fixedmenu_1{margin:0px 0 0 43px}
.tutorialblogz-fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxagutpKz9Y7dBJh_jDJ3GkFQcFe2isVTUI2YBVcjTfeUnNiqvdoB2iWSyIV4GIk1aWNnj0DYO6UZhVvv30xeWWkk8cAGeI2Dqtl5LH0_ZBKGAsrRQC7Ho8ITNFUPHHCtHVo8Yx1c8xsE/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.tutorialblogz-fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcC6Ch-dygMug6Es9dAdsiqKilsHXstAixO-TmpoqY3Jijc3zo5hcdd2IppPWxdzp0G0UBpWPD20L_6jwJCJEup7zbHmLqomZmxT7lhZEssvmADhgKOkcQ7O4OkPW0oLo2bDGUcp1zVL0/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.tutorialblogz-fixedmenutw_1{margin:0px 0 0 43px}
.tutorialblogz-fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7qJRdwazn78T5sPuBgnwzYwIFlywIOPY80ECFajn93OHPanZM2J2s3XFqomftrdd1qz3jQisp5_YJlgnsOz4gqHiD41H1GDnSg2TepCSFzHwG7UrHgdkhfihhQmkGibqxWi1etGDyjJw/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.tutorialblogz-fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7zOGcl7Ln5tLfh4iiOob2lNcR8sojktwQzpubXax80gIMdQB3mck3FoTus0Qq5YKLLDG6CAj41ng9C2pYBIEatQZ9e7Z01kh2gyYy0WbJFJG2_UdAfQ3chJAItRnTuYGSb0jNdkVStzA/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.tutorialblogz-fixedmenufb_1{margin:0px 0 0 43px}
.tutorialblogz-fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ2Tq69OY4PSEtq6JENH5QyIqQ1Dc1xge73EnVVdBaOErUUQUNxUCuOElMx0gJ4VKXAnAcaG5khtHvRgnxKClIKe-B3fSbptVkn4jszGLxDAJyujmzQmNw4RepsKmIt8ryxlhK_sUGy8U/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.tutorialblogz-fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWKKb9XGqT1pcAd78_ttqbBrMLhfSD0GQAzDn1ePYAxJdzoqoI2qtH_G7_vHSuNkwpoZaYkBgdLUgMpycyxeJFPWds84zr0AEGj9cRcbpighyphenhyphen1MjIvpr21YnL_nGcxkFkuVJjvhLix7Yw/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.tutorialblogz-fixedmenurss_1{margin:0px 0 0 43px}
</style>
<div class='tutorialblogz-fixedmenu' onmouseout='this.className=&apos;tutorialblogz-fixedmenu&apos;' onmouseover='this.className=&apos;tutorialblogz-fixedmenu1&apos;'><div class='tutorialblogz-fixedmenu_1'>
<a href='https://www.facebook.com/TutorialBlogz' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrOOCkMPfsjumL0nsC0usNDV8wWwPzUNDU7LaRwby9RMoMod18XDHWGKCXf9FgZ82GWIYiiI0kPi3IWG9rYkEgf0lt9qb-5VoM_QuJg4gRIkTo4c0VLUX2TKnA_hMdbtDDw_fOD4nfXbk/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='tutorialblogz-fixedmenutw' onmouseout='this.className=&apos;tutorialblogz-fixedmenutw&apos;' onmouseover='this.className=&apos;tutorialblogz-fixedmenutw1&apos;'><div class='tutorialblogz-fixedmenutw_1'>
<a href='https://twitter.com/TutorialBlogz' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQL7b0XIr3avZRYgY-salglyA4_dYlmhQam4quu8gbNtmz6u7D3kvY8Lq138xDoBX_pQMM1tjjWAc_Y273YCpxdjuARbKUEHCQFKrbr9RYrz7jgmprDHh2lWsK_VbttDlhQuBBJBUvIbE/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='tutorialblogz-fixedmenufb' onmouseout='this.className=&apos;tutorialblogz-fixedmenufb&apos;' onmouseover='this.className=&apos;tutorialblogz-fixedmenufb1&apos;'><div class='tutorialblogz-fixedmenufb_1'>
<a href='https://plus.google.com/102807084759670981471' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLeP5oi0jpOstPqh-Sb0MNpr95xnAS5j-wqeFdePzJlwH8JUU35_IrUxtEFJIcntrLs_wDPFV4Ahhwu_6-0DNakiftry3TnOc40s8Bsyb1Gh7w4yH-xp2zU-8wgxdSTGQg2E32Hb9Q6HQ/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='tutorialblogz-fixedmenurss' onmouseout='this.className=&apos;tutorialblogz-fixedmenurss&apos;' onmouseover='this.className=&apos;tutorialblogz-fixedmenurss1&apos;'><div class='tutorialblogz-fixedmenurss_1'>
<a href='http://feeds.feedburner.com/TutorialBlogz' target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qyl4WLRBrLoMCpWgGYMoxM5X11hQJ7sKgA4h_X1uh8Eg9s8yMYCJe9tYh3tjYHZIrc5PqqlPAB6ELJK9BkYrHJKJt5xB-X5WBrKw7jp7tT2lmoBfj1uCEuopU_DyMCxoYUexU8ckGNM/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>
</div></div>

Keterangan :

• TutorialBlogz : Ganti dengan username Facebook Fanpage Anda.
• TutorialBlogz : Ganti dengan username Twitter Anda.
• 102807084759670981471 : Ganti dengan ID Google+ Anda.
• TutorialBlogz : Ganti dengan ID Feedburner Anda.

5. Terakhir, klik Save, dan lihat hasilnya pada blog sobat. 

Demikianlah Cara Membuat Widget Social Media Melayang di Blog,
Semoga bermanfaat !

Baca Juga : 
BAGAS31.com, Tempatnya Download Software Gratis
Software Point of Sales Online Omega POS Cloud