مواضيع ذات صلة
اضافة مواضيع ذات صلة بلوجر بشكل رائع و جديد أو كيفية عمل مواضيع ذات صلة في بلوجر فهي تلعب دورا مهما في تحسين السيو seo وزيادة عدد الزوار بشكل خيالي و النقرات على الإعلانات ... في هذا الموضوع سوف نشرح طريقة إضافتها على موقعك أو مدونتك على بلوجر بأسهل طريقة ممكنة لأنها ستعطي جمالية أكثر لمدونتك و بالأخص المدة التي سيقضيها الزائر على موقعك و بالأخص عندما ينهي قراءة المقال ، لأنه في أغلب الأوقات سيظغط على روابط التحميل أو سيخرج لأنه أخد ما يريد من الموضوع ، أما إذا وجد مواضيع ذات صلة في نهاية المقال ستجدبه العناوين و الصور .
مميزات هذه الأذاة أو الإضافة :
تجعل الزائر يطلع على الكثير من المواضيع ذات صلة الخاصة بك وكلما دخل لموضوع ما ضهرت معه مواضيع أخرى وهذا سيجل الزائر يبقى مذة أطول في مدونتك .
إعطاء جمالية أكثر لمدونتك بعدما كان مكان الإضافة فارغ و يجعل مدونتك دون المستوى أو ليست إحترافية ، لأن كلما كانت مدونتك منسجة و الألوان متناسقة كلما حصلت على العديد من الزوار و طوال مذة بقاء الزائر في المدونة .
رفع نسبة الزوار للمقالات أو المواضيع مما يساعدها على التحسين على مستوى محركات البحث و هذا بطبيعة الحال أن تكون المواضيع ذات صلة مؤرشفة أو قمت بفهرستها .
طريقة إضافة مواضيع دات صلة على بلوجر :
قبلة كل شئ أدخل إلى المظر الخاص بمدونتك و خد نسخة احتياطية لقالب مدونتك و حفظه في ملف txt ، كي إذا قمت بأي خطاء و نسيت كيف ترجع إلى السابق ستجد النسخة الإحتياطية ، هذا فقط لأخد الحيطة و الحظر و الجدية في التعديل .
أولا : أدخل إلى بلوجر ثم لوحة التحكم الخاصة بموقعك و بالضبط على أيقونة المظهر ، وبعد ذالك إضعط على تعديل html كما هو موضح في الصورة :
ثانيا : إضغط على الكود الخاص بموقعك ثم Ctrl + f لكي تظهر معك خانة البحث في الكود ، و آبحث عن هده الكلمة </head>
ثالتا : إلصق هذا الكود الخاص بمواضيع ذات صلة فوقه مباشرة :
<script type='text/javascript'>
//<![CDATA[
var no_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjnHvAdoYiSVjXtruTSFu-0pcAVtgfQdDjtNz742ZiQTzwhyPCa7NQhfC3bI84-sk6rKBmnTqjYlYs7tGpPpVNyGdOAiQj-shpzmaKMuzq0Uup6KHfTgZk7MUEgeMXvcORcLElrM4f914/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 + "?&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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-wjjdng85riSytHG2t9zNOVr8uuEYhS_2isy7xqBr7zWx15NH9bTIHUTgTbp_83ART4ltktIbVeuildeKjn5qhqPIveXW8YT9tBmauxuc4AXb-x8K_yeLwGI3-eYms0wmQ1fS2pKsgM/s1600-r/nth.png";
g += "<li><div class=\"related-thumb\"><div class=\"yard-label\"><a class=\"icon " + l + "\" href=\"/search/label/" + l + "?&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 مجددا و بحت عن هذا السطر
خامسا : قم بلصق هذا الكود فوق السطر الذي بححثت عنه مباشرة :
<b:if cond='data:blog.pageType == "item"'>
<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 == "true"'>
<data:label.name/>
</b:if>
</b:loop>
</b:if>
</div>
<div style='clear:both'/>
</b:if>
سادسا : قم بحفظ القالب الخاص بك ثم إضغط على معاينة و ستجد مواضيع ذات صلة أضيفت معك .
