Show Html And Forum 'BB' Code Of Your Post Url In Blogger

So, I've bumped into many websites having this feature, I liked and added it to my blog then thought iI could share it here for those who wish to have such feature as well.
Sometimes, when readers find a blog post interesting, sharing in different social media site may just be their next step. Sharing posts directly to most forums and in other medium may not be friendly because sharing widgets did not include these platforms thus readers may give up in sharing posts to such platforms which would definitely boost your readership. Sharing widgets generally include Facebook, Twitter, Pinterest, Reddit etc. But there are many social media sites that can be use in sharing contents as well.

So the best way to allow sharing to such social platforms is by displaying raw URL directly at the end of a blog post. this widget you are about to utilize is simple yet effective. After adding this eidget to your blog, it will display the post URL at the end of your Blog post.

This widget displays 3 set of URLs which are listed below;

Post URL– This is suitable for sharing content on various social platforms.
HTML URL– Your URL displays in HTML formant and can be used in Comment section of blogs and websites accept HTML codes. Your Post title becomes the URLs name
Forum URL– Your URL displays in bbcode formant which can be used forums and comment sections of blogs and websites accepting bbcodes.
The URLs are user friendly and you or your Blog visitors can easily copy and paste your posts.
So now that you've read about the beautiful features of this Widget, its time to integrate it!
First thing first, login to your blogger account and back up your template.
Now, once your template have been backed up,
click on Edit HTML and find  ]]></b:skin> ( Ctrl F (Windows) or CMD F (Mac) ) Copy the css code below and Paste it above ]]></b:skin> 

#Postshare{text-align:left;margin-top:2em; padding-bottom:5px;color:#555555;}




Finally, Find this code <div class='post-footer'>  then copy the script below and paste it below <div class='post-footer'> . Preferably, as I did in my blog, you can paste the code directly under your share button.
(Your share button code is also found in your post-footer section).

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='Postshare'>
<h2 style='margin-bottom:0.5em;color:#555555;'>Grab The Post URL</h2>
<b>URL:</b>
<textarea id='url' onclick='this.focus();this.select()' readonly='readonly' rows='1' style='margin-bottom:15px; background-color:#F8F8F8;color:#444444; height: 2.6em; width: 98%;' title='Click to highlight'><data:blog.url/></textarea>
  <br/>
<b>HTML link code:</b>
<textarea id="HTML-code" onclick="this.focus();this.select()" readonly="readonly" rows="1" style='margin-bottom:15px; background-color: #F8F8F8;color:#444444; height: 2.6em; width: 98%;' title="Click to highlight">&lt;a href="<data:blog.url/>"&gt;<data:blog.pageTitle/> "clickable"&lt;/a&gt;</textarea>
<br/>
<b>BB (forum) link code:</b>
<textarea id='BB-code' onclick='this.focus();this.select()' readonly='readonly' rows='1' style='margin-bottom:15px; background-color:#F8F8F8;color:#444444; height: 2.6em; width: 98%;' title='Click to highlight'>[url=<data:blog.url/>]<data:blog.pageTitle/> &quot;clickable&quot;[/url]</textarea>
  </div>
 </b:if>       
</b:if>
</b:if>

After adding the codes above to your template correctly, Save your template and visit any Post in your blog, you will notice your new widget where it have been situated. 

So! After all said and done your Blog visitors will definitely enjoy sharing your Blog post URL in any social media site, Blog comment sections and in any forum. 

Enjoy your new widget...