- Buka akun blogger Anda
- Masuk ke menu tata letak > add gadget > HTML/Javascript
- Copas kode berikut ini :
<style>
#socialmenu_btrix {
margin:0;
padding:0;
width: 30em;
height: 4.5em;
overflow:hidden;
}
#socialmenu_btrix li {
display:inline;
list-style-type:none;
}
#socialmenu_btrix li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#socialmenu_btrix li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#socialmenu_btrix li a span {
display:none;
}
#socialmenu_btrix li a:hover {
background:transparent;
}
#socialmenu_btrix li a:hover span {
width:7em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#socialmenu_btrix .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1em;
border:0;
}
</style>
<ul id="socialmenu_btrix">
<li>
<a href="https://www.facebook.com/ID ANda Disini"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1nJKOtvqaORSo6GlhnRGkgoxCxYOkTt98nOWRirluRTB3OaQ67D8uulSqXzim8o0DzGGi6CvivGwVIw7B-bkFJhtP2oei3T2UWRG-zIkzmyo4Y-pDFQovM2Jb5h1TOVvwbBHatdMJNR0/s1600/Facebook-icon_btrix.png"
alt="facebook" width="50" height="50" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Add to facebook
</span>
</a>
</li>
<li>
<a href="https://plus.google.com/ID ANda Disini"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJrcsHrqlnLTZL6JOtOHQY16nxn1IUU1QlyZOV0DUAQcDRy_oOkvbqnyLqj_kxTCvGR-NRfyTcl2FuSM5CuPMVm7QMHrBObTGDevQxdQqGk3Cr7x_gSPcdImWn5z823Ttf-jwfgBJjuA/s1600/Google-plus-icon_btrix.png"
alt="Google plus" width="50" height="50" title="=Google plus" />
<span>
<br />
<b class="h2">Twitter</b><br />
Add to twitter
</span>
</a>
</li>
<li>
<a href="http://feeds.feedburner.com/ID ANda Disini"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhUeVeWQmdMOESbm58yXum3bo3ZKcWx-BV_IjLUpEu1ueMRMNKd2ZgNDu9LRUBIUihoorsX6RZj3Kjtf-T_cc6AzhEw0TKp25aRRzZ1R2KKXY9kYCRpuIInMlB_JQQ-Q1kxyRp9fpATUw/s1600/RSS-icon_btrix.png"
alt="Rss" width="50" height="50" title="Rss" />
<span><br />
<b class="h2">Rss Feed</b><br />
Subscribe
</span>
</a>
</li>
<li>
<a href="http://stumbleupon.com/ID ANda Disini"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jBdUhgpo5LleLS0kWJNjHZbSrCeJyaDjzLYJ2yVKa2f7DDG_Rgh5SA_2bifyeBN42r0_zdGeXrz4FsMiosD-O9scJCMXbsfZs-CoJS4zt6RtUYYWjZ-zTpEqqyvczgT2jqqD6P48O4Q/s1600/StumbleUpon-icon_btrix.png"
alt="Stumbleupon" width="50" height="50" title="Stumbleupon" />
<span><br />
<b class="h2">Stumbleupon </b><br />
add to stumble
</span>
</a>
</li>
<li>
<a href="https://twitter.com/ID ANda Disini">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0PY4DPgAC4jk3xv2PsRNVNoJJWAdmOy5Z213rTjPovapPJmbCDn54ZOc20N2YEKtWOtpp8fD2f0DOf1kF2Zs-P43D6zzAEFCp6sufpTHKK9FEPN1xgxfZ9B40DJ-QJAwLdpMAEZ9E8I/s1600/Twitter-icon_btrix.png"
alt="twitter" width="50" height="50" title="twitter" />
<span><br />
<b class="h2">Twitter</b><br />
add to twitter
</span>
</a>
</li>
</ul>
Keterangan :
- Ganti kode yang diwarnai sesuai dengan kebutuhan Anda.
Maka, demikianlah artikel Social Media Widget Bergulir untuk Blogger semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.
