Cara menambah widget sosial media seperti di —>http://www.codeit.co/code/924
Saya sudah menambahkan css dan html ke template saya… tapi tidak muncul icon sosial medianya.
Saya telah melihat caranya di —>http://www.cssportal.com/blog/css-social-media-sidebar/ Tapi gak ngerti…
Mohon bantuannya… ^_^
Tambahkan gadget :
<aside id="sticky-social"> <ul> <li><a href="#" class="entypo-facebook" target="_blank"><span>Facebook</span></a></li> <li><a href="#" class="entypo-twitter" target="_blank"><span>Twitter</span></a></li> <li><a href="#" class="entypo-gplus" target="_blank"><span>Google+</span></a></li> <li><a href="#" class="entypo-linkedin" target="_blank"><span>LinkedIn</span></a></li> <li><a href="#" class="entypo-instagrem" target="_blank"><span>Instagram</span></a></li> <li><a href="#" class="entypo-stumbleupon" target="_blank"><span>StumbleUpon</span></a></li> <li><a href="#" class="entypo-pinterest" target="_blank"><span>Pinterest</span></a></li> <li><a href="#" class="entypo-flickr" target="_blank"><span>Flickr</span></a></li> <li><a href="#" class="entypo-tumblr" target="_blank"><span>Tumblr</span></a></li> </ul> </aside>
Setelah itu tambahkan widget disini :
@import url(http://weloveiconfonts.com/api/?family=entypo); /* entypo */ [class*="entypo-"]:before { font-family: "entypo", sans-serif; } a { text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } .container { margin: 0 auto; padding: 20px 50px; background: white; } #sticky-social { left: 0; position: fixed; top: 150px; } #sticky-social a { background: #333; color: #fff; display: block; height: 35px; font: 16px "Open Sans", sans-serif; line-height: 35px; position: relative; text-align: center; width: 35px; } #sticky-social a span { line-height: 35px; left: -120px; position: absolute; text-align:center; width:120px; } #sticky-social a:hover span { left: 100%; } #sticky-social a[class*="facebook"], #sticky-social a[class*="facebook"]:hover, #sticky-social a[class*="facebook"] span { background: #3b5998; } #sticky-social a[class*="twitter"], #sticky-social a[class*="twitter"]:hover, #sticky-social a[class*="twitter"] span { background: #00aced; } #sticky-social a[class*="gplus"], #sticky-social a[class*="gplus"]:hover, #sticky-social a[class*="gplus"] span { background: #dd4b39; } #sticky-social a[class*="linkedin"], #sticky-social a[class*="linkedin"]:hover, #sticky-social a[class*="linkedin"] span { background: #007bb6; } #sticky-social a[class*="instagrem"], #sticky-social a[class*="instagrem"]:hover, #sticky-social a[class*="instagrem"] span { background: #517fa4; } #sticky-social a[class*="stumbleupon"], #sticky-social a[class*="stumbleupon"]:hover, #sticky-social a[class*="stumbleupon"] span { background: #eb4924; } #sticky-social a[class*="pinterest"], #sticky-social a[class*="pinterest"]:hover, #sticky-social a[class*="pinterest"] span { background: #cc2127; } #sticky-social a[class*="flickr"], #sticky-social a[class*="flickr"]:hover, #sticky-social a[class*="flickr"] span { background: #ff0084; } #sticky-social a[class*="tumblr"], #sticky-social a[class*="tumblr"]:hover, #sticky-social a[class*="tumblr"] span { background: #32506d; }