مساحة إعلانية

الأربعاء، 4 ديسمبر، 2013

الأربعاء، 4 ديسمبر، 2013

إضافة مواضيع ذات صلة بشكل العناوين

Related Posts Blogger Widget
إضافة أخرى من إضافات مواضيع ذات صلة بشكل مميز مع امكانية التنسيق والتنسيق الرئيسي للآداة حصري لكن مدون طبعا الفرق بين هذه الآداة والآدوات السابقة هو أنها أخف نظراً لأنها لا تحتوي صور مجرد عناوين الرسائل وهي مناسبة للمدونات كثيرة المواضيع والتي تهتم في الاساس بالعناويين كالمدونات الإخبارية والتقنية شكل الآداة كما ترونه في الصور وسيتم شرح طريقة التنسيق ليتناسب مع شكل مدونتك ويمكن تركيب هذه الإضافة مع الإضافات الأخرى التي تعتمد على الصور لا مشكلة أو يمكن الإكتفاء بها تابع معي طريقة التركيب

 الخطوة الاولى


ابحث عن هذا الوسم في القالب </head> وأضف فوقه الكود التالي
<!--cnmu.blogspot.com-Related-Posts-Starts-->
<style>
#related-posts {
float : right;
width : 100%;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font-size:13px;
margin-bottom:10px;
font-family:arial;
font-weigh:bold;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #000;
font-size : 13px;
text-decoration : none;
font-weigh:bold;
display:block;
}
#related-posts a:hover {
color : #fff;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background:url("https://lh3.googleusercontent.com/-fCwnY2y2TtQ/Up3ciz5SGsI/AAAAAAAACUg/Lnj4gOxo1UQ/s20/ktipp1.png") no-repeat scroll 0 5px #E7E7E7;
margin-bottom:5px;
padding:2px 10px;
line-height : 2em;
border-radius:8px;
border:1px solid #bbb;
}

#related-posts ul li:hover {
display : block;
background:url("https://lh5.googleusercontent.com/-_VhtGXN1t4w/Up3cihlJOCI/AAAAAAAACUc/qup8wdCXrJs/s20/ktipp.png") no-repeat scroll 0 5px #464646;
border-color:#000;
transition:all 0.8s ease 0s;
}
#related-posts h3 {color:#000; background:#FCA000; display:inline; margin-right:10px; border-radius:8px; padding:2px 10px; border:1px solid #000; font-size:16px; text-align:center;}
 </style>
<script src='https://cnmu.googlecode.com/svn/trunk/related-post-just-title.js' type='text/javascript'/>
<!--cnmu.blogspot.com-Related-Posts-end-->

طريقة التنسيق لمن يريد تنسيق مخصص

هذا #000 هو لون الرابط
وهذا #fff هو لون الرابط عند تمرير الماوس
والرقم 13 هو حجم الخط
هذا اللون #E7E7E7 هو لون الخلفية
وهذا #464646 هو لون الخلفية عند تمرير الماوس
الرابط الأحمر هو رابط الأيقونة والازرق هو رابطها عند تمرير الماوس ان اردت تغيرها
هذا #bbb هو لون الإطار
وهذا #000 لون الإطار عند تمرير الماوس
هذا #FCA000 هو لون خلفية كلمة مواضيع ذات صلة
وهذا #000 هو لون الخط
والرقم 16 هو حجم الخط

الآن الخطوة الثانية في تركيب الآداة

ابحث عن أحد هاذين الكودين 
<div class='post-footer'>
أو
<div class='post-footer-line post-footer-line-1'>
وأضف تحته الكود التالي
<!--cnmu.blogspot.com-RELATED-POSTS-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b><h3>مواضيع ذات صلة</h3></b><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
<!--cnmu.blogspot.com-RELATED-POSTS-end-->
يمكنك تغيير كلمة مواضيع ذات صلة بكلمة تناسبك
والرقم 5 قم بزيادته ان اردت زيادة عدد الروابط
انتهى بحمد الله


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

  1. ماشاء الله عليك الأضافة جميلة ورائعة
    أشكرك أخي الغالي عمرو
    في أمان الله

    ردحذف
    الردود
    1. سعدت بمرورك أخي الحبيب بدر
      تحياتي لك يا طيب

      حذف
  2. ماشاء الله اضافة رائعة
    ومدونة اروع بارك الله فيك
    اخي الفاضل عمرو

    ردحذف
    الردود
    1. وفيك بارك الله اخي نزار
      سعدت بمرورك

      حذف
  3. الإضافة الوحيدة التي نجحت في مدونتي ، ألف شكر ياغالي
    للمعاينة من هنا http://guidadawa.blogspot.com/

    ردحذف
    الردود
    1. ان شاء الله تعمل معك اضافات أخرى بالتوفيق يا طيب

      حذف
  4. السلام عليكم
    بارك الله فيكم أستاذ مصطفى وقد تم إضافتها في مدونتي الجديدة
    ممكن رأيكم
    http://www-el-islam.blogspot.com/
    وأحتاج قوالب أجنبية ساعدوني من دون تعريب وأنا راح أعدل عليها
    لنشر الإسلام
    تقبلوا تحيات أخوكم منير الجزائري أحبكم كلكم ♥

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      تفضل أخي الكريم راجع هذا الموضوع به قوالب اجنبية
      http://cnmu.blogspot.com/p/blogger-template.html

      حذف
  5. ربنا يكرمك أستاذنا الفاضل والله
    انت الوحيد الذي تعجبني تدويناتك وانقلها كثيرا هنا
    وممكن رأيك فيها؟؟
    http://goo.gl/nNDPcQ

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

      حذف
  6. شكرا لكم على كل ما تقدمونة شو رئيكم في مدونتي

    http://kinanblan.blogspot.com/

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©