Cara Memasang Link Media Sosial di Sidebar Blog

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:

Cara Memasang Link Media Sosial di Sidebar Blog


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("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 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).*

0 Komentar untuk "Cara Memasang Link Media Sosial di Sidebar Blog"

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *