Cara Memasang Link Media Sosial di Sidebar Blog

Baca Juga

Cara Memasang Link Media Sosial di Sidebar Blog.

SEBELUMNYA CB sudah share tentang cara memasang link media sosial di bawah postingan blog. Link widget media sosial di sidebar blog juga sudah pernah.

Kali ini CB share Cara Memasang Link Media Sosial di Sidebar Blog dengan desain tampilan sebagaimana gambar berikut ini:

Keren 'kan? 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/AVvXsEjlaiwr-V_al6w5-m1Q4Xx5v8PNhUKMZy98tiOqXwp8RyWGefrmLA1SBtIByZQyPX25_G4lyN7Nmn3xe-mKKY93A_AhKUAGZidFpy46A0ZGcP-07uQAVTNKk4JukB3hyphenhyphenYvME3fggbgAK3rJ/s1600/social_sprite.png") no-repeat}
.social_profiles li .twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaiwr-V_al6w5-m1Q4Xx5v8PNhUKMZy98tiOqXwp8RyWGefrmLA1SBtIByZQyPX25_G4lyN7Nmn3xe-mKKY93A_AhKUAGZidFpy46A0ZGcP-07uQAVTNKk4JukB3hyphenhyphenYvME3fggbgAK3rJ/s1600/social_sprite.png") no-repeat 0 -45px}
.social_profiles li .gplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaiwr-V_al6w5-m1Q4Xx5v8PNhUKMZy98tiOqXwp8RyWGefrmLA1SBtIByZQyPX25_G4lyN7Nmn3xe-mKKY93A_AhKUAGZidFpy46A0ZGcP-07uQAVTNKk4JukB3hyphenhyphenYvME3fggbgAK3rJ/s1600/social_sprite.png") no-repeat 0 -90px}
.social_profiles li .pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaiwr-V_al6w5-m1Q4Xx5v8PNhUKMZy98tiOqXwp8RyWGefrmLA1SBtIByZQyPX25_G4lyN7Nmn3xe-mKKY93A_AhKUAGZidFpy46A0ZGcP-07uQAVTNKk4JukB3hyphenhyphenYvME3fggbgAK3rJ/s1600/social_sprite.png") no-repeat 0 -135px}
.social_profiles li .rss{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaiwr-V_al6w5-m1Q4Xx5v8PNhUKMZy98tiOqXwp8RyWGefrmLA1SBtIByZQyPX25_G4lyN7Nmn3xe-mKKY93A_AhKUAGZidFpy46A0ZGcP-07uQAVTNKk4JukB3hyphenhyphenYvME3fggbgAK3rJ/s1600/social_sprite.png") no-repeat 0 -180px}
.social_profiles li .linkedin{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaiwr-V_al6w5-m1Q4Xx5v8PNhUKMZy98tiOqXwp8RyWGefrmLA1SBtIByZQyPX25_G4lyN7Nmn3xe-mKKY93A_AhKUAGZidFpy46A0ZGcP-07uQAVTNKk4JukB3hyphenhyphenYvME3fggbgAK3rJ/s1600/social_sprite.png") no-repeat 0 -225px}
.social_profiles li .tumblr{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaiwr-V_al6w5-m1Q4Xx5v8PNhUKMZy98tiOqXwp8RyWGefrmLA1SBtIByZQyPX25_G4lyN7Nmn3xe-mKKY93A_AhKUAGZidFpy46A0ZGcP-07uQAVTNKk4JukB3hyphenhyphenYvME3fggbgAK3rJ/s1600/social_sprite.png") no-repeat 0 -270px}
.social_profiles li .youtube{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaiwr-V_al6w5-m1Q4Xx5v8PNhUKMZy98tiOqXwp8RyWGefrmLA1SBtIByZQyPX25_G4lyN7Nmn3xe-mKKY93A_AhKUAGZidFpy46A0ZGcP-07uQAVTNKk4JukB3hyphenhyphenYvME3fggbgAK3rJ/s1600/social_sprite.png") no-repeat 0 -315px}
.social_profiles li .mail{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaiwr-V_al6w5-m1Q4Xx5v8PNhUKMZy98tiOqXwp8RyWGefrmLA1SBtIByZQyPX25_G4lyN7Nmn3xe-mKKY93A_AhKUAGZidFpy46A0ZGcP-07uQAVTNKk4JukB3hyphenhyphenYvME3fggbgAK3rJ/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.

Demikian Cara Memasang Link Media Sosial di Sidebar Blog. Good Luck! (www.contohblog.com).*

Sumber