الرئيسية
بوابة البلوجر
بوابة الووربريس
بوابة الحاسوب
اضافة مواضيع ذات صلة بطريقة مميزة وجذابة في مدونات بلوجر
السلام عليكم . زوار المدونة الكرام . اسعد الله صباحكم . اليوم جئت لكم باضافة جديدة وحصرية . يمكنك اضافتها داخل الموضوع . وهي اضافة مواضيع ذات صلة . الاضافة جميلة . وحصرية على مدونتانتا فقط ومن فوائدها انها تبقى الزائر اكثر بالمدونة . لاضافتها تابع الشرح ..
الخطوة الاولى :
1- من لائحة تحكم بلوجر ..اذهب الى قالب ثم الى تحرير HTML
2- ابحث عن الوسم الاتي (CTRL + F)
</head>
الخطوة الثالثة :
3- ثم الصق هذا الكود :
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgDstFMKAJKPHHhEslUB2Jz7oBGL-6bt2qJx79s9Qbt0nXGNAuJIPhyphenhyphen8eInQhcFznuNsfwVz-5NMHBiuUfLfWr9GIcny6l4o88ewlcl15NGfj49wD3uzSUdKlT6ARrNo3dj1H0twJ4ZFU/s1600/no_image.jpg"; // default picture for entries with no image
function readpostlabels(json) {
var entry, postimg, postcontent, cat;
for (var i = 0; i < json.feed.entry.length; i++) {
entry = json.feed.entry[i];
if (i==json.feed.entry.length) { break; }
relatedTitles[relatedTitlesNum] = entry.title.$t;
postcontent = "";
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
}
relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = relatednoimage;
}
relatedThumb[relatedTitlesNum] = postimg;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
break;
}
}
relatedTitlesNum++;
}
}
function showrelated() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
var tmp4 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
}
}
relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
for(var i = 0; i < relatedTitles.length; i++){
var index = Math.floor((relatedTitles.length - 1) * Math.random());
var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
}
var somePosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var relsump = r;
var output;
var dirURL = document.URL;
while (somePosts < relatedPostsNum) {
if (relatedUrls[r] != dirURL) {
output = "<div class='relatedsumposts'>";
output += "<a href='" + relatedUrls[r] + "' rel='nofollow' target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
output += "<p>" + relatedpSummary[r] + " ... </p>";
output += "</div>";
document.write(output);
somePosts++;
if (somePosts == relatedPostsNum) { break; }
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
if(r==relsump) { break; }
}
}
function removetags(text,length){
var pSummary = text.split("<");
for(var i=0;i<pSummary.length;i++){
if(pSummary[i].indexOf(">")!=-1){
pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
}
}
pSummary = pSummary.join("");
pSummary = pSummary.substring(0,length-1);
return pSummary;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
//]]>
</script>
الخطوة الرابعة :
4- ابحث عن الكود التالي :
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
الخطوة الخامسة
5- بعد الكود السابق الصق الكود التالي .
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
يجب ان تكون هكذا :
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
</b:loop>
الخطوة السادسة :
6- ابحث عن الكود التالي :
</b:includable>
<b:includable id='postQuickEdit' var='post'>
وفقط فوقها اضف الكود التالي :
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
<div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>RELATED POSTS</div>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>
صورة توضيحية :
الخطوة السابعة
6- ابحث عن الوسم الاتي :
]]></b:skin>
و الصق هذا الكود فوقها :
.relatedsumposts {
float: left;
margin: 0px 5px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 120px;
height: 210px;
}
.relatedsumposts:hover {
background-color: #F3F3F3; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}
.relatedsumposts a {
/* link properties */
color: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 5em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
الخطوة الثامنة :
8- اضغط حفظ وتمتع بالاضافة
اي سؤال او اي استفسار الرجاء ترك تعليق اسفل الموضوع
والسلام عليكم
شــارك الـمـوضـوع مـع أصـدقـائــك ؟
