Cara Memasang Link Media Sosial di Sidebar Blog

Cara Memasang Link Media Sosial di Sidebar Blog

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Copas kode berikut ini:

<style>#social_profiles-wrap{background:rgba(255,255,255,0.3);width:94%;height:auto;float:left;margin:10px 0 10px 0;padding:20px;text-align:center;border-radius:4px;font-family:'Open Sans Condensed',Verdana;border:1px solid #f2f2f2;-webkit-border-radius:4px;-moz-border-radius:4px;-webkit-box-shadow:1px 0 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:1px 0 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:1px 0 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);text-decoration:none}
#social_profiles-wrap p{color:#446cb3;font-size:16px;font-weight:700;text-align:center;text-decoration:none!important}
.social_profiles{display:inline-block;padding:5px 0}
ul.social_profiles{background:0;float:none;margin:0 37px;text-decoration:none}
ul.social_profiles li{background:none!important;padding:0!important}
.social_profiles li{display:inline;margin-top:40px;list-style-type:none}
.social_profiles li a{display:inline-block;list-style-type:none;width:40px;height:40px;outline:0;margin-right:7px;position:relative;vertical-align:middle;z-index:3;text-decoration:none}
.social_profiles li a>:last-child{margin-right:0!important}
.social_profiles li .facebook{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDyHSkGW-YypYybHg0osD6hHyzvJoylhr89yi0EoSjiDbL2K0VI3jB2wuve1CeUt8LmAX0zSK5dmRjxH_t0UWs01lgh0KwUglDivl5Mqls5F7GHatipkZhGhnxUpNQU2uNhw3WmFmiqkE/s1600/social_sprite.png") no-repeat}
.social_profiles li .twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDyHSkGW-YypYybHg0osD6hHyzvJoylhr89yi0EoSjiDbL2K0VI3jB2wuve1CeUt8LmAX0zSK5dmRjxH_t0UWs01lgh0KwUglDivl5Mqls5F7GHatipkZhGhnxUpNQU2uNhw3WmFmiqkE/s1600/social_sprite.png") no-repeat 0 -45px}
.social_profiles li .gplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDyHSkGW-YypYybHg0osD6hHyzvJoylhr89yi0EoSjiDbL2K0VI3jB2wuve1CeUt8LmAX0zSK5dmRjxH_t0UWs01lgh0KwUglDivl5Mqls5F7GHatipkZhGhnxUpNQU2uNhw3WmFmiqkE/s1600/social_sprite.png") no-repeat 0 -90px}
.social_profiles li .pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDyHSkGW-YypYybHg0osD6hHyzvJoylhr89yi0EoSjiDbL2K0VI3jB2wuve1CeUt8LmAX0zSK5dmRjxH_t0UWs01lgh0KwUglDivl5Mqls5F7GHatipkZhGhnxUpNQU2uNhw3WmFmiqkE/s1600/social_sprite.png") no-repeat 0 -135px}
.social_profiles li .rss{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDyHSkGW-YypYybHg0osD6hHyzvJoylhr89yi0EoSjiDbL2K0VI3jB2wuve1CeUt8LmAX0zSK5dmRjxH_t0UWs01lgh0KwUglDivl5Mqls5F7GHatipkZhGhnxUpNQU2uNhw3WmFmiqkE/s1600/social_sprite.png") no-repeat 0 -180px}
.social_profiles li .linkedin{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDyHSkGW-YypYybHg0osD6hHyzvJoylhr89yi0EoSjiDbL2K0VI3jB2wuve1CeUt8LmAX0zSK5dmRjxH_t0UWs01lgh0KwUglDivl5Mqls5F7GHatipkZhGhnxUpNQU2uNhw3WmFmiqkE/s1600/social_sprite.png") no-repeat 0 -225px}
.social_profiles li .tumblr{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDyHSkGW-YypYybHg0osD6hHyzvJoylhr89yi0EoSjiDbL2K0VI3jB2wuve1CeUt8LmAX0zSK5dmRjxH_t0UWs01lgh0KwUglDivl5Mqls5F7GHatipkZhGhnxUpNQU2uNhw3WmFmiqkE/s1600/social_sprite.png") no-repeat 0 -270px}
.social_profiles li .youtube{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDyHSkGW-YypYybHg0osD6hHyzvJoylhr89yi0EoSjiDbL2K0VI3jB2wuve1CeUt8LmAX0zSK5dmRjxH_t0UWs01lgh0KwUglDivl5Mqls5F7GHatipkZhGhnxUpNQU2uNhw3WmFmiqkE/s1600/social_sprite.png") no-repeat 0 -315px}
.social_profiles li .mail{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDyHSkGW-YypYybHg0osD6hHyzvJoylhr89yi0EoSjiDbL2K0VI3jB2wuve1CeUt8LmAX0zSK5dmRjxH_t0UWs01lgh0KwUglDivl5Mqls5F7GHatipkZhGhnxUpNQU2uNhw3WmFmiqkE/s1600/social_sprite.png") no-repeat 0 -360px}
.social_profiles li a span{width:60px;height:auto;padding:2px;left:50%;margin-left:-38px;font-family:"Open Sans Condensed",sans-serif;font-weight:400;font-size:12px;color:#fff;text-align:center;border:5px solid #446cb3;background:#446cb3;text-indent:0;position:absolute;pointer-events:none;border-radius:5%;opacity:0;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.social_profiles li a span:before,.social_profiles li a span:after{content:'';position:absolute;bottom:-15px;left:50%;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent}
.social_profiles li a span:after{bottom:-15px;margin-top:6px;margin-left:-10px;border-top:10px solid #446cb3}
.social_profiles li a:hover span{opacity:.9;bottom:50px}
</style>
<div id='social_profiles-wrap'>
<p>Don&#39;t Miss Any Update, Join Us on Social Networks.</p>
<ul class='social_profiles'>
<li><a class='facebook' href='https://www.facebook.com/' target='_blank'><span>Facebook</span></a></li>
<li><a class='twitter' href='https://twitter.com/' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='https://plus.google.com' target='_blank'><span>Googl+</span></a></li>
<li><a class='pinterest' href='https://www.pinterest.com/' target='_blank'><span>Pinterest</span></a></li>
<li><a class='rss' href='https://feeds.feedburner.com/' target='_blank'><span>RSS</span></a></li>
<li><a class='linkedin' href='https://www.linkedin.com/' target='_blank'><span>LinkedIn</span></a></li>
<li><a class='youtube' href='https://www.youtube.com/' target='_blank'><span>Youtube</span></a></li>
</ul>
</div>

3. Ganti link media sosialnya, yang warna merah, dengan link media sosial kepunyaan Anda.

4. Save!

Beres!

Jika hasilnya tidak memuaskan, Anda bisa coba desain link media sosial lainnya.