ما هو السيو؟

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

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

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

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

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

1. من القالب ابحث عن </head> وضع الكود التالى فوقه

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> </b:if>

2. اختر شكل الاضافة، ابحث عن ]]></b:skin> وضع الكود التالى فوقه

الشكل الاول

اضافة مواضيع ذات صلة وسط المواضيع فى بلوجر

/* Related Post Style 1 */ .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;} .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s} .related-simplify ul li:nth-child(odd){background:#fefefe} .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)} .related-simplify ul li:before{content:'\f137';font-family:fontawesome;position:absolute;margin:0 4px 0 9px;color:#2ecc71;overflow:hidden;transition:all .3s} .related-simplify ul li:hover:before{content:'\f137';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} .related-simplify a{color:#0383d9;font-size:13px;margin:0 30px 0 0;} .related-simplify a:hover{color:#0383d9;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display:none;} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

الشكل الثانى

اضافة مواضيع ذات صلة وسط المواضيع فى بلوجر

/* Related Post Style 2 */ .related-simplify{position:relative;padding:12px 12px 20px 12px;margin:24px auto 32px auto;width:93%;border:4px double rgba(0,0,0,0.2)} .related-simplify h4{background:#fff;padding:2px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;right:2.5%} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 2px 0 5px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;right:10px;transition:all .3s} .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;} .related-simplify a{color:#000;font-size:14px;margin:0 30px 0 0;} .related-simplify a:hover{color:#0383d9;} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:10px 0 15px 0;width:100%;border:2px solid #e74c3c;border-right:0;border-left:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;right:3.5%} .related-simplify a{font-size:14px;margin:0} .related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

الشكل الثالث

اضافة مواضيع ذات صلة وسط المواضيع فى بلوجر

/* Related Post Style 3 */ .related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;} .related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s} .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;} .related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;} .related-simplify a:hover{color:#fff;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-simplify a{font-size:14px;margin:0} .related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

تأكد من تثبت خطوط الايقونات على القالب الخاص بك

3. ابحث عن <data:post.body/> واستبدلها بالكود التالى

ستجد الكود <data:post.body/> متكرر فى القالب اكثر من مرة وباماكن مختلفة جرب كود تلو الاخر حتى تعمل الاضافة

<div expr:id='"post1" + data:post.id'/> <div class='related-simplify'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4>مواضيع ذات صلة</h4><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div><div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div><script type='text/javascript'> var obj0=document.getElementById("post1<data:post.id/>"); var obj1=document.getElementById("post2<data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

4. احفظ القالب و مبروك عليك .

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