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

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

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

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

معاينة إضافة مواضيع ذات صله

معاينة الإضافة 

صورة من مواضيع ذات صله

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

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

اولا عليك حذف كود الأستايل وأي أكواد خاصة بإضافة مواضيع ذات صله فى مدونتك حتى يتم التركيب بشكل صحيح.
بعد ذلك قم بالبحث عن هذا الوسم</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>

الأن ايضا قم وضع الكود التالى فوقه الوسم</head>هذا ايضا فى مدونتى.

<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>

الأن مع أخر كود وسوف تقوم بوضع تحت هذا الوسم<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>

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

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