اضافة مواضيع ذات صلة مع ملخصات - هذه الإضافة أكثر ما يميزها هي الملخصات و قليل من اضافات مواضيع ذات صلة تقوم بعرض الملخصات و مظهرها المميز و يمكن التحكم بعرض المواضيع و تنسيق الإضافة كما تريد و يمكنك معاينة الإضافة من الرابط التالي
قم بالدخول إلى تحرير القالب ثم فوق الوسم ]]></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUD8ItuiWKnCuxnb8sHqMMEKP9CVfsAK1GGJwMkqHLa6py-oUFXxAxKnCMnwugJxA7hzMmsITQatuYyGNlFrha82d5pNiazhr6FXWdEiuQ4hOu0uO1eFS30Q08SpT-pPtqc0XM4PRbv4/s400/noimage.png";
var maxresults=8;
var splittercolor="#d4eaf2";
var relatedpoststitle="مواضيع ذات صلة";
</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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=9"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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
بواسطة
مدون محترف
يعطيك ألف عافية أخوي بس للأسف ما ضبطت معي
ردحذفالله يعافيك اخي الكريم هذا يكون بسبب القالب عندك فالقوالب تختلف من قالب لقالب
حذفجرب وضع الكود الثاني بعد <data:post.body/> سوف تجده مكرر اكثر من مرة جرب عليها كلها حتى تظهر الإضافة
جرب و رد لي خبر بالتوفيق
شكرا لك تم بنجاح ;)
ردحذفلا شكر على واجب بالتوفيق
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفنعتذر لمسح التعليق بسبب الرابط
حذفبالنسبة لتعريب القالب فهو تعريب جيد بالنسبة لأول مرة
بالنسبة للخط استخدم خط Noto Naskh Arabic
والخط الموجود في مدونتك جميل فقط قم بتصغيره
شكراً أخى الإضافة زبطت معي، ولكن عندي سؤال كيف أخلي عنوان الموضوع يظهر كامل في المواضيع ذات الصلة، لأنو المواضيع تكون مقطوعة
ردحذفوشكراً
لا شكر على واجب
حذفصراحًة هي تظهر بشكل كامل
ولكنّ سبب هذه المشكلة تعارض كود مع كود في الإضافة
بارك الله فيك
ردحذفوبارك الله فيك أنّت أيضًا اخي
حذفشكرًا لتعليقك
شكرا
ردحذفلا شكر على واجب صديقي
حذفيسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r