Tips Sederhana Membuat Widget Social Media

Tips blog kali ini saya akan memberikan tips sederhana membuat widget social media untuk menambah tampilan blog lebih variatif. Social media ini  mempunyai peranan yang penting bagi popularitas blog itu sendiri, yang utamanya adalah backlink berkualitas dari social media tersebut. Karena social media ini rata2 sudah mempunyai PR tinggi dan relevan, sebagai contoh adalah facebook yang sudah menjadi jejaring sosial terbesar untuk saat ini. Agar lebih mudah menerapkan social media tersebut kita bisa memasangkan widget pada blog kita. Kalau kita berselancar di internet mungkin sudah banyak mereka yang memberikan tips2 seperti ini, tapi ga apa2 lah toh kita disini niatnya adalah berbagi.

Langsung saja kita ikuti langkah - langkahnya :

Masuk ke dashboard >> Add Gadget >> HTML/Javascript dan copas kode berikut ini

<style type='text/css'>
.samsury-media ul {list-style:none; display:inline}
.samsury-media li {float:right;padding: 0px 1px 0px 0px; margin-top:-4px}
.samsury-media li a img{height:30px;width:30px}
</style>
<div class='samsury-media'>
<span class='fade'><ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh015LO2xT_0XvDp6J-PxMVl8RxbUbLYoe5HV226OxFXKK7_8aau2hDSgtphWkybb8BQgVARkxmPVd8EWOJdzaPAyNBJzn9htyy7wLOfY23cNXewZrIQA4_SHEkMBbGNw-8o2utwQzUUJU/s30/RSS+Feed.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21w1MrReLEgMc_9pcCx8KnZZa9Wn-7I-e2f8RISQT2-zVvfMTab_eSjTvKDc-ECqZA3yo1fr3U76Xa_LosYRWozeC2M67VbBMfjZZNt856tn-Tsa2L_HULdfvjT5ddx1Dwpxwx8wPXXw/s30/Pinterest+alt.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxrmw2OYmCQR3qw5aKEmd-L-Ds0tbAwY7efh-M01eeo2CRJlu5166vJ85EPW_RWZ3V1jAzqtUTJQjabeF3A7imoNC5Dzm4NC4axKVu6EC_B1G3IPoIm30jKTYIT3MRselyOq9gsZiFss/s30/linkedin.png" /></a></li>

<li><a href="#"><img style='width:30px' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg1AUXWhxtRFxqpivpfvRBKSVoSiP80sp4vTxAZl2q6OE_LVNMOAiVmcNyg7dDle8B2a5CtpFpG8mD1BzssCNeTAAbzrjVGPB-waSo-mQVdVmDHlKoPcoJVlLQR1mQjx5qPpuL84Z7qhk/s30/YouTube+alt+1.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvzIpTeWra23eE5hpt1V_F4V0hT2R6OvSE9WmYG3V5kKA_ANrWlYhNEd18_9KzW0u41JdJeHBZoTw7AsoXzlr7f-hrNjPIGyxzEgwhfToJsMofnQVeFMH2aSL0DIkoeoyLScA-Roe0UaU/s30/twitter-bird.png" /></a></li>

<li><a href="#"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3oG3fmbdv0gyttpptG7L87fXjPY2VC2eedgB8cPSF6fJw4wyQ3n5sNXa0UYcfqE735whPW3XRSHWped2t-2P_WUGq6PnygDJe9iC0Xv9eeCm5t9KdoK7QvPH1nODkIUEaLpc0vZjoRJY/s30/Google++alt.png" /></a></li>

<li><a href="#"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHolx756TLVVaIvFr7_rZJj0WineEtPLhP574uYwjeuoYOsrE8tsW0kEGwRC7fOh8Qn9uSWsEX82E7SSZmqzkW8hWMz5KrMmfGDuyusHYsowWISPWKqTg6hcgRPVCCDa1dSEOUSUZLBo8/s30/Facebook+alt+1.png" /></a></li>
</ul></span>
</div>

Note : Ganti tanda # dengan URL ANDA

<style>
    .Socialmediabutton {
    margin:0 auto;
    padding:5px;
    width:auto;
    border-radius:5px;
    border: 1px #BBBBBB solid;
    }
    #samsury-socialmedia{
    list-style:none;
    text-decoration:none;
    font-size:0.9em;
    font-family:trebuchet ms,sans-serif;
    }
    #samsury-socialmedia a{
    text-decoration:none;
    font-family:trebuchet ms,sans-serif;
    }
    #samsury-socialmedia li{
    position:relative;
    height:38px;
    cursor:pointer;
    padding: 0 !important;
    }
    #samsury-socialmedia .facebook, .googleplus, .YouTube, .rss, .twitter{
    position:relative;
    z-index:5;
    display:block;
    float:none;
    margin:5px 0 0;
    width:210px;
    height:38px;
    border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90MCt-ple31iS5sQ_GKvkoAADcKj1V3140Smmxi4n_czYOu3jwVA5gkqHeuS_CEC4aePg1FlwkIjC-G3NfVwty7pOi7_SHx7qWWvaj2oDTFcZGU1aJBBw2oMcdeGomv5DLK34qzTYvN0/s1600/social+icon.png) no-repeat;
    background-color:rgba(217,30,118,.42);
    -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
    -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
    box-shadow:rgba(0,0,0,.28) 0 2px 3px;
    color:#141414;
    text-align:left;
    text-indent:50px;
    text-shadow:#333 0 1px 0;
    white-space:nowrap;
    line-height:32px;
    -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
    -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
    -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
    -o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
    transition:width .25s ease-in-out,background-color .25s ease-in-out;
    -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
    }
    #samsury-socialmedia li:after{
    position:absolute;
    top:0;
    left:50px;
    z-index:2;
    display:block;
    height:38px; color:#ffffff;
    content:attr(data-alt);
    line-height:32px;
    }
    #samsury-socialmedia .icon{
    overflow:hidden;
    color:#fafafa;
    }
    #samsury-socialmedia .facebook{
    width:32px;
    height:32px;
    background-color:rgba(59,89,152,0.42);
    background-position:0 0;
    }
    #samsury-socialmedia .twitter{
    width:32px;
    height:32px;
    background-color:rgba(64,153,255,0.42);
    background-position:0 -33px;
    }
    #samsury-socialmedia .googleplus{
    width:32px;
    height:32px;
    background-color:rgba(228,69,36,0.42);
    background-position:-3px -66px;
    }
    #samsury-socialmedia .YouTube{
    width:32px;
    height:32px;
    background-color:rgba(174,45,39,0.42);
    background-position:-2px -95px;
    }
    #samsury-socialmedia .rss{
    width:32px;
    height:32px;
    background-color:rgba(255,102,0,0.42);
    background-position:-3px -126px;
    }
    #samsury-socialmedia li:hover .icon,
    .touch #samsury-socialmedia li .icon{
    width:210px;
    }
    .touch #samsury-socialmedia li .facebook, #samsury-socialmedia li:hover .facebook{
    background-color:rgba(59,89,152,1);
    }
    .touch #samsury-socialmedia li .twitter, #samsury-socialmedia li:hover .twitter{
    background-color:rgba(64,153,255,1);
    }
    .touch #samsury-socialmedia li .googleplus, #samsury-socialmedia li:hover .googleplus{
    background-color:rgba(228,69,36,1);
    }
    .touch #samsury-socialmedia li .YouTube, #samsury-socialmedia li:hover .YouTube{

    background-color:rgba(174,45,39,1);
    }
    .touch #samsury-socialmedia li .rss, #samsury-socialmedia li:hover .rss{
    background-color:rgba(255,102,0,1);
    }
    </style>
    <br />
<div class="Socialmediabutton">
<ul id="samsury-socialmedia">
<li data-alt="Facebook"><a class="icon facebook" href="#">Facebook</a></li>
<li data-alt="Twitter"><a class="icon twitter" href="#">Twitter</a></li>
<li data-alt="Google+"><a class="icon googleplus" href="#">Google+</a></li>
<li data-alt="YouTube"><a class="icon YouTube" href="#">YouTube</a></li>
<li data-alt="RSS"><a class="icon rss" href="#">RSS</a></li>
</ul>
</div>

Ganti tulisan #  dengan URL ANDA, Warna kuning sesuaikan dengan lebar sidebar blog anda

Demikian tips blog kali ini semoga bermanfaat, Terimakasih

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit