Cara Memasang Link Media Sosial di Sidebar Blog.
Kali ini saya akan men-share Cara Memasang Link Media Sosial di Sidebar Blog dengan desain tampilan sebagaimana gambar berikut ini:
itu lah hasil nya gan, jika agan tertarik ikuti toturialnya, jika tidak silahkan di coba :) :'v , oh iyaa Link Media Sosial ini bisa juga dipasang di bawah postingan blog. Namun, dalam tips kali ini cara memasangnya di sidebar blog dengan cara mudah, tanpa harus edit template, sehingga mudah dilepas jika mau diganti.
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/AVvXsEgIMacTSplZCENH01Dd2JtCgMRUXR17b4J2LC5tSH5wyBUmg4E3jgJLHJC1UL4GY0Ghyphenhyphen-w_9EzoCjwSTGs0YUZd1wM-tI_7McXUNcxE1qII381_5a7OcOjUwyqNck8Wr-Z7AMaSr95gwHwK/s1600/social_sprite.png") no-repeat}
.social_profiles li .twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMacTSplZCENH01Dd2JtCgMRUXR17b4J2LC5tSH5wyBUmg4E3jgJLHJC1UL4GY0Ghyphenhyphen-w_9EzoCjwSTGs0YUZd1wM-tI_7McXUNcxE1qII381_5a7OcOjUwyqNck8Wr-Z7AMaSr95gwHwK/s1600/social_sprite.png") no-repeat 0 -45px}
.social_profiles li .gplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMacTSplZCENH01Dd2JtCgMRUXR17b4J2LC5tSH5wyBUmg4E3jgJLHJC1UL4GY0Ghyphenhyphen-w_9EzoCjwSTGs0YUZd1wM-tI_7McXUNcxE1qII381_5a7OcOjUwyqNck8Wr-Z7AMaSr95gwHwK/s1600/social_sprite.png") no-repeat 0 -90px}
.social_profiles li .pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMacTSplZCENH01Dd2JtCgMRUXR17b4J2LC5tSH5wyBUmg4E3jgJLHJC1UL4GY0Ghyphenhyphen-w_9EzoCjwSTGs0YUZd1wM-tI_7McXUNcxE1qII381_5a7OcOjUwyqNck8Wr-Z7AMaSr95gwHwK/s1600/social_sprite.png") no-repeat 0 -135px}
.social_profiles li .rss{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMacTSplZCENH01Dd2JtCgMRUXR17b4J2LC5tSH5wyBUmg4E3jgJLHJC1UL4GY0Ghyphenhyphen-w_9EzoCjwSTGs0YUZd1wM-tI_7McXUNcxE1qII381_5a7OcOjUwyqNck8Wr-Z7AMaSr95gwHwK/s1600/social_sprite.png") no-repeat 0 -180px}
.social_profiles li .linkedin{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMacTSplZCENH01Dd2JtCgMRUXR17b4J2LC5tSH5wyBUmg4E3jgJLHJC1UL4GY0Ghyphenhyphen-w_9EzoCjwSTGs0YUZd1wM-tI_7McXUNcxE1qII381_5a7OcOjUwyqNck8Wr-Z7AMaSr95gwHwK/s1600/social_sprite.png") no-repeat 0 -225px}
.social_profiles li .tumblr{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMacTSplZCENH01Dd2JtCgMRUXR17b4J2LC5tSH5wyBUmg4E3jgJLHJC1UL4GY0Ghyphenhyphen-w_9EzoCjwSTGs0YUZd1wM-tI_7McXUNcxE1qII381_5a7OcOjUwyqNck8Wr-Z7AMaSr95gwHwK/s1600/social_sprite.png") no-repeat 0 -270px}
.social_profiles li .youtube{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMacTSplZCENH01Dd2JtCgMRUXR17b4J2LC5tSH5wyBUmg4E3jgJLHJC1UL4GY0Ghyphenhyphen-w_9EzoCjwSTGs0YUZd1wM-tI_7McXUNcxE1qII381_5a7OcOjUwyqNck8Wr-Z7AMaSr95gwHwK/s1600/social_sprite.png") no-repeat 0 -315px}
.social_profiles li .mail{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMacTSplZCENH01Dd2JtCgMRUXR17b4J2LC5tSH5wyBUmg4E3jgJLHJC1UL4GY0Ghyphenhyphen-w_9EzoCjwSTGs0YUZd1wM-tI_7McXUNcxE1qII381_5a7OcOjUwyqNck8Wr-Z7AMaSr95gwHwK/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'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 dan Liat Hasilnya.
Jika hasilnya tidak memuaskan, Anda bisa coba desain link media sosial lainnya.
dan apabila ada yang kurang paham silahkan komen ya agan...
