How to Add Social Button On Blogger Sidebar - Easy Way

Anonymous 9:38 AM

Hi, Friends in This Article I Will Show You How To Add Social Button on Blogger Sidebar. This Is Easy if You Read This Article Completely. Sometimes Our Website Was on Blogger. You Know Blogger Doesn't Provide Any Types of Plugins.

WordPress Provides Many of The Plugins Which Help to Add Any Features on The Blog. Can You Add Social Plugins on Your Blogger Website? The Answer Was Yes.

You Can Add easily Add Social Button on Blogger. Please Note: You Can only Add Share Button on Blogger Sidebar from This Tricks. This Is the Genuine Tricks For Every Blogger User.

First of All, You Know Some Point After Adding This Share Button. I Recommend You Please Note This Important Points to Helps Ranking Your Site on Google. There Are Many Types of Share Buttons

Step 1

<style>.resp-sharing-button__link,
.resp-sharing-button__icon {
display: inline-block
}

.resp-sharing-button__link {
text-decoration: none;
color: #fff;
margin: 0.5em
}

.resp-sharing-button {
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
width: 1em;
height: 1em;
margin-right: 0.4em;
vertical-align: top
}

.resp-sharing-button--small svg {
margin: 0;
vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
stroke: #fff;
fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
fill: #fff;
stroke: none
}

.resp-sharing-button--twitter {
background-color: #55acee
}

.resp-sharing-button--twitter:hover {
background-color: #2795e9
}

.resp-sharing-button--pinterest {
background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
background-color: #8c0615
}

.resp-sharing-button--facebook {
background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
background-color: #2d4373
}

.resp-sharing-button--tumblr {
background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
background-color: #222d3c
}

.resp-sharing-button--reddit {
background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
background-color: #3a80c1
}

.resp-sharing-button--google {
background-color: #dd4b39
}

.resp-sharing-button--google:hover {
background-color: #c23321
}

.resp-sharing-button--linkedin {
background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
background-color: #046293
}

.resp-sharing-button--email {
background-color: #777
}

.resp-sharing-button--email:hover {
background-color: #5e5e5e
}

.resp-sharing-button--xing {
background-color: #1a7576
}

.resp-sharing-button--xing:hover {
background-color: #114c4c
}

.resp-sharing-button--whatsapp {
background-color: #25D366
}

.resp-sharing-button--whatsapp:hover {
background-color: #1da851
}

.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus { background-color: #FB6200 }

.resp-sharing-button--vk {
background-color: #507299
}

.resp-sharing-button--vk:hover {
background-color: #43648c
}

.resp-sharing-button--facebook {
background-color: #3b5998;
border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
background-color: #2d4373;
border-color: #2d4373;
}

.resp-sharing-button--twitter {
background-color: #55acee;
border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
background-color: #2795e9;
border-color: #2795e9;
}

.resp-sharing-button--google {
background-color: #dd4b39;
border-color: #dd4b39;
}

.resp-sharing-button--google:hover,
.resp-sharing-button--google:active {
background-color: #c23321;
border-color: #c23321;
}

.resp-sharing-button--email {
background-color: #777777;
border-color: #777777;
}

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
background-color: #5e5e5e;
border-color: #5e5e5e;
}

.resp-sharing-button--pinterest {
background-color: #bd081c;
border-color: #bd081c;
}

.resp-sharing-button--pinterest:hover,
.resp-sharing-button--pinterest:active {
background-color: #8c0615;
border-color: #8c0615;
}

.resp-sharing-button--linkedin {
background-color: #0077b5;
border-color: #0077b5;
}

.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
background-color: #046293;
border-color: #046293;
}

.resp-sharing-button--whatsapp {
background-color: #25D366;
border-color: #25D366;
}

.resp-sharing-button--whatsapp:hover,
.resp-sharing-button--whatsapp:active {
background-color: #1DA851;
border-color: #1DA851;
}

.resp-sharing-button--hackernews {
background-color: #FF6600;
border-color: #FF6600;
}

.resp-sharing-button--hackernews:hover
.resp-sharing-button--hackernews:active {
background-color: #FB6200;
border-color: #FB6200;
}

.resp-sharing-button--vk {
background-color: #507299;
border-color: #507299;
}

.resp-sharing-button--vk:hover
.resp-sharing-button--vk:active {
background-color: #43648c;
border-color: #43648c;
}
</style>

<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm3.6 11.5h-2.1v7h-3v-7h-2v-2h2V8.34c0-1.1.35-2.82 2.65-2.82h2.35v2.3h-1.4c-.25 0-.6.13-.6.66V9.5h2.34l-.24 2z"/></path></svg>
</div>
</div>
</a>


<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&url=http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm5.26 9.38v.34c0 3.48-2.64 7.5-7.48 7.5-1.48 0-2.87-.44-4.03-1.2 1.37.17 2.77-.2 3.9-1.08-1.16-.02-2.13-.78-2.46-1.83.38.1.8.07 1.17-.03-1.2-.24-2.1-1.3-2.1-2.58v-.05c.35.2.75.32 1.18.33-.7-.47-1.17-1.28-1.17-2.2 0-.47.13-.92.36-1.3C7.94 8.85 9.88 9.9 12.06 10c-.04-.2-.06-.4-.06-.6 0-1.46 1.18-2.63 2.63-2.63.76 0 1.44.3 1.92.82.6-.12 1.95-.27 1.95-.27-.35.53-.72 1.66-1.24 2.04z"/></path></svg>
</div>
</div>
</a>


<a class="resp-sharing-button__link" href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M12.65 8.6c-.02-.66-.3-1.3-.8-1.8S10.67 6 9.98 6c-.63 0-1.2.25-1.64.68-.45.44-.68 1.05-.66 1.7.02.68.3 1.32.8 1.8.96.97 2.6 1.04 3.5.14.45-.45.7-1.05.67-1.7zm-2.5 5.63c-2.14 0-3.96.95-3.96 2.1 0 1.12 1.8 2.08 3.94 2.08s3.98-.93 3.98-2.06c0-1.14-1.82-2.1-3.98-2.1z"/><path d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm-1.84 19.4c-2.8 0-4.97-1.35-4.97-3.08s2.15-3.1 4.94-3.1c.84 0 1.6.14 2.28.36-.57-.4-1.25-.86-1.3-1.7-.26.06-.52.1-.8.1-.95 0-1.87-.38-2.57-1.08-.67-.68-1.06-1.55-1.1-2.48-.02-.94.32-1.8.96-2.45.65-.63 1.5-.93 2.4-.92V5h3.95v1h-1.53l.12.1c.67.67 1.06 1.55 1.1 2.48.02.93-.32 1.8-.97 2.45-.16.15-.33.3-.5.4-.2.6.05.8.83 1.33.9.6 2.1 1.42 2.1 3.56 0 1.73-2.17 3.1-4.96 3.1zM20 10h-2v2h-1v-2h-2V9h2V7h1v2h2v1z"/></path></path></svg>
</div>
</div>
</a>


<a class="resp-sharing-button__link" href="mailto:?subject=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&body=http%3A%2F%2Fsharingbuttons.io" target="_self" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm8 16c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v8z"/><path d="M17.9 8.18c-.2-.2-.5-.24-.72-.07L12 12.38 6.82 8.1c-.22-.16-.53-.13-.7.08s-.15.53.06.7l3.62 2.97-3.57 2.23c-.23.14-.3.45-.15.7.1.14.25.22.42.22.1 0 .18-.02.27-.08l3.85-2.4 1.06.87c.1.04.2.1.32.1s.23-.06.32-.1l1.06-.9 3.86 2.4c.08.06.17.1.26.1.17 0 .33-.1.42-.25.15-.24.08-.55-.15-.7l-3.57-2.22 3.62-2.96c.2-.2.24-.5.07-.72z"/></path></path></svg>
</div>
</div>
</a>


<a class="resp-sharing-button__link" href="https://pinterest.com/pin/create/button/?url=http%3A%2F%2Fsharingbuttons.io&media=http%3A%2F%2Fsharingbuttons.io&description=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking." target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--pinterest resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm1.4 15.56c-1 0-1.94-.53-2.25-1.14l-.65 2.52c-.4 1.45-1.57 2.9-1.66 3-.06.1-.2.07-.22-.04-.02-.2-.32-2 .03-3.5l1.18-5s-.3-.6-.3-1.46c0-1.36.8-2.37 1.78-2.37.85 0 1.25.62 1.25 1.37 0 .85-.53 2.1-.8 3.27-.24.98.48 1.78 1.44 1.78 1.73 0 2.9-2.24 2.9-4.9 0-2-1.35-3.5-3.82-3.5-2.8 0-4.53 2.07-4.53 4.4 0 .5.1.9.25 1.23l-1.5.82c-.36-.64-.54-1.43-.54-2.28 0-2.6 2.2-5.74 6.57-5.74 3.5 0 5.82 2.54 5.82 5.27 0 3.6-2 6.3-4.96 6.3z"/></path></svg>
</div>
</div>
</a>


<a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fsharingbuttons.io&title=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&summary=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&source=http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewbox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M9.5,16.5h-2v-7h2V16.5z M8.5,7.5 c-0.553,0-1-0.448-1-1c0-0.552,0.447-1,1-1s1,0.448,1,1C9.5,7.052,9.053,7.5,8.5,7.5z M18.5,16.5h-3V13c0-0.277-0.225-0.5-0.5-0.5 c-0.276,0-0.5,0.223-0.5,0.5v3.5h-3c0,0,0.031-6.478,0-7h3v0.835c0,0,0.457-0.753,1.707-0.753c1.55,0,2.293,1.12,2.293,3.296V16.5z" />
</path></svg>
</div>
</div>
</a>


