Cara Memasang Social Media Logo

Penasaran gimana caranya punya social media icons yang lucu banget buat dipasang di blog? Yup saya punya koleksi warna warni lucu untuk dipasang di blog. Bisa di wordpress atau blogspot dan pastinya berubah warna saat mouse diarahkan pada logo tersebut. Terdiri dari facebook, twitter, instagram, email, pinterest, google plus dan youtube. Dapat dipakai sekaligus semua atau hanya logo yang diperlukan saja, kan tidak semua orang eksis di semua social media hehe atau iya ;-).

LIVE PREVIEW

Β Cara pasangnya mudah, ikuti petunjuk dibawah ini yaa :

cute socmed

1. Tentukan dahulu mau pakai logo model apa, yang atas atau yang bawah. Saya akan mengidentifikasi dengan model 1 (atas) dan model 2 (bawah).

2. Masukkan kode dibawah ini (sesuai pilihan) pada editing CSS di masing-masing platform.

Untuk blogspot bisa ke template -> sesuaikan -> tingkat lanjut -> tambahkan CSS

css

Untuk wordpress (selfhosted) : Appereance -> Editor -> style.css

css wp

Copy kode dibawah ini dengan cara klik VIEW RAW yang terdapat di sebelah kanan bawah

raw

Social Media 1

 
https://gist.github.com/shintaries/713d8b7d651a30e75088.js

Social Media 2Β 

https://gist.github.com/shintaries/5b430be2588d8d5cef0e.jsΒ  3. Masukkan kode HTML di bawah ini di bagian gadget blogspot (HTML/Javascript) atau widget (Arbitrary text or HTML)https://gist.github.com/shintaries/2e2473cda811be5dcd10.js
Simpan dan lihat hasilnya

4. Silahkan hapus logo yang tidak diperlukan pada gadget/widget di langkah ke-3. Isi link social media dengan akun yang dipunya.

Selamat mencoba ^^

Advertisements

39 thoughts on “Cara Memasang Social Media Logo

    1. kemungkinan karena lebar sidebarnya yang tidak cukup mba,..
      kalau semua dipakai dia akan jadi vertikal, bisa dicoba beberapa icon dulu mba.
      kalau dari lebar sidebar mba febi, maksimal hanya bisa 4 kayaknya ^^

  1. thanks for the tutorial, Mbak. Aku suka banget hasilnya. I thought it was difficult at first but it’s easy peasy. visit my blog!
    demiwarteg.blogpot.com
    streetandfashionette.blogspot.com

  2. Halo mbak Sinta, makasih atas tutorialnya. Saya udah praktekin ke blog sendiri pake yang pertama. Saya kira hasilnya akan berbentuk horizontal kayak di atas, tapi hasil di blog saya jadinya vertikal mbak.
    Sebenarnya suka yang berbentuk horizontal sih, hehe
    ini Blog saya mbak: http://fardelynhacky.blogspot.com

    Makasih banyak atas ilmunya mbak Shinta πŸ˜‰

    1. wah kayaknya ukurannya yang kegedean karena asumsi saya tidak akan terpakai semua, maksimal paling 3 icon ajah hehehe

      saya mau buat lagi mba fardelyn yang lebih kecil biar muat horizontal dan bisa banyak aikonnya hehehe

  3. Mbak Shinta, daripada saya pusing mikirin gimana caranya bikin image sosial medianya. Saya ijin pakai di blog saya ya, Mbak.

    Habisnya ga ngerti cara buat image sosial medianya. Taunya cuma bikin satu per satu, ga bisa rame2 gitu 😦

    Makasih sebelumnya, Mak

  4. I made it …
    makasih mak… sy udah lama nunggu tutorial ini dr mak Shinta…
    keep sharing ya maak
    Nuhun pisan πŸ™‚
    *girang akhirnya bisa masang itu πŸ˜›

  5. mba, aku udah pasang cuma 3 item koq jatohnya masih vertikal yah?hehe. padahal rasanya side bar blog aku juga ga kecil-kecil banget. ada step yang salah kah kira2? thankss before πŸ™‚

    1. saya ngga bisa-bisa… hiks
      Abis masukin kode CSS terusnya gimana lagi? kalo langsung masuk ke “tambah Gadget/html” yang kode CSS nya ilang.

  6. wah mbak shinta memang jago, gak nyesel ikutan fun blogging jadi tahu ada mbak shinta yg jago bgini hehe… saya baru nyoba wordpress mbak.. lier.. make twentythirteen.. mau diedit ribetnya.. pengen masang icon sosmed ditiap tulisan gimana ya mbak? hm, mungkin saya bisa mulai dgn tuto yg ini.. makasih udah dshare mbak..

  7. Hai Mbak Shita,

    Terima kasih tutorialnya. Udah di coba walau awalnya keluar warning security gitu. Akhirnya aku edit-edit lagi dan berhasil nongol yeiiyy…

    Muaach! :*

  8. Mau nanya kak, kalau mau merubah warna akun sosmed nya gimana yaa?
    Misalnya mau ganti ikon facebook jadi biru putih seperti warna logo aslinya
    Mohon pencerahannya kak, thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s