Chúng ta hãy hiểu Social media là các tín hiệu từ mạng xã hội – Hay hiểu cách đơn giản hơn đó là sự tương tác của người dùng với nội dung website. Với Facebook Social Signs là : Like, share, comment…Với Google Plus là: +1, share, follow…Với Twitter là: retweet, following…
DEMO
Tiện ích (widget) này bao gồm các liên kết đến các mạng xã hội nổi tiếng hiện nay như: Facebook, Twiter, Google+, Pinterest, Youtobe và có một liên kết rss feed giúp độc giả theo dõi các bài viết của bạn. Bình thường tiện ích này ẩn chỉ hiện các button của các mạng xã hội, và các liên kết sẽ hiện ra từ từ khi ta di chuột vào các icon đó. Để giảm thiểu tối đa việc sử dụng các file javascrip do vậy namkna sẽ sử dụng các mã CSS và hiệu ứng css spriter với một hình ảnh icon duy nhấtcho các mạng xã hội để giảm requet kết hợp với thư viện Jquery do cậy rất mượn mà không gấy ảnh hưởng đến mức độ tương tác của trang web.
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Thêm đoạn mã bên dưới vào trước thẻ ]]></b:skin>:
#social_links a, #filter_tags_desktop a, .search_button { text-indent: 100%; white-space: nowrap; overflow: hidden; }
#social_links { text-align: right; }
#social_links li { display: inline-block; list-style: none; margin: 0 -2px; }
#social_links li a { display: block; width: 40px; height: 40px; -webkit-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; -ms-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; }
#social_links li.rss a { background-position: -720px 0; }
#social_links li.rss a:hover { background-position: -720px -40px; }
#social_links li.deviantart a { background-position: -160px 0; }
#social_links li.deviantart a:hover { background-position: -160px -40px; }
#social_links li.dribbble a { background-position: -240px 0; }
#social_links li.dribbble a:hover { background-position: -240px -40px; }
#social_links li.facebook a { background-position: -280px 0; }
#social_links li.facebook a:hover { background-position: -280px -40px; }
#social_links li.flickr a { background-position: -320px 0; }
#social_links li.flickr a:hover { background-position: -320px -40px; }
#social_links li.googleplus a { background-position: -400px 0; }
#social_links li.googleplus a:hover { background-position: -400px -40px; }
#social_links li.instagram a { background-position: -440px 0; }
#social_links li.instagram a:hover { background-position: -440px -40px; }
#social_links li.lastfm a { background-position: -480px 0; }
#social_links li.lastfm a:hover { background-position: -480px -40px; }
#social_links li.linkedin a { background-position: -520px 0; }
#social_links li.linkedin a:hover { background-position: -520px -40px; }
#social_links li.myspace a { background-position: -560px 0; }
#social_links li.myspace a:hover { background-position: -560px -40px; }
#social_links li.picasa a { background-position: -640px 0; }
#social_links li.picasa a:hover { background-position: -640px -40px; }
#social_links li.pinterest a { background-position: -680px 0; }
#social_links li.pinterest a:hover { background-position: -680px -40px; }
#social_links li.soundcloud a { background-position: -840px 0; }
#social_links li.soundcloud a:hover { background-position: -840px -40px; }
#social_links li.twitter a { background-position: -960px 0; }
#social_links li.twitter a:hover { background-position: -960px -40px; }
#social_links li.vimeo a { background-position: -1000px 0; }
#social_links li.vimeo a:hover { background-position: -1000px -40px; }
#social_links li.youtube a { background-position: -1080px 0; }
#social_links li.youtube a:hover { background-position: -1080px -40px; }
#social_links li a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg43GTLrdZ5g9NjQdDH28OjJnlIjsEEzuKBKuK2RCQI8WwZRLDNh5D8r6mdrl32_DyH_PS1eDNqGzfs78NGiz-7cRjuU2NmGwY13u_-id8iVuyILzs5DiXUkDsp3mHDpud8GU9-GHCYdjY/s1600/social_icons.png); }
Đặt code này vào Blog của bạn.
<div id='social_links'> <ul> <li class='facebook'><a href='https://www.facebook.com/bloggersviet' target='_blank' title='Facebook'>facebook</a></li> <li class='twitter'><a href='https://twitter.com/duytemplate' target='_blank' title='twitter'>twitter</a></li> <li class='googleplus'><a href='https://plus.google.com/102981349639718522416? rel=author' target='_blank' title='Google+'>googleplus</a></li> <li class='pinterest'><a href='http://pinterest.com/dvavn/' target='_blank' title='Pinterest'>pinterest</a></li> <li class='dribbble'><a href='#' target='_blank' title='Dribbble'>dribbble</a></li> <li class='youtube'><a href='http://www.youtube.com/user/duyblogger' target='_blank' title='Youtube'>youtube</a></li> <li class='rss'><a href='/feeds/posts/default' target='_blank' title='Rss'>rss</a></li> </ul></div>