Creating the Share Button Below the Post with a Round Image

In the second post in this day GoWidget will share a share button on this blog post is used. This tutorial I created at the request of the bloggers here.

Share button is useful to facilitate visitors who want to share articles were deemed beneficial to their social media networks. Such as Facebook, Twitter, Google plus, and Linkedin. Share This button will appear in each of your blog posts.

To look like the screenshot below or can be viewed directly below this blog article (if not replaced)

Here's how its application:

1. Log in to Blogger> Template> Edit HTML> Find the code below and then select the second in the markup post (not mobile post)

<data:post.body/>

2. Then copy the code below right after the code mentioned above

HTML - Go Widget

<b:if cond='data:blog.pageType == "item"'>
<div class='share-button-gowidget'>
<div class='share-button-gowidget-fb'>
<a class='share-gowidget-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/>
<a class='share-gowidget-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='share-button-gowidget-tw'>
<a class='share-gowidget-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='share-gowidget-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='share-gowidget'>
<a class='share-gowidget-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>
<a class='share-gowidget-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='share-gowidget'>
<a class='share-gowidget-lin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='share-gowidget-lin-label' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>

3. Next apply the code below just before ]]></ b:skin> or </style>

CSS - Go Widget

/* Wandadesign CSS Share Button */
.share-button-gowidget{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.share-button-gowidget-fb,.share-gowidget{float:left;width:21%;padding:0 10px;height:inherit}
.share-button-gowidget-tw,.share-gowidget,.share-gowidget-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.share-gowidget-fb,.share-gowidget-tw,.share-gowidget-gp,.share-gowidget-lin,.share-gowidget-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.share-gowidget-fb-label{color:#2d609b}
.share-gowidget-fb-label,.share-gowidget-tw-label,.share-gowidget-gp-label,.share-gowidget-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.share-gowidget-tw{background-position:0 -43px}
.share-gowidget-tw-label{color:#00c3f3}
.share-gowidget-gp{background-position:0 -86px}
.share-gowidget-gp-label{color:#f00}
.share-gowidget-lin{background-position:0 -129px}
.share-button-gowidget a{color:#999;transition:all .3s;}
.share-button-gowidget a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.share-gowidget,.share-button-gowidget-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.share-gowidget,.share-button-gowidget-tw,.share-gowidget-lk{float:left;width:48%;padding:0;border-left:0}}

4. Save the template.

Done ...

If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in Go Widget

HTML		Encrypted
Jquery		Widget
CSS		Java script

Creating the Share Button Below the Post with a Round Image

HTML - Go Widget

CSS - Go Widget

2 comments: