الجمعة، 22 مارس 2019

اضافة المشاركات الشائعة مع خيارات التنقل

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

اضافة المشاركات الشائعة مع خيارات التنقل - هذه الاضافة تعد من اهم اضافات بلوجر و سوف تجدها في كل موقع و كل مدونة على بلوجر فهي تقوم بعرض المواضيع في الشريط الجانبي و تستطيع تحديد عدد الموضيع التي يتم عرضها ويكون عددهم من 1 - 10 و لكن هناك بعض المدونين الذين يرغبون بعرض اكثر من 10 مواضيع في الشريط الجانبي فيقومون بتكرار الإضافة مما يؤدي إلى بطىء و تشوه منظر القالب لذلك اليوم في مدون محترف لقد حللنا هذا الامر و اتينا لكم بإضافة اكثر من رائعة بحيث يوجد ازرار التالي و السابق تجدها اسفل المشاركات الشائعة مما يسهل التنقل بين مواضيع المدونة كلها و تصفحها من السايدبار



شرح تركيب الإضافة


  1. ادخل على لوحة تحكم بلوجر
  2. انتقل إلى التخطيط
  3. انقر على إضافة اداة/تحرير
  4. اختر اضافة اداة HTML/JavaScript
  5.  اضف الكود التالي بداخلها 

<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;height: 79px;}
.recentpostel img {background: #fff;padding: 4px;float: left;height: 70px;margin-right: 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: left;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(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/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 = "http://newz-b.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:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/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>

التعديلات

var charac : و هي الخاصة بعدد الكلمات او ملخص الموضوع الذي يظهر بجانب الصورة
var urlblog : استبدل رابط المدونة الموجود و ضع رابط مدونتك
var numfeed : و هو عدد المواضيع التي تريد عرضها
font-family  : و هي خاصة بالخط  تجدها مكررة قم بتغييرها للخط الذي في مدونتك
font-size : و هي خاصة بحجم الخط تجدها مكررة غيرها بحجم الخط الخاص بك

اي سؤال او استفسار لا تترد بوضعه تعليق
ولا تنسى دعمنا عبر مشاركة الموضوع عبر ازرار التواصل


إضافة تعليق

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *