موضوع اليوم هو حول كيفية إضافة أداة “موضوعات ذات صلة” أسفل كل مشاركة في بلوجر، ويظن بعض المدونون دائماً أن عنصر “موضوعات ذات صلة” مجرد شيء غير مهم في مدونة بلوجر الخاصة بهم، لكنهم لا يعرفون أنه يساعد في تقليل معدل الارتداد الذي سيعطي حركة مرور كبيرة الي مدونتك. لأنه يساعد القارئ في العثور على منشور ذي صلة بهذا الموضوع ، كما يجعله يبقي بالمدونة الخاصة بك لفترة طويلة من الوقت. هناك الكثير من واجهات الموضوعات ذات الصلة الأخرى ولكن تم ترميز معظمها بشكل سيئ أو غير مستهدفة بشكل كبير لإظهار الموضوعات ذات الصلة، بل أنها تقوم باظهار بعضاً من المشاركات العشوائية الاخرى.
لماذا يجب علينا أن نضع هذه الاداة ؟
في بعض الأحيان قد ترغب في القيام بشيء إضافي وجذاب في مدونتك لجذب الزوار الجدد واكتساب المزيد من الزيارات للحصول على إيرادات إضافية. إن جعل زائر مدونتك يبقي لفترة طويلة من الوقت يُعد مهمة شاقة ولكن هذا مفيد للغاية لمدونتك، حيث سيساعدك على تقليل معدل الارتداد بسرعة كبيرة، فكلما زاد عدد الزوار في موقعك، زادت فرص الحصول على إيرادات جيدة من خلال الإعلانات و adsense.
كيفية اضافة أداة موضوعات ذات صلة في مدونة بلوجر ؟
الخطوة الاولي ( اضافة CSS )
/* ######## Related Post Widget by Star4Tips.com ######################### */
#related-posts {
margin-bottom: 10px;
padding: 10px 0;
}
.related li {
width: 33.3%;
display: inline-block;
height: auto;
min-height: 184px;
float: left;
padding-right: 5px!important;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.related li h3 {
margin-top:0;
}
.related-thumb {
width: 100%;
height: 180px;
overflow: hidden;
border-radius: 2px;
}
.related li .related-img {
width: 100%;
height: 180px;
display: block;
position: relative;
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: 14px;
line-height: 1.4em;
padding: 10px 0 4px;
font-weight: 500;
color: #fff;
display: block;
text-shadow: 0 .5px .5px rgba(34,34,34,0.3);
}
.related li:nth-of-type(3),
.related li:nth-of-type(6),
.related li:nth-of-type(9) {
margin-right: 0;
}
.related .related-tag {
position: absolute;
top: 15px;
left: 15px;
background-color: #CD2122;
color: #fff;
text-transform: uppercase;
font-weight: 400;
z-index: 5;
height: 20px;
line-height: 20px;
padding: 0 6px;
font-size: 11px;
}
.related .related-thumb .related-img:after {
content: no-close-quote;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 120px;
background: url(http://3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/s1600-r/metabg.png) repeat-x;
background-size: 100% 100%;
opacity: .8;
}
.related-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40,35,40,0.05);
}
.related-content {
position: absolute;
bottom: 0;
padding: 15px 15px 11px;
width: 100%;
line-height: 1.2em;
box-sizing: border-box;
z-index: 2;
}
.related .related-content .recent-date {
color: #ccc;
font-size: 12px;
font-weight: 400;
}
.recent-date:before, .p-date:before {
content: '\f017';
font-family: fontawesome;
margin-right: 5px;
}الخطوة الثانية ( اضافة html )
في القالب ، ابحث عن الوسم <data: post.body /> وقم بلصق كود HTML التالي أسفله .
في حالة أنه لا يمكنك العثور على <data: post.body /> في قالبك قم بالبحث عن أحد هذين الكودين <div class = ‘post-footer’> أو <div class = ‘post-footer-line post-line-line -1 ‘> </div>، ثم يمكنك لصق الكود أسفله.
<b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>
الخطوة الثالثة ( اضافة Script )
الآن هذا هو الجزء الأكثر أهمية في درسنا وعليك القيام بذلك بعناية فائقة. في القالب ، ابحث عن الوسم </body> وقم بلصق ترميز HTML التالي فوقه.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "http://2.bp.blogspot.com/-IO-XEI1LgEs/VmPNKFp0BhI/AAAAAAAACOg/_JrYHMBXV5w/s1600-r/nothumb.jpg";
var related_number = 3;
$("#related-posts").each(function() {
var g = $(this).html();
$.ajax({
url: "/feeds/posts/default/-/" + g + "?alt=json-in-script&max-results=" + related_number,
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl = "";
var htmlcode = '<div class="related">';
for (var i = 0; i < data.feed.entry.length; i++) {
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == "alternate") {
posturl = data.feed.entry[i].link[j].href;
break
}
}
var posttitle = data.feed.entry[i].title.$t;
var postlabel = data.feed.entry[i].category[0].term;
var get_date = data.feed.entry[i].published.$t,
year = get_date.substring(0, 4),
month = get_date.substring(5, 7),
day = get_date.substring(8, 10),
date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
var content = data.feed.entry[i].content.$t;
var $content = $('<div>').html(content);
if (content.indexOf("http://www.youtube.com/embed/") > -1 || content.indexOf("https://www.youtube.com/embed/") > -1) {
var src2 = data.feed.entry[i].media$thumbnail.url;
var thumb = '<a class="related-img" href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/>'
} else if (content.indexOf("<img") > -1) {
var src = $content.find('img:first').attr('src');
var thumb = '<a class="related-img" href="' + posturl + '" style="background:url(' + src + ') no-repeat center center;background-size: cover"><span class="related-overlay"></span></a>'
} else {
var thumb = '<a class="related-img" href="' + posturl + '" style="background:url(' + no_image_url + ') no-repeat center center;background-size: cover"><span class="related-overlay"></span></a>'
}
htmlcode += '<li><span class="related-tag">' + postlabel + '</span><div class="related-thumb">' + thumb + '</div><div class="related-content"><h3 class="related-title"><a href="' + posturl + '">' + posttitle + '</a><span class="recent-date">' + date + '</span></h3></div></li>'
}
htmlcode += '</div><div class="clear"/>';
$("#related-posts").html(htmlcode);
$('.related-img').each(function() {
$(this).attr('style', function(i, src) {
return src.replace('/default.jpg', '/mqdefault.jpg')
}).attr('style', function(i, src) {
return src.replace('s72-c', 's1600')
})
})
}
})
});
}
//]]>
</script></b:if> إقرأ أيضاً: اضافة أهم أداة لبلوجر أداة Back to Top بشكل رائع في مدونة بلوجر
الخلاصة
لقد تعلمت الآن كيفية إضافة أداة مشاركات ذات صلة أسفل كل مشاركة في Blogger . قم بزيارة مدونتك وتحقق من الأداة الرائعة المفعمة بالحيوية في العمل ، آمل أن تكون قد أعجبك هذا الدرس ، وإذا كنت قد استفدت ، فيرجى مشاركتها مع أصدقائك ، فأنا أعمل بجد لتطوير المزيد من هذه الأدوات المصغرة الرائعة ، يرجى الاشتراك في قائمتنا البريدية لتتوصل بالمزيد من الاضافات.