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/AVvXsEgW1w1pqwUVL-_k3lFrwKeBKps-Id4F1gz2CYvFLBY9wk-PF7XymoRYi0YrlbioQAMQnQXS4O0T2sB3UDC29nVpM4SNCTD_6lfYZpO2N0WvCDe4F8Yi_NnrCP2dH0ewslpjaQH2uWR__Ps/s30/RSS+Feed.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxOr5sdb07xEVqqPYB5IPA9Hqjtf_OauwpvS69dcdg2OzfsnL2rtUfVccglscqs4L9KJWB2Hf_DgQGAJ2Yn27pxH54uMkX3H8iNeJbDL4UJKMKzhDiWB34fC1maImxVfKvJ18YjC_XiIY/s30/Pinterest+alt.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfrVMmhLRmOhhv-5XvLx5DOJ8NgzHXg5vX2uAeJYxzht853GMDhObGcCJphDrgeVVnTuHcRSjC1zZZDqreLG0usw890t5trLDtn2wkNoQbZgVJddlWrowp2wlaVYVJ7Jc_izlJhRWQKUk/s30/linkedin.png" /></a></li>
<li><a href="#"><img style='width:30px' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv6Em-oDR7pnp7Pw2xfDyZs2_qpjLdbm0-zte-MYNOwAxnIE2U_BE9cDL7WdrB9UDuUtNgiWaTCGdZrZwtrPKcB2JYm7xoV-BWUrIR6itB-wHF74kfjuYgwKdrUPJ3Di3TNwqaG-Ru3gE/s30/YouTube+alt+1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41qL1FJC1J5-XLHVzODX8hAEkPSKt0EUk4JN_mU7rDq7XzABPyOHUb7qcrzd0DozppPBjfYK6v2SJmWS2vl6LGJhJUSBogQs14ABlIJs9Lg2nkBZyjfTZhBno32ko4L_xrTTaL78QuKg/s30/twitter-bird.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ISDBsptlDwwpAGELcARPJCIzeYz_jO3RDsGkJqUEm7zp7OVcqFp9xji3UN2XrmfCWFez8mrUvLat5i9sj18VBkFl_WXgITnWUmww6porptjdLlhzoWC5U65beusOip8wSDzvk2RNseM/s30/Google++alt.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6V4cGGvKRVBfr9Pg4-vdGTCo9IlshRGYkTj-9cYE2gZuvH4y84Y1YN6MMJGCtVIqGtTNkDunPt4GqSz5dZ-5585KTKBC7TqvKimZWKd19tPkxE2vd0Skls8HpSFd031sBTo-UWZluXrM/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/AVvXsEgci0RI20CvOkzXB775G8K3IyDrpRdGZpuDSpGS0g0nH3eOe-hWFf3WSUpcgp3B0fPc-QwGsm95dS2057biSmyIGpuymGtCXM8lax4_K9k_soNNA1JIExWYnwh8s62uYC4pMpUrEjF8lHA/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>