<a class="resp-sharing-button__link" href="whatsapp://send?text=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.%20http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--whatsapp resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewbox="0 0 24 24"><path d="m12 0c-6.6 0-12 5.4-12 12s5.4 12 12 12 12-5.4 12-12-5.4-12-12-12zm0 3.8c2.2 0 4.2 0.9 5.7 2.4 1.6 1.5 2.4 3.6 2.5 5.7 0 4.5-3.6 8.1-8.1 8.1-1.4 0-2.7-0.4-3.9-1l-4.4 1.1 1.2-4.2c-0.8-1.2-1.1-2.6-1.1-4 0-4.5 3.6-8.1 8.1-8.1zm0.1 1.5c-3.7 0-6.7 3-6.7 6.7 0 1.3 0.3 2.5 1 3.6l0.1 0.3-0.7 2.4 2.5-0.7 0.3 0.099c1 0.7 2.2 1 3.4 1 3.7 0 6.8-3 6.9-6.6 0-1.8-0.7-3.5-2-4.8s-3-2-4.8-2zm-3 2.9h0.4c0.2 0 0.4-0.099 0.5 0.3s0.5 1.5 0.6 1.7 0.1 0.2 0 0.3-0.1 0.2-0.2 0.3l-0.3 0.3c-0.1 0.1-0.2 0.2-0.1 0.4 0.2 0.2 0.6 0.9 1.2 1.4 0.7 0.7 1.4 0.9 1.6 1 0.2 0 0.3 0.001 0.4-0.099s0.5-0.6 0.6-0.8c0.2-0.2 0.3-0.2 0.5-0.1l1.4 0.7c0.2 0.1 0.3 0.2 0.5 0.3 0 0.1 0.1 0.5-0.099 1s-1 0.9-1.4 1c-0.3 0-0.8 0.001-1.3-0.099-0.3-0.1-0.7-0.2-1.2-0.4-2.1-0.9-3.4-3-3.5-3.1s-0.8-1.1-0.8-2.1c0-1 0.5-1.5 0.7-1.7s0.4-0.3 0.5-0.3z"/></path></svg>
</div>
</div>
</a>


<a class="resp-sharing-button__link" href="https://news.ycombinator.com/submitlink?u=http%3A%2F%2Fsharingbuttons.io&t=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking." target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--hackernews resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256"><path fill-rule="evenodd" d="M128 256c70.692 0 128-57.308 128-128C256 57.308 198.692 0 128 0 57.308 0 0 57.308 0 128c0 70.692 57.308 128 128 128zm-9.06-113.686L75 60h20.08l25.85 52.093c.397.927.86 1.888 1.39 2.883.53.994.995 2.02 1.393 3.08.265.4.463.764.596 1.095.13.334.262.63.395.898.662 1.325 1.26 2.618 1.79 3.877.53 1.26.993 2.42 1.39 3.48 1.06-2.254 2.22-4.673 3.48-7.258 1.26-2.585 2.552-5.27 3.877-8.052L161.49 60h18.69l-44.34 83.308v53.087h-16.9v-54.08z"/></path></svg>
</div>
</div>
</a>


<a class="resp-sharing-button__link" href="http://vk.com/share.php?title=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&url=http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--vk resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M12 .5C5.65.5.5 5.65.5 12c0 6.352 5.15 11.5 11.5 11.5 6.352 0 11.5-5.148 11.5-11.5C23.5 5.65 18.352.5 12 .5zm8.11 16.82h-2.603c-.244 0-.48-.094-.658-.26l-1.98-1.862c-.118-.112-.276-.175-.438-.175-.355 0-.646.287-.646.643v1c0 .36-.292.654-.654.654h-1.655c-3.935 0-7.385-6.898-8.185-9.093-.018-.052-.028-.105-.028-.16.002-.247.204-.445.452-.445h2.637c.24 0 .456.14.556.355.57 1.42 1.31 2.764 2.2 4.004.126.14.304.217.49.214.357-.006.64-.3.63-.656-.014-.894-.034-1.958-.034-2.328 0-1.493-1.106-1.313-1.106-1.313.355-.49.94-.76 1.543-.717h2.182c.537 0 .974.435.974.972v3.093c0 .896.646 1.502 1.646-.43.37-.718 1.527-2.848 1.527-2.848.114-.214.337-.347.577-.347h2.9c1.323 0 .358 1.502-.175 2.21-.392.52-1.31 1.727-1.873 2.47-.267.353-.238.845.07 1.165 0 0 1.74 1.834 2.22 2.31.685.673.685 1.545-.57 1.545z"/></path></svg>
</div>
</div>
</a>

You Can Copy Code. You Know This Is the HTML Code Which Helps to Make Your Share Buttons. if You Want to Add Different Buttons the You Can Email Me I Can Send HTML Code of Your Choice.

Step 2

Visit Your Blogger Dashboard. Note: You Can Go the Blogger Dashboard Which You Want to Add.

Step 3

When You Go on The Dashboard You Can Saw a Lot of Option on Left Sidebar but You Can only Touch/click on The Layout Option.

Step 4

When You Click on The Layout option You Can See This Interface. You Can Click on The Sidebar for Adding Button on The Sidebar. If You Want to Add on Other Place You Can Add But There Were a Options to Add a Gadget

Step 5

Paste Your Code on The Blank Content Area. You Must Type Social Plugin On Title. if you Have Another Code You Can Easily Paste with Like This Simple Tips.

Post a Comment

0 Comments