How to add social media Blogger/Blogspot Post share icon whatsapp, facebook, twitter, or print icon

How to add social media share icon WhatsApp, Facebook, twitter, or print icon? How to add social media Blogger/Blogspot Post share icon whatsapp, facebook, twitter, or print icon? Blogger post share code for Whatsapp, on mobile phone. but remember one things That social media icons and social media post share icons both are different.

Social media icons for blogger

social media link icons is simple, your social media page like facebook page, twitter profile, google plus or another website icon link. but social media share icon is different from it.

Social media Post share Icons for blogger

Social media post share icons help to visitors can share post on their facebook, whatsapp, twitter etc.. now comes to the on main point that how to use blogger post share icons on your blog. read full article for understand step by step.
here i'm telling you two methods that help to install social media post share icon on your blogeer.
How to add social media Blogger/Blogspot Post share icon whatsapp, facebook, twitter, or print icon

Method - 1 (Use sharethis plugin)

This Method will given you Dashboard Function where you Analysis data like share count.
  • Step-1 open sharethis.com website and register yourself 
  • Step-2 when you finished register processes then select icons which you need.
  • Step-3 click on get code copy this code, message show like below.
Get the code: copy and install sharethis.js
All our tools require sharethis.js. To install, copy and paste code below into the <head> tag of your site. Then click the verify button below.
  • Step-4 after copy this paste in your blogger <head>paste here</head>
  • Step-5 return back on sharethis website and click on verify.
  • Step-6 copy this (<div class="sharethis-inline-share-buttons"></div>) and paste where you want  to display social media post share icons.

Method - 2 (Use Social Media Post Share Code script for blogger)

  • Step-1 copy below code and paste in your in your Blogger Template Sign in -> Click on Theme -> Click On Edit Html 
  • Step-2 paste code above where Related post start or according to your choice where you want to display Social media post Share icon in blogger.
  • Step-3 Use CSS for Design, margin, padding, Size 

You don't need to change anything in this.


<!-- Share Button Start --><span class='sharethis'><b>If this information helpful/enjoyful for you then Plz share this or save as Print/PDF you can edit me </b><br/><whatsapp expr:href='data:post.url' expr:text='data:post.title'/><a class='wh social-popup' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/> Whatsapp</a><a class='pt social-popup' onClick='window.print()' rel='nofollow' style='cursor:pointer'><i class='fa fa-print pttea'/>Print</a></span><script type='text/javascript'>//<![CDATA[var siteurl = window.location.href;  document.write('<span class="sharethis"> \<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\    <i class="fa fa-facebook fbtea"></i> Facebook</a> \<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\    <i class="fa fa-google-plus gotea"></i> Google</a> \<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\    <i class="fa fa-twitter twtea"></i> Twitter</a> \</span>\');//]]></script><!-- Share Button End -->

Use CSS here You can customize


