إضافة روابط التدوينة أسفل كل موضوع بطريقة رائعة جدا

بسم الله الرحمان الرحيم

والسلام عليكم ورحمة الله تعالى وبركاته

مرحبا بمتابعي ومحبي وزوار مدونة استفد المتواضعة

أحضرت لكم درس مهم جدا لمدونات بلوجر. هذا الدرس إن شاء الله

سيكون حول إضافة الروابط الأوتوماتيكية أسفل كل تدوينة.

مثال مصور:

والمثال المباشر أسفل هذه التدوينة.

الآن مع طريقة التركيب:

من خلال تصميم-تحرير html:

ابحث عن الكود التالي:

]]></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/AVvXsEiGKMZ8rEqvGRwLHFZdpvSPLuJL0phJZTSLZTaiWYNq7tUohgmAi0uqs3jqbgMbqfJSEA92fOqXhSwOPJgpHWOwLMDz_veiUcsSf5DFBLFciXzlRHMBxegL4m9svUp5GfDpqtV9UpgJBc70/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/AVvXsEi7Sk1h0TmOUvLX3Z96PblvttFL7mPlgk-Yo6pnI_cgreKNvPCJaOaQ2245CYSlxTLjds_tC3LbHKLZ_7xK0bDPhBklbArQOOtHzEjMgzR3OZpzMGKqqtRRt6rGq7kkHzE-r34K5Pm47K-w/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/AVvXsEgKxiUF0RGX_vpvZidmwWWb_pQNZQLZndU7ZcQcGyJvGtrgEQ5uBI6KKpOowkAbNg6x0c_6dXrCQEk8IX4Qt3iTuV2n1jzSUd9ghuokrIxJt2CCghCeHLY5yZ9F3f2GrtRr6pBtKl4rz8PO/s1600/gradhover.png') repeat-x;

    color: #339;

}

#table a:hover {

    text-decoration:underline;

}

ثم ابحث عن الكود التالي:

<data:post.body/>

قد تجد أكثر من واحد. أنا شخصيا استعملت الثاني . أنت استعمل الأخير... وجرب


ثم ضع هذا الكود أسفله:

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

<table id='table' summary='روابط الموضوع'>

  <tfoot>

    <tr>

      <td colspan='2'>روابط هذه التدوينة قابلة للنسخ واللصق</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>

وفي الأخير. أتمنى من الله القوي العزيز أن تعجبكم الإضافة الرائعة.


وأي استفسار . لا تترددوا

Tweet

Sharing Widget byestafid

يمكنك نسخ روابط هذه التدوينة
URL
HTML
BBCode

التصنيف : دروس بلوجر