Dalam posting saya kali ini, saya akan sedikit menjelaskan bagaimana Cara membuat widget jejaring sosial atrakatif untuk blog Anda. Ini hanya widget. Anda dapat menambahkannya ke blog Andadengan mudah. Saya hanya menggunakan CSS3 dengan HTML. Widget yang satu ini cukup simple, menarik dan atraktif.
Langsung tanpa basa-basi lagi menuju TKP..:)
Langsung tanpa basa-basi lagi menuju TKP..:)
- login ke blogger > klik Design > Page element
- Klik add Gadget dan Tambah HTML / Javascript
- Sekarang pastekan kode berikut di bawah ini :
<style>
#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoVFKcQwXOyIZ1JDkeFmSTc6rrtY4FvKpjldVQrW0W1TWvKGcAn8xoC6UpwCNkvKu-tx9RqK4n6m-R1N-arQ8UD2vgO2Og6WMK09g5HdmaI5bLhHV29eesgtk_Jz9l6ZRfWAenPSxTJEE/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#BT_social span:hover {visibility: hidden;}
#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BT_social .icon {color: #fafafa;overflow: hidden;}
#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}
#BT_social li:hover .icon {width: 250px;}
#BT_social li:hover .icon {background-color: #d91e76;}
#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<br />
<ul id="BT_social">
<li><a class="icon fb" href="http://www.facebook.com/sijalupangna">Like us on Facebook</a>Like us on Facebook </li>
<li><a class="icon twit" href="https://twitter.com/sijalupangna">Follow us on Twitter</a>Follow us on Twitter </li>
<li><a class="icon google" href="https://plus.google.com/UserId">Follow us on Google+</a>Follow us on Google+ </li>
<li><a class="icon rss" href="http://www.feedburner.com/sijalupangna">Subscribe via RSS</a>Subscribe via RSS </li>
</ul>
KET:
Setelah selesai menyisipkan kode diatas :
- Ganti "sijalupangna" dengan nama pengguna (user name) Facebook anda
- Ganti "sijalupangna" dengan nama pengguna (user name) Twitter anda
- Ganti "UserId" dengan userId Google plus anda
- Ganti "sijalupangna" dengan nama pengguna (user name) Feedburner anda
Sekarang save (simpan) template anda dan lihat hasilnya, semoga bermanfa'at....!
Berkomentarlah :
1.Dengan kata-kata yang sopan
2.Tidak menaruh link aktif ataupun non aktif
3.No spam, no sara, and no porn
4.Tidak promosi blog
5.Komentar yang tidak sesuai dengan isi konten akan langsung saya hapus
6.Komentar yang bagus akan saya publish dan saya beri komentar balik