Cara memasang widget dan menampilkan foto facebook di blogger

Memasang Widget Media Sosial pada Blog

Media sosial menjadi salah satu pilar SEO blog, diantaranya facebook, twitter, google plus, linkedin, pinterest, instagram, dan youtube.

Fungsi link akun media sosial yang dipasang di blog bisa untuk "attract new readers and engage with regulars", menarik pembaca baru dan menjaga pengunjung setia.

Cara menampilkan, menambah, atau memasang widget icon/linkmedia sosial di sidebar blog yang juga berfungsi menambah follower, liker, dan teman. 

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):

6. Klik "Layout" > "Add a Gadget" > pilih "HTML/JavaScript".
7. 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/' target='_blank'><img alt='Twitter' src='https://lh6.googleusercontent.com/-40NMu9YKlek/VJ66NcYZy3I/AAAAAAAAI5Y/9Yn9ZtLQb18/s32-no/twitter.png' title='Twitter'/></a>
<a href='https://www.facebook.com/sukri.almarosy' 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='https://www.linkedin.com/in/sukri-almarosy-almarosy-b77791a2/' 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.sukrialmarosy.com/' 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' target='_blank'><img alt='Instagram' src='https://lh4.googleusercontent.com/-3MPofh4xhe4/VJ66Ma_XWaI/AAAAAAAAI5E/6d8mLJBvFFU/s32-no/instagram.png' title='Instagram'/></a>
<a href='https://www.youtube.com/channel/UCebzYu52M92O53kX9Y1UnbQ?view_as=subscriber' 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>

Ganti link yang berwarna merah dengan link media sosial Anda!

8. Save!
Selesai...

Untuk 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://lh6.googleusercontent.com/-OLch25YGXm0/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!