October 9, 2017

Cara Memasang Widget Link Media Sosial di Sidebar Blogger

By Romeltea | Published: October 9, 2017

Cara Memasang Widget Link Media Sosial di Sidebar Blogger.
 
Media Sosial (Social Media) adalah saluran atau sarana pergaulan sosial secara online di dunia maya (internet).

Cara Memasang Widget Link Media Sosial di Sidebar Blogger

Bagi seorang blogger, memiliki akun media sosial hukumnya "wajib" untuk pengotimalan mesin telusur atau SEO (Search Engine Optimization).

Salah satu cara mendatangkan pengunjung adalah dengan menyebarkan postingan di media sosial. Salah satu cara pengunjung datang ke blog kita juga melalui media sosial, selain mesin pencari (Google, Bing, Yahoo!) dan langsung ke homepage.

Salah satu pilar SEO adalah Media Sosial. Menurut para pakar SEO, Social Signal merupakan salah satu faktor pemeringkat blog kita di halaman hasil pencarian.

Jika Anda sudah membuat akun media sosial, minimal di Facebook, Twitter, Instagram, Pinterest, Linkedin, Google Plus, serta akun Youtube, pasang link ke akun media sosial Anda di sidebar blog.

Tujuan Memasang Widget Link Media Sosial di Sidebar Blogger tentu saja buat menambah follower, teman, jaringan, juga penyebaran konten blog kita.

Memasang Widget Link Media Sosial di Sidebar Blogger juga memudahkan pengunjung untuk mengikuti update atau posting terbaru blog kita, selama kita share di akun media sosial.

Cara Memasang Widget Link Media Sosial di Sidebar Blogger

Berikut ini salah satu cara dari sekian banyak tips memasang link akun media sosial di sidebar blogger.

Widget Link Media Sosial


Caranya mudah banget:

1. Layout > Add a Gadget
2. Pilih HTML/JavaScript
3. Judul kosongkan
4. Copas kode berikut ini:

<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.googleplus{background:#f20000}
.rtm-socials-icons ul li.rss{background:#f29400}
.rtm-socials-icons ul li.youtube{background:#f20000}
.rtm-socials-icons ul li.pinterest{background:#f20000}
.rtm-socials-icons ul li.instagram{background:#7c09a7}
.rtm-socials-icons ul li.linkedin{background:#1985bc}
</style>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<div class="rtm-socials-icons mom-socials-widget">
<ul>
<li class="facebook"><a href="http://www.facebook.com/romelteamedia" rel="dofollow" target="_blank" title="Follow us on Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="http://www.twitter.com/romel_tea" rel="dofollow" target="_blank" title="Follow us on Twitter"><i class="fa fa-twitter"></i></a></li>
<li class="googleplus"><a href="http://plus.google.com/103329103950948291283/" rel="dofollow" target="_blank" title="Follow us on Google+"><i class="fa fa-google-plus"></i></a></li>
<li class="instagram"><a href="https://www.instagram.com/romeltea" rel="dofollow" target="_blank" title="Follow us on instagram"><i class="fa fa-instagram "></i></a></li>
<li class="youtube"><a href="https://www.youtube.com/user/romeltea" rel="dofollow" target="_blank" title="Follow us on Youtube"><i class="fa fa-youtube "></i></a></li>
<li class="pinterest"><a href="https://www.pinterest.com/romeltea" rel="dofollow" target="_blank" title="Follow us on Pinterest"><i class="fa fa-pinterest "></i></a></li>
  <li class="linkedin"><a href="https://www.linkedin.com/in/romeltea" rel="dofollow" target="_blank" title="Connent to Linkedin"><i class="fa fa-linkedin "></i></a></li>
</ul>
</div>

5. Ubah link media sosialnya menjadi kepunyaan Anda.
6. Save!

Catatan: Jika gambar logonya kegedean, gak pas di lebar sidebar blog Anda, silakan sesuaikan (kecilkan) ukurannya di kode width:45px;height:45px;line-height:45px

Kode Link Media Sosial Lainnya:

Link Media Sosial

Cara pemasangannya seperti di atas. Ini kodenya:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
.social-profiles-widget{width:100%;height:auto;padding:0}
.social-profiles-widget ul {list-style: none;float: RIGHT;padding: 0;}
.social-profiles-widget ul li{list-style:none;margin:0;display:inline}
.social-profile .fa {width:50px;height:45px;color:rgba(255,255,255,0.8);text-align:center;line-height: 45px;
font-size: 2em;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;margin-right: 5px;}
.social-profile .fa-facebook{background:#3b5998}
.social-profile .fa-twitter{background:#55acee}
.social-profile .fa-youtube{background:#cc181e}
.social-profile .fa-instagram{background:#9c694c}
.social-profile .fa-google-plus{background:#d34836}
.social-profile .fa:hover,.social-profile .fa:active{color:#FFF;-webkit-box-shadow:1px 1px 3px #333;-moz-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333}
</style>
<div class='social-profiles-widget'>
<ul class='social-profile circle'>
<li><a href='#'><i class='fa fa-facebook'/></i></a></li>
<li><a href='#'><i class='fa fa-twitter'/></i></a></li>
<li><a href='#'><i class='fa fa-youtube'/></i></a></li>
<li><a href='#'><i class='fa fa-google-plus'/></i></a></li>
<li><a href='#'><i class='fa fa-instagram'/></i></a></li>
</ul>
</div>

Ubah tanda pagar (#) dengan link akun medsos Anda.

Save!

Demikian Memasang Widget Link Media Sosial di Sidebar Blogger. Kodenya saya ambil dan modif dari Help Logger.

Blogger juga sebaiknya membuat Fanspage untuk publikasi konten blog di Facebook.

Untuk pasang fanspage plus kotak berlangganan dsb sebagaimana di sidebar blog romelteamedia ini (Join & Follow us), silakan ke TKP: Cara Pasang Fanspage, Subscription Box, Plus Social Media Widget di Blog.

Wasalam. (www.romelteamedia.com).*

Lihat di CodePen

See the Pen Widget Link Media Sosial by Romel Tea (@romeltea) on CodePen.



Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

11 comments on Cara Memasang Widget Link Media Sosial di Sidebar Blogger

  1. terimakasih sangat membantu Pak.

    Kunjungi wibsite saya di Riezalngeblog.blogspot.com

    ReplyDelete
  2. pak linknya ko gak bisa di copy yang bagian bawah ??

    ReplyDelete
  3. Terimakasih, Artikelnya sangat membantu..👍

    ReplyDelete
  4. wih berhasil! makasih gan codenya

    ReplyDelete
  5. thank you pak . sangat membantu .

    ReplyDelete
  6. makasih gan sangat membantu

    ReplyDelete
  7. Terimakasih banyak tutorialnya ya, ini sangat membantu

    ReplyDelete

Contact Form

Name

Email *

Message *