اضافة مواضيع ذات صلة وسط المواضيع فى بلوجر - مرحبا بالمدونين، بالطبع الكل يعرف وظيفة صندوق مواضيع ذات صلة الذى يقوم بعرض المواضيع المتعلقة بنفس التسمية اما على شكل روابط وصور مصغرة او روابط فقط.
ولكن الاضافة مختلفة ربما ستشاهدها المرة الاولى، فى هذا الموضوع يتحدث عن اضافة مواضيع ذات صلة وسط المواضيع فى بلوجر، عرضنا عليكم سابقا اضافة اعلانات ادسنس وسط المواضيع فى بلوجر، يمكنك وضع اى كود او اضافة وسط المواضيع فى بلوجر، تم انشاء بعض التعديلات على الاضافة بواسطة ارلينا ديزاين.
فائدة تركيب هذه الاضافة هى زيادة عدد الزوار وتحسين نوعية الروابط الداخلية على المدونة الخاصة بك، اذا اعجبتك الاضافة وتريد اضافتها الى وسط مواضيع مدونتك، اتبع الخطوات التالية.
1. من القالب ابحث عن </head> وضع الكود التالى فوقه
2. اختر شكل الاضافة، ابحث عن ]]></b:skin> وضع الكود التالى فوقه
3. ابحث عن <data:post.body/> واستبدلها بالكود التالى
4. احفظ القالب وشاهد النتائج
الى هنا نكون انتهينا من شرح اضافة مواضيع ذات صلة وسط المواضيع فى بلوجر، نأمل ان تكون استفدت وشكرا لكم على المشاهدة.
ولكن الاضافة مختلفة ربما ستشاهدها المرة الاولى، فى هذا الموضوع يتحدث عن اضافة مواضيع ذات صلة وسط المواضيع فى بلوجر، عرضنا عليكم سابقا اضافة اعلانات ادسنس وسط المواضيع فى بلوجر، يمكنك وضع اى كود او اضافة وسط المواضيع فى بلوجر، تم انشاء بعض التعديلات على الاضافة بواسطة ارلينا ديزاين.
فائدة تركيب هذه الاضافة هى زيادة عدد الزوار وتحسين نوعية الروابط الداخلية على المدونة الخاصة بك، اذا اعجبتك الاضافة وتريد اضافتها الى وسط مواضيع مدونتك، اتبع الخطوات التالية.
شرح تركيب الاضافة
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. احفظ القالب وشاهد النتائج
الى هنا نكون انتهينا من شرح اضافة مواضيع ذات صلة وسط المواضيع فى بلوجر، نأمل ان تكون استفدت وشكرا لكم على المشاهدة.