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

عدد مشاهدات الموضوع:

 السلام عليكم ورحمة الله وبركاته ،اليوم سوف نتعرف على كيفية إضافة الروابط الأوتوماتيكية لتدوينات بلوجر تحت كل موضوع ،حيث يُعرض على شكل جدول أسفل كل تدوينة ويتضمن روابط المقال على شكل 3 صيغ : URL,HTML,BBCODE
والان نترككم مع كيفية تطبيق الإضافة ,


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2gjh1nPI/AAAAAAAACbg/7lNsVpks2oY/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('http://1.bp.blogspot.com/_xDpoN6UfFFY/S-J2f5yBC3I/AAAAAAAACbY/zWXYXsR-w5E/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('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2hsztUzI/AAAAAAAACbo/ztV1CK0RUrE/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>


وأخيرا قم بحفظ القالب ،أتمنى أن تنال إعجابكم ولأي إستفسارالمرجو ترك تعليقاتكم 

هناك 52 تعليقًا:

  1. مميز جدا يا أبو اياد ,
    يمكنك اضافة هذا الوسم داخل كود السكربت لكى يصبح الرابط readonly فلا يمكن للزائر مسح الرابط من الحقل وهو كالتالى :
    readonly="readonly"
    فعلا اضافة رائعة

    ردحذف
  2. رائع جدا أبو إياد شكرا لك

    ردحذف
  3. @King Sherif
    شكرا لك أخي الفاضل على إقتراحكم ،فقد كان في محله ولقد تم التعديل على الكود

    @محمد شريف
    لا شكر على واجب أخي ،سعدت بمرورك

    ردحذف
  4. استاذي العزيز ابو اياد حفظك الله

    كنت اتمنى منك او من احد الاخوة الكرام هو التفضل علينا بشرح اضافة صفحة جديدة لعمل الفيدوهات في المدونة .

    ارجوا التركيز معي فانا هنا لااتكلم عن اي صفحة بل اتكلم عن صفحة مستقلة توضع بها روابط اليوتيوب وعرض الافلام والمقاطع فيها دون التدخل في الصفحة الرئيسية

    وللتوضيح اكثر وقد تكون خبرتي على قدر استطاعتي ولكن لكي تفهمني اكثر سوف اسرد لك بعض الروابط التي تشرح عملية اضافة صفحة مستقلة خاصة بالفيدوهات

    ونذكر مثلا موقع الوطن
    http://www.kolalwatn.net/videos/index.1.html

    ومثل موقع معنا
    http://ar.m3n4.net/video/politics

    تركت لك هذه المواقع حتى تفهم مغزى السؤال والصفحة الخاصة بالفيدويوهات وهناك الكثير من المواقع التي تعرض صفحة مستقلة خاصة بالفيديوهات التابعة لليوتيوب .

    واريد ان اوضح النقطة الاهم وهي انه عندما اقوم بعمل نسخ لكود اليوتيوب من اسفل المشاركة واضعها في المدونة لايتدخل بالصفحة الرئيسية كما وأنه موضوع جديد .

    ارجوا من الله ان تكون وصلتك الفكرة وارجوا من الله ان يتسع لنا صدرك بشرح جميل والاهم من ذلك ان يكون بعيد عن التعقيد وكثرة الاكواد .

    وطريقة عمل الصفحة الجديدة للمدونة دون اي تعارض يذكر في القالب ,

    هذا اقتراحي لكم واتمنى من الله ان يتسع كرمك لصدرك الكريم وفي شهرك الكريم . هذا وبالله التوفيق ومنكم المساعدة في موضوع جديد لهذا الشرح . وجزاكم الله عني وعن المسلمين خير الجزاء

    ردحذف
  5. @Wikileaks Alarabia
    أخي الفاضل ،ما قمت بطلبه ليس عبارة عن إضافة ،بل هي قوالب خاصة ومبرمجة لهذا الغرض ،يمكنك تحميل قالب BloggerTube معرب وضع فيه الفيديوهات الخاصة بك وإعمل لها رابط مباشر بمدونتك
    بالتوفيق

    ردحذف
  6. جزاك الله خيرا على ردك السريع اخي ابواياد

    ولكن انت ذكرت القالب ولم تتفضل بوضع رابط القالب او شرح عنه ولو تكرمت بشرح مبسط للقالب وكيفية تركيبه من بعذ اذنك

    واكرر شكري لردك المتواضع وجزاك الله الف خيرا

    ردحذف
  7. @Wikileaks Alarabia
    تفضل أخي الفاضل يمكنك تحميل القالب مع الشرح من هنا

    ردحذف
  8. جزاك الله خيرا على ردك . رغم انني لم اذهب الى الرابط . لانني احببت ان اقوم بالرد اولا على جوابك وجزاك الله خيرا .
    واسال الله ان يجعل ذلك في ميزان حسناتك اللهم امين اللهم امين

    ردحذف
  9. للاسف جربت الاضافة ولم تشتغل معي
    رغم التطبيق الحرفي للخطوات
    في انتظار ردود باقي الزوار
    =) وبارك الله فيك

    ردحذف
  10. @أبو إلياس .
    يمكن ان تكون وضعتها تحت كود <data:post.body/>
    ولكن هناك قوالب معقدة توجد بها 3-4 وسوم مثل هذا الوسم , فجرب ان تضع كود الاضافة تحت كل وسم مرة ..
    بالتوفيق

    ردحذف
  11. أزال المؤلف هذا التعليق.

    ردحذف
  12. كيف يمكن تصغير الادات لتنساق مع قالب المدونة الخاص بي

    وشكرا مسبقا

    ردحذف
  13. ابحث عن كود width: 560px وغيره به width: 540px او width: 550px
    او ضع رابط مدونتك لاعطيك العرض المضبوط

    ردحذف
  14. ياريت حد يقولى ازاى ارجع اصل مدونه للوضع الاساسى اصل انا نزلت قالب من هنا بس ولا عارف ادون ولا عارف حتى اتحكم فيها ياريت حد يفيدنى

    ردحذف
  15. أخيراً يا ابو اياد

    انا منذ فترة ارسل لك رسائل اطلبك بشرح هذة الاضافة

    والله انك ادخلت على قلبي البهجة بعد ان يأست من العثور على هذة الاضافة

    اشكرك من كل قلبي

    تقبل مروري .,,

    مدونتي تتشرف بأستقبال شخص مثلك

    ردحذف
  16. @turky maf
    لم أفهم ما تقصد بسؤالك يا أخي

    ردحذف
  17. بس الروابط ما ضهرت شو السبب بعد ما حفض بنجاح

    ردحذف
  18. السلام عليكم و رحمة الله و بركاته

    الكود الثاني غير موجود عندي
    ــــــــــــــــــــــــــــــــــــ

    cutt.us/blogg
    programing-blog.blogspot.com

    ردحذف
  19. السلام عليكم و رحمة الله و بركاته

    انا املك مدونتين

    مدونة لم يكن موجود فيها الكود الثاني
    و مدونة كان فيها كل الاكواد لاكن بعد ان قمت بحفظ القالب لم يتغير اي شيء

    ردحذف
  20. بارك الله فيك
    www.v-pistolero.blogspot.com

    ردحذف
  21. السلام عليكم و رحمة الله و بركاته


    الكود الثاني يوجد عندي منه 3 و كان الكود الثاني هو الصحيح و ليس الكود الأخير ( 3 )

    ______________________________________________________________________

    مدونة برمجني بلوق

    http://programing-blog.blogspot.com

    ردحذف
  22. موضوع ممتاز

    ____________________________
    مدونة برمجني بلوق
    http://programing-blog.blogspot.com

    ردحذف
  23. السلام هليكم
    لقد قمت بوضع الاضافة لكن للاسف لا تعطيني اي روابط
    مدونتي هي

    http://egypicture.blogspot.com

    ردحذف


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

    اخي " st-designer " اذا وجدت من الكودالثاني ( ثلاث ) ضع الكود الي بعدو بعد الثاني

    ردحذف
  25. لم يظهر شئ ، هل هناك مشكله فى الكود مع حجم المدونه هذه مدونتى http://abotgar.blogspot.com

    ردحذف
  26. ما شاء الله عليك اضافه رائعه جدا
    ولكن سؤال بعد الاضافه هل حجم هذي الاضافه يتناسب مع حجم موضوعي بالمدونه
    ام يكون فيها خلل كبر حجم المساحه

    هذا رابط مدونتي

    www.amer-tikrit.blogspot.com

    تحياتي لك انتظر الجواب

    ردحذف
  27. السلام عليكم سؤالي مثل هذا

    ((كيف يمكن تصغير الادات لتنساق مع قالب المدونة الخاص بي

    وشكرا مسبقا ))

    رابط مدونتي
    www.amer-tikrit.blogspot.com

    التعليق السابق اقصد به هذا

    ردحذف
  28. السلام عليكم واسف على كثره الاسئله ولكن تم التجربه بنجاح
    ولكن هناك مشكله صغيره اريد ان اغير لون الروابط لكي يتناسق مع لون مدونتي كيف
    ؟

    انا قمت بتغيير هذا
    color: #4c4c4c;

    وعندي كود اللون الجوزي
    وتم الحفظ ولكن اللون بقه نفسه ما تغير ؟

    ردحذف
    الردود
    1. تدهب الى background: #d0dafd
      url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2hsztUzI/AAAAAAAACbo/ztV1CK0RUrE/s1600/gradhover.png')
      وتغيره الى
      background: #.......
      اللون الدي تريد

      حذف
  29. https://sites.google.com/site/lightbox007/emoticon/64%281%29.png

    ردحذف
  30. رائع جداً وشكرا على الإضافة المميزة
    وقد قمت بتطبيقها على مدونتي

    ردحذف
  31. مش عارف اعملها :/

    ردحذف
  32. :)) ;)) ;;) :D ;) :p :(( :) :( =(( =)) :-* :x b-( :-t 8-}

    ردحذف
  33. السلام عليكم أريد وضع هذة الخاصية ولكن هذا الكود ]]> لن اجده شكرا على الموضوع

    ردحذف
  34. غير معرف8:40 م

    b-(

    ردحذف
  35. طبقتها ولكن لا تعمل عندي

    ردحذف
  36. جزاك الله خيرآ
    سلمت يداك

    ردحذف
  37. موضوع جميل

    ردحذف
  38. جزاكم الله كل خير

    ردحذف
  39. مشكوووووووووووووووووووووووووووووووووووووووور

    ردحذف
  40. لك جزيل الشكر

    ردحذف
  41. ممكن يكوت متجاوب مع قالب

    ردحذف
  42. اخي العزيز اتمنى انك تجاوبني انا عمبت مدونة واخذت القالب من النت وعدلت عليه وعملت اقسام جديدة بس كل ما افتح قسم يعطيني صفحة الخطا 404 كيف ممكن احل الموضوع اتمنى الرد

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية