السلام عليكم ورحمة الله وبركاته اهلا ومرحبأ بى متابعون مدونة بلوجر توب
درس اليوم هو اضافة موتضيع ذات صله مثل ما فى العنوان
مواضيع ذات صلة بشكل مميز مع امكانية التنسيق والتنسيق الرئيسي للآداة
مثل المدونات الاكثر احترافى
وجد بعض المدونون يبحثون على تلك الاضافة المميزة
الفرق بين هذه الآداة والآدوات السابقة هو أنها أخف نظراً لأنها
الشكل الاول
الشكل الثانى
الشكل الثالث
الشكل الرابع وهو الشكل الزى تم اضافاته فى المدونة
الخطوة الاول لتركيب الاضافة
ابحث عن هذا الوسم في القالب ]]></b:skin> وأضف فوقه الكود التالي
كود بلغة HTML:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related_posts h4 {
font-weight: bold; font-size: 13px; line-height: 150%;" face="Sorts Mill Goudy" size="4";
}
#related_posts {
padding: 10px 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0;
font-family:
Droid Sans', Arial, Verdana, sans-serif;
}
#related_posts h4, #comments .komhead h4 {
font-family: 'Oswald', sans-serif;
}
ul#relpost_img_sum {
margin: 0;
padding: 0;
}
ul#relpost_img_sum li {
border-bottom: 1px dashed #DDDDDD;
float: left;
height: 82px;
list-style: none outside none;
margin: 9px;
overflow: hidden;
padding: 10px 10px 10px 0;
width:47%;
height: auto;
}
ul#relpost_img_sum li a {
display: block;
}
ul#relpost_img_sum li img {
float: right;
width: 60px;
height: 60px;
margin-right: 5px;
padding: 2px;
background-color: white;
border: 1px solid #DDD;
}
ul#relpost_img_sum li a.relinkjdulx {
background-image: none;
color: #359BED;
display: block;
font-family: sans-serif;
font-weight: bold;
overflow: hidden;
}
</style>
<script type='text/javascript'>
//<![CDATA[
/*
Related Post with Thumbnail & Summary v1.0 (May 01, 2013)
copyright (c) 2014 http://bilokr.blogspot.com/*/
var relnojudul = 2;
var relmaxtampil = 4;
var numchars = 50;var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
</b:if>
يمكنك تغيير الرقم 50 وهو عداد الاحرف المستخدمة فى الاضافة
مع تغيير var relmaxtampil = 4 عداد الموضيع الزى تظهر فى الاضافه
تغيير حجم الصورة width: 60px
بعد الانتهاء من التعديل
الآن الخطوة الثانية في تركيب الآداة
ابحث عن الكود التالى
كود بلغة HTML:
<div class='post-footer'>
وأضف تحته الكود التالي
كود بلغة HTML:
<b:if cond='data:blog.pageType == "item"'> <div id='related_posts'> <div class='relhead'> <h4>مواضيع ذات الصلة:</h4><div class='stripe-line'/> </div> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'/> </b:loop> <ul id='relpost_img_sum'> <script type='text/javascript'>artikelterkait();</script> </ul> </div> </b:if>
يمكنك تغيير كلمة مواضيع ذات صلة بكلمة تناسبك