/* Share Button */.sharethis a.fb,.sharethis a.gp,.sharethis a.tw, .sharethis a.wh, .sharethis a.pt,.sharethis span.pl{text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-weight:400;border-radius:2px;color:#fff;text-shadow:none;padding:6px 12px;opacity:1;transition:all .3s}.sharethis a.gp {background:#DD4B39;}.sharethis a.fb {background:#3B5A9B;}.sharethis a.pt {background:#332e2e;}.sharethis a.tw {background:#3498db;}.sharethis a.wh {background:#78da54;}.sharethis a i{margin:0 5px 0 0}.fbtea,.gotea, whtea, pttea,.plustea,.twtea{font-size:13px!important;vertical-align:middle}.sharethis a.fb:hover,.sharethis a.gp:hover,.sharethis a.tw:hover,.sharethis span.pl:hover{color:#fff;opacity:.9}.sharethis a.fb:active,.sharethis a.gp:active,.sharethis a.tw:active, .sharethis a.wh, .sharethis a.pt,.sharethis span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}


How to add social media share icon 

WhatsApp, Facebook, Twitter, or print icon? Whatsapp, facebook, twitter, or print icon? Blogger post share code for Whatsapp, on mobile phone But remember one things that are different Social media icons for blogger social media links are simple, your social media page like facebook page, twitter profile, google plus or another website icon link. but the social media share is different from it. Social media Post share Icons for blogger Social media post share icons help to visitors post on their facebook, whatsapp, twitter etc .. Now comes to the main point that blogger post share icons on your blog Read full article for understand step by step. Here i'm telling you two methods How to add social media Blogger / Blogspot Post share icon whatsapp, facebook, twitter, or print icon Method - 1 (Use sharethis plugin) This method will give you Dashboard Function where you analyze data like share count. Step-1 open sharethis.com website and register yourself Step-2 when you finish register processes then select icons which you need. Step-3 click on get code copy this code, message show like below Get the code: copy and install sharethis.js All our tools require sharethis.js. To install, copy and paste the code below into the <head> tag of your site. Then click the verify button below. Step-4 after copy this paste in your blogger <head> paste here </ head> Step-5 Return back to share this website and click on verify. Step-6 copy this (<div class = "sharethis-inline-share-buttons"> </ div>) and paste where you want to display social media post share icons Method - 2 (Use Social Media Post Share Code script for Blogger) Step-1 copy below code and paste in your Blogger Template Sign in -> Click on Edit Html above step-2 paste code where related post Where you want to display social media post Share icon in blogger Step-3 Use CSS for Design, margin, padding, Size You do not need to change anything in this. <! - Share Button Start -> <span class = 'sharethis'> <b> If this information is useful / enjoyful for you then plz share this or save as print / PDF you can edit me </ b> <br / > <whatsapp expr: href = 'data: post.url' expr: text = 'data: post.title' /> <a class = 'wh social-popup' expr: href = '& quot; whatsapp: // send? text = & quot; + data: post.title + & quot; & gt; & gt; & quot; + data: post.url 'rel =' nofollow 'target =' _ blank '> <i class =' ??fa faas whatsapp '/> Whatsapp </a> <a class =' ??pt social-popup 'onClick =' window print () 'rel =' nofollow 'style =' cursor: pointer '> <i class =' ??fa fa-print pttea '/> Print </a> </ span> <script type =' text / javascript '> / / <! [CDATA [var siteurl = window.location.href; document.write ('<span class = "sharethis"> <a class = "fb social-popup" href = "https://www.facebook.com/sharer/sharer.php?u=' + siteurl + ' "target =" _ blank "title =" share to facebook "> \ <i class =" fa fa-facebook fbtea "> </ i> Facebook </a> <a class =" gp social-popup "href =" https://plus.google.com/share?url= '+ siteurl +' "target =" _ blank "title =" Share to Google + "> <<class =" fa fa-google-plus gotea "> </ i> Google </a> \ <a class = "tw social-popup" href = "https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+ '"target =" _ blank "title =" Share to Twitter "> \ <class =" fa fa-twitter "> </ i> Twitter </a> </ span> \'); //]] > </ script> <! - Share Button End -> Use CSS here You can customize / * Share Button * /. sharethis a.fb, .sharethis a.gp, .sharethis a.tw, .sharethis a.wh , .sharethis a.pt, .sharethis span.pl {text-decoration: none! important; display: inline-block; margin: 0 5px 5px 0; font-weight: 400; border-radius: 2px; color: #fff ; text-shadow: none; padding: 6px 12px; opacity: 1; transitio n: all .3s} .sharethis a.gp {background: # DD4B39;}. sharethis a.fb {background: # 3B5A9B;}. sharethis a.pt {background: # 332e2e;} sharethis a.tw {background: # 3498db;} sharethis a.wh {background: # 78da54;} sharethis ai {margin: 0ppx 0 0} .fbtea, .gotea, whtea, pttea, .plustea, .twtea {font-size: 13px! Important ; vertical-align: middle} .sharethis a.fb: hover, .sharethis a.gp:hover,.sharethis a.tw:hover,.sharethis span.pl:hover{color:#fff;opacity:.9}. sharethis a.fb: active, .sharethis a.gp:active.sharethis a.tw:active, .sharethis a.wh, .sharethis a.pt, .sharethis span.pl:active{box-shadow:inset 0 1px 0 rgba (0,0,0, .16)} 

Comments

  1. UnknownMarch 21, 2022 at 12:20 AM

    its so important to notice thank You For Sharing Like This. Very Informative StoryMetaverseandseo Great Job Best Of Luck For Future Story

    ReplyDelete

Post a Comment