Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Menambahkan Button Profil Sosial Media di Blog

Menambahkan Button Profil Sosial Media
Di blog ini ada button profil sosial media yang sedang populer saat ini. Sosial media yang banyak orang gunakan, misalnya facebook dan twitter. Selain itu juga button RSS FEED yang mengarah ke alamat rss feed blog ini. Ada button facebook dan twitter yang mengarah ke profil si pemilik blog.

Kemarin ada seorang teman, yang mengaku sering berkunjung ke Belajar Ngeblog di BLOG ini bertanya (mention) saya di twitter. Bagaimana cara menambahkan button facebook, twitter, rss dan google+ yang ada di sidebar? Soalnya dia juga mengirimkan screen shotnya. Karena menurut saya ini jawaban bisa dijadikan postingan. Maka saya jawab saja, nanti akan saya posting di blog ini. Terima kasih ide dan pertanyaan tersebut. ;)

Sebelumnya saya memasang button sosial media itu sebagai penganti halaman kontak. Agar terlihat blog ini lebih hidup dan mungkin menarik, menambahkan button sosial media yang mengarah ke profil pemilik blog menjadi penting. Karena akan bisa berbincang secara langsung jika menghendaki. Selain itu biar terkesan blog ini ada pemiliknya yang bisa dihubungi lewat sosial media yang populer semisal twitter dan facebook.

Menambahkan Button Profil Sosial Media

Cara Menambahkan Button Profil Sosial Media
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<center>
<a href="https://plus.google.com/101153066187737438859/posts" target="_blank"><img src="http://www.buttonshut.com/Google+-Buttons/Google+-Buttons-7-70-.png" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" alt="Google+" title="Add Me to Your Circle On Google+" width="36"/></a>

<a href="http://twitter.com/kurniasepta" target="_blank"><img src="http://buttonshut.com/links/twitter.png" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" alt="Follow Twitter" title="Follow Me On Twitter" width="37"/></a>

<a href="http://www.facebook.com/kurniasepta" target="_blank"><img src="http://buttonshut.com/links/facebook.png" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" alt="Add Facebook" title="Find Me On Facebook" width="37"/></a>

<a href="http://feeds.feedburner.com/BelajarNgeblogDiBlogKurniaSepta" target="_blank"><img src="http://buttonshut.com/links/rssfeed.png" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" alt="RSS FEED" title="Subcribe RSS FEED" width="37"/></a>
</center>

Kode yang berwarna merah adalah URL profil di sosial media sesuai dengan buttonnya. Kamu ganti saja dengan alamat URL mu sendiri. Kode yang miring adalah URL gambar/button. Dan angka 37 adalah lebar button. Kamu dapat mengkreasikan sendiri dan menambahkan sesuai yang kamu inginkan, misa profil you tube, flickr dan sebagainya. Saya biasa memperoleh gambar/button itu dari Social Media Buttons. Dan saya menggunakan Mouseover Efek agar terlihat menarik. Jangan lupa Simpan jika sudah selesai mengedit. :x