Add Links of Post below of All Blogger Posts

Hello followers and lovers and visitors blog The Spax Pro Tutorials

You will learn how to add links of post below of all blogger posts

Where displays on tabular form the below of each post and The article includes 

links on Figure 3 formats : URL, HTML, BBCODE.

And now we leave you with how to apply addition.

Login to your blogger dashboard --> temaplte - -> Edit HTML and Tick the  Expand Widget Templates check box on top right of the HTML window.

look for the following code ~{ To facilitate the search press ( Ctrl+F ) }~  :

]]></b:skin>

Then place the following code before the ]]></b:skin> :

#table {

    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;

    font-size: 13px;

    margin: 10px -12px;

    width: 580px;

    text-align: left;

    border-collapse: collapse;

   direction:ltr;

}

#table th {

    font-size: 13px;

    font-weight: normal;

    padding: 8px;

    background: #b9c9fe url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL9s0tgwXl4WA7ZKqr56oGteneZCFk9F4Af9s_eGotPyk1IXLpOpsXWDSMDF8tAF0_ti4XLeiqAyfsB4MZcEyI7Vi9GMjcAZu56yGRvdd-Oh1YDSfEBwEqNgKV5eYpiVhsKM_kdlJwYQgD/s1600/gradhead.png') repeat-x;

    border-top: 2px solid #d3ddff;

    border-bottom: 1px solid #fff;

    color: #039;

}

#table td {

    padding: 8px;

    border-bottom: 1px solid #fff;

    color: #4c4c4c;

    border-top: 1px solid #fff;

    background: #e8edff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM_24hTAqTWoOgXgao2PLQCDWehO6k9TPaRblDAESCd_qDFO8vKGRbbKoB50zfXO3weLwkDSYIXZ7bdxPGsbfkDeZ71FKB5YF9zVbDVRjeW4wHIOLJu_pZMcuKoaabzTTtcpGi8G81y4a9/s1600/gradback.png') repeat-x;

}

#table tfoot tr td {

    background: #e8edff;

    font-size: 20px;

    color: #99c;

    text-align:center;

}

#table tbody tr:hover td {

    background: #d0dafd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOz_rmpInImA6PyV5zz-DINzad2tfdZ2vFcXWn6dKUxY7zsRmT79g7Lj57E8pAl5ehCNpAQbEAr4XemuLPAPy2yWHAipB1qYjN1U4d7TMA9VL65gcfElsD8MnSIuxPn0Xcbyvh4dtifYmB/s1600/gradhover.png') repeat-x;

    color: #339;

}

#table a:hover {

    text-decoration:underline;

}

Then look for the following code ( You can find more than one. I have personally used the third. You can use the latest ... try )

<data:post.body/>

Then place this code below <data:post.body/> :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table id='table' summary='Links topic'>

  <tfoot>

    <tr>

      <td colspan='2'>Links of this post is subject to copy and paste</td>

    </tr>

  </tfoot>

<tr>

  <td>URL</td>

  <td><input expr:value='data:post.canonicalUrl' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>

</tr><tr>

  <td>HTML</td>

  <td><input expr:value='&quot;&lt;a href=&amp;quot;&quot; + data:post.canonicalUrl + &quot;&amp;quot; title=&amp;quot;&quot; + data:post.title + &quot;&amp;quot;&gt;&quot; + data:post.title + &quot;&lt;/a&gt;&quot;' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>

</tr><tr>

  <td>BBCode</td>

  <td><input expr:value='&quot;[url=&quot; + data:post.canonicalUrl + &quot;]&quot; + data:post.title + &quot;[/url]&quot;' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>

</tr>

</table> </b:if>

Finally, save the template

I hope you like it And for any inquiries please leave your comments