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:
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.
2. Copas kode berikut ini:
✍ Sumber Pautan : ☕ Contoh Blog
Kredit kepada pemilik laman asal dan sekira berminat untuk meneruskan bacaan sila klik link atau copy paste ke web server : http://ift.tt/2wULO2T
(✿◠‿◠)✌ Mukah Pages : Pautan Viral Media Sensasi Tanpa Henti. Memuat-naik beraneka jenis artikel menarik setiap detik tanpa henti dari pelbagai sumber. Selamat membaca dan jangan lupa untuk 👍 Like & 💕 Share di media sosial anda!
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/JavaScript2. 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://ift.tt/2wVuVoP") no-repeat}
.social_profiles li .twitter{background:url("http://ift.tt/2wVuVoP") no-repeat 0 -45px}
.social_profiles li .gplus{background:url("http://ift.tt/2wVuVoP") no-repeat 0 -90px}
.social_profiles li .pinterest{background:url("http://ift.tt/2wVuVoP") no-repeat 0 -135px}
.social_profiles li .rss{background:url("http://ift.tt/2wVuVoP") no-repeat 0 -180px}
.social_profiles li .linkedin{background:url("http://ift.tt/2wVuVoP") no-repeat 0 -225px}
.social_profiles li .tumblr{background:url("http://ift.tt/2wVuVoP") no-repeat 0 -270px}
.social_profiles li .youtube{background:url("http://ift.tt/2wVuVoP") no-repeat 0 -315px}
.social_profiles li .mail{background:url("http://ift.tt/2wVuVoP") 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='http://ift.tt/g8FRpY' 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='http://ift.tt/Uf0Cvf' target='_blank'><span>Pinterest</span></a></li>
<li><a class='rss' href='http://ift.tt/2dqxnKm' target='_blank'><span>RSS</span></a></li>
<li><a class='linkedin' href='http://ift.tt/iMnaLP' 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!
Demikian Cara Memasang Link Media Sosial di Sidebar Blog. Good Luck! (www.contohblog.com).*
✍ Sumber Pautan : ☕ Contoh Blog
Kredit kepada pemilik laman asal dan sekira berminat untuk meneruskan bacaan sila klik link atau copy paste ke web server : http://ift.tt/2wULO2T
(✿◠‿◠)✌ Mukah Pages : Pautan Viral Media Sensasi Tanpa Henti. Memuat-naik beraneka jenis artikel menarik setiap detik tanpa henti dari pelbagai sumber. Selamat membaca dan jangan lupa untuk 👍 Like & 💕 Share di media sosial anda!
Post a Comment