Cara Memasang Link Media Sosial di Sidebar Blog.

SEBELUMNYA CB sudah share wacana cara memasang link media umum di bawah postingan blog. Link widget media umum 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:

Cara Memasang Link Media Sosial di Sidebar Blog Cara Memasang Link Media Sosial di Sidebar Blog


Keren 'kan? Link Media Sosial ini dapat juga dipasang di bawah postingan blog. Namun, dalam tips kali ini cara memasangnya di sidebar blog dengan cara mudah, tanpa harus edit template, sehingga gampang dilepas kalau mau diganti.

Cara Memasang Link Media Sosial di Sidebar Blog

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Copas instruksi 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("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat}
.social_profiles li .twitter{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -45px}
.social_profiles li .gplus{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -90px}
.social_profiles li .pinterest{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -135px}
.social_profiles li .rss{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -180px}
.social_profiles li .linkedin{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -225px}
.social_profiles li .tumblr{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -270px}
.social_profiles li .youtube{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -315px}
.social_profiles li .mail{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/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 umum kepunyaan Anda.
4. Save!

Beres!

Jika kesannya tidak memuaskan, Anda dapat coba desain link media umum lainnya.

Demikian Cara Memasang Link Media Sosial di Sidebar Blog. Good Luck! (www.idtutorial.com).*
Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours