أكتب إسم موقع أو شركة ..

الثلاثاء، 6 يونيو 2017

إضافة خاصية روابط التدوينة قابلة للنسخ واللصق أسفل التدوينات


السلام عليكم ورحمة الله تعالى وبركاته
موضوعنا اليوم حول كيفية إضافة خاصية " روابط هذا الموضوع قابلة للنسخ واللصق " ، بحيث ستظهر تحت كل موضوع تكتبه ، وبها روابط الموضوع على ثلاث أنواع :
- الرابط الأصلي للموضوع
- HTML
 - BBCode

تابع طريقة إضافة الخاصية :
  1. من لوحة تحكم مدونتك انقر على قالب ، قم بتحميل نسخة إحتياطية لقالبك 
  2. انقر على تحرير HTML وباستعمال Ctrl +F ، إبحث عن الوسم التالي ]]></b:skin> 
  3. الآن ضع الكود التالي فوقه مباشرة :
     #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/AVvXsEgOTyv4HhGTvXxmkdN4K7wV1fcMd8FTjyC5Oci99mmXgSUM9RsF8onQ7d5zNxa_QiFN96bhqrO5ruoc_TVJWwaZrDCnxDetkwlqPfbnOZiYASg5Yy581NtLJ4rXMXsWGDApBn7fpoHWxZCU/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/AVvXsEg0K1N7Y2O4G1eyFl7Jgx0NmznfM2T9pT-4fA2SC5NsuwJZc9_1BuTd7WZl2yJpKSHTjUqjCsi4psFH1aOJGOyfQI33HOLVoQbEcVBX5lkNBuTTlZ1wmaRWYJfUgqSZEpT8HEOmyBJ0kwqk/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/AVvXsEjefRuMyPG3jFaG6pOQ2nnTg7LcW5TI26o5vFEgJsYYzIw3vYeWRUILByHtCjwaSjElPIh4qvPQ94jdq7A8omesm8fTef8mFGL9MzN-m3bgOv35fuiOd4MgJX543NEimS0o1DqS5rVg6XBN/s1600/gradhover.png')
     repeat-x;
        color: #339;
    }
    #table a:hover {
        text-decoration:underline;
    }
  4. إبحث عن <data:post.body/> ، ربما تجد ثلاث أكواد ، فنحن نريد الأخير ،
  5. ضع الكود الموالي فوقه تماما: 

<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>

قم بحفظ

ملاحظات :
- يمكنك التحكم في العرض الذي هو width : 580px
- حجم الخط font size:13px
- تجدهما في الكود الثاني
- يمكنك تغيير ما لون بالأحمر بما يناسبك 

إذا أعجبكم الموضوع من فضلكم شاركوه مع أصدقائكم على المواقع الإجتماعية ، وشكرا 


 لا نسمح بنسخ مواضيعنا بدون ذكر المصدر ، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

▩ مواضيع مقترحة :
هل إستفدت من هذا الموضوع ؟ من فضلك شاركه على :

ليست هناك تعليقات

جميع الحقوق محفوظة لــ: Ibda3-Blogger 2022-2013 ©