recent
أخر الأخبار

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

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




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

 كيفية اضافة أداة موضوعات ذات صلة في مدونتنا ؟

الخطوة الاولي ( اضافة CSS )

قبل التحرير ، نوصيك بعمل نسخة احتياطية من القالب الخاص بك ، بحيث لو حدث هناك خطأ في تصميم مدونتك تقوم بالرجوع الي الاعدادات السابقة.
أول ما يجب عليك فعله هو تسجيل الدخول إلى حساب Blogger الخاص بك والانتقال إلى >> المظهر>> تعديل HTML والبحث عن الوسم ]]> </ b: skin> ولصق الكود التالي أعلاه.
/* ######## 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 == &quot;item&quot;'>
<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>
 </b:if> 

الخطوة الثالثة ( اضافة Script



الآن هذا هو الجزء الأكثر أهمية في درسنا وعليك القيام بذلك بعناية فائقة. في القالب ، ابحث عن الوسم </body> وقم بلصق ترميز HTML التالي فوقه.


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


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