TUTORIAL TAMBAHKAN TOMBOL MEDIA SOSIAL KE BLOG ANDA
1. Pertama, Anda perlu beberapa tombol (gambar ikon sosial media yang akan dipakai). Pencarian Google yang cepat akan menghasilkan banyak pilihan (pastikan Anda memeriksa kebijakan & hak cipta sebelum menggunakannya).2. Setelah Anda memiliki tombol, Anda harus mengunggahnya ke situs hosting eksternal, seperti Photobucket. Anda kemudian bisa mendapatkan kode tautan gambar.
3. Ini tidak perlu tetapi jika Anda ingin menambahkan banyak tombol, Anda mungkin lebih mudah menambahkan kode di bawah ini ke editor kode sebelum meletakkannya di blog Anda. Unduh TextWrangler untuk Mac atau Notedpad ++ untuk PC. Buka program, tambahkan kode di bawah dan dengan hati-hati satu per satu isi data Anda. Anda harus menggunakan gambar url langsung.
4. Tempelkan kode ke gadget HTML di blogger atau widget Teks di wordpress. Jika Anda ingin tombol Anda duduk bersama dengan baik, pastikan tidak ada spasi di antara setiap kode tombol. Contoh di bawah ini. Pastikan bahwa URL Anda sudah benar dan simpan.
TAMBAHKAN TOMBOL MEDIA SOSIAL KE BLOG ANDA - KODE
SATU SET TOMBOL - TANPA EFEK HOVER
Jika Anda memiliki satu set ikon media sosial dan tidak ingin efek mengambang, gunakan kode berikut. Tambahkan URL situs (Twitter, Facebook, dll), deskripsi dan URL Langsung dari Gambar, yang akan Anda dapatkan di situs hosting gambar Anda. Anda juga dapat menggunakan kode ini untuk menautkan gambar di blog Anda. Kode target="blank" memberi tahu browser untuk membuka tautan di tab baru.<a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a>
DENGAN EFEK HOVER
Jika Anda ingin ikon berubah ketika mouse bergulir di atasnya, gunakan kode ini. Demikian pula dengan di atas, Anda ingin mengubah URL situs, deskripsi, dan URL gambar langsung.<a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"><img src="DIRECT URL OF IMAGE" border="0" onmouseover="this.src='DIRECT URL OF SECOND IMAGE WHEN HOVERED OVER'" onmouseout="this.src='DIRECT URL OF IMAGE'" /></a>
MENAMBAHKAN BANYAK TOMBOL - TIDAK ADA RUANG DIANTARA TOMBOL
Tambahkan kode satu demi satu tanpa spasi! Seperti ditunjukkan di bawah ini, perhatikan bahwa tidak ada spasi di antara tag penutup, dan pembukaan tag berikutnya (contoh - </a> <a href ...).<a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a><a href="WEBSITE URL HERE 2" target="blank" title="DESCRIPTION OF LINK/WEBSITE 2"> <img src="DIRECT URL OF IMAGE 2" border="0" /></a><a href="WEBSITE URL HERE 3" target="blank" title="DESCRIPTION OF LINK/WEBSITE 3"> <img src="DIRECT URL OF IMAGE 3" border="0" /></a>
RATA TENGAH TOMBOL
Untuk membuat rata tengah tombol media sosial, cukup tambahkan <div id="socialmediabuttons"> sebelum kode dan </div> setelahnya, seperti ...<div id="socialmediabuttons"> <a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a><a href="WEBSITE URL HERE 2" target="blank" title="DESCRIPTION OF LINK/WEBSITE 2"> <img src="DIRECT URL OF IMAGE 2" border="0" /></a><a href="WEBSITE URL HERE 3" target="blank" title="DESCRIPTION OF LINK/WEBSITE 3"> <img src="DIRECT URL OF IMAGE 3" border="0" /></a> </div>Kemudian tambahkan yang berikut ini ke CSS Anda. Untuk pengguna Blogger, ini sebelum </b:skin> atau di area CSS dari Perancang Template. Untuk pengguna WordPress, ini adalah file style.css Anda.
#socialmediabuttons {text-align: center; margin: 0 auto; display:block;}
INGIN TOMBOLNYA RATA KIRI ATAU RATA KANAN?
Untuk menyelaraskan tombol media sosial ke kiri atau ke kanan, cukup tambahkan <div id="socialmediabuttons"> sebelum kode dan </div> setelahnya, seperti ...<div id="socialmediabuttons"> <a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a><a href="WEBSITE URL HERE 2" target="blank" title="DESCRIPTION OF LINK/WEBSITE 2"> <img src="DIRECT URL OF IMAGE 2" border="0" /></a><a href="WEBSITE URL HERE 3" target="blank" title="DESCRIPTION OF LINK/WEBSITE 3"> <img src="DIRECT URL OF IMAGE 3" border="0" /></a> </div>Kemudian tambahkan yang berikut ini ke CSS Anda. Untuk pengguna Blogger, ini sebelum </b:skin> atau di area CSS dari Template Design. Untuk pengguna WordPress, ini adalah file style.css Anda.
#socialmediabuttons {text-align: right; float: right; margin: 0 auto; display:block;}atau
#socialmediabuttons {text-align: left; float: left; margin: 0 auto; display:block;}
