أزرار التنقل عائمة لصفحات بلوجر.

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



صورة لهذه الإضافة على مدونتي التجريبية:




- كما نلاحظ أن هذه الإضافة لا تأخذ مكان كبيرة في المدونة وهي ذات شكل جميل ومفيدة ايضا.


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

الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  </head>

لتركيب الإضافة على الجهة اليسرى نقوم بإلصاق هذا الكود قبل الوسم </head> .
<link href=' https://abuiyad.googlecode.com/svn/navigation-Ayoub-Etmaiti.css ' rel='stylesheet'/>



ولتركيب الإضافة على الجهة اليمنى نقوم بإلصاق هذا الكود قبل الوسم </head> .
<link href='https://abuiyad.googlecode.com/svn/navigation-right-Ayoub-Etmaiti.css' rel='stylesheet'/>



وبعد هذا سنقوم بالبحث على <b:includable id='main' var='top'> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي بعده :

<div id='float-menu'> 
<ul>
<li id='menu-right'>
<b:if cond='data:olderPageUrl'>
<b:if cond='data:olderPageUrl != data:blog.url'>
<a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-left'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:newerPageUrl != data:blog.url'>
<a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-random'>
<script type='text/javaScript'>//<![CDATA[
var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};
//]]></script>
<script type='text/javaScript'>//<![CDATA[
function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="مقالة عشوائية" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');
//]]></script>
</li>
<li id='menu-home'>
<a expr:href='data:blog.homepageUrl' title='الرئيسية'/>
</li>
<li id='menu-top'>
<a href='#' title='إلى الأعلى' rel="nofollow"/>
</li>
</ul>
</div>

وأخيرا قم بحفظ القالب 
وهذا هو كل شئ مع تحياتي اخوكم : 

هناك 26 تعليقًا:

  1. إضافة مميزة أخي أيوب ،وتعتبر أداة فعالة للتنقل السريع من دون أن تأخد èاي حيز كبير بالمدونة ،شكرا لك مرة تانية على مشاركتك

    ردحذف
  2. مميز يا اخى أيوب , فى انتظار جديدك !

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

    ردحذف
  4. @ياسر إسماعيل
    صدقت أخي الفاضل فهذه الإضافة تعتبر أفضل لكونها تأخذ حيز صغيير جدا ، مع إمكانياتها لعمل جميع الإنتقالات بشكل سريع وسلس ،وشكرا لك على مرورك ونتمنى أن تنضم إلينا وتتحفنا بمواضيعك الهادفة

    ردحذف
  5. @أبو إياد

    عفوا أخي ، طبعا معك حق هي ادات فعالة والجميل أنها صغيرة وتقوم بالواجب .

    ردحذف
  6. @King Sherif

    بارك الله فيك اخي، طبعا ستجد جديدي قريبا إن شاء الله .

    ردحذف
  7. @ياسر إسماعيل

    شكرا لك أخي ياسر على تشجيعك وتعليقك ، وشكرا لمرورك على مدونتي وإن شاء الله تنظم إلينا ونقوم بنشر محتوى أكثر أناقة .

    ردحذف
  8. مشكووووووووور جدا أخي أبو إياد

    ردحذف
  9. شكرا لك على هذه الإضافة الممتازة

    ردحذف
  10. @محمد شريف

    عفوا عزيزي محمد انتظر مني المزيد قريبا .

    ردحذف
  11. الله لا يحرمنا من جديد مدونه ابو اياد انا من اشد المتابعين والمعجبين بهذا المنجز
    اتمنى للمدونه دائما التالق ولكتابها الجدد الابداع

    وليد من العراق

    ردحذف
  12. @waleed sabr

    بارك الله فيك اخي وليد نورة الموضوع بتعليقك.

    ردحذف
  13. للاسف الاضافة تعمل على فايرفوكس فقط !!

    ردحذف
  14. لالالالالالالا ، أنا عندما قمت بهذا الشرح قمت به على جوجل كروم المشكل من عندك..

    ردحذف
  15. أزال المؤلف هذا التعليق.

    ردحذف
  16. قمت بتطبيقها لكن لم يظهر لي شيء

    ردحذف
  17. @Aria

    الرجاء مراسلتي

    http://ayoub-etmaiti.blogspot.com/

    وسأتكل بتركيبها بنفسي.

    ردحذف
  18. (: اضافه جمييييله .
    بس ما جات معي .,

    ردحذف
  19. أزال المؤلف هذا التعليق.

    ردحذف
  20. تعمل على اكسبلورر ولكن الفايرفوكس لم تعمل لماذ ؟

    ردحذف
  21. @salar morad

    راسلني https://plus.google.com/107041809153107083313/posts

    ردحذف
  22. أخي انا لم اجد هذا الكود في مدونتي:
    رابط مدونتي للمعاينة: http://www.7ikayah.com/

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية