اضافة مواضيع ذات صلة وسط تدوينات بلوجر اوتوماتيكياً

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

صورة الاضافة :


شرح تركيب اضافة مواضيع ذات صلة

1. ادخل إلى لوحة تحكم المدونة في بلوجر
2. اختر قالب المدونة التي تود تطبيق الشرح فيها
3. اضغط على تحرير HTML
4. ابحث عن الوسم ]]></b:skin> و اضف الكود التالي قبله مباشرة:

.post-terkait { display: block; position: relative; background: #fff; padding: 0; margin: 15px
auto 20px; width: 100% }
.post-terkait 
h4 { background: #22a65a !important; padding: 7px 
10px !important; display: inline-block !important; font-size: 12px !important; text-transform: uppercase !important; color: #fff !important; border-radius: 3px !important; line-height: normal; border: 0 }
.post-terkait h4:before { display: none }
.post-terkait 
ul { margin: 0; padding: 0 }
.post-terkait ul li { list-style: none; padding: 1px 
0; line-height: 1.5em }
.post-terkait 
a { color: #22a65a; font-size: 13px }
.post-terkait 
a:hover { color: #000; text-decoration: underline }

5.  ابحث عن <data:post.body/> وإستبدلها بالكود التالي :

<div expr:id='&quot;post1&quot; + data:post.id' />
<div class='post-terkait'>
    <b:if cond='data:post.labels'>
        <b:loop values='data:post.labels' var='label'>
            <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=3&quot;' type='text/javascript' /> </b:if>
        </b:loop>
    </b:if>
    <h4>Baca Juga</h4>
    <script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody 
description'><data:post.body/></div>
<script type='text/javascript'>
var obj0 = document.getElementById( & quot; post1 < data: post.id / > & quot;);
var obj1 = document.getElementById( & quot; post2 < data: post.id / > & quot;);
var s = obj1.innerHTML;
var t = s.substr(0, s.length / 3);
var r = t.lastIndexOf( & quot; & lt; br & gt; & quot;);
if (r & gt; 0) { obj0.innerHTML = s.substr(0, r); obj1.innerHTML = s.substr(r + 4); }
</script>

6.  ابحث عن </head> وضع الكود التالي فوقه :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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>
</b:if>

7.  احفظ القالب ومبروك عليك الإضافة.

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