Home » » Cara membuat tombol sosial boomark di samping blog dengan efek easing

Cara membuat tombol sosial boomark di samping blog dengan efek easing

Written By Azzahida on Saturday, 23 November 2013 | November 23, 2013

Membuat tombol sosial media di blog seperti punya saya ini memang mungkin sudah tidak asing lagi, Namun jika anda mencari atau membuat tombol ini dari kutipan Creating website mungkin anda harus menangis 7 hari 7 malam lantaran apa yang di sajikan di sana tidak berfungsi dengan baik, karna saya sendiri pernah memasangnya di salah satu blog saya namun hasilnya tidak muncul, ternyata setelah saya priksa lebih detail cara yang di kasih maskolis ada yang eror
di sana juga ketika anda mau measangnya anda di sarankan membuak edit HTML ...
di sini yang akan saya kasih anda hanya menambah gadget baru di tata letak.!

Kira kira seperti di ataslah hasil yang akan saya bagikan untuk tips kali ini...
langsung saja kita menuju pembahasannya !
01 Pertama anda login ke blog anda masing masing
02 Ke dua anda pilih tata letak di bagian sidbar tau,kan  maksudnya sidbar/tambah gadgetnya di sebelah kanan bagian bawah atau di mana saja namun jika anda menaruh gadget ini di tata letah header atau nafbar biasanya tombol hanya muncul di halaman depan saja makanya harus di bagian sidbar.
03 Ke tiga tambahkan gadget baru
04 Ke empat pilih Java script/HTML
05 Kopas semua kode di bawah ini lalu pastekan di gadget tadi
06 Terahir save lihat hasilnya..!!

<style>
.farespo-fixedmenu{ background:url('http://1.bp.blogspot.com/-FaeRKNmFDX8/Ud16d2_PZFI/AAAAAAAAAsM/5xugOK5YAuE/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.farespo-fixedmenu1{ background:url('http://3.bp.blogspot.com/-W7Z5XKfLWd8/Ud16eM8AadI/AAAAAAAAAsQ/cv7fgYD5fiE/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.farespo-fixedmenu_1{margin:0px 0 0 43px}
.farespo-fixedmenutw{background:url('http://1.bp.blogspot.com/-WeUDB_HkbWA/Ud16fP78JoI/AAAAAAAAAsk/1k2WNVRCBvo/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.farespo-fixedmenutw1{background:url('http://1.bp.blogspot.com/-AEj1b-df974/Ud16fs5CVkI/AAAAAAAAAss/HYNXT4cJpPI/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.farespo-fixedmenutw_1{margin:0px 0 0 43px}
.farespo-fixedmenufb{background:url('http://1.bp.blogspot.com/-hj1nQIe4NPQ/Ud16cbNkV1I/AAAAAAAAAr0/EswfGA-rVjM/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.farespo-fixedmenufb1{background:url('http://4.bp.blogspot.com/-umCgVIZ-wTs/Ud16c1EAICI/AAAAAAAAAr8/5ZSWR05S2B8/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.farespo-fixedmenufb_1{margin:0px 0 0 43px}
.farespo-fixedmenurss{background:url('http://2.bp.blogspot.com/-9KAMTvWkJ4s/Ud16eU7kWyI/AAAAAAAAAsY/OpoARuR5pXY/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.farespo-fixedmenurss1{background:url('http://4.bp.blogspot.com/-SDcrlF3MTAU/Ud16dDy_wnI/AAAAAAAAAsE/QjdRXR9BekM/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.farespo-fixedmenurss_1{margin:0px 0 0 43px}
</style>
<div class='farespo-fixedmenu' onmouseout='this.className=&apos;farespo-fixedmenu&apos;' onmouseover='this.className=&apos;farespo-fixedmenu1&apos;'><div class='farespo-fixedmenu_1'>
<a href='https://www.facebook.com/Gema.sholawatsantri' target='_blank'><img alt='My Profile' src='http://3.bp.blogspot.com/-jWaYNYywDf0/Ud1_G7YS7RI/AAAAAAAAAtA/8b40N46byIQ/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='farespo-fixedmenutw' onmouseout='this.className=&apos;farespo-fixedmenutw&apos;' onmouseover='this.className=&apos;farespo-fixedmenutw1&apos;'><div class='farespo-fixedmenutw_1'>
<a href='https://twitter.com/arifinsaputra8' target='_blank'><img alt='Follow us on Twitter' src='http://3.bp.blogspot.com/-ppQkr4BjSVQ/Ud1_HkD_OBI/AAAAAAAAAtU/xN5krYZPBhY/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='farespo-fixedmenufb' onmouseout='this.className=&apos;farespo-fixedmenufb&apos;' onmouseover='this.className=&apos;farespo-fixedmenufb1&apos;'><div class='farespo-fixedmenufb_1'>
<a href='https://plus.google.com/u/0/+ArifinSaputra/posts' target='_blank'><img alt='Recommend us on Google Plus' src='http://3.bp.blogspot.com/-fPA1gJ6k9Bk/Ud1_G_aexzI/AAAAAAAAAtI/rcqioslWMN0/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='farespo-fixedmenurss' onmouseout='this.className=&apos;farespo-fixedmenurss&apos;' onmouseover='this.className=&apos;farespo-fixedmenurss1&apos;'><div class='farespo-fixedmenurss_1'>
<a href='http://feeds.feedburner.com/GemaSholawatSantri' target='_blank'><img alt='Subscribe me on RSS' src='http://3.bp.blogspot.com/-1XXERhy9eeQ/Ud1_GgCBHTI/AAAAAAAAAs8/TIB78w-42eg/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>
</div></div>



Keterangan:
01 kode warna biru pertama ganti dengan url halaman facebook anda atau profile facebook anda !
02 Kode warna biru ke dua anda ganti dengan url profile twitter anda !
03 Kode warna biru ke tiga anda ganti dengan url profile google + anda !
04 Kode warna biru ke empat anda ganti dengan url feed burner anda !
Demikianlah tips cara membuat tombol sosial media yang bisa saya bagikan pada kesempatan kali ini semoga bermanfaat jika anda belum paham bisa berkomentar di kotak komentar yang sudah menunggu..
Terima kasih wassalam.
Share this article :

2 comments:

 
Support : Creating Website | Johny Template | Mas Template
Proudly powered by Blogger
Copyright © 2011. Annavieza - All Rights Reserved
Original Design by Creating Website Modified by Arifin Saputra