SOCIAL atau
media sosial menjadi salah satu pilar
SEO blog. 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. Widgetnya bisa dipasang di sidebar blog.. Ini salah satu jenis tampilannya:
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.
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!
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXHtHILkDo4eEYSGzvESJ3SZmW9GGhvRt5FBoc1NS2tLoiJon8lP0YN_jHpFeVP7A9Aa11z13hF0D-7jaSaE-6w6YdwDQRfpqRc84db5ijN-2MCxXEB3s-PnDTDaWNpCxWiwSiVNIF5yg/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 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqG2YvbjtOSTIrr536ToD-7O2pmUTiQFhcJ1iU-Ud8KhvbL8Yk7DzSFjklJVkrzxcaL4da2ly8R2Rj-E4ppJiGa3lvgV7PtuMKRJyni8mrKEzaEXAqZscpRvYHQmsP62JvdbgzYskNW8q/s57/Facebook%2520alt%25201.png"
alt="facebook"/></a></li>
<li><a href="URL GOOGLE PLUS"
target=_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwwYMW9baVi9qZe6DQ-Vbz8k0mEQPXhd7ehp3B95hLrmlFYCB721KoeOSBJJrpvGQXOCdNLYIP-Okp1booMFul7A1DL3hVeSSoDS9G43-fApnTKhbKBNPDshHw5ro0MgAKG1SxrYK3yP3/s57/Google%252B%2520alt.png"
alt="google plus"/></a></li>
<li><a href="URL TWITTER"
target=_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jDgUOW40zeXwMTILLDk3UepyC77vXoczZFUztjTbhblBU2236JzEztiPgW12HWW_F0NrRirN6yu5E5mDhwrc9vTnnDT0p8MCkoWNYhnec-FubxDNWRgK4lU7yOWPV4AJndb1gLBR1xiw/s57/twitter%2520%252Balt.png"
alt="twitter" /></a></li>
<li><a href="URL FEED"
target=_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FPyGMZI3qeQycqwOP1oaemVdXJC8cp9GDn_iclikv-S__C43NAcoNe8GvDCNnypccF-Cz69KomXOd2QTQWkLiZ5RorR3HskIdmw1tLYX-UOGu19jpmgyfEsWRgUvEAQIxF5o74feXsvC/s57/RSS%2520Feed.png"
alt="rss feed"/></a></li>
<li><a href="URL YOUTUBE"
target=_blank"><img style='width:60px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKfuQaJnTmSKwgYMZpSaS6RlXKX5Rv3ObD7CvUS_zRYY9Bu4Eb5TZvDTGW78LLcRgK6K8hszOF690TLMWhUmUBrzi6Bu66BH9MLLOXkud6uwwhG0ZKBxjeufFXFFuKVdJmxWtVVkzYwbR/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:
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqG2YvbjtOSTIrr536ToD-7O2pmUTiQFhcJ1iU-Ud8KhvbL8Yk7DzSFjklJVkrzxcaL4da2ly8R2Rj-E4ppJiGa3lvgV7PtuMKRJyni8mrKEzaEXAqZscpRvYHQmsP62JvdbgzYskNW8q/s57/Facebook%2520alt%25201.png"
alt="facebook"/></a></li>
<li><a href="URL TWITTER"
target=_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jDgUOW40zeXwMTILLDk3UepyC77vXoczZFUztjTbhblBU2236JzEztiPgW12HWW_F0NrRirN6yu5E5mDhwrc9vTnnDT0p8MCkoWNYhnec-FubxDNWRgK4lU7yOWPV4AJndb1gLBR1xiw/s57/twitter%2520%252Balt.png"
alt="twitter" /></a></li>
<li><a href="URL LINKEDIN"
target=_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBbSTzAfEtq5CKMx5qOmJfjCk3YnXZzFhhG5U9pMXoh159IyG6EIgpra7ezCPUXHQWCZqadikVetNt8BSSHr-RYwzYk38KTg02PvgxCuMOIWGwofxdi2MQwS1J7G5uHz-XTgEntHWbDuzZ/s1600/linkedin.JPG"
alt="linkedin"/></a></li>
<li><a href="URL INSTAGRAM"
target=_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2naa3d2t3w0BYTYjLMq671LBk0rQUbEnnjPBxXN7hQ7RIJeoMYLYu6T6UOpaaqDrPmvHHppix-HIqKPYRpevavJOfv3Uvk2soy3B1S_WvZTf8QsMZgi49H5AGZv1YDKJG8qzXq1tB2IJ/s1600/instagram.JPG"
alt="instagram"/></a></li>
<li><a href="URL YOUTUBE"
target=_blank"><img style='width:60px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKfuQaJnTmSKwgYMZpSaS6RlXKX5Rv3ObD7CvUS_zRYY9Bu4Eb5TZvDTGW78LLcRgK6K8hszOF690TLMWhUmUBrzi6Bu66BH9MLLOXkud6uwwhG0ZKBxjeufFXFFuKVdJmxWtVVkzYwbR/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 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.
