23 يناير 2015

مدون محترف اضافات بلوجر اضافة مواضيع ذات صلة مع ملخصات

اضافة مواضيع ذات صلة مع ملخصات

اضافة مواضيع ذات صلة مع ملخصات هذه الإضافة أكثر ما يميزها هي الملخصات مظهرها المميز و يمكن التحكم بعرض المواضيع و تنسيق الإضافة كما تريد

اضافة مواضيع ذات صلة مع ملخصات - هذه الإضافة أكثر ما يميزها هي الملخصات و قليل من اضافات مواضيع ذات صلة تقوم بعرض الملخصات و مظهرها المميز و يمكن التحكم بعرض المواضيع و تنسيق الإضافة كما تريد و يمكنك معاينة الإضافة من الرابط التالي


قم بالدخول إلى تحرير القالب ثم فوق الوسم ]]></b:skin> اضف الكود التالي
#related-posts {
float : right;
width : 600px;
background : #fff;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
margin : 20px 0 20px;
padding: 5px;
}
#related-posts h2{
font-weight : normal;
color : #111;
font-family : "droid arabic kufi", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-style : normal;
font-size:22px;
line-height: 24px;
padding:10px 10px;
margin:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-kNrR4XCxsSLEarAQu-azEM8qa3DWWYe3jDkMrJiFq10hZCxGQ7iUqfurRw1yCTeII3FS28iL9mVHG1g_sMR0FgYlDRBIzdNxNzyU0RVffmq-CFuh8qKTts6REY7F0uDg4BUvopblHK0/s1600/imgbg.png) repeat scroll 0 0 transparent;
border-bottom:1px solid #cecece;
}
#related-posts a {
border:0;
outline:0;
color : #000;
background:none;
margin:0;
padding:0;
border:1px solid #fff!important;
font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal;
}
#related-posts a:hover {
background:#F2F2F5;
border:1px solid #CCC!important;
color:#000;
text-decoration:underline;
}

التنسيق

الرقم 600 الاحمر لتغيير حجم عرض الإضافة انت قم بتغيير الرقم على حسب عرض قالبك
 لتغيير الخط استبدل هذه الكلمة droid arabic kufi  بالخط الموجود في مدونتك
F2F2F5 و هو لتغيير اللون عند مرور مؤشر الماوس على المواضيع
لتغيير الخلفية لكلمة مواضيع ذات صلة ابحث عن الكلمة التي باللون الأخضر و غيرها


ابحث عن الوسم </head> و اضف الكود التالي فوقه
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUD8ItuiWKnCuxnb8sHqMMEKP9CVfsAK1GGJwMkqHLa6py-oUFXxAxKnCMnwugJxA7hzMmsITQatuYyGNlFrha82d5pNiazhr6FXWdEiuQ4hOu0uO1eFS30Q08SpT-pPtqc0XM4PRbv4/s400/noimage.png&quot;;
var maxresults=8;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;مواضيع ذات صلة&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}


catch (error){

s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUD8ItuiWKnCuxnb8sHqMMEKP9CVfsAK1GGJwMkqHLa6py-oUFXxAxKnCMnwugJxA7hzMmsITQatuYyGNlFrha82d5pNiazhr6FXWdEiuQ4hOu0uO1eFS30Q08SpT-pPtqc0XM4PRbv4/s400/noimage.png";}

}

if(relatedTitles[relatedTitlesNum].length>42) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;


}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;


}

function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}


function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}


var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:125px;height:125px;padding:0;border:solid 1px #eaeaea;margin-left:10px;" src="'+thumburl[r]+'"/><br/><div style="width:125px;padding-left:10px;height:35px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');

i++;


if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}

}
document.write('</div>');

relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);

}

//]]>
</script>


للتحكم بعدد المواضيع قم بتغيير الرقم 8 بالاحمر للعدد الذي تريده الان ننتقل إلى الكود التالي و هو اخر خطوة

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=9&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'/></b:if>


نقوم بإضافة الكود السابق تحت احد الوسوم التالية حتى تظهر الإضافة

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer'>



ملاحظة : في حالة عدم ظهور الإضافة فالسبب يكون أن الوسم متكرر في القالب أحدهم فعال وتظهر تحته الإضافة والآخر ليس كذلك وحينها تنقل الكود تحت الآخر و في المعاينة الإضافة ليست منسقة بسبب القالب انت يمكنك التحكم بحجم المواضيع و حجم عرض الإضافة كما تريد مع القليل من الخبرة في CSS بالتوفيق

مواضيع ذات صلة
اضافة مواضيع ذات صلة مع ملخصات
4 / 5
بواسطة

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

  1. يعطيك ألف عافية أخوي بس للأسف ما ضبطت معي

    ردحذف
    الردود
    1. الله يعافيك اخي الكريم هذا يكون بسبب القالب عندك فالقوالب تختلف من قالب لقالب
      جرب وضع الكود الثاني بعد <data:post.body/> سوف تجده مكرر اكثر من مرة جرب عليها كلها حتى تظهر الإضافة
      جرب و رد لي خبر بالتوفيق

      حذف
  2. شكرا لك تم بنجاح ;)

    ردحذف
  3. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر لمسح التعليق بسبب الرابط
      بالنسبة لتعريب القالب فهو تعريب جيد بالنسبة لأول مرة
      بالنسبة للخط استخدم خط Noto Naskh Arabic
      والخط الموجود في مدونتك جميل فقط قم بتصغيره

      حذف
  4. شكراً أخى الإضافة زبطت معي، ولكن عندي سؤال كيف أخلي عنوان الموضوع يظهر كامل في المواضيع ذات الصلة، لأنو المواضيع تكون مقطوعة
    وشكراً

    ردحذف
    الردود
    1. لا شكر على واجب
      صراحًة هي تظهر بشكل كامل
      ولكنّ سبب هذه المشكلة تعارض كود مع كود في الإضافة

      حذف
  5. الردود
    1. وبارك الله فيك أنّت أيضًا اخي
      شكرًا لتعليقك

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r