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

مواضيع ذات صلة

اضافة مواضيع ذات صلة بلوجر بشكل رائع و جديد أو كيفية عمل مواضيع ذات صلة في بلوجر فهي تلعب دورا مهما في تحسين السيو seo وزيادة عدد الزوار بشكل خيالي و النقرات على الإعلانات ... في هذا الموضوع سوف نشرح طريقة إضافتها على موقعك أو مدونتك على بلوجر بأسهل طريقة ممكنة لأنها ستعطي جمالية أكثر لمدونتك و بالأخص المدة التي سيقضيها الزائر على موقعك و بالأخص عندما ينهي قراءة المقال ، لأنه في أغلب الأوقات سيظغط على روابط التحميل أو سيخرج لأنه أخد ما يريد من الموضوع ، أما إذا وجد مواضيع ذات صلة في نهاية المقال ستجدبه العناوين و الصور .

مميزات هذه الأذاة أو الإضافة :

تجعل الزائر يطلع على الكثير من المواضيع ذات صلة الخاصة بك وكلما دخل لموضوع ما ضهرت معه مواضيع أخرى وهذا سيجل الزائر يبقى مذة أطول في مدونتك .

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

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

طريقة إضافة مواضيع دات صلة على بلوجر :

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

أولا : أدخل إلى بلوجر ثم لوحة التحكم الخاصة بموقعك و بالضبط على أيقونة المظهر ، وبعد ذالك إضعط على تعديل html كما هو موضح في الصورة :

ثانيا : إضغط على الكود الخاص بموقعك ثم Ctrl + f لكي تظهر معك خانة البحث في الكود ، و آبحث عن هده الكلمة </head>

ثالتا : إلصق هذا الكود الخاص بمواضيع ذات صلة فوقه مباشرة :

<script type='text/javascript'>
//<![CDATA[
var no_image = "http://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/s1600-r/nth.png"
    , month_format = [, "يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
$(document)
    .ready(function () {
        function a(b, c, d) {
            $.ajax({
                url: "/feeds/posts/default/-/" + c + "?alt=json-in-script&max-results=" + d
                , type: "get"
                , dataType: "jsonp"
                , success: function (e) {
                    for (var f = "", g = "<div class=\"tyheading-head post-ty-heading\"><h2><a href=\"/search/label/" + c + "?&amp;max-result=" + perPage + "\">مواضيع ذات صله</a></h2></div><div class=\"related\">", h = 0; h < e.feed.entry.length; h++) {
                        for (var i = 0; i < e.feed.entry[h].link.length; i++)
                            if ("alternate" == e.feed.entry[h].link[i].rel) {
                                f = e.feed.entry[h].link[i].href;
                                break
                            }
                        var j = e.feed.entry[h].title.$t
                            , k = e.feed.entry[h].author[0].name.$t
                            , l = e.feed.entry[h].category[0].term
                            , m = e.feed.entry[h].published.$t
                            , n = m.substring(0, 4)
                            , o = m.substring(5, 7)
                            , p = m.substring(8, 10)
                            , q = month_format[parseInt(o, 10)] + " " + p + ", " + n
                            , r = e.feed.entry[h].content.$t
                            , t = $("<div>")
                            .html(r);
                        if (-1 < r.indexOf("http://www.youtube.com/embed/") || -1 < r.indexOf("https://www.youtube.com/embed/")) var v = e.feed.entry[h].media$thumbnail.url
                            , w = v.replace("/default.jpg", "/mqdefault.jpg")
                            , x = w;
                        else if (-1 < r.indexOf("<img")) var y = t.find("img:first")
                            .attr("src")
                            , z = y.replace("s72-c", "s600")
                            , x = z;
                        else var x = "http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png";
                        g += "<li><div class=\"related-thumb\"><div class=\"yard-label\"><a class=\"icon " + l + "\" href=\"/search/label/" + l + "?&amp;max-result=" + perPage + "\">" + l + "</a></div><a class=\"related-img\" href=\"" + f + "\" style=\"background:url(" + x + ") no-repeat center center;background-size: cover\"/></div><h3 class=\"related-title\"><a href=\"" + f + "\">" + j + "</a></h3><span class=\"yard-auth-ty\">" + k + "</span><span class=\"ty-time\">" + q + "</span></li>"
                    }
                    g += "</div>", b.html(g)
                }
            })
        }
        $("#related-posts")
            .each(function () {
                var b = $(this)
                    , c = b.text();
                a(b, c, 3)
            })
    });

//]]>
</script>

<style type='text/css'>
#related-posts{margin-bottom:10px}
#related-posts .related-text{display:none}
.related li{width:32%;position:relative;overflow:hidden;float:right;display:block;box-sizing:border-box;margin:0 2% 0 0;padding:0}
.related li:first-child,.related li:nth-child(4){margin-right:0}
.related li h3{margin-top:0}
.related li .yard-label{position:absolute;top:10px;right:10px;z-index:2}
.related li .yard-label a{background:$maincolor;color:#fff;text-transform:uppercase;height:20px;line-height:20px;display:inline-block;padding:0 6px;font-size:11px;font-weight:400;border-radius:2px}
.related-thumb{width:100%;height:150px;overflow:hidden;position:relative}
.related li .related-img{width:100%;height:150px;display:block;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
.related li .related-img:hover{-webkit-transform:scale(1.1) rotate(-1.5deg)!important;-moz-transform:scale(1.1) rotate(-1.5deg)!important;transform:scale(1.1) rotate(-1.5deg)!important;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
.related-title a{font-size:15px;line-height:1.35em;padding:10px 5px 10px 0;font-weight:700;color:#2e2e2e;display:block}
.related-title a:hover{color:$maincolor;text-decoration:underline}
.related li .related-thumb:before{content:"\f0c5";font-family:FontAwesome;line-height:25px;width:25px;height:25px;font-size:12px;color:#fff;text-align:center;background-color:RGBA(0,0,0,0.4);font-weight:400;position:absolute;top:8px;opacity:0.5;left:7px;z-index:2;padding:0;border:2px solid #fff;border-radius:50%;-webkit-transition:all 500ms cubic-bezier(0.68,-0.55,0.265,1.55);transition:all 500ms cubic-bezier(0.68,-0.55,0.265,1.55)}
.related li .related-thumb:hover:before{background-color:$maincolor;border-color:$maincolor;-webkit-box-shadow:0 3px 5px rgba(0,0,0,0.25);-moz-box-shadow:0 3px 5px rgba(0,0,0,0.25);box-shadow:0 3px 5px rgba(0,0,0,0.25);opacity:1;top:40%;left:40%;width:50px;height:50px;line-height:50px;font-size:24px}
</style>

رابعا : بعد لصق الكود السابق ، اضغط على Ctrl + f مجددا و بحت عن هذا السطر

<data:post.body/>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>   
<div id='related-posts'>
        <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == &quot;true&quot;'>
              <data:label.name/>
            </b:if>
          </b:loop>
        </b:if>
      </div>
<div style='clear:both'/>  
</b:if>

سادسا : قم بحفظ القالب الخاص بك ثم إضغط على معاينة و ستجد مواضيع ذات صلة أضيفت معك .

تعديل المقال