Cara Memasang Widget Media Sosial di Sidebar Blog

Posted by | Follow @romeltea

Cara Memasang Widget Media Sosial 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.

Cara Memasang Widget Ikon 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!

7. Nomor Jersey Angel Di Maria di Manchester United (MU) dan no jersey Ronaldo di Real Madrid, juga no punggung Atep Kapten Persib Bandung :)

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!

Ada juga link media sosial yang model metro style:

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).*

» Thanks for reading Cara Memasang Widget Media Sosial di Sidebar Blog

55 Komentar untuk "Cara Memasang Widget Media Sosial di Sidebar Blog"

kalau ]] ga ketemu gimana caranya

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

thanks infonya, berhasil! :)

thanks... langsung praktek hasil ok

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

Terbukti ampuh tau ga broooo hahah
Thanks ya!!

ya, kalo doanya khusyu pasti ampuh lah :)
YW

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

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

makasiiiih
gampang n berhasiiiil

boleh minta kode yang path :)

terima kasih bro sangat membantu (y)

Done...terima kasih infonya sangat membantu

Sudah dipraktekkan dan berhasil. terima kasih

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

Infonya sangat bermanfaat, terimakasih..

terimakasih kaaaa. Gampang banget ternyata kalau pakai yang ini.

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

Mantap work di blog ku gan..thks

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

terima kasih..infonya sangat bermanfaat

pindah aja ke blogger ngeblognya, tumblr gak populer :) Blogger is the best

yes, berhasil... makasih banyak..

Cara masang nya supaya berada di posisi tengah gimana kak ?

Makasih gan, berhasiiiiil banget

tangxs infoNya sangat bermanfaat dan gampang

Trimakasih ga, sangat bermanfaat :)

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

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

kalau menghubungkan gmail gmna yaa???

bikin aja halaman kontak dan cantumkan email

Terima Kasih banyak ya.
Sangat membantu saya.

Terima kasih...
Sangat bermanfaat...

No Spam, Please!

Back To Top