24/09/2016
Add Links To Copy Box Under Each Post
Hello guys. Today I am going to show you how to add a table or box of links under each post on blogger.
This table or box contains your blog's URLs. They are as follows :
This table or box contains your blog's URLs. They are as follows :
-Normal Link (URL)-HTML-BBCode
Adding this gadget it made your visitor can copy your blog's URL the way they want. It gives a benefit too
Here is the Gadget take a look at it:
How to add it:
- From dashboard chose template and then click edit HTML
- By using Ctrl + F , Search for ]]></b:skin> and add the following code above it
#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/AVvXsEhxLHrq7QWGspMN9pisD2tv8SghONFrOmKSTCvkm3wEEGq2WCJPPPK_7i6Vr3fJ1quuM_BJD2eeCK6emi7FFXN1jhZuoOerNYlWH-6-rOrr_0CIMUCwO0pz7XgHe8vPvYsvL56U3TxhBk5t/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/AVvXsEgdIBptb3G3yN_fgzmjqEIMWFC8azmeLRE3GXSRQcQQidQiWHwWRbZ2urDflcxIaarkmOmyBtDA_B_i_w9uasvTvon2fIEkPo2SMPGLfrZxhgKvwMAU6ehYYbc5u_2uXSjwCfdurMjlxCj0/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/AVvXsEjgO9c2WA4SlopTZl_krtcof44XKPI7UzfHeFETeqV065rFyyAAYq_HyDSb00FYWdIHTMOr3o4uA4VC9D-KPrXIxe3MnJAqgtiFXKQ1mIVm4TYI0Q52gZf-CzC1VYdYGw_uXJ_GjRVZbSfT/s1600/gradhover.png')
repeat-x;
color: #339;
}
#table a:hover {
text-decoration:underline;
} - Now search for <data:post.body/> , you may find more than one, we need the last one, Add the bellow code above it , click Save
<b:if cond='data:blog.pageType == "item"'>
<table id='table' summary='روابط الموضوع'>
<tfoot>
<tr>
<td colspan='2'>Links of This Post</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='"<a href=&quot;" +
data:post.canonicalUrl + "&quot;
title=&quot;" + data:post.title +
"&quot;>" + data:post.title +
"</a>"' onclick='this.focus();
this.select();' readonly='readonly' style='width: 560px;'
type='text'/></td>
</tr><tr>
<td>BBCode</td>
<td><input expr:value='"[url=" +
data:post.canonicalUrl + "]" + data:post.title +
"[/url]"' onclick='this.focus(); this.select();'
readonly='readonly' style='width: 560px;' type='text'/></td>
</tr>
</table> </b:if>
Change the red words with anything you want .
Share & leave comment Please :)
Subscribe to:
Post Comments (Atom)
No comments
Note: only a member of this blog may post a comment.