cara membuat widget tombol sosial media follow us dengan CSS3 keren dan cantik di blog

Jejaring Sosial  memainkan peran yang sangat penting dalam menghasilkan lalu lintasatau traffic pengunjung untuk blogger. Ada beberapa widget jejaring sosial yang tersedia untuk membuat blog anda terkesan lebih ramah dan bersahabat. Widget jejaring sosial ini adalah salah satu widget yang terbaik diantara widget jejaring sosial yang lain. Penulis terinspirasi dari beberapa blog yang pernah di kunjungi sehingga tertarik untuk memposkannya kembali. Langsung menuju TKP aja...:)

Caranya sebagai berikut:

• Masuk ke akun blog anda
• Klik Layout > Tambah Gadget > Html / Javascript 
• Paste kode berikut di bawah ini :

<style>

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

.sosmed-kananbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgurX839-8-7kIvcMwb5mtng7vLUt9oohrNsmNsZaoC9fhn3D40ZXfhEdFWGXbIXzu_eSD7RMVDh_BwA9bgbLYCgSQ7V6I4PdrdfnmhVcKqxpvRknE7DlUd-QC9U_GdccW5FjF9U5yCCGEW/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}

.sosmed-isiblogger{margin:0px 0 0 43px}

.sosmed-kanantwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJv79s_6EOso8wkmjsg-sB1SlT5PhB-Labu41Ab7JS1MAtY9pPlUWFgJhI2GL4zeVGjAzROdP2x0ewbuDfjE7fMd20avJts5wuWs2-3reA9oQ5JyAtB_WJuVCPAJUcvnmODqM4kVrL5dFp/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}

.sosmed-kanantwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJjVdUbsrLztS1dgxnYXjKiLgPBpB9AatJ75QUPwfqL_LHXpjW6fU0wtcVEweZUF9AB32WQwUh1eHU8weh0bRO6EqZpHLD0x9r0cUFhXbEIt94WVCY-UT0ccJoKeHu5DAiYw6XaigwCMe0/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}

.sosmed-isitwitter{margin:0px 0 0 43px}

.sosmed-kananfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxltwUwj1UeBwzHNwjaj4Y5E6IbR1cR6hBQ1Fs2auWlrhB5G6lOqh4pBMyAeUubnckE8xCm0349xeAN-v69N0hthXLutGyf2voHjRQtUbSnVIGqCSD1suWZqPjPg899YhHUuC9PbXQ-VoO/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}

.sosmed-kananfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV8Y8kAQHvOyv6N8oNmJ0arfum_lkkJMHHXHtf7uAOYrTqZzvsrmx_Ut8XlyJh8XzO6C85to2yFVc0O7LCtUJ0KfYqAmL922165IESADuomgtJ5iFpwfZu9wBT4FtEMIYl_B7O1bNZldnK/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}

.sosmed-isifacebook{margin:0px 0 0 43px}

.sosmed-kananrss{background:url('http://2.bp.blogspot.com/-A2gUy4WF8l8/UUa2igFbIZI/AAAAAAAAAiM/2ck6-Wot2yM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}

.sosmed-kananrssc{background:url('http://1.bp.blogspot.com/-RZyN5DznuUY/UUa9Uc04tFI/AAAAAAAAAi8/okz_LnBFNS4/s1600/RSSjoss.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}

.sosmed-isirss{margin:0px 0 0 43px}

</style>

<div class='sosmed-kananblogger' onmouseout='this.className='sosmed-kananblogger'' onmouseover='this.className='sosmed-kananbloggerc''>

<div class='sosmed-isiblogger'>

<a href='https://www.facebook.com/XXX' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuN1fB35fYBnQShIaLBCwIJszBIXy81jAF3f03frALNR9vQLD7MDI0mb_YTaTWt1idKnCSf9G4VXOBZxsW0hngCM5Cne3Pms8Srpe6Qmm7i9fWxVpvgfjeYmzf4e4vDId-uJqeG7fCZf8x/s1600/FB-open-new.png' title='Like us on Facebook'/></a><br/>

</div>

</div>

<div class='sosmed-kanantwitter' onmouseout='this.className='sosmed-kanantwitter'' onmouseover='this.className='sosmed-kanantwitterc''>

<div class='sosmed-isitwitter'>

<a href='https://twitter.com/XXX' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOi4fNnI6ozBBqCDIzScvYmaiT5sNd8cf-OHRdBTwYummFWtsv4Uv7O9z7qpOMdqR3bbtgJLsZ6AMV8OcZELOFZ_V8m_4jI98ts4ze5Mt7PU2NPXNo3XmRNj0idUemVAUBR8wuDW6DVxY7/s1600/TW-open-new.png' title='Follow us on Twitter'/></a><br/>

</div>

</div>

<div class='sosmed-kananfacebook' onmouseout='this.className='sosmed-kananfacebook'' onmouseover='this.className='sosmed-kananfacebookc''>

<div class='sosmed-isifacebook'>

<a href='https://plus.google.com/your googleplus/posts' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjiCv09gGW6_LuFEkIobRYUiug2rPSTqNmzritY7Q26Mzq7fb1eZA53DX7RAHyI3RwtDzTPZkPftir_O14a-G2ClJKxUyyLoXHp7AtyWjeoM_rk8EpcSKOMcKStkY6P35JOlSCC5m0GlD9/s1600/G+-open-new.png' title='Recommend us on Google Plus'/></a><br/>

</div>

</div>

<div class='sosmed-kananrss' onmouseout='this.className='sosmed-kananrss'' onmouseover='this.className='sosmed-kananrssc''>

<div class='sosmed-isirss'>

<a href='http://feeds.feedburner.com/XXX' target='_blank'><img alt='Subscribe me on RSS' src='http://3.bp.blogspot.com/-MDAVOH3vOYU/UUa9UYMZCJI/AAAAAAAAAjA/YicU-mlZMrY/s1600/RSSjosspendek.png' title='Subscribe me'/></a><br/>

</div>

</div>

Ket:

• Ganti XXX dengan link Anda
• Simpan template dan lihat hasilnya

  Semoga bermanfa'aat....