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

الكاتب Abdessamad Chbani | بتاريخ الاثنين, سبتمبر 01, 2014

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

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

شرح اضافة الى البلوجر

1. نتوجه الى مدونة ، قالب ، تحرير HTML

2. نبحث عن الكود

</head>

3. نضيف الكود الثالي فوقه

<script type='text/javascript'>
      //<![CDATA[
      var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzFQyvsIGmE20lbl-5wyvPHVrCO2BNQPxubzIiSh8evS1sdHLsVyJS81ndzm9M4r19weOkdWUyy-tYqSrYw4Vl0PAV-O9XXmKcx8dCatNh1ELIBGJxgPD83XEUOIRp3MbeBuYqz-PiXiI/s1600/picture_not_available.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h1>'+relatedpoststitle+'</h1>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 7px 0px 0;float:right;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div style="width:172px;padding:9px 14px 20px;color:#fff;height:25px;text-align:right;margin:-61px 0px 0px 0px; font: normal 13px ge_dinar; line-height:20px;background: #111;opacity: 0.7;filter: alpha(opacity = 70);">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
      //]]>
    </script>
<style>
/*--------------Related-Posts-------------*/
/*----http://hukmat.blogspot.com----*/
      #related-posts h2 > span{
        border-bottom: 2px solid $(maincolor);
        bottom: -2px;
        padding: 4px 10px;
      }
      #related-posts{
        float:right;
        width:660px;
        margin-bottom:40px;
        font: 12px ge_dinar;
        background: #fff;
      }
      #related-posts h2{
        border-bottom: 2px solid #eee;
        padding: 4px 0;
        text-transform: uppercase;
        font: normal bold 12px ge_dinar, Oswald;
        text-align: right;
        color: #474747;
        margin-bottom: 5px;
      }
      #related-posts .related_img {
        padding:0px;
        width:200px;
        height:160px;
      }
      #related-posts .related_img:hover{
        opacity:.7;
        filter:alpha(opacity=70);
        -moz-opacity:.7;
        -khtml-opacity:.7;
      }
</style>

4. نبحث مرة أخرى عن

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>

اذا لم تجده فبحث عن

<data:post.body/>

5. و نضيف الكود التالي أسفل منه تحته

<div id='related-posts'>
                            <p class='title title-medium'>
                              <h2>
                                <span>
                                  مواضيع مهمة أيضا :
                                </span>
                            </h2>
                          </p>
                          <b:loop values='data:post.labels' var='label'>
                            <b:if cond='data:label.isLast != "true"'>
                            </b:if>
                            <b:if cond='data:blog.pageType == "item"'>
                              <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/>
                            </b:if>
                          </b:loop>
                          <script type='text/javascript'>
                            var currentposturl="<data:post.url/>";
                            var maxresults=3;
                            var relatedpoststitle="<b/>";
                            removeRelatedDuplicates_thumbs();
                            printRelatedLabels_thumbs();
                          </script>
                        </div>
                        <div class='clear'/>

6. نضغط حفظ .

أضغط لرؤية المصدر