info@blog.com
تابعنا:

اختر لون القالب

إضافة النسبة المئوية عند شريط التمرير

إضافة النسبة المئوية عند شريط التمرير
حجم الخط 100%
سابقاً كان هناك دروس لكيفية تخصيص شريط التمرير بإستخدام أدوات الويب والآن نحن سنشرح لك كيفية إضافة النسبة المئوية بجانب شريط التمرير وهذة الإضافة مفيدة جداً للزائر لكى يعلم كم من النسبة التى تم تمريرها أو المحتوى الذى ينبغى قرائتة والآن مع شرح تركيب الإضافة .
  1. الدخول إلى حسابك فى بلوجر
  2. تحرير القالب
  3. ننصح بأخذ نسخة إحتياطية قبل التعديل على القالب
  4. ثم نبحث عن هذا الكود ]]></b:skin> ونضع الكود التالى قبلة مباشرة / أعلاة
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}

بعد ذلك تبحث عن عن هذا الوسم </head> وتضع الكود التالى بعدة مباشرة وتاكد أنك وضع الكود بين </head> و <body>
<div id='scroll'></div>
  • هذة هى الخطوة الأخيرة كود الجافا الذى سيظهر النسبة المئوية بشكل دقيق إبحث عن هذا الكود </body> وضع الكود التالى قبلة مباشرة / أعلاة
<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script> 

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

Hady Mohamed

كاتب ومحرر

كاتب ومحرر في مدونة Hady، متخصص في شروحات بلوجر والتصميم وتطوير القوالب.

كاتب موثّق Hady

تعليقات

إضافة تدوينات ذات صلة بشكل أنيق

إضافة تدوينات ذات صلة بشكل أنيق
حجم الخط 100%
السلام عليكم ورحمة الله وبركاتة
متابعين مدونة هادى ستور الكرام سنشرح لكم اليوم إضافة تدوينات ذات صلة اسفل المواضيع بشكل جديد وجذاب مع إضافة صورة مصغرة للمواضيع وهذة الإضافة مهمة ومفيدة جداً للزائر لانها تعرض التدوينات المرتبطة بنفس القسم والآن مع شرح تركيب الإضافة ومعاينتها .
 
  1. ننصح بأخذ نسخة إحتياطية للقالب قبل أى تعديل
  2. إضغط على تحرير HTML 
  3. إبحث عن ]]></b:skin>  وضع الكود التالى قبلة مباشرة
        /* hadystore Thumbnail Related Posts With ToolTips --- */
        .related-post .post-thumbnail {
         z-index: 1;
         position: relative;
         width: 98px;
         height: 98px;
         margin: 0;
         display: block;
         border-right: 1px solid #fff;
         border-bottom: 1px solid #fff;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
         -webkit-box-shadow: inset 2px 2px 5px #444;
         -moz-box-shadow: inset 2px 2px 5px #444;
         box-shadow: inset 2px 2px 5px #555;
        }
        .related-post {
         float: left;
         position: relative;
         width: 98px;
         height: 98px;
         margin: 0 10px 10px 0;
         background: #F6F6F6;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
         }
        .related-post .related-post-title {
         display: none;
         float: left;
         background: #000;
         color: #fff;
         text-shadow: none;
         font-weight: bold;
         padding: 10px;
         position: absolute;
         top: -20px;
         left: 40px;
         z-index: 2;
         width: 200px;
         -webkit-box-shadow: 0 0 2px #444;
         -moz-box-shadow: 0 0 2px #444;
         box-shadow: 0 0 2px #444;
        }
        .related-post:hover .related-post-title {display: block;}

ثم نبحث عن سطر واحد فقط من الأسطر الآتية هذة مختلفة من قالب لآخر
<div class='post-footer-line post-footer-line-1'/>
      <div class='post-footer-line post-footer-line-2'/>
      <div class='post-footer-line post-footer-line-3'/>

بعد إيجاد السطر الصحيح فى قالبك ضع الكود التالى أسفلة مباشرة

    <div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>ذات صلة</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;لا توجد تدويناتavailable</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH_qXL1p50X1wgiGU5Eu7pxDaiepuezENUY1m9HOBqvfWXoBZ9Y7W-Z9WZjRZlH6CfiWVYPtfeRExUfTAFMuAOK6esf9cCHrWoVCj5fSloH4Xgxm_e5rwFMSKXhfJKPTWJqwNdL-C2fz9r/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>
    <div class='clear'/>

التخصيص:
  1. اللون         خاص بطول وعرض الإضافة 
  2. اللون         خاص بعدد عرض التدوينات
تم بحمد الله تعالى

Hady Mohamed

كاتب ومحرر

كاتب ومحرر في مدونة Hady، متخصص في شروحات بلوجر والتصميم وتطوير القوالب.

كاتب موثّق Hady

تعليقات

تحميل أرقى 10 خلفيات بولجون

تحميل أرقى 10 خلفيات بولجون
حجم الخط 100%
بسم الله الرحمن الرحيم 
مدونة هادى ستور تقدم لك أفضل 10 خلفيات بولجون تم إختيارها وتجميعها من قبل مدونة هادى ستور الخلفيات متوفر بحجم واحد فقط بجودة جيدة تستطيع إستخدام الخلفيات فى أعمالك حمل الآن الخلفيات من مدونة هادى ستور فقط .
  1. الحجم المتوفر : 1920×1200 px
  2. الصيغة المتوفرة : JPG
  3. حجم الملف : 5.32 MB
  4. عدد الخلفيات : 10
 

Hady Mohamed

كاتب ومحرر

كاتب ومحرر في مدونة Hady، متخصص في شروحات بلوجر والتصميم وتطوير القوالب.

كاتب موثّق Hady

تعليقات

عناصر Colorful UI الرائعة من هادى ستور

عناصر Colorful UI الرائعة من هادى ستور
حجم الخط 100%
السلام عليكم ورحمة الله وبركاتة 
مرحباً بكم أتمنى أن تكونوا بأفضل حال سأقدم لكم فى هذة التدوينة مجموعة عناصر  Colorful UI psd الإحترافية والجذابة عناصر عربية مقدمة لكم فقط من مدونة هادى ستور يمكنك إستخدامها فى أعمالك وهذة المجموعة تضم .
  1. أزرار إحترافية 
  2. أيقونات التواصل
  3. التقويم
  4. الملف الشخصى
  5. تسجيل الدخول
  6. البحث
وأكثر يمكنك تخصيصها كما تحب يمكنك ايضاً تغيير الألوان والأنماط بما يناسبك 
  1. المصدر / tooncharacters
  2.  Resolution: 1000×1972 px
  3. حجم الملف 1,67 MB
  4. عدد العناصر فى المجموعة : 48 

Hady Mohamed

كاتب ومحرر

كاتب ومحرر في مدونة Hady، متخصص في شروحات بلوجر والتصميم وتطوير القوالب.

كاتب موثّق Hady

تعليقات

شرح تشفير أكواد الجافاسكريبت أونلاين

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



مثل ما هو موضح أمامك 

  1. ضع الكود التى تريد تشفيرة 
  2. علم على هذا الخيار
  3. إضغط لتشفير الكود
  4. أنسخ الكود المشفر من هذا المربع
بعد ذلك ستضع الكود المشفر بهذة الطريقة 
<script type='text/javascript'>
//<![CDATA[
ضع الكود هنا
//]]>
</script>


أتمنى أن يكون الشرح واضح

Hady Mohamed

كاتب ومحرر

كاتب ومحرر في مدونة Hady، متخصص في شروحات بلوجر والتصميم وتطوير القوالب.

كاتب موثّق Hady

تعليقات

إضافة تغذية RSS للتدوينات بالسيد بار

إضافة تغذية RSS للتدوينات بالسيد بار
حجم الخط 100%
السلام عليكم ورحمة الله وبركاتة
مدونة هادى ستورتقدم لكم إضافة رائعة جداً لتغذية RSS لتدويناتك يمكنك إضافتها بالسيد بار أو أى مكان آخر فى المدونة أضفة أينما شئت حيث توفر لك الإضافة عرض جميع المشاركات بشكل جميل وجذاب والآن مع شرح تركيب الإضافة ومشاهدة الإضافة

Hady Mohamed

كاتب ومحرر

كاتب ومحرر في مدونة Hady، متخصص في شروحات بلوجر والتصميم وتطوير القوالب.

كاتب موثّق Hady

تعليقات

مجموعة باترنات بيزلي الإحترافية

مجموعة باترنات بيزلي الإحترافية
حجم الخط 100%
بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة
مدونة هادى ستور تقدم لكم مجموعة باترنات بيزلي الإحترافية تضيف لتصميماتك لمسه رائعة ستة باترنات من أفخم الباترنات التي تستوعب كل الأحجام دون مشاكل حمل الباترنات الآن من هادى ستور .

Hady Mohamed

كاتب ومحرر

كاتب ومحرر في مدونة Hady، متخصص في شروحات بلوجر والتصميم وتطوير القوالب.

كاتب موثّق Hady

تعليقات

قالب Elegant الإحترافى والمطور

قالب Elegant الإحترافى والمطور
حجم الخط 100%
السلام عليكم ورحمة الله وبركاتة
مدونة هادى ستور تقدم لكم قالب Elegant الإحترافى والجزاب والمطور من هادى ستور قالب رائع جداً وإحترافى بمعنى الكلمة به العديد من المميزات تجعله مناسب لك ولمدونتك وسريع ومتوافق مع جميع المتصفحات قالب مدفوع ولكن مقدم مجاناً من مدونة هادى ستور فقط وحصرياً.

مميزات القالب
  1. متوافق مع جميع المتصفحات 
  2. الوانة هادئة ومريحة للعين
  3. قالب إحترافى به أهم الإضافات 
  4. قائمة أفقية وقائمة سفلية اسفل الهيدر
  5. مربع بحث داخل القائمة 
  6. به وحدة إعلانية داخل الهيدر خاصة بأدسنس واخرى بالسيد بار
  7. به أيضاً وحدات إعلانية اعلى وأسفل المواضيع
  8. إضافة إلى اعلى بشكل جزاب
  9. فوتر مميز مزود بـ 3 أعمدة

Hady Mohamed

كاتب ومحرر

كاتب ومحرر في مدونة Hady، متخصص في شروحات بلوجر والتصميم وتطوير القوالب.

كاتب موثّق Hady

تعليقات