اضافة مواضيع ذات صلة بثلاث طرق احترافية لمدونات بلوجر

محتويات المقال:
اضافة مواضيع ذات صلة بثلاث طرق احترافية لمدونات بلوجر

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


الطريقة الأولى :إضافة مواضيع ذات صلة على شكل سلايد شو

slider related post for blogger


إضافة مواضيع ذات صلة على شكل سلايدر شو او صور متحركة تعتبر من الإضافات الاحترافية لمدونات بلوجر . للمعاينة :
معاينة
طريقة التركيب :
1 – ابحث عن الكود </head> في محرر HTML واضف الكود التالي قبله:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}
.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0px,0px,0px)}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}
.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;top:15px;right:15px;}
.grabbing,.grabbing a,.grabbing *{cursor:e-resize!important}
.owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-prev,.owl-next{width:28px;height:22px;background-color:transparent;text-align:center;line-height:22px;font-size:12px;margin-top:5px;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.3);display:inline-block}
.owl-next:before{font-family:fontawesome}
.owl-prev:before{font-family:fontawesome}
.owl-carousel .owl-item{float:right}
.owl-next:before{content:"\f053";font-family:fontawesome;font-size:25px;background:transparent;}
.owl-prev:before{content:"\f054";font-family:fontawesome;font-size:25px;background:transparent;}
.related{
border-bottom:1px solid #ecf0f1;
}
.related h2{
border-bottom:1px solid #ecf0f1;
border-top:1px solid #ecf0f1;
font-size:17px;
font-family:dev-techno,"Droid Arabic Naskh",tahoma;
tex-align:right;
background:#ecf0f1;
color:#777;
height:40px;
line-height:40px;;
text-indent:10px;
}
#related-posts{display:block;width:auto;margin:auto;position:relative;padding:5px;height:200px}
#related-posts ul{list-style-type:none;}
.related-thumb{display:block;height:200px;position:reltive;}
.related-thumb img{width:100%;height:100%;}
.related-title-thumb{transition:all .5s ease-in-out;position:absolute;bottom:0;right:0;width:100%;color:#eee;height:auto;text-align:center;margin:0 0;font:lighter 12px Kreon,,tahoma;font-weight:lighter;line-height:27px;padding:7px 0;;background-image:-webkit-linear-gradient(transparent,rgba(100,100,100,0.5));background-image:-moz-linear-gradient(transparent,rgba(100,100,100,0.5));background-image:linear-gradient(transparent,rgba(100,100,100,0.5));}
.related-title-thumb:hover{padding-bottom:15px;}
</style>
<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.replace(/\/s[0-9]+(\-c)?/,"/s540");}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGnbxafmJvjB8K4REKeYw7EJG4d9Y-rL3H5MlveWrAORWx8E2J2T7w-frgFS2k_DVafnSDkNZBCLdG4az6PstVURHpAy08mh_EhpOGsI8YsUemxZ5ttxwqWw-R7X7pZ452DD7xobCqKI/s640/picture_not_available.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";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(){document.write('<ul>');
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)while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li class="related-thumb"><a ');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img src="'+thumburl[r]+'" alt="'+relatedTitles[r]+'"/><br/><div class="related-title-thumb">'+relatedTitles[r]+'</div></a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length);document.write('</ul>');}
//]]>
</script>

</b:if>
2 – ابحث عن الكود </body> وأضف الكود التالي قبله :
حمل الكود من هنا

3 – ابحث عن الكود <div class='post-footer'> وأضف الكود التالي بعده :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="related">
<h2>
مواضيع ذات صلة
</h2>
<div id="related-posts">
             <b:loop values='data:post.labels' var='label'>
                          <b:if cond='data:label.isLast != &quot;true&quot;'>
                          </b:if>
                          <b:if cond='data:blog.pageType == &quot;item&quot;'>
                            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/>
                          </b:if>
             </b:loop>
                        <script type='text/javascript'>
                          var currentposturl=&quot;<data:post.url/>&quot;
                          var maxresults=15;
                          var relatedpoststitle=&quot;&quot;;
                          removeRelatedDuplicates_thumbs();
                          printRelatedLabels_thumbs();
                        </script>
  </div>
</div>
</b:if>


الطريقة الثانية :إضافة مواضيع ذات صلة بصورة المقالة وعنوانها

إضافة مواضيع ذات صلة بصورة المقالة وعنوانها
هذه الطريقة التي افضلها واستخدمها حاليا في مدونتي لخفتها وعرض صورة مصغرة للمقالة وعنوانها .
تركيب الإضافة :
1 – ابحث عن الكود </head> في محرر HTML واضف الكود التالي قبله:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
.related h2{
    border-bottom: 1px solid #ecf0f1;
    font-size: 17px;
    font-family: arial;
    background: #fff;
    color: #777;
    height: 40px;
    line-height: 40px;
    text-indent: 10px;
    margin-bottom: 0;
}
.relate span{margin-right:10px;margin-left:10px;}
.related-post{display:inline;width:auto;margin:auto;position:relative;}
.related-post .related_img:hover{opacity:0.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7;}
.related-thumb{
    display: block;
    height: 155px;
    width: 17%;
    min-width: 120px;
    -webkit-box-sizing: border-box;
	box-sizing: border-box;
    float: right;
    padding: 5px;
    margin-right: 5px;
    background: #fff;
    border: 1px solid #e5e5e5;
    margin-bottom: 7px;
}
.related-thumb img{width:100%;height:80px;}
.related-title-thumb{
    width: 100%;
    padding: 0 0;
    color: #333;
    height: 15px;
    text-align: center;
    margin: 0 0;
    font: lighter 12px tahoma;
    font-weight: lighter;
    line-height: 20px;
}
.related-title-thumb:hover{color:#057fa5;transition:all 0.8s;}
#related-posts{
    margin-left: auto;
    margin-right: auto;
    font: 12px devt2,devt3,sans-serif;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
    padding-bottom: 10px;
    background: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
</style>
<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.replace(/\/s[0-9]+(\-c)?/, "/s540");
            }
            else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGnbxafmJvjB8K4REKeYw7EJG4d9Y-rL3H5MlveWrAORWx8E2J2T7w-frgFS2k_DVafnSDkNZBCLdG4az6PstVURHpAy08mh_EhpOGsI8YsUemxZ5ttxwqWw-R7X7pZ452DD7xobCqKI/s640/picture_not_available.png'
        }
        if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 55)+"...";
        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('<h4>'+relatedpoststitle+'</h4>');
    document.write('<div style="clear: both;"/>');
    while(i<relatedTitles.length&&i<20&&i<maxresults) {
        document.write('<a class="related-thumb');
        if(i!=0)document.write('"');
        else document.write('"');
        document.write(' href="'+relatedUrls[r]+'"><img src="'+thumburl[r]+'" alt="'+relatedTitles[r]+'"/><br/><div class="related-title-thumb">'+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>
</b:if>

2 – ابحث عن الكود <div class='post-footer'> وأضف الكود التالي بعده :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="related">
<h2>
مواضيع ذات صلة
</h2>
<div id="related-posts">
             <b:loop values='data:post.labels' var='label'>
                          <b:if cond='data:label.isLast != &quot;true&quot;'>
                          </b:if>
                          <b:if cond='data:blog.pageType == &quot;item&quot;'>
                            <script expr:src='data:blog.homepageUrl + &quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/>
                          </b:if>
             </b:loop>
                        <script type='text/javascript'>
                          var currentposturl=&quot;<data:post.url/>&quot;
                          var maxresults=15;
                          var relatedpoststitle=&quot;&quot;;
                          removeRelatedDuplicates_thumbs();
                          printRelatedLabels_thumbs();
                        </script>
	</div>
</div>
</b:if>

الطريقة الثالثة : إضافة مواضيع ذات صلة بعنوان المقالة فقط.

simple related post


هذه الطريقة شكلها جيد جدا ومفيدة اذا كان لديك كم هائل من المقالات وتريد استعراض اكبر قدر من المقالات :
تركيب الإضافة:
1 – ابحث عن الكود </head> في محرر HTML واضف الكود التالي قبله:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
.related{
  border-bottom:1px solid #ecf0f1;
}
.related h2{
  border-bottom:2px solid #ecf0f1;
  font-size:17px;
  font-family:"Droid Arabic Naskh",tahoma;
  tex-align-right;
  background:#fff;
  color:#777;
  height:40px;
  line-height:40px;;
  text-indent:10px;
}
#related-posts{width:100%;margin-left:auto;margin-right:auto;font:12px devt2,devt3,sans-serif;margin-bottom:10px;}
#related-posts a{text-decoration:none;color:#07a8c0;font-family:tahoma , sans-serif;}
#related-posts a:hover{color:#2a5e79;transition:all .8s ease;}
#related-posts ul{background:#fff no-repeat 0 0;padding:0;}
#related-posts ul li{display:block;color:#0088b8;background:#fff;margin-right:15px;padding-top:0;padding-right:15px;padding-bottom:1px;padding-left:10px;margin-left:10px;line-height:35px;border-bottom:1px dotted #ccc;position:relative;}
#related-posts ul li a{font-size:14px;color:#07a8c0;margin-right:5px;}
#related-posts ul li::before{content:"\f104";display:inline-block;position:absolute;right:0;top:0;height:100%;background:transpatent;color:#999;font-family:fontawesome;font-size:20px;line-height:35px;}
</style>
<script type='text/javascript'>
/* <![CDATA[ */
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length- 1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length- 1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;}
function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length- 1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+ relatedUrls[r]+'">'+ relatedTitles[r]+'</a></li>');if(r<relatedTitles.length- 1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write('<a href="" target="_blank"><font size="1" color="black"></font></a>');}
/*]]>*/
</script>
</b:if>

2 – ابحث عن الكود <div class='post-footer'> وأضف الكود التالي بعده :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="related">
<h2>
مواضيع ذات صلة
</h2>
<div id="related-posts">
	 <b:loop values='data:post.labels' var='label'>
	 <b:if cond='data:label.isLast != &quot;true&quot;'>
	 </b:if>
	 <b:if cond='data:blog.pageType == &quot;item&quot;'>
	 <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/>
	 </b:if>
	 </b:loop>


	 <script type='text/javascript'>
	  removeRelatedDuplicates(); printRelatedLabels();
	 </script>
	</div>
</div>
  </b:if>


كانت هذه ثلاث طرق احترافية لإضافة مواضيع ذات صلة لمدونات بلوجر ، ونترك لك الخيار لتختار الطريقة التي تناسبك ، واي مشكلة تواجهها اثناء تركيب الإضافة لاتتردد بتركها في تعليق دمتم بخير!

الكلمات المفتاحية: