اضافة اداة المشاركات الشائعة مع ازرار التقدم التالي و السابق

•  فائدة تركيب إضافة أداة المشاركات الشائعة مع أزرار التقدم والتالي  
• طريقة تركيب إضافة أداة المشاركات الشائعة
• التعديلات التي يجب ان تقوم بها

 فائدة تركيب إضافة أداة المشاركات الشائعة مع أزرار التقدم والتالي  

عندما تدير مدونة أو موقعًا إلكترونيًا، فإن أحد أهم الأهداف هو زيادة التفاعل وتحسين تجربة المستخدم. 

وهنا تأتي أهمية إضافة أداة المشاركات الشائعة مع أزرار التقدم والتالي**، فهي توفر فوائد كبيرة تؤثر بشكل مباشر على أداء موقعك وجذب الزوار للبقاء لفترة أطول.  

1 - تحسين معدل البقاء في الموقع

عندما يرى الزائر قائمة بأكثر المقالات شيوعًا، فمن المرجح أن يجد محتوى يثير اهتمامه، مما يدفعه للنقر عليه وقراءة المزيد. 

وعند توفر أزرار التالي والسابق يصبح التنقل بين المقالات أكثر سلاسة مما يشجع الزوار على استكشاف المزيد من المحتوى دون الحاجة للعودة إلى الصفحة الرئيسية أو البحث يدويًا.  

2 - زيادة معدل النقرات (CTR)

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

إضافة أزرار التنقل تجعل من السهل على الزائر الانتقال إلى المقالة التالية، مما يعزز معدل التفاعل مع الموقع.  

3 -  تحسين تجربة المستخدم (UX)

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

4 - تقليل معدل الارتداد (Bounce Rate)

عندما يتفاعل الزوار مع المحتوى وينتقلون بين المقالات بسهولة، فإن ذلك يقلل من معدل الارتداد، مما يعزز ترتيب الموقع في محركات البحث مثل جوجل  

طريقة تركيب إضافة أداة المشاركات الشائعة

أذهب الى التنسيق و قم باختيار اضافة اداة بالمكان اللذي تريده مثلا بالسيد بار ثم اختار HTML/JavaScript
الصق الكود التالي بداخل الأداة و قم بتسميتها مثلا أداة المشاركات الشائعة

<style scoped='' type='text/css'>

/* Recent Post Navigasi */

#recentpostnav {border: 1px solid #585858;width: 100%;margin: 0 auto;}

#recentpostsae {margin: 0px;}

.recentpostel {background: #fff;display: block;border: 1px solid #ddd;margin: 5px 0;padding: 10px;}

.recentpostel img {background: #fff;padding: 4px;float: right;height: 70px;margin-left: 8px;width: 70px;border: 1px solid #ddd;}

.recentpostel h6,

.recentpostel h6 a {text-decoration: none;font-size: 12px!important;font-weight: 700!important;margin: 0;color: #111;}

.recentpostel:hover {background-color: #fefefe;}

.recentpostel p {font-size: 12px;text-align: right;color: #555;line-height: normal;margin: 5px 0;}

#recentpostload {color: #888;font-family: droid arabic kufi;font-size: 50px;letter-spacing: -10px;text-align: center;text-shadow: -5px 0 1px #444;background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtlxHGxWSlh08suaT9EFhrb8KGvOZdE6Q2a_3i-AcL7aqWJKck0z6TPnyZI_YtEYgsPnuNVMBfg3mHn7E_kOUdIxbXr4FP8xi4pHDyfh9ALU4ywUCUAG65T6VLANYXLIFHMVgqun05pF5B/s1600/loader.gif) no-repeat 50% 50%;height: 470px;border: 1px solid #ddd;}

#recentpostnavfeed {border: 1px solid #ddd;color: #bbb;font-family: droid arabic kufi;font-size: 12px;text-align: center;margin: 0px;}

#recentpostnavfeed:hover {background-color: #fefefe;}

#recentpostnavfeed a {color: #141414!important;font-family: droid arabic kufi!important;font-size: 12px!important;font-weight: 400!important;display: block;padding: 5px 10px;}

#recentpostnavfeed span {padding: 5px 10px;}

#recentpostnavfeed .next {float: right;}

#recentpostnavfeed .previous {float: left;}

#recentpostnavfeed .home {text-align: center;}

#recentpostnavfeed a:hover,

#recentpostnavfeed span.noactived {color: transparant!important;}

</style>

<script type='text/javascript'>

//<![CDATA[

    var numfeed = 5;

    var startfeed = 0;

    var urlblog = "https://halateck.blogspot.com/";

    var charac = 50;

    var urlprevious, urlnext;

function mudwnpfeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvthmVjTIPOMvJx3yTCeM0e39eoYN7tBXUEct76rqwQIWbYvAVh0d0WCyECAHLUmNLgH_g7oHZv1e0yZ9Pkv9CIp1Dg7iFwcKEudbI5cjVvCmR9uCynCrnVNusYa7qge9dAyK0Wya-1uKt/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+mudwnpfeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>السابق</a>":"<span class='noactived previous'>السابق</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>التالي</a>":"<span class='noactived next'>التالي</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>الرئيسية</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","mudwnplabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("mudwnplabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};

//]]>

</script>

<div id="recentpostsae"></div>

<div id="recentpostnavfeed"></div>

التعديلات التي يجب ان تقوم بها

ستجد بداخل الكود رابط المدونة الخاص بي https://halateck.blogspot.com/

قم بأستبداله برابط المدونة التي سيتم تركيب الاضافة عليها 

var charac : و هي الخاصة بعدد الكلمات او ملخص الموضوع الذي يظهر بجانب الصورة

var numfeed : و هو عدد المواضيع التي تريد عرضها

font-family : و هي خاصة بالخط  تجدها مكررة قم بتغييرها للخط الذي في مدونتك

font-size : و هي خاصة بحجم الخط تجدها مكررة غيرها بحجم الخط الخاص بك

و ثم قم بالحفظ