Creat Share Button on Material Design for Bloggers - Templates Boy

Halaman

    Social Items


How to make Share Button on Material Design - I will share is a version of Material Design.

This Share Button is located at the bottom of the article, this is very useful to make it easier for visitors to share articles they read to Social Media. Well, in this tutorial there are only 3 buttons, namely a button to share to Facebook, Twitter and Google Plus . Please friend with your friend's wish to make it more suitable on your blog.

Okay, we go to the installation step.

Note :
The template used must have installed Font Awesome. If not, please read this article How to Install Awesome Fonts on Blogger.

How to Install Share Button :


  1. As usual, my friend logged in to your blog first
  2. After that go to Template > Edit HTML
  3. Add the code below where you want, to add it below the article, you can find the code <data:post.body/>
  4. Then copy this code just below it

    <h4 class='post-under'>Share it!!</h4>
    <div class='sharepost'>
        <ul>
            <li>
                <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook' /></a>
            </li>
            <li>
                <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter' /></a>
            </li>
            <li>
                <a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus' /></a>
            </li>
        </ul>
    </div>

  5. After that, add the CSS below right above the code ]]></b:skin>
    
    h4.post-under {
        text-align: center;
    }
    .sharepost {
        padding: 20px;
        text-align: center;
    }
    .sharepost li a {
        padding: 10px;
        width: 20px;
        height: 20px;
        color: #fff;
        display: inline-block;
        border-radius: 50%;
        margin: 0 10px;
        transition: all 0.5s;
        box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
    }
    .sharepost li a:hover {
        box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
    }
    .sharepost li a.facebook {
        background: #3A5795;
    }
    .sharepost li a.twitter {
        background: #1DA1F2;
    }
    .sharepost li a.gplus {
        background: #DB4437;
    }
    

  6. The last step is Save & See the results

Well, the article is about creating a Share Button on Material Design Bloggers , don't forget to leave a comment ... For those who have trouble commenting in the comments column, we will help you, please.

Source : Share with your friends & your family

Creat Share Button on Material Design for Bloggers


How to make Share Button on Material Design - I will share is a version of Material Design.

This Share Button is located at the bottom of the article, this is very useful to make it easier for visitors to share articles they read to Social Media. Well, in this tutorial there are only 3 buttons, namely a button to share to Facebook, Twitter and Google Plus . Please friend with your friend's wish to make it more suitable on your blog.

Okay, we go to the installation step.

Note :
The template used must have installed Font Awesome. If not, please read this article How to Install Awesome Fonts on Blogger.

How to Install Share Button :


  1. As usual, my friend logged in to your blog first
  2. After that go to Template > Edit HTML
  3. Add the code below where you want, to add it below the article, you can find the code <data:post.body/>
  4. Then copy this code just below it

    <h4 class='post-under'>Share it!!</h4>
    <div class='sharepost'>
        <ul>
            <li>
                <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook' /></a>
            </li>
            <li>
                <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter' /></a>
            </li>
            <li>
                <a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus' /></a>
            </li>
        </ul>
    </div>

  5. After that, add the CSS below right above the code ]]></b:skin>
    
    h4.post-under {
        text-align: center;
    }
    .sharepost {
        padding: 20px;
        text-align: center;
    }
    .sharepost li a {
        padding: 10px;
        width: 20px;
        height: 20px;
        color: #fff;
        display: inline-block;
        border-radius: 50%;
        margin: 0 10px;
        transition: all 0.5s;
        box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
    }
    .sharepost li a:hover {
        box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
    }
    .sharepost li a.facebook {
        background: #3A5795;
    }
    .sharepost li a.twitter {
        background: #1DA1F2;
    }
    .sharepost li a.gplus {
        background: #DB4437;
    }
    

  6. The last step is Save & See the results

Well, the article is about creating a Share Button on Material Design Bloggers , don't forget to leave a comment ... For those who have trouble commenting in the comments column, we will help you, please.

Source : Share with your friends & your family

Related Post

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter