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

السلام عليكم ورحمة الله

 اليوم أقدم لكم اضافة جميلة 

 وهي إضافة أزرار التنقل لصفحات بلوجر ، 

  زر مشاركات اقدم ، زر مشركات احدث ، زر تحديث الصفحة ، زر العودة الى الرئيسية واخيرا زر الصعود الى الأعلى..

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

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

 </head>

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

  </head> .

<link href=' https://dl-web.dropbox.com/get/archivos/navigation-Ayoub-Etmaiti.css?w=0f6a2ae2 ' rel='stylesheet'/>

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

</head> .

<link href=' https://dl-web.dropbox.com/get/archivos/navigation-right-Ayoub-Etmaiti.css?w=d9d56a34 ' 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>

............................................... 
وأخيرا قم بحفظ القالب

ملاحظة : بعد نسخ اي كود قم بحذف رابط المصدر عند اضافة الكود الى قالبك !!!

المصدر : http://mohammed-zahrani.blogspot.com/2012/07/blog-post_30.html#ixzz2ROobClAZ

 

يسمح لكم بنقل الموضوع بشرط ذكر المصدر : اضافة أزرار التنقل عائمة لصفحات بلوجر. | alm7trfin

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

برامج