Cara Letak Sosial Media Button Di Sidebar


Bagi yang masih tercari-cari cara mudah untuk letak sosial media button di sidebar boleh ikut cara yang sis kongsikan ni.

Tak susah awak hanya perlu;
1- login ke akaun blogger >> Dashboard >> Layout >> Add a Gadget (Html)
2- Copy semua ayat di bawah ini dan Paste kan ke dalam kotak Html tersebut

<div class="widget-content">
<style>
    #socialwidget {
   width: 300px;
   margin-left: -7px;
    }
    .TZ-social{
    padding: 10px 5px 10px 5px;
   border-bottom: 1px dotted #EBE2E2;
    }
    .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;
    ine-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">
    <!-- Begin Widget -->
    <div class="TZ-social">
    <!-- social ico -->
    <center>
    <a style="margin-right: 15px;" href="LINK URL FACEBOOK AWAK" target="_blank" rel="nofollow">
    <img src="http://2.bp.blogspot.com/-1UYOmpOWMv8/T65vfQFE80I/AAAAAAAAABY/H0t0CMEwyO0/s1600/facebook.png" title="Facebook" /></a>
    <a style="margin-right: 12px;" LINK URL TWITTER AWAK" target="_blank" rel="nofollow">
    <img src="http://1.bp.blogspot.com/-4xPK0hkcELk/T65vi83XGqI/AAAAAAAAAB0/ef6Af1cesHE/s1600/twitter.png" title="Twitter" /></a>
    <a style="margin-right: 12px;" rel="me" href="LINK URL GOOGLE PLUS" target="_blank">
    <img src="http://3.bp.blogspot.com/-QEdzJcR1pfI/T65vgBJxxMI/AAAAAAAAABg/2eXrz-32Gds/s1600/gplus.png" title="Google Plus" /></a>
 
<a style="margin-right: 12px;" href="LINK URL PINTEREST AWAK" target="_blank">
    <img src="http://1.bp.blogspot.com/-2A1sbDGCgOw/T65vhAL4VZI/AAAAAAAAABo/2XDEIAFUuEI/s1600/pinterest.png" title="Pinterest" /></a>
    <a style="margin-right: 12px;"LINK URL RSS FEDD AWAK" target="_blank" rel="nofollow">
    <img src="http://1.bp.blogspot.com/-wK9q4eUXA6U/T65viJ1HVmI/AAAAAAAAABs/DyIkCZdJ1Y4/s1600/rss.png" title="RSS Feed" /></a>
    <a style="margin-right: 12px;" href="LINK URL LINKEDIN AWAK" target="_blank" rel="nofollow">
    <img src="http://1.bp.blogspot.com/-uQdbnT1u1e0/Ui26eZOy3VI/AAAAAAAAJqA/h4wzaYt2L_Y/s1600/linkedin.png" title="Linkedin" /></a>
    </center>
    </div>
    <!-- End Widget -->
    </div>
</div>

3- Tukarkan ayat yang telah sis highlightkan dengan warna merah kepada link url media sosial milik masing-masing.

4- Save!

 Itu je, mudah ja kan.. all the best! :D
Previous
Next Post »