Home » Tin Hoc
Social media for Blogger
Thứ Hai, 20 tháng 5, 2013
Code Social Widget có hiệu ứng dành cho Blogger Blogspot
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>:
Đặt code này vào Blog của bạn.
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/AVvXsEisvXNRGywqvtLDC_om25FR2rhvbaTu5AeJEYV0Hmk4kLA202OmkZ9j8B9zv1vF_FEH7rFxxYWvhJGnOamDfse-TBywCOy1MLh9sSwKudiqpx62o4Axx8voKur-xRwwFIV0acsM9H2HXog/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>

- Yahoo mua lại Tumblr thành công với giá 1,1 tỷ USD
- Cách chèn chữ, logo chìm vào Microsoft Word 2013
- Hướng dẫn cách thêm chú thích vào bảng tính trên Excel 2013
- Code Javascript tạo thêm đồng hồ cho Website, blog
- Hướng dẫn cách cài đặt Windows 7 hình minh họa chi tiết
- Hướng dẫn cách tắt hiệu ứng nhập văn bản trên Word 2013
- Những mẫu bìa báo cáo thực tập, luận văn [đẹp]
- Tutorial - cách làm sáng mịn làn da trong photoshop
- Hướng dẫn cách chụp ảnh màn hình trên Windows 8
- Cách cài đặt Password cho Windows 8 - mật khẩu User Admin
- Chuyển đổi PDF sang Word với độ chính xác cao
- Tạo trang chủ cho bloger
Comments[ 0 ]
Đăng nhận xét