Thêm widget trang xã hội cho blog với CSS3 và jQuery

Với CSS3

• Facebook
• Twitter
• GoogleBuzz
• StumbleUpon
• Digg
• Thơm ngon
• LinkedIn
• Reddit
• Công

Với Jquery

• Facebook
• Twitter
• GoogleBuzz
• StumbleUpon
• Digg
• Thơm ngon
• LinkedIn
• Reddit
• Công

LÀM THẾ NÀO ĐỂ THÊM WIDGET NÀY VỚI CSS3?

1. Tới Blogger Bảng điều khiển> Thiết kế >  Edit HTML
2. Chack  Mở rộng Widget Templates 
3. Thêm vào mã dưới  trước  </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/AVvXsEjL-iuRhveob9QpeQYlV9oNWxvlO2V5jlPso5wWIScrA4xazh2nb5aJdhkKHrDbGjG4qG9_5n-_YRrzXnhA8seKRVdGvWltRh88yiSVniH7Rh-3D0KUyxL0LNIJVh86n27bzgHROaioojsX/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMp5BeGB11uZvQi7OP9E58kJpySeBFU3LAIcXtJzPA7HqbO_ElZJ76ovnLpPFo-BWP5CnG-bPoqF1KmJVk_xVwwbHdz4QCsnDnLl_S2W08qNsw-dz59WB8NXxdsaMoIhXUYBZWSHx3dsE7/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHxcfKvzWss5wzjUNszWkUIDDR7FPj0tvRKWxGG1K_iFFg5v2BTj2XQwYCzkeLOZwhQeU-cxLRqdVK4-hWjKymjz1bCw1x4Ev5Evxqy1hEoJn8s8K5VgFF4ZMkzwSrLaVARCnQvzI2eVE/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4peXcGb1i0Pt1nQxaczEJik8_q80fPjvgTyRUr04f0ezdXnaFLq7LsYHgfZlVkZg0EGdF6rdb6FYcOJ9WC5IYV9qNi1xZrptUJfiGyGPYC0Xsu-rj2bhtxBmhipdwddQyhY0_jIAugwJ/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisyBtVVxQTntcNSHXhmOp_FpOR_WcIPR9QH7DGytR0weIQaCTg1GM7Bt0P7wAz2yrHdivB3H_We0OtE7vbTGcHX-OMJfyOt5Pk7m6rEKm1NtGW087ZxOxz99tLt4gi6PVwhY9kDGGNFuvD/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqzPVbvIJucYpgaUo_IL0wd2YkgSITeA3MtNSMCpK7cu_I1GWBtH_noM6Iu9LuFUJn2z4PvpYm95gBP5cUnpwTNEIxbHB5tuHlx1PhWANBXiad-GKTEVM7nnUt26fb-wyPIvMAWu80Yj4d/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMapcp2o7cz6N3YhmVjZaIGFXzOae2ZA68TR8SvYfNF9_H-nbfK81ZbY6yScfFzIfgJ3xP9xU1PnCB2GqufJdlJZC3z3ux0ke0xa-T77nijjLXCWRcKg8V33aM_7yJXWLhfB13Cmoes3J/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJNbVgOvoiP2eM_2HfieQxitm01OepG9KiYf02Rg4AAvtMXInwee9YT_MtAWjdhfg1HGBU3m9ijVYZoMWaPxZzKco7RH3GHSF7ZBUCypUyXjdQqzCo7RF7PYhYoioxl5av_w7wkgxjHg_/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3dkZtDnjsWqVzpniQoeAL3wHLn4IB8Od0-IbVXuouNdTCGTG1mCxXYVHWUMcNSxFpCVC5dpWCoFktf_Aguq7N_2pP9FXbrmkzypETLN50srm-jETGQNn7I-SSOad4sGG747z5r_dUOqRv/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> 

4. Tìm kiếm cho tag <data:post.body/>
5. Và thêm vào bên dưới sau  nó!

    <b:if cond='data:blog.pageType == &quot;item&quot;'> <ul class='way2blogging-social' id='way2blogging-cssanime'> <li class='way2blogging-facebook'> <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a> </li> <li class='way2blogging-stumbleupon'> <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='way2blogging-delicious'> <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='way2blogging-linkedin'> <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='way2blogging-reddit'> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='way2blogging-technorati'> <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul> </b:if> 

6. Lưu Template của bạn ngay! Đã hoàn tất!

Hanna Võ