Catatan Perjalanan : Cara menampilkan media sosial di blog

Seringkali kita melihat tampilan akun media sosial di blog. Seperti gambar di atas. Nah kali ini Saya aakn mencoba menuliskan langkah-langkah untuk menampilkan akun media sosial tersebut.

1. Buka blog Anda dan login
2. Pilih menu tata letak / layout

Tampilan tata letak / layout

3. Klik tambahkan gadget sesuai dengan lokasi yang diinginkan karena Gadget bisa di halaman utama blog atau bisa juga di kolom kanan/kiri blog. Contoh disini saya letakkan di sisi kanan blog menyesuaikan dengan Theme / tema blog saya.

Tampilan tambahkan gadget

4. Pilih HTML/JavaScript

5. Ketik atau Copy script berikut ini pada bagian konten kemudian klik Simpan. Pada bagian ini yang perlu di perhatikan adalah bagian yang di tebalkan. Kita dapat mengedit sesuai dengan keinginan kita, tombol media sosial apa saja yang akan di tampilkan. Disini saya menampilkan facebook, instagram dan youtube. Silahkan ganti teks yang ditebalkan dengan akun medsos masing-masing.

Untuk ukuran medsos yang di tebalkan silahkan sesuaikan dengan selera. Misal disini saya gunakan ukuran width=45px, height=45px, line-height=45px terlalu besar atau terlalu kecil maka bisa di kurangi atau ditambah.

<style>

.rtm-socials-icons{margin:0 0 20px 0}

.rtm-socials-icons ul{margin:0;padding:0;list-style:none;margin-bottom:-5px;margin-right:-5px;overflow:hidden}

.rtm-socials-icons ul li:before{display:none}

.rtm-socials-icons ul li{margin:0;padding:0;list-style:none;float:left;width:45px;height:45px;line-height:45px;text-align:center;background:#00baff;font-size:21px;margin-right:5px;margin-bottom:5px;opacity:.9;border-radius:3px;}

.rtm-socials-icons ul li:hover{opacity:1;}

.secondary-sidebar .rtm-socials-icons ul li{width:36px;height:36px}

.secondary-sidebar .rtm-socials-icons ul li a{line-height:45px}

.secondary-sidebar .rtm-socials-icons ul li a i{font-size:20px}

.rtm-socials-icons ul li a{line-height:45px;display:block;color:#fff}

.rtm-socials-icons ul li a:hover{color:#fff}

.rtm-socials-icons ul li.home{background:#83868a}

.rtm-socials-icons ul li.facebook{background:#0d2860}

.rtm-socials-icons ul li.instagram{background:#7c09a7}

.rtm-socials-icons ul li.youtube{background:#f20000}

</style>

<ul>

Tampilan entry script

Cara menampilkan media sosial di blog

4 comments: