اضافة مواضيع ذات صلة مع ملخصات - هذه الإضافة أكثر ما يميزها هي الملخصات و قليل من اضافات مواضيع ذات صلة تقوم بعرض الملخصات و مظهرها المميز و يمكن التحكم بعرض المواضيع و تنسيق الإضافة كما تريد و يمكنك معاينة الإضافة من الرابط التالي
قم بالدخول إلى تحرير القالب ثم فوق الوسم ]]></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/AVvXsEhmTU7Mc7tgKzg5dtwv22kUsVv_xF6VxqnpKS2SqP7yaP3njhVX4kbflS2tZoSxdnanl5H3LufjWKBFicu3R-MJ_0B0HWEMgHcZ4vLJvRcgNjAz1n8vQnemfHvBMhD8AWzuY3dBWeH_5pA/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/AVvXsEiRLIa9Z7eJkSzCHTPb6Ip18G5A-z3ePVdDMz2ltyGuBQ9Aow510F9Rtw16r3JyEBQgj5_ZRB2xnelIziSztkb1iakk29I5bwlVycjsdVji98vGbBs4t31PBhZSBmOsADmQ3cx1tXZT0eY/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/AVvXsEiRLIa9Z7eJkSzCHTPb6Ip18G5A-z3ePVdDMz2ltyGuBQ9Aow510F9Rtw16r3JyEBQgj5_ZRB2xnelIziSztkb1iakk29I5bwlVycjsdVji98vGbBs4t31PBhZSBmOsADmQ3cx1tXZT0eY/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 بالتوفيق
No comments:
Post a Comment