Social Share Button or who are familiar with is the key to sharing widget which aims to facilitate visitors in merefrensikan and recommend useful contents on our blog, with just a single click they (visitors) are able to automatically distribute the article without the hassle longer bother to copy permalink of the article on our blog.
Actually,
if we often visit the blog fellow bloggers, of course, many variations
and modifications they do to beautify their sharing buttons, as I
discussed earlier also about making sharing buttons below post with the
icon, but on this occasion I will
discuss a bit about sharing my button that is currently used, the
widget on my friend's company refrensikan by magic and created by mas
sugeng, but there are some scripts that I add to make it more complete.
Not much different from the share button icon before I ever published, now I am going to summarize a bit of css code essentially to run while not using javascript, or scripts are already modified, the article uses javascript that is too much, it affects the loading blog which ultimately will impact the rating and seo blog.
In plain view, share button widget is also no less really good as the original widgets from social media developers that have not been modified. In addition, we can also customize the background color of the button to be more contrast with the color theme of your blog, or we can also provide color keys according to social media, such as Facebook blue, red Google+, and Twitter in light blue.
1. Log in to Blogger.
2. Select Template.
3. Click the Edit HTML
4. Click on the black arrow next to the ]]> </ b: skin> (HTML Edit is a new interface), then you will see all the css code.
5. Find <data:post.body/> code (use CTRL + F), if you have installed automatic read more on the blog, then choose <data:post.body/> the 2nd or adjust the code that indicates the location of the content or where your articles are located.
6. Place the following code right below it (under the article) or above it (above the article).
Not much different from the share button icon before I ever published, now I am going to summarize a bit of css code essentially to run while not using javascript, or scripts are already modified, the article uses javascript that is too much, it affects the loading blog which ultimately will impact the rating and seo blog.
In plain view, share button widget is also no less really good as the original widgets from social media developers that have not been modified. In addition, we can also customize the background color of the button to be more contrast with the color theme of your blog, or we can also provide color keys according to social media, such as Facebook blue, red Google+, and Twitter in light blue.
1. Log in to Blogger.
2. Select Template.
3. Click the Edit HTML
4. Click on the black arrow next to the ]]> </ b: skin> (HTML Edit is a new interface), then you will see all the css code.
5. Find <data:post.body/> code (use CTRL + F), if you have installed automatic read more on the blog, then choose <data:post.body/> the 2nd or adjust the code that indicates the location of the content or where your articles are located.
6. Place the following code right below it (under the article) or above it (above the article).
<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:3px dotted #ccc;border-bottom:1px solid #b8b8b8;width:100%;height:25px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777'>
<strong>Share this article</strong> :
</div>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Facebook'>Share on FB</a>
<a expr:href='"http://digg.com/submit?url=" + data:post.url' style='color: #fff; background: #808080; text-decoration: none; border: 1px solid #000000; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Submit to Digg'>Submit to Digg</a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Twitter'>Tweet</a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Google+'>Share on G+</a>
</div></b:if>
Description: (color code: here)
- 3b5998 = HTML color code background facebook button
- 313c7d = HTML color code border facebook button
- 808080 = HTML color code background digg button
- HTML color code 000000 = border digg button
- 4099FF = HTML color code background twitter buttons
- 3a8be8 border = HTML color code button twitter
- c0361a = HTML color code background google+ button
- 9c2c15 = HTML color code key border google+
7. Click on "Save Template", and finishes,
Similarly, information about the blog tutorial on how to create a social share button colors, may be useful, and good luck.
Similarly, information about the blog tutorial on how to create a social share button colors, may be useful, and good luck.
