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:
2. Copas Kode CSS Widget Media Sosial di Sidebar Blog berikut ini di atas kode ]]></b:skin>
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.
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:
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".
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'/>
.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>
Selesai!
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
.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.
Jika tidak muncul, tambahkan link ke awesome font di atas.
CARA LAIN
Memasang Widget Media Sosial di Sidebar Blog1. 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}
#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!
SUDAH? Belum......!
<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>
<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......!
8. Save!
You're done!!!
You're done!!!
Widget Media Sosial di Sidebar Blog dengan CSS Sprite
Cara pasangnya sama dengan di atas. Widget media sosialuntuk 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>
2. KODE HTML
Dipasang di widget: Layout > Add a Gadget > HTML/Javascript
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.
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/AVvXsEj1GhZxT8HccS1SOWTdcS954OLoLXFgjUlcz8TgWSfZOmfgusEMnDVZSQ5s1GYFTHRsR3C2oxDACxaNex6Iaec0IFRxlnIs_IlThqAY7ZDVdErs0X9X_y76GmsZpUbhL8wMUo8z3fUlOZYe/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:
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:Cara Memasangnya:
1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul widget boleh diisi boleh tidak.
3. Masukkan kode ini:
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:
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/AVvXsEjk9iVlqvjXGoMaXtP5S4mfN2cbRnQTCDCyFxKANZRV-LCYsLagWIbtdJSYE2G9aPhDYgnqf9Wf1fW4xIV357psjkEL8BgYnngtBr9817I3fsFi-CIcNBoKjETH68beycekLsfNHWOgnFtR/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/AVvXsEjnFqaSz6rVM8Qyy2wfcCdljvz7p09ArEQraDPcuKQhksl_RLgw2TSXq2I_uzcdsQuZmaebU05lYpummK1gTZtK2PQpiuJvyDkr85oW_Ei7dU8c3bJ5qhMknGM3B6vGojIinImZMKjQ1nTI/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/AVvXsEjeNgbd99P_3wmrDBJr6AN4aDQf6FlZkAb_k6Y63Ch645mCAbd_rfopS5LbICIfUbUt9vxdVIzTg2TAWIIsHsZGS7iRd29S82-qUfuJe1Nap-jodTOskvJVJ1NB8DV_Gqm8hMJB_RZVkDhM/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/AVvXsEhkFnq87EA64_CweNu1_ilh0eCXGcv-CUP31Mf97dCttLnwx0QiWoaAb2iUszOdUvIUTJlrDLMKXqyTPK50X7S8_GtcZcg1tFOVIM7eeWPGpofhUFByqDpBEA8UAiqoCeBTNCZzSqwrpjH6/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/AVvXsEg7naThj-rOzu0fpO1xL_-1SSJTIXz55Q4K5mbn3EYeei6m5ykAAFasNYxX9wKkKILdLsYdP5aT5aM7AiaRuGIxrLXI62WFcwFW11Ab1e5LwjX3Wp4cwK7YrvDJUj3ZPvEoXnLJol0AFEY6/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: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/AVvXsEjk9iVlqvjXGoMaXtP5S4mfN2cbRnQTCDCyFxKANZRV-LCYsLagWIbtdJSYE2G9aPhDYgnqf9Wf1fW4xIV357psjkEL8BgYnngtBr9817I3fsFi-CIcNBoKjETH68beycekLsfNHWOgnFtR/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/AVvXsEjnFqaSz6rVM8Qyy2wfcCdljvz7p09ArEQraDPcuKQhksl_RLgw2TSXq2I_uzcdsQuZmaebU05lYpummK1gTZtK2PQpiuJvyDkr85oW_Ei7dU8c3bJ5qhMknGM3B6vGojIinImZMKjQ1nTI/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/AVvXsEjeNgbd99P_3wmrDBJr6AN4aDQf6FlZkAb_k6Y63Ch645mCAbd_rfopS5LbICIfUbUt9vxdVIzTg2TAWIIsHsZGS7iRd29S82-qUfuJe1Nap-jodTOskvJVJ1NB8DV_Gqm8hMJB_RZVkDhM/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/AVvXsEhkFnq87EA64_CweNu1_ilh0eCXGcv-CUP31Mf97dCttLnwx0QiWoaAb2iUszOdUvIUTJlrDLMKXqyTPK50X7S8_GtcZcg1tFOVIM7eeWPGpofhUFByqDpBEA8UAiqoCeBTNCZzSqwrpjH6/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/AVvXsEg7naThj-rOzu0fpO1xL_-1SSJTIXz55Q4K5mbn3EYeei6m5ykAAFasNYxX9wKkKILdLsYdP5aT5aM7AiaRuGIxrLXI62WFcwFW11Ab1e5LwjX3Wp4cwK7YrvDJUj3ZPvEoXnLJol0AFEY6/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:
Ada juga link media sosial yang model metro style kayak gini nih:
<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/AVvXsEjk9iVlqvjXGoMaXtP5S4mfN2cbRnQTCDCyFxKANZRV-LCYsLagWIbtdJSYE2G9aPhDYgnqf9Wf1fW4xIV357psjkEL8BgYnngtBr9817I3fsFi-CIcNBoKjETH68beycekLsfNHWOgnFtR/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/AVvXsEjeNgbd99P_3wmrDBJr6AN4aDQf6FlZkAb_k6Y63Ch645mCAbd_rfopS5LbICIfUbUt9vxdVIzTg2TAWIIsHsZGS7iRd29S82-qUfuJe1Nap-jodTOskvJVJ1NB8DV_Gqm8hMJB_RZVkDhM/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/AVvXsEgK6A4zKv9TvoJxX_Oi_4VV75wfKmPFI4DBIaxk1mAZkBHX2vaJ__oUVh-vyjnZM9VKWkTHcsu6Gt0I0KGEIj4aluY_BTNgUZ_4ikpA5SGNhnA8uv9SIXl4LvyiqFPPfAyVSCQY0D9lCiBh/s1600/linkedin.JPG" alt="linkedin"/></a></li>
<li><a href="URL INSTAGRAM" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6E4z4WzXSoplDkLGRpYOhvizA0q42Q0ueJAM96NKL7LXm-YwK7FL83t_1viYDyp5bQSINWdNLLKsNerUJTEyBBUrMYj7AprYAfz2ULD17k1svXobgpWMCh5A0vBGohHLd0fROlcHWU2X5/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/AVvXsEg7naThj-rOzu0fpO1xL_-1SSJTIXz55Q4K5mbn3EYeei6m5ykAAFasNYxX9wKkKILdLsYdP5aT5aM7AiaRuGIxrLXI62WFcwFW11Ab1e5LwjX3Wp4cwK7YrvDJUj3ZPvEoXnLJol0AFEY6/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:
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).*
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).*
TERIMA KASIH
