These days you lot tin portion your content inwards whatever social media site similar facebook, twitter, gplus, linkedin, instagram, pinterest etc. But nosotros never idea near whats app, Do you lot know whats app is the most used social network as well as it has to a greater extent than users than facebook. hence today nosotros volition aid you lot to spread your content to that huge audience as well as volition acquire How to add together social sharing widget alongside whatsapp sharing push inwards blogger, right away days google is to a greater extent than focusing on mobile devices instead of pc’s. So putting a social widget which has whatsapp sharing pick inwards it, volition aid you lot to boost your traffic really quickly. Lets motion farther as well as see How to add together social sharing widget alongside whatsapp sharing push inwards blogger. You tin depository fiscal establishment tally a alive preview of the widget simply below.
.share-box-post{margin:20px 0 25px;border-bottom:3px company #EEE;position:relative} .share-title-post{color:#010101;display:inline-block;padding-bottom:10px;font-size:13px;font-weight:700;position:relative;top:5px;text-transform:uppercase} .share-art-post{float:right;padding:0;padding-top:0;font-size:13px;font-weight:400;text-transform:capitalize} .share-art-post a{color:#fff;padding:3px 8px;margin-left:4px;border-radius:2px;display:inline-block;margin-right:0} .share-art-post a bridge { display: none; } .share-art-post a:hover{color:#fff} .share-art-post .fac-art{background:#3b5998} .share-art-post .fac-art:hover{background:rgba(49,77,145,0.7)} .share-art-post .twi-art{background:#00acee} .share-art-post .twi-art:hover{background:rgba(7,190,237,0.7)} .share-art-post .goo-art{background:#db4a39} .share-art-post .goo-art:hover{background:rgba(221,75,56,0.7)} .share-art-post .pin-art{background:#CA2127} .share-art-post .pin-art:hover{background:rgba(202,33,39,0.7)} .share-art-post .lin-art{background:#0077B5} .share-art-post .lin-art:hover{background:rgba(0,119,181,0.7)} .share-art-post .wat-art{background:#25d266} .share-art-post .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
Note :- The actual push volition exclusively seem inwards mobile as well as tablets(768px covert size). We accept shown the push simply for demo inwards desktop.
Start Step-1 ( Adding CSS )
Before Editing nosotros recommend you lot to brand a backup of your template, hence that anything goes incorrect you lot even hence accept your weblog pattern safe.
The First matter you lot require to create is to login into your Blogger concern human relationship as well as acquire to >> Templates >> Edit HTML as well as search for the ending ]]></b:skin> tag as well as simply to a higher house it glue the next code.
/* ######## Social Sharing Widget By Sorabloggingtips.com ######################### */ .share-box { position: relative; padding: 10px; } .share-title { border-bottom: 2px company #777; color: #010101; display: inline-block; padding-bottom: 7px; font-size: 15px; font-weight: 500; position: relative; top: 2px; } .share-art { float: right; padding: 0; padding-top: 0; font-size: 13px; font-weight: 400; text-transform: capitalize; } .share-art a { color: #fff; padding: 3px 8px; margin-left: 4px; border-radius: 2px; display: inline-block; margin-right: 0; background: #010101; } .share-art a bridge { display: none; } .share-art a:hover{color:#fff} .share-art .fac-art{background:#3b5998} .share-art .fac-art:hover{background:rgba(49,77,145,0.7)} .share-art .twi-art{background:#00acee} .share-art .twi-art:hover{background:rgba(7,190,237,0.7)} .share-art .goo-art{background:#db4a39} .share-art .goo-art:hover{background:rgba(221,75,56,0.7)} .share-art .pin-art{background:#CA2127} .share-art .pin-art:hover{background:rgba(202,33,39,0.7)} .share-art .lin-art{background:#0077B5} .share-art .lin-art:hover{background:rgba(0,119,181,0.7)} .share-art .wat-art{background:#25d266;display:none;} .share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)} @media exclusively covert as well as (max-width: 768px) { .share-art .wat-art{display:inline-block;} }Step-2 ( Adding HTML )
In the template, search for the <data:post.body/> tag and simply below it glue the next HTML Coding. In case, you lot are unable to notice <data:post.body/>, then you lot tin glue it simply below <div class=’post-footer’> or <div class=’post-footer-line post-footer-line-1′></div>.
<b:if cond='data:blog.pageType == "item"'> <div class='share-box'> <h8 class='share-title'>Share This:</h8> <div class='share-art'> <a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); provide false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a> <a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); provide false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a> <a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); provide false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a> <a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); provide false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a> <a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); provide false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a> <whatsapp expr:href='data:post.url' expr:text='data:post.title'/> <a class='wat-art' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a> </div> </div> <div style='clear:both'/> </b:if>
Note :- If you lot desire to display the widget inwards every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then take away the lines which are marked inwards scarlet from the to a higher house code.
Step-3 ( Adding Fontawesome )
The widget industrial plant on fontawesome icons, hence to brand the widget travel you lot accept to install fontawesome inwards your blog, To create so.
In the template, search for the </head> tag and simply to a higher house it glue the next HTML Coding.
<link href=’https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ rel=’stylesheet’/>
Conclusion
Congrats !! You accept made it. right away you lot accept learned that How to add together social sharing widget alongside whatsapp shaing push inwards blogger. Visit your weblog as well as depository fiscal establishment tally the awesome widget alive inwards action, promise you lot liked this tutorial, if you lot enjoyed as well as hence delight portion it alongside your friends, nosotros are working difficult to railroad train to a greater extent than such awesome widgets delight remain tuned alongside Us. Arrivederci !! (Goodbye inwards Italian).
Sumber https://www.sorabloggingtips.com/
