طريقة إضافة أداة مواضيع ذات صلة لمدونات بلوجر بطريقة احترافية

طريقة إضافة مواضيع ذات صلة لمدونات بلوجر بطريقة احترافية
طريقة إضافة أداة مواضيع ذات صلة لمدونات بلوجر بطريقة احترافية
السلام عليكم ورحمة الله وبركاته متتبعي مدونة مهوباش اليوم سأقدم لكم شرح لطريقة إضافة أداة مواضيع ذات صلة لمدونات بلوجر , فقط تابع الشرح خطوة بخطوة وسوف ترى النتيجة دون ان تكون لك ذراية بأكواد البرمجة نعم , تابع معي اذن الشرح لكيفية تركيب اداة مواضيع قد تهمك لبلوجر.
معاينة شكل الأداة 
أداة مواضيع ذات صلة لمدونات بلوجر
أداة مواضيع ذات صلة لمدونات بلوجر

طريقة اضافة هذه الأداة الى مدونات بلوجر 

1- من  لوحة التحكم -> قالب -> تحرير HTML 

     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 
     3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
</head>
وقم بلصق الكود التالي قبله (فوقه) مباشرة

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = 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];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;}
document.write('</ul>');
}
//]]>
</script>
<style>
#related-posts {
float : right;
width : 646px;
margin-top:20px;
margin-right: 0px;
margin-bottom:20px;
font : 11px Arial;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
background:#085A2D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS08aXTjkQWkx2epWhPh744-2YRuK9uwpYqwZ8NOLOJ_uOJZ6Mut8APyKd78UzIPEhVq1mUj6YjkU6DGgDv6C9-ahx7dtzwgTDuG30k37wSCynfpVrekRZi7WwjQTV5BwWqe7YDWjfhGc/s0/widget-title-bg.png) right top repeat-y;
color : #f9f9f9;
font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:10px;text-transform:uppercase;text-shadow:0 1px 0 #fff;
}
#related-posts a {
color : #025EF5;
font-weight:bold;
font-family: Arial;
font-size : 14px;
text-decoration : none;
}
#related-posts a:hover {
color : #D005D2;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5OXqEzK6fY3MwQNhB7G6GWrrhgTKmheRQymiqASAteZlgU7xCt5JWYlYTTpWIYAfYkRXnnD0P9pm3HeiRZFa-KX0MV0aEl6EuIJ3ZBnNcT8x3OXc_lrRlezvPxQ90Xi-J9bsN_7WRDsQ/h120/arrow-16.gif&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
للتغيير في شكل الأداة كما تريد
 #025EF5 لون عناويين المواضيع
D005D2# لون العناويين عند تمرير الفأرة عليها
الرابط بالأخضر الأيقونة جانب كل عنوان ان كنت تريد تغييرها بما تشاء كل ما عليك تغيير ذلك الرابط برابط ايقونة من ذوقك مع احترام حجمها الذي هو 16x16 .

نأتي للمرحة الأخير وهي البحث عن :
<data:post.body/>
وقم بلصق الكود التالي بعده مباشرة (تحته) :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<h2>مواضيع قد تهمك أيضاً<div style='display:none;'> <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop></div> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</b:if>
وقم بالتغيير بما يناسبك
مواضيع قد تهمك يمكنك تغييرها بما تريده : مواضيع ذات صلة أو ....الخ
الملون بالأحمر عدد المواضيع التي تريد ان تضهر قم بتغيير العدد 7 بما تريد.
وقم بحفظ التغييرات ومبروك عليك اداة مواضيع ذات صلة على مدونتك بلوجر .

اذا صدفتك اية مشكلة  لا تتردد في ترك تعليق والسلام عليكم ورحمة الله وبركاته 

0تعليقات