Langkah cara membuat sosial media.
1.Login blogger masuk dashboard.
2.Cari dan klik Tata letak.
3.Klik Tambahkan gadget kemudian pilh HTML/JavaScript.
Copy dan pastekan kode di bawah ini kemudian simpan.
ELEMEN KODE
<style type="text/css">
/*start Facebook Icon*/
#SC a.sos1{opacity:0.7;margin:5px 5px 20px 20px;padding:7px 5px 5px 5px;background:#0282c2;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #0282c2,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */text-transform: uppercase;border-radius: 5px;
float:left;text-decoration:none;height:20px;color: transparent;font: 12px 'Arial black';
letter-spacing:1px;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGy77G_k5j457DtUEIoT2Yo9M2hsdw6JrpkiZpl6Qyu1rAFFEJsp1sedBSFPHA4a6g3n0_e146K6FdQ3Rk3KX6iskEgPB90UEcFEUHzpYuN2R14oq2bgADfByFu7mCLfWuBHrRjgbExRe/s1600/Web-Facebook+icon.png');background-repeat:no-repeat;
background-position:center;background-size: 100% 100%;
}#SC a.sos1:hover{opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #0282c2,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Facebook Icons*/
/*Start Google+ Icons*/
#SC a.sos2{opacity:0.7;margin:5px;padding:7px 5px 5px 5px;background:#d44137;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #d44137,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */text-transform: uppercase;
border-radius: 5px;float:left;text-decoration:none;height:20px;color: transparent;
font: 12px 'Arial black';letter-spacing:1px;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9ztlicqo_rSBHvKpMCQlaBKnc6TSMvPR8Edar-U7ZnCmQFWHBaE4pFq_o6J16JhdO-YreGHepSmKMLQ6W_V0LvUvhLmaTZfnmBSP4AY6OqoNp4lcJDkTUW_btb5VF0RLrq4-iwp4Gekt/s1600/Web-Google+icon.png');
background-repeat:no-repeat;background-position:center;background-size: 100% 100%;
}
#SC a.sos2:hover{opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #d44137,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Google+ Icons*/
/*Start Twitter Icons*/
#SC a.sos3{opacity:0.7;margin:5px;padding:7px 5px 5px 5px;background:#63c8f7;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #63c8f7,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */text-transform: uppercase;border-radius: 5px;
float:left;text-decoration:none;
height:20px;color: transparent;font: 12px 'Arial black';letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZ0mCctIAYHbuLRPbPIyA92bGUuMqDpYX98XDO5f7IyKxZwUqMZcCT4sJh5tMuo6eqauvDGSJmfCMpxARfbTVObRRnQj0QCrxNF3-boIl1yVHyzrXwM3TU3v-P0aVfyNqAsdzluvFCsNn/s1600/Web-Twitter+icon.png');
background-repeat:no-repeat;background-position:center;background-size: 100% 100%;
}
#SC a.sos3:hover{opacity:1;box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #63c8f7,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Twitter Icons*/
/*Start RSS Icons*/#SC a.sos4{opacity:0.7;margin: 5px;padding:7px 5px 5px 5px;background:#fc9c14;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #fc9c14,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;float:left;text-decoration:none;height:20px;color: transparent;
font: 12px 'Arial black';letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65bKYNxoItfvxQ8MJuvuJ3IGOKSO6lPxoqdPUvuPsyoQH66iozZ5Y5I-fwcv6BHwQimLqQVYuLKY8w8jX4HIjl5Tl5eO2GZcT2M45Ma0USk0X3ZonM19WjTJhuJ4YrqbYsF60dxJf_qvP/s1600/Web-RSS+icon.png');background-repeat:no-repeat;background-position:center;
background-size: 100% 100%;
}#SC a.sos4:hover{opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #fc9c14,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End RSS Icons*/
</style>
<center><div id="SC">
<a href="url facebook profil" class="sos1" rel="nofollow" target="_blank" title="Like us on Facebook">Icon</a><a href="url googlr plus profil" class="sos2" rel="author" target="_blank" title="Follow us on Google+">Icon</a>
<a href="url twitter profil" class="sos3" rel="nofollow" target="_blank" title="Follow us on Twitter">Icon</a>
<a href="url rss feed" class="sos4" rel="nofollow" target="_blank" title="Grab Our Rss Feed ">Icon</a>
</div></center><div align='right'><a href='http://jimweth009.blogspot.co.id/2015/12/kotak-search-box.html' target='blank'><small>[Get This Icon]</small></a></div>
/*start Facebook Icon*/
#SC a.sos1{opacity:0.7;margin:5px 5px 20px 20px;padding:7px 5px 5px 5px;background:#0282c2;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #0282c2,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */text-transform: uppercase;border-radius: 5px;
float:left;text-decoration:none;height:20px;color: transparent;font: 12px 'Arial black';
letter-spacing:1px;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGy77G_k5j457DtUEIoT2Yo9M2hsdw6JrpkiZpl6Qyu1rAFFEJsp1sedBSFPHA4a6g3n0_e146K6FdQ3Rk3KX6iskEgPB90UEcFEUHzpYuN2R14oq2bgADfByFu7mCLfWuBHrRjgbExRe/s1600/Web-Facebook+icon.png');background-repeat:no-repeat;
background-position:center;background-size: 100% 100%;
}#SC a.sos1:hover{opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #0282c2,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Facebook Icons*/
/*Start Google+ Icons*/
#SC a.sos2{opacity:0.7;margin:5px;padding:7px 5px 5px 5px;background:#d44137;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #d44137,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */text-transform: uppercase;
border-radius: 5px;float:left;text-decoration:none;height:20px;color: transparent;
font: 12px 'Arial black';letter-spacing:1px;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9ztlicqo_rSBHvKpMCQlaBKnc6TSMvPR8Edar-U7ZnCmQFWHBaE4pFq_o6J16JhdO-YreGHepSmKMLQ6W_V0LvUvhLmaTZfnmBSP4AY6OqoNp4lcJDkTUW_btb5VF0RLrq4-iwp4Gekt/s1600/Web-Google+icon.png');
background-repeat:no-repeat;background-position:center;background-size: 100% 100%;
}
#SC a.sos2:hover{opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #d44137,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Google+ Icons*/
/*Start Twitter Icons*/
#SC a.sos3{opacity:0.7;margin:5px;padding:7px 5px 5px 5px;background:#63c8f7;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #63c8f7,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */text-transform: uppercase;border-radius: 5px;
float:left;text-decoration:none;
height:20px;color: transparent;font: 12px 'Arial black';letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZ0mCctIAYHbuLRPbPIyA92bGUuMqDpYX98XDO5f7IyKxZwUqMZcCT4sJh5tMuo6eqauvDGSJmfCMpxARfbTVObRRnQj0QCrxNF3-boIl1yVHyzrXwM3TU3v-P0aVfyNqAsdzluvFCsNn/s1600/Web-Twitter+icon.png');
background-repeat:no-repeat;background-position:center;background-size: 100% 100%;
}
#SC a.sos3:hover{opacity:1;box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #63c8f7,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Twitter Icons*/
/*Start RSS Icons*/#SC a.sos4{opacity:0.7;margin: 5px;padding:7px 5px 5px 5px;background:#fc9c14;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #fc9c14,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;float:left;text-decoration:none;height:20px;color: transparent;
font: 12px 'Arial black';letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65bKYNxoItfvxQ8MJuvuJ3IGOKSO6lPxoqdPUvuPsyoQH66iozZ5Y5I-fwcv6BHwQimLqQVYuLKY8w8jX4HIjl5Tl5eO2GZcT2M45Ma0USk0X3ZonM19WjTJhuJ4YrqbYsF60dxJf_qvP/s1600/Web-RSS+icon.png');background-repeat:no-repeat;background-position:center;
background-size: 100% 100%;
}#SC a.sos4:hover{opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #fc9c14,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End RSS Icons*/
</style>
<center><div id="SC">
<a href="url facebook profil" class="sos1" rel="nofollow" target="_blank" title="Like us on Facebook">Icon</a><a href="url googlr plus profil" class="sos2" rel="author" target="_blank" title="Follow us on Google+">Icon</a>
<a href="url twitter profil" class="sos3" rel="nofollow" target="_blank" title="Follow us on Twitter">Icon</a>
<a href="url rss feed" class="sos4" rel="nofollow" target="_blank" title="Grab Our Rss Feed ">Icon</a>
</div></center><div align='right'><a href='http://jimweth009.blogspot.co.id/2015/12/kotak-search-box.html' target='blank'><small>[Get This Icon]</small></a></div>
Selesai sudah cara membuat sosial media di blog.
EmoticonEmoticon