Cara Memasang Media Sosial di Sidebar Blog dengan Mudah

Sobat. Salah satu cara agar blog kita bisa dikenal orang lain adalah menggnakan bantuan”media social book marking”.

Dengan memanfaatkan media sosial tersebut, kita bisa langsung memberikan update informasi artikel terbaru kepada rekan-rekan pembaca dengan mudah.

Seperti halnya pada blog ini, di atas header terdapat media sosial yang bisa digunakan untuk bergabung dengan Forum Blogger Indonesia ini. Dengan begitu, komunikasi antara admin dengan pembaca setia akan terjaga dan terjalin dengan baik.

Salah satu tip desain blogger dalam memasang media social book marking adalah di atas header dan di bagian sidebar blog. Berikut cara mudah memasang media sosial di sidebar blog.

1. Masuk akun blogger
2. Pilih layout (tata letak) > widget > HTML/JacaScript
3. Copas kode di bawah ini:

<!– SOCIAL PROFILE END –>
<div class=’widget-content’>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
    .TZ-social{padding:0 5px 15px;}
    .TZ-social img:hover{opacity:0.8}
    .googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
    #widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
    .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id=’socialwidget’>
    <div class=’TZ-social’>
    <!– social ico –>
    <center>
    <a href=‘https://www.facebook.com/pages/Membangun-Peradaban-Bangsa/762695560467693‘ rel=’nofollow’ style=’margin-right: 15px;’ target=’_blank’>
    <img alt=’Facebook’ src=’http://2.bp.blogspot.com/-1UYOmpOWMv8/T65vfQFE80I/AAAAAAAAABY/H0t0CMEwyO0/s1600/facebook.png’/></a>
    <a href=’http://twitter.com/sahilluqman‘ rel=’nofollow’ style=’margin-right: 12px;’ target=’_blank’>
    <img alt=’Twitter’ src=’http://1.bp.blogspot.com/-4xPK0hkcELk/T65vi83XGqI/AAAAAAAAAB0/ef6Af1cesHE/s1600/twitter.png’/></a>
    <a href=’https://plus.google.com/u/0/102411564198767664080‘ rel=’me’ style=’margin-right: 12px;’ target=’_blank’>
    <img alt=’Google Plus’ src=’http://3.bp.blogspot.com/-QEdzJcR1pfI/T65vgBJxxMI/AAAAAAAAABg/2eXrz-32Gds/s1600/gplus.png’/></a>
    <a href=’http://www.pinterest.com/sahilluqman‘ style=’margin-right: 12px;’ target=’_blank’>
    <img alt=’Pinterest’ src=’http://1.bp.blogspot.com/-2A1sbDGCgOw/T65vhAL4VZI/AAAAAAAAABo/2XDEIAFUuEI/s1600/pinterest.png’/></a>
    <a href=’http://feeds.feedburner.com/blogspot/ygynf‘ rel=’nofollow’ style=’margin-right: 12px;’ target=’_blank’>
    <img alt=’RSS Feed’ src=’http://1.bp.blogspot.com/-wK9q4eUXA6U/T65viJ1HVmI/AAAAAAAAABs/DyIkCZdJ1Y4/s1600/rss.png’/></a>
    <a href=’http://www.linkedin.com/in/‘ rel=’nofollow’ style=’margin-right: 12px;’ target=’_blank’>
    <img alt=’Linkedin’ src=’http://1.bp.blogspot.com/-uQdbnT1u1e0/Ui26eZOy3VI/AAAAAAAAJqA/h4wzaYt2L_Y/s1600/linkedin.png’/></a>
    </center>
    </div>
    </div>
</div>
<!– SOCIAL PROFILE END –>

4. Save

Keterangan:
– Ganti kode berwarna merah di atas dengan ID sobat masing-masing.
– Life Demo 1
– Life Demo 2

Demikian tips desain blogspot kali ini. Semoga menambah kualitas blog sobat. Salam.
(http://forumblogindo.blogspot.com).*

Source:
http://www.contohblog.com/2014/11/cara-pasang-logo-media-sosial-di.html