Social sharing / bookmarking widget is a widget that allows us to share your blog post to the most popular social networking such as Facebook, Google, Twitter, Digg ... With the hover effect (when dragging on ) is quite nice, I'm sure visitors to your blog will not hesitate to click on to share articles on social networks.
Step 1: Insert CSS code
1 Log in to Blogger Dashboard > Design tab> Edit Html .
2 Click Expand Template ckeckbox widgets.
3 Search for the line code]]> </ b: skin> then copy the entire code below and paste the code right above the line that we found.
2 Click Expand Template ckeckbox widgets.
3 Search for the line code]]> </ b: skin> then copy the entire code below and paste the code right above the line that we found.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| #w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCjmdeKfk3Lc3_JnCrlG3nQSL_IARPuBKOZ1mi6AqvdVtiXKOWJT_uVYkMruxzNo8nq6jRc9QKBH_UmqZhBJDUmhoJQjM2fsRpK1K87SfL_VNvueP4Ei8M74QcSg3xAa7q-E6cAiFHxyJT/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }#w2b-share ul li a.twitter {background-position: -0px -0px; }#w2b-share ul li a.twitter:hover {background-position: -0px -33px; }#w2b-share ul li a.facebook {background-position: -32px -0px; }#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }#w2b-share ul li a.stumbleupon {background-position: -64px -0px; }#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }#w2b-share ul li a.digg {background-position: -192px -0px; }#w2b-share ul li a.digg:hover {background-position: -192px -33px;}#w2b-share ul li a.reddit {background-position: -160px -0px; }#w2b-share ul li a.reddit:hover {background-position: -160px -33px;}#w2b-share ul li a.google {background-position: -128px -0px; }#w2b-share ul li a.google:hover {background-position: -128px -33px;}#w2b-share ul li a.del-icio-us {background-position: -480px -0px; }#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}#w2b-share ul li a.mixx {background-position: -96px -0px; }#w2b-share ul li a.mixx:hover {background-position: -96px -33px; }#w2b-share ul li a.technorati {background-position: -416px -0px; }#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}#w2b-share ul li a.linkin {background-position: -256px -0px; }#w2b-share ul li a.linkin:hover {background-position: -256px -33px;}#w2b-share ul li a.yahoobuzz {background-position: -448px -0px; }#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}#w2b-share ul li a.myspace {background-position: -512px -0px; }#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}#w2b-share ul li a.more {background-position: -576px -0px; }#w2b-share ul li a.more:hover {background-position: -576px -33px;} |
Step 2: Insert Widget Code
1 Find the line <data: post.body />
2 Copy the code below and paste it immediately after paragraph inscription found, then click Save Template của to complete.
1 Find the line <data: post.body />
2 Copy the code below and paste it immediately after paragraph inscription found, then click Save Template của to complete.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
| <b:if cond='data:blog.pageType == "item"'><div id='w2b-share'><ul><li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li><li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li><li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li><li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li><li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li><li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li><li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li><li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li><li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li><li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li><li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li><li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='https://static.addtoany.com/menu/page.js' type='text/javascript'/></li></ul></div></b:if> |
That's it,
Comments
Post a Comment