اضافة مواضيع ذات صلة أو مواضيع قد تهمك على مدونات البلوجر أسفل كل تدوينة
سوف اشرح لكم اليوم طريقة تركيب اضافة مواضيع قد تهمك أو مواضيع ذات صلة أسفل كل تدوينة لمدونات بلوجر ، ولاكن هذه الاضافة تحتلف عن باقي الاضافات حيث تتميز بشكل جديد وبسيط لمواضيع ذات صلة على شكل سلايد شو يعرض ثلاث مواضيع وتلقائي وتعد هذه الاضافة ضرورية لكل للمدونات والموقع حيث تجعل الزائر ينجزب لموضيع اكثر مما ينتج عن بقائة اكثر فطرة ممكنة داخل المدونة مما يرفع من من عدد الزائرين في المدونة وتخفيف معدل الارتداد مما يجزب محركات البحث لمدونتك.
مميزات اضافة مواضيع ذات صلة داخل المدونة :
تتميز بشكل جديد وبسيط لمواضيع ذات صلة
تجعل الزائر ينجزب لموضيع اكثر مما ينتج عن بقائة اكثر فطرة ممكنة داخل المدونة و تجعله يقرأ أكثر من موضوع فى مدونتك مما سيزيد عدد مرات مشاهدة صفحات مدونتك.
حيث تتميز بشكل جديد وبسيط لمواضيع ذات صلة على شكل سلايد شو يعرض ثلاث مواضيع وتلقائي
يسمح للزائر إمكانية التصفح بسهولة في المواضيع الأخرى التي لها نفس الموضوع الذي يبحث عنه.
طريقة تركيب مواضيع قد تهمك على مدونات البلوجر:
1- أدخل إلى لوحة التحكم الخاصة بمدونتك على البلوجر، ثم اضغط على قالب كما هو مبين فى الصورة التالية :
2- ثم أنقر على "تحرير Html" كما في الصورة التالية :
3-بعد ذلك اضغط على Ctrl + F للبحث عن هذا الكود التالي : </head>
في بعض القوالب لاتجد الكود </head> فيمكنك البحث عن الكود التالي
</head><!--<head/>-->
4- وضع الكود التالي فوقه مباشرة :
<b:if cond='data:view.isPost'><link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/><style type="text/css">/*<![CDATA[*//*====================================== title=====================================*/.widget-title{margin:0 0 15px;font-size:16px;line-height:20px;position:relative;margin-bottom:23px}.widget-title:before{top:inherit;bottom:0;height:3px;margin-top:0;background-color:#1e55a3;content:'';display:inline-block;position:absolute;left:0;width:100%}.widget-title span{padding:0 15px;position:relative;color:#fff;font-weight:400;line-height:28.8px;font-size:18px;text-transform:capitalize;background-color:#1e55a3;letter-spacing:-0.49px;display:inline-block;-webkit-transition:.35s cubic-bezier(.39,.58,.57,1) 0s;-moz-transition:.35s cubic-bezier(.39,.58,.57,1) 0s;-o-transition:.35s cubic-bezier(.39,.58,.57,1) 0s;transition:.35s cubic-bezier(.39,.58,.57,1) 0s;z-index:1}.widget-title span:before{border-bottom-color:#1e55a3;background:#fff;content:'';display:inline-block;position:absolute;top:0;width:0;height:0;border-bottom:30px solid #1e55a3;border-right:20px solid transparent;z-index:1;right:-20px;background-color:transparent!important}.widget-title span:after{content:'';display:inline-block;position:absolute;top:0;width:0;height:0;border-bottom:30px solid #000;border-right:20px solid transparent;z-index:1;right:-20px;background-color:transparent!important;border-bottom-color:rgba(255,255,255,.43);z-index:2;-webkir-box-shadow:-2px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.1);box-shadow:-2px 2px 2px rgba(0,0,0,.1)}/*====================================== slider=====================================*/.related-items .post{width:31.3333%;height:253px;float:right;margin:5px 3px;overflow:hidden}.related-items{overflow:hidden;padding:5px}.related-items .post .post-thumbnail{margin-bottom:10px;line-height:0;position:relative;height:188px}.related-items .post .post-thumbnail .postCategory{position:absolute;top:0;right:0;z-index:1;line-height:0;font-size:0}.related-items .post .post-thumbnail .postCategory a{padding:4px 9px;background:#1e55a3;color:#fff;margin-bottom:3px;font-weight:400;font-size:11px;text-transform:uppercase;display:inline-block;line-height:1.7;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.related-items .post .post-thumbnail img{width:100%;height:100%}.related-items .post .title{font-size:15px;line-height:1.4;text-align:inherit;text-transform:none;color:#020202;letter-spacing:-0.3px;font-weight:600}.related-items .post .title span{font-weight:600}.related-items .owl-item .post{width:auto;height:auto;float:none}.related-items .owl-nav div{opacity:0;transition:all .3s ease-in-out;top:33%;padding:0;background:#1e55a3;width:35px;height:35px;position:absolute;text-align:center;color:#ffffff}.related-items .owl-nav .owl-next{right:5px;-webkit-border-radius:2px 0 0 2px;-moz-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px}.related-items .owl-nav .owl-prev{left:4px;-webkit-border-radius:0 2px 2px 0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0}.related-items .owl-nav .owl-next:before,.related-items .owl-nav .owl-prev:before{font-family:FontAwesome;display:block;line-height:35px;font-size:30px}.related-items .owl-nav .owl-next:before{content:"\f105"}.related-items .owl-nav .owl-prev:before{content:"\f104"}.related-items:hover .owl-nav div{opacity:1;transition:all .3s ease-in-out}/*]]>*/</style></b:if>
5- إبحث في القالب على كود </body> وضع الكود التالي فوقه مباشرة
<b:if cond='data:view.isPost'><script defer='defer' src='https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/OwlCarousel.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[var noimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26T2-VWyXuXrNJ_yiUywfp7JRj5MNk3KR6p_mMTrIC1VNcT9zf4EujiwCgFjlxvTKaHbi4I7WFmrAv4SiaU5uB-bHKwZagmPKG-Q6C2pRFqcUYe8-z3G-vBMeGuKZqenNd2hgzVYdxxxw/s1600/noimg.png",noauthorThumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitH2qFjOLPXZ6dW3yqUnOxRIAYQns8snjWMI_YcjhuWaABiajjpQ9u-Nh4Je3HYI9MnJNXQr7dQslZdChxCMakHDn_RjjEULJgNvRYgYRwlWUDevzesXeGJfHgXF5ih1l2aeq_4sdtid0X/s1600/user.png",msgerror="\u0627\u0644\u062A\u0633\u0645\u064A\u0629 \u0644\u0627 \u062A\u0639\u0645\u0644 \u0627\u0648 \u0644\u0627 \u062A\u0648\u062C\u062F \u0645\u0648\u0627\u0636\u064A\u0639";$(".related-posts[data-qism]").each(function(){var b=$(this),a=b.attr("data-qism"),c=b.attr("data-num");b.attr("type"),$.ajax({type:"GET",url:"/feeds/posts/default/-/"+a+"?alt=json-in-script&max-results="+c,dataType:"jsonp",success:function(g){var e="",j="";if(g.feed.entry){for(var k=0;k<g.feed.entry.length;k++){for(var q=0;q<g.feed.entry[k].link.length;q++)if("alternate"==g.feed.entry[k].link[q].rel){var v=g.feed.entry[k].link[q].href;break}var i=g.feed.entry[k].title.$t,l=" ";l=l.replace("/s72-c/","/s600/");var w=" ";g.feed.entry[k].author[0].name.$t;try{g.feed.entry[k].author[0].uri.$t}catch(a){}g.feed.entry[k].published.$t;for(var x=g.feed.entry[k].published.$t,y=[1,2,3,4,5,6,7,8,9,10,11,12],p=textmonth,c=x.split("-")[2].substring(0,2),f=x.split("-")[1],z=x.split("-")[0],m=0;m<y.length;m++)if(parseInt(f)==y[m]){f=p[m];break}x=c+" "+f+" "+z;try{l=g.feed.entry[k].media$thumbnail.url.replace("s72-c","w278-h188-p-k-no-nu").replace("default","hqdefault")}catch(a){l=noimg.replace("s1600","w278-h188-p-k-no-nu").replace("default","hqdefault")}try{w=g.feed.entry[k].category[0].term}catch(a){w="\u0628\u062F\u0648\u0646 \u062A\u0633\u0645\u064A\u0629"}g.feed.entry[k].content.$t.replace(/<.+?>/g,"").substring(0,100),j+="<div class=\"post\"><div class=\"post-thumbnail\"><div class=\"postCategory\"><a href=\"/search/label/"+w+"?&max-results=8\" title=\""+w+"\">"+w+"</a></div><a href=\""+v+"\" title=\""+i+"\"><img alt=\""+i+"\" src=\""+l+"\" title=\""+i+"\"></a></div><p class=\"title\"><a href=\""+v+"\" title=\""+i+"\"><span class=\"post-title\">"+i+"</span></a></p><div class=\"clr\"></div></div>"}e="<div class=\"related-items\">"+j+"</div>",b.html(e),b.find(".related-items").owlCarousel({items:3,autoplay:!0,loop:!0,lazyLoad:!0,margin:10,navigation:!0,nav:!1,responsive:{0:{items:1},380:{items:1},480:{items:1},550:{items:2},650:{items:3},750:{items:3},1e3:{items:3}}})}else b.html("<div class=\"box-error\"><i class=\"fa fa-exclamation\" aria-hidden=\"true\"></i><div class=\"info-error\">\u0627\u0644\u062A\u0633\u0645\u064A\u0629 \u0644\u0627 \u062A\u0639\u0645\u0644 \u0627\u0648 \u0644\u0627 \u062A\u0648\u062C\u062F \u0645\u0648\u0627\u0636\u064A\u0639</div></div>")}})});//]]></script></b:if>
الان في الخطوة الاخيرة ابحث على <data:post:body/> ستجد اثنان منه او ثلاثة انتا ضعه في الثانية
6- و قم بلصق الكود التالي أسفله :
<b:if cond='data:view.isPost'><div class='box' id='related-slider'><div class='widget-title'><span>مواضيع ذات صلة</span></div><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'><div class='related-posts' data-num='8' expr:data-qism='data:label.name' type='slider'/></b:if></b:loop></div></b:if>
لزيادة عدد المواضيع قم بتغيير العدد (8) داخل الكود التالي
<div class='related-posts' data-num='8' expr:data-qism='data:label.name' type='slider'/>
ضع تعليق ليكتمل التحميل باقصى سرعة