THÊM WIDGET ĐẸP BOOKMARKING XÃ HỘI (CSS / JQUERY) CHO BLOGGER / BLOGSPOT
|
vuongsungdong
Logo Đẹp chia sẻ mạng xã hội đánh dấu widget cho blog của bạn với CSS3 và jQuery. một tiện ích tuyệt vời và cái nhìn tốt đẹp với CSS3 và jQeury hiệu ứng di chuột.
Sống Demo ở đây!
Với CSS3
Với JQuery
LÀM THẾ NÀO ĐỂ THÊM WIDGET NÀY VỚI CSS3?
- Blogger Bảng điều khiển > Thiết kế tab> Edit HTML tab
- Chack Mở rộng Widget Templates hộp kiểm
- Thêm vào Dưới đây Mã ngay trước khi
</ head>tag<style type="text/css"> /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGtEpBHNeIddnVjmoNWjDo57L3agYPkfCltPso4hUgee0PxElYZl51cijHGeEmODSoJkczVZcwNhHueSimXYqlK6o9fEbFXKHj3lDXwCYHMunDJiaRFTK2yEgZxtkzKT4cYqgzGBq3Qne7/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZMKUKFEYbPTBKpzNOm36IsXkcXcK4TCs1w0ezsx7vcq6m5saOMFJ_nz8ByCY9Fqek9Y_uYfMrFNt14j9RY_QAj2w_NX-VS1qILUSVlLMZFqsxS7y6ipCUjqheNkTfyfWIBBGwflsijK7/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Q79emUh3PmZ9N171SM6TzINspGV_9jHPTmW93w3hkcOoLNCUPgZJO5QC36sbmPdguK9u9Gq8pmjvUM8LDQKOokfOT5-EHSmYl2Obgwh4mZ-58CGyvyyXebGIXjyTWuqE7PDT5hw1jKfI/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkUW1AerPi_LmzkATtfQp7KSAhkH9T11tBhdlmYaTf0Gv1Rl_2m0RXp98eBj3j2bLpJvUApKqhFzlSi6DZSuF9ANRx2g8dxSwe4AIjuZ_Ind-QF-dbatKLPPAqh_uCcuMxJhJHXydN52Xp/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc2allurXhJxAbbNVDcTcXTuSVH5JsL67F5A98XyecVLDheqXaCvTkyAQqGBo2nlQokZKzHvzcz4czimPq7fXEhvcMdMyeEenLe2tytM6j3RmiHR3D8gvuzKCG9eSLizUJFlKVOKJNeY4h/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1M-N8RPxqJZhNQqvcyFd9RlI4CZoqCEPeaGxeawkQ5_bWAiRIaehqq0zGvO3Ea4sS4NSuWvGq28TDHV4eCwMrDmc_9ire0LBM-KHudemYW3jatQFge8xoI-o-lwCdDE6kcBegPJIKvWb/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfaTI9ud-5mkxjSplFx4StbYBvjeE0STh0v5jJZfdOp_j0LfDsHmRyH2HFEMaYGjAto5FkZjcgyRvrC_SPEVqUjl2Yacjm4C1o9UrfxyX0yWWEW_7TLxeyZZ6ZUdZxumeZZI9dAdWOloTu/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBjcnD5F57ZfEp197GQDW15cuZjnFQq8gdngtxEIaKnPK_6wX23I95Kg0GSXOVPtNO_rHwU7W5sM7B_KYicBgPpqzCDpHNSEF8TT9Pm5KRKtI-Xwf1uq6Ky80nymROR8xVoe_5Rpl3SLI/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtT08gYk113ANb069cTBQqeGoxT7iwnaQI1lhbLfOMCVbxEYAF0j1yv49D-0snbgH0duRXmh36d4xeUaWMVjUh5hivsKGJkN3UjrRPTGzvbROhAwhBjgUMwZlgmtLUMxEVFUT1anIjLrjw/s1600/way2blogging-technorati.png"); } #way2blogging-cssanime:hover li { opacity:0.2; } #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #way2blogging-cssanime li:hover { opacity:1; } #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ </style> - Tìm kiếm
<data:post.body/>tag - Và thêm vào bên dưới Mã Sau khi nó!
<b:if cond='data:blog.pageType == "item"'> <ul class='way2blogging-social' id='way2blogging-cssanime'> <li class='way2blogging-facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a> </li> <li class='way2blogging-stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='way2blogging-digg'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='way2blogging-delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='way2blogging-linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='way2blogging-reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='way2blogging-technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul> </b:if> - Lưu Mẫu Bây giờ! Xong!
LÀM THẾ NÀO ĐỂ THÊM WIDGET NÀY VỚI JQUERY?
- Blogger Bảng điều khiển > Thiết kế tab> Edit HTML tab
- Chack Mở rộng Widget Templates hộp kiểm
- Thêm vào Dưới đây Mã ngay trước khi
</ head>tag<style type="text/css"> /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGtEpBHNeIddnVjmoNWjDo57L3agYPkfCltPso4hUgee0PxElYZl51cijHGeEmODSoJkczVZcwNhHueSimXYqlK6o9fEbFXKHj3lDXwCYHMunDJiaRFTK2yEgZxtkzKT4cYqgzGBq3Qne7/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZMKUKFEYbPTBKpzNOm36IsXkcXcK4TCs1w0ezsx7vcq6m5saOMFJ_nz8ByCY9Fqek9Y_uYfMrFNt14j9RY_QAj2w_NX-VS1qILUSVlLMZFqsxS7y6ipCUjqheNkTfyfWIBBGwflsijK7/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Q79emUh3PmZ9N171SM6TzINspGV_9jHPTmW93w3hkcOoLNCUPgZJO5QC36sbmPdguK9u9Gq8pmjvUM8LDQKOokfOT5-EHSmYl2Obgwh4mZ-58CGyvyyXebGIXjyTWuqE7PDT5hw1jKfI/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkUW1AerPi_LmzkATtfQp7KSAhkH9T11tBhdlmYaTf0Gv1Rl_2m0RXp98eBj3j2bLpJvUApKqhFzlSi6DZSuF9ANRx2g8dxSwe4AIjuZ_Ind-QF-dbatKLPPAqh_uCcuMxJhJHXydN52Xp/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc2allurXhJxAbbNVDcTcXTuSVH5JsL67F5A98XyecVLDheqXaCvTkyAQqGBo2nlQokZKzHvzcz4czimPq7fXEhvcMdMyeEenLe2tytM6j3RmiHR3D8gvuzKCG9eSLizUJFlKVOKJNeY4h/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1M-N8RPxqJZhNQqvcyFd9RlI4CZoqCEPeaGxeawkQ5_bWAiRIaehqq0zGvO3Ea4sS4NSuWvGq28TDHV4eCwMrDmc_9ire0LBM-KHudemYW3jatQFge8xoI-o-lwCdDE6kcBegPJIKvWb/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfaTI9ud-5mkxjSplFx4StbYBvjeE0STh0v5jJZfdOp_j0LfDsHmRyH2HFEMaYGjAto5FkZjcgyRvrC_SPEVqUjl2Yacjm4C1o9UrfxyX0yWWEW_7TLxeyZZ6ZUdZxumeZZI9dAdWOloTu/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBjcnD5F57ZfEp197GQDW15cuZjnFQq8gdngtxEIaKnPK_6wX23I95Kg0GSXOVPtNO_rHwU7W5sM7B_KYicBgPpqzCDpHNSEF8TT9Pm5KRKtI-Xwf1uq6Ky80nymROR8xVoe_5Rpl3SLI/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtT08gYk113ANb069cTBQqeGoxT7iwnaQI1lhbLfOMCVbxEYAF0j1yv49D-0snbgH0duRXmh36d4xeUaWMVjUh5hivsKGJkN3UjrRPTGzvbROhAwhBjgUMwZlgmtLUMxEVFUT1anIjLrjw/s1600/way2blogging-technorati.png"); } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> // Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org $(document).ready(function () { $("#way2blogging-jqueryanime li").each(function () { $("a strong", this).css("opacity", "0"); }); $("#way2blogging-jqueryanime li").hover(function () { $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2); $("a strong", this).stop().animate({ opacity: 1, top: "-10px" }, 300); }, function () { $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1); $("a strong", this).stop().animate({ opacity: 0, top: "-1px" }, 300); }); }); // Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org </script> - Tìm kiếm
<data:post.body/>tag - Và thêm vào bên dưới Mã Sau khi nó!
<b:if cond='data:blog.pageType == "item"'> <ul class='way2blogging-social' id='way2blogging-jqueryanime'> <li class='way2blogging-facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on Google Buzz'><strong>Google Buzz</strong></a> </li> <li class='way2blogging-stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='way2blogging-digg'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='way2blogging-delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='way2blogging-linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='way2blogging-reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='way2blogging-technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul> </b:if> - Lưu Mẫu Bây giờ! Xong!
Bạn thực hiện.
Hãy Thả Bình luận có giá trị của bạn Giới thiệu về bài viết này và Blog Chúc mừng!
Sưu tầm bởi : www.meovatcuocsong.blogspot.com
Posted in
MẸO VẶT BLOGGER
0 nhận xét cho bài đăng này
Hãy để lại nhận xét nếu bạn thích bài đăng này