Cara Memasang Widget Media Sosial di Sidebar Blog

Romeltea | Follow @romel_tea
Cara Memasang Widget Media Sosial di Sidebar Blog. Tips Membuat Ikon Link Akun Medsos di Sidebar Blog untuk SEO, Trafik, dan Likers/Followers. 

SOCIAL atau media sosial menjadi salah satu pilar SEO blog. Widgetnya bisa dipasang di sidebar blog, misalnya di atas kotak berlanggganan (subscription box). Ini salah satu jenis tampilannya:

Widget Media Sosial di Sidebar Blog


Menurut para ahli, fungsi link akun media sosial yang dipasang di blog antara lain "attract new readers and engage with regulars", menarik pembaca baru dan "merawat" pengunjung setia.

Berikut ini cara menampilkan, menambah, atau memasang widget icon/link media sosial di sidebar blog yang juga berfungsi menambah follower, liker, dan teman. DEMO-nya bisa dilihat di ilustrasi gambar posting ini.

Tentu atuh, sebelumnya teh, Anda harus sudah punya akun-akun medsosnya, terutama: facebook, twitter, google plus, linkedin, pinterest, instagram, dan youtube.

Banyak pilihan Widget Ikon Link Media Sosial di Sidebar Blog. Anda tinggal pilih salah satu.

Cara Memasang Widget Ikon Media Sosial di Sidebar Blog

Pilihan pertama icon link medsos di sidebar blogger. Bisa dipasang di sidebar, header, atau footer.

Cara Memasangnya.
Untuk memasang di sidebar blog, sangat mudah.

1. Login ke Blogger.
2. Klik Layout (Tata Letak) > Add a Gadget > pilih HTML/JavaScript.
3. Copas kode berikut ini di kolom konten:

<style>
.social-profiles-widget{width:100%;height:auto;padding:10px 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><div class='clear'/>

4. Ganti tanda pagar (#) dengan url link akun media sosial Anda.
5. Save! Simpan.

JIKA tidak muncul, tambahkan kode link ke font awesome berikut ini di atas kode </head> di dalam template Anda.

Klik Tema > Edit HTML, lalu copas kode berikut ini di atas kode </head>


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Selesai!

Posisi Header

Untuk menampilkannya di HEADER, lakukan langkah "agak ribet" berikut ini, dengan catatan Anda menggunakan template blog Simple bawaan Blogger.

1. Klik Tema > Edit HTML

Tema > Edit HTML


2. Copas Kode CSS Widget Media Sosial di Sidebar Blog berikut ini di atas kode ]]></b:skin>

.social-profiles-widget{width:100%;height:auto;padding:10px 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}

3. Copas kode berikut ini di atas kode <b:section class='header' id='header' 

<div class='social-profiles-widget'>
 <ul class='social-profile circle'>
 <li><a href='#'><i class='fa fa-facebook'/></a></li>
 <li><a href='#'><i class='fa fa-twitter'/></a></li>
 <li><a href='#'><i class='fa fa-youtube'/></a></li>
 <li><a href='#'><i class='fa fa-google-plus'/></a></li>
 <li><a href='#'><i class='fa fa-instagram'/></a></li>
 </ul>
</div>

4. Ganti tanda pagar (#) dengan url link akun media sosial Anda
5. Save! Simpan template.

Selesai. Lihat hasilnya.
Jika tidak muncul, tambahkan link ke awesome font di atas.

CARA LAIN

Memasang Widget Media Sosial di Sidebar Blog

1. Login ke Blogger.
2. Klik "Template/Theme" > "Edit HTML"
3. Temukan (Ctrl+F) kode ]]></b:skin> atau </style>
4. Copas kode CSS berikut ini di atasnya:


#top-social-profiles{height:42px;text-align:right}#top-social-profiles img{margin:0 6px 0 0px !important}
#top-social-profiles img:hover{opacity:0.8}
#top-social-profiles .widget-container{background:none;padding:0;border:0}
.social-profiles-widget img{margin:0 6px 0 0}
.social-profiles-widget img:hover{opacity:0.8}

5. Save Template!

Lanjut dengan langkah berikutnya, yaitu pemasangan link akun medosnya di Layout (Tata Letak):

5. Klik "Layout" > "Add a Gadget" > pilih "HTML/JavaScript".
6. Copas kode berikut ini di kolom "content". Judulnya cuekin aja, biarkan kosong!

<div id='top-social-profiles'>
<ul class='widget-container'>
<li class='social-profiles-widget'>

<a href='http://www.twitter.com/romeltea/' target='_blank'><img alt='Twitter' src='https://lh6.googleusercontent.com/-40NMu9YKlek/VJ66NcYZy3I/AAAAAAAAI5Y/9Yn9ZtLQb18/s32-no/twitter.png' title='Twitter'/></a>
<a href='http://www.facebook.com/romelteamedia/' target='_blank'><img alt='Facebook' src='https://lh6.googleusercontent.com/-DDBzF64PrRQ/VJ66Llwc7uI/AAAAAAAAI44/9cZaAsCSBOM/s32-no/facebook.png' title='Facebook'/></a>
<a href='http://plus.google.com/103329103950948291283/' target='_blank'><img alt='Google Plus' src='https://lh4.googleusercontent.com/-87tOc499YgM/VJ66MM6smeI/AAAAAAAAI48/CpqKtTJyhSs/s32-no/google.png' title='Google Plus'/></a>
<a href='http://www.linkedin.com/in/romeltea' target='_blank'><img alt='LinkedIn' src='https://lh6.googleusercontent.com/-wsMOZqtgZsI/VJ_Wi7YStbI/AAAAAAAAI9Y/xWVrEivmlZY/s32-no/linkedin.png' title='LinkedIn'/></a>
<a href='http://www.pinterest.com/romeltea/' target='_blank'><img alt='Pinterest' src='https://lh5.googleusercontent.com/-rQI0ZCqxvX0/VJ_WjcQ9QII/AAAAAAAAI9g/0XajOPBuXKI/s32-no/pinterest.png' title='Pinterest'/></a>
<a href='http://instagram.com/romeltea' target='_blank'><img alt='Instagram' src='https://lh4.googleusercontent.com/-3MPofh4xhe4/VJ66Ma_XWaI/AAAAAAAAI5E/6d8mLJBvFFU/s32-no/instagram.png' title='Instagram'/></a>
<a href='http://www.youtube.com/user/romeltea' target='_blank'><img alt='Youtube Channel' src='https://lh3.googleusercontent.com/-iuHC7JsIgz0/VJ_WHFriyOI/AAAAAAAAI9I/S2gf8lcU8uA/s32-no/youtube%2Bicon.png' title='Youtube Channel'/></a>

</li>
</ul>
</div>


SUDAH? Belum......!
Ganti link yang berwarna merah dengan link media sosial Anda!

8. Save!
You're done!!!

Widget Media Sosial di Sidebar Blog dengan CSS Sprite

Cara pasangnya sama dengan di atas. Widget media sosial untuk sidebar berikut ini menggunakan gambar/image CSS Sprite --yaitu menggabungkan gambar icon medsos menjadi satu file-- sehingga LEBIH Fast Loading:

1. KODE CSS
Dipasang di atas kode ]]></b:skin>

#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(http://1.bp.blogspot.com/-IWFniHoyd3A/T-YdTpaOuKI/AAAAAAAAG-0/tB_K-9hn02U/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}
#head-soc li#g a {background-position: 0px -32px;}
#head-soc li#g a:hover {background-position: 0px 0px;}
#head-soc li#rss a {background-position: -32px -32px;}
#head-soc li#rss a:hover {background-position: -32px 0px;}
#head-soc li#sub a {background-position: -64px -32px;}
#head-soc li#sub a:hover {background-position: -64px 0px;}
#head-soc li#fb a {background-position: -96px -32px;}
#head-soc li#fb a:hover {background-position: -96px 0px;}
#head-soc li#twit a {background-position: -128px -32px;}
#head-soc li#twit a:hover {background-position: -128px 0px;}
#head-soc li#li a {background-position: -160px -32px;}
#head-soc li#li a:hover {background-position: -160px 0px;}
#head-soc li#youtube a {background-position: -192px -32px;}
#head-soc li#youtube a:hover {background-position: -192px 0px;}

2. KODE HTML
Dipasang di widget: Layout > Add a Gadget > HTML/Javascript

<!--Social Sprite Html-->
<div id="head-soc" style="margin: 0 0 20px -10px">
<ul>
<li id="g"><a href="https://plus.google.com/103329103950948291283/posts" target="-blank">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/blogromeltea" target="-blank">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogromeltea" target="_blank">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/romelteamedia" target="-blank">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/romeltea" target="-blank">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/in/romeltea" target="-blank">LinkedIn</a></li>
<li id="youtube"><a href="https://www.youtube.com/user/romeltea" target="-blank">YouTube</a></li>
</ul>
</div>

Style Lain Widget Media Sosial di Sidebar Blog

Jika kurang berkenan dengan desain  link media sosial di atas, masih banyak desain lainnya, antara lain  yang ukuran iconnya lebih besar seperti ini. Cara pemasangannya pun lebih mudah.

Cara Memasang Widget Media Sosial di Sidebar Blog

Cara Memasangnya:
1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul widget boleh diisi boleh tidak.
3. Masukkan kode ini:

<style type='text/css'>
.social ul {list-style:none; display:inline}
.social li {float:left;padding: 0px 2px 0px 0px; margin-top:-4px}
.social li a img{height:57px;width:57px}
</style>
<div class='social'> <span class='fade'><ul>
<li><a href="URL FACEBOOK PAGE" target=_blank"><img src="https://lh6.googleusercontent.com/-OLch15YGXm0/UUeMBXylVqI/AAAAAAAACu0/kGNbk9zmBY0/s57/Facebook%2520alt%25201.png" alt="facebook"/></a></li>
<li><a href="URL GOOGLE PLUS" target=_blank"><img src="https://lh6.googleusercontent.com/-H-1jlPd8fdA/UUeMENESx-I/AAAAAAAACu8/3QDFL1G38VM/s57/Google%252B%2520alt.png" alt="google plus"/></a></li>
<li><a href="URL TWITTER" target=_blank"><img src="https://lh6.googleusercontent.com/-n3dtPbdkgV4/UUeMGZWpscI/AAAAAAAACvE/wA7xcDHzYtU/s57/twitter%2520%252Balt.png" alt="twitter" /></a></li>
<li><a href="URL FEED" target=_blank"><img src="https://lh6.googleusercontent.com/-qM7TeX8_s8M/UUeMIXMV8xI/AAAAAAAACvM/_IEIAsh5IeA/s57/RSS%2520Feed.png" alt="rss feed"/></a></li>
<li><a href="URL YOUTUBE" target=_blank"><img style='width:60px' src="https://lh4.googleusercontent.com/-gG1gaAL_mwI/UUeMOoKKWxI/AAAAAAAACvU/VuviTw9XoZI/s57/YouTube%2520alt%25201.png" alt="youtube"/></a></li>
</ul></span> </div> 

4. Save!

STYLE LAIN LINK MEDIA SOSIAL

Kode widget media sosial di sidebar blog yang terdiri dari facebook, twitter, linkedin, instagram, dan youtube seperti gambar ini:

media sosial di sidebar blog

Ini kodenya. Pasang di Layout > Add a Gaget > HTML/JavaScript:

<style type='text/css'>
.social ul {list-style:none; display:inline}
.social li {float:left;padding: 0px 2px 0px 0px; margin-top:-4px}
.social li a img{height:57px;width:57px}
</style>
<div class='social'> <span class='fade'><ul>

<li><a href="URL FACEBOOK" target=_blank"><img src="https://lh6.googleusercontent.com/-OLch15YGXm0/UUeMBXylVqI/AAAAAAAACu0/kGNbk9zmBY0/s57/Facebook%2520alt%25201.png" alt="facebook"/></a></li>

<li><a href="URL TWITTER" target=_blank"><img src="https://lh6.googleusercontent.com/-n3dtPbdkgV4/UUeMGZWpscI/AAAAAAAACvE/wA7xcDHzYtU/s57/twitter%2520%252Balt.png" alt="twitter" /></a></li>

<li><a href="URL LINKEDIN" target=_blank"><img src="https://2.bp.blogspot.com/-kT45XMAHnk0/WdVmy4qy6fI/AAAAAAAARH0/JZCqnCJeMTQ4blyafE2B3JXk8q86VWaFgCLcBGAs/s1600/linkedin.JPG" alt="linkedin"/></a></li>

<li><a href="URL INSTAGRAM" target=_blank"><img src="https://4.bp.blogspot.com/-4knVxO6bLMw/WdVmz29_i0I/AAAAAAAARH4/5HH_JIROHcYsGfD0OrXRLGN874l-SUeXgCLcBGAs/s1600/instagram.JPG" alt="instagram"/></a></li>

<li><a href="URL YOUTUBE" target=_blank"><img style='width:60px' src="https://lh4.googleusercontent.com/-gG1gaAL_mwI/UUeMOoKKWxI/AAAAAAAACvU/VuviTw9XoZI/s57/YouTube%2520alt%25201.png" alt="youtube"/></a></li>

</ul></span> </div>

Ada juga link media sosial yang model metro style kayak gini nih:

Cara Memasang Widget Media Sosial di Sidebar Blog

Cara Memasangnya:

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul widget boleh diisi boleh tidak.
3. Masukkan kode ini:

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/username"></a></li>
<li><a class="tw" href="http://www.twitter.com/username"></a></li>
<li><a class="gp" href="https://plus.google.com/kodeID"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/kodeID"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>


CLOSING STATEMENT
Menurut para ahli, akun media sosial, selain berfungsi menyebarkan posting blog, juga bisa menjadi sumber "backlink" atau "outbond link", yakni tautan dari situs lain ke blog kita.

Backlink adalah salah satu yang diperhatikan oleh mesin pencari Google untuk menentukan peringkat blog kita di halaman hasil pencarian (SERP).

Maka, buatlah akun media sosial sebanyak-banyaknya. Meskipun "gak diurus", minimal akan menjadi backlink ke blog kita, selama kita memasukkan link blog ke "profil" di media-media sosial itu.

Demikian Cara Memasang Ikon Media Sosial di Sidebar Blog. Wasalam. (http://blogromeltea.blogspot.com).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

75 comments on Cara Memasang Widget Media Sosial di Sidebar Blog

  1. thanks ya. sangat membantu :)

    ReplyDelete
  2. kalau ]] ga ketemu gimana caranya

    ReplyDelete
  3. makasih gan...ane berhasil..kunjung balik y gan...

    ReplyDelete
  4. thanks infonya, berhasil! :)

    ReplyDelete
  5. thanks... langsung praktek hasil ok

    ReplyDelete
  6. Software Apotek Kalau sudah pakai template format xml yang otomatis ada icon social media, apakah cara edit html nya tetap sama? terimakasih

    ReplyDelete
  7. Terbukti ampuh tau ga broooo hahah
    Thanks ya!!

    ReplyDelete
    Replies
    1. ya, kalo doanya khusyu pasti ampuh lah :)
      YW

      Delete
  8. Laserjet Murah ribet pak, kalau dari templatenya sudah ada ikon socmed, cara editnya gmn?

    ReplyDelete
  9. makasih gan,,, ane coba dulu

    ReplyDelete
  10. makasih ya ka..
    dari sekian banyak cara yg aku coba, cuman di blog ini yg bisa

    ReplyDelete
  11. makasiiiih
    gampang n berhasiiiil

    boleh minta kode yang path :)

    ReplyDelete
  12. terima kasih bro sangat membantu (y)

    ReplyDelete
  13. Done...terima kasih infonya sangat membantu

    ReplyDelete
  14. Sudah dipraktekkan dan berhasil. terima kasih

    ReplyDelete
  15. Terima kasih atas info dan link nya...sangat bermanfaat...

    ReplyDelete
  16. Infonya sangat bermanfaat, terimakasih..

    ReplyDelete
  17. terimakasih kaaaa. Gampang banget ternyata kalau pakai yang ini.

    ReplyDelete
  18. Terima Kasih yah!
    rasa penasaranku akhirnya terjawab sudah...
    penjelasannya jelas sekali untuk orang seperti saya yg masi raba2 soalnya komputer...hihihih

    ReplyDelete
  19. makasih gan, ternyata berhasil.

    ReplyDelete
  20. Terima kasih Tips nya...

    ReplyDelete
  21. terimakasi min

    ReplyDelete
  22. To @ALL, sama-sama.... :)

    ReplyDelete
  23. Mantap work di blog ku gan..thks

    ReplyDelete
  24. Kenapa sehabis saya klik (Ctrl+F) dan search kode ] ]> atau < /style> tidak ada yang muncul satupun, solusinya bagaimana ya?

    ReplyDelete
  25. terima kasih..infonya sangat bermanfaat

    ReplyDelete
  26. Replies
    1. pindah aja ke blogger ngeblognya, tumblr gak populer :) Blogger is the best

      Delete
  27. yes, berhasil... makasih banyak..

    ReplyDelete
  28. Cara masang nya supaya berada di posisi tengah gimana kak ?

    ReplyDelete
  29. Makasih gan, berhasiiiiil banget

    ReplyDelete
  30. tangxs infoNya sangat bermanfaat dan gampang

    ReplyDelete
  31. Trimakasih ga, sangat bermanfaat :)

    ReplyDelete
  32. thanks... padahal ilmunya nol... tapi baru coba n berhasil

    ReplyDelete
  33. Thanks... akhirnya perjuanganku membuahkan hasil, rasa kantuk ku terkalahkan oleh rasa penasaranku. ^^

    ReplyDelete
  34. makasih kang ilmunya...

    ReplyDelete
  35. kalau menghubungkan gmail gmna yaa???

    ReplyDelete
    Replies
    1. bikin aja halaman kontak dan cantumkan email

      Delete
  36. Terima Kasih banyak ya.
    Sangat membantu saya.

    ReplyDelete
  37. Terima kasih...
    Sangat bermanfaat...

    ReplyDelete
  38. terima kasih tutorialnya.. akhirnya bisa naruh widget medsos di blog saya

    ReplyDelete
  39. Makasih postingan,sangat bermanfaat bagi kami yang pemula.
    Keren Abis. Bint*ang 5. Sipp.

    ReplyDelete
  40. script oke mas,cuma logonya harus diganti yang baru tuh mas..hehe

    ReplyDelete
  41. terima kasih, sdh sy coba dan berhasil

    ReplyDelete
  42. matur nuwun mas.berhasil saya terapkan, salam kenal and semoga tambah sukses selalu...

    ReplyDelete
  43. Ini sangat bermanfaat banget bagi pemula seperti saya.
    Btw belajar Seo google dimana gan?

    ReplyDelete
  44. terima kasih sangat membantu sekali

    ReplyDelete
  45. Terima kasih gan, Manjur tutorialnya
    Kunjungi juga blog saya yaa. Hehehee

    ReplyDelete
  46. keren gan bermanfaat sekali postnya berguna buat saya yang masih pemula akhirnya blog saya bisa terlihat lebih pro

    ReplyDelete
  47. info yang bermanfaat broo,thanks iya dan siap praktek

    ReplyDelete
  48. berhasil pak....
    matur suwon

    ReplyDelete
  49. kaga bisa,minta arahannya

    ReplyDelete
  50. Makasi info dan caranya. sangat membantu sekali

    ReplyDelete

No Spam, Please!

Contact Form

Name

Email *

Message *