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

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

سابقاً كان هناك دروس لكيفية تخصيص شريط التمرير بإستخدام أدوات الويب والآن نحن سنشرح لك كيفية إضافة النسبة المئوية بجانب شريط التمرير وهذة الإضافة مفيدة جداً للزائر لكى يعلم كم من النسبة التى تم تمريرها أو المحتوى الذى ينبغى قرائتة والآن مع شرح تركيب الإضافة .
  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> 

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

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

السلام عليكم ورحمة الله وبركاتة
متابعين مدونة هادى ستور الكرام سنشرح لكم اليوم إضافة تدوينات ذات صلة اسفل المواضيع بشكل جديد وجذاب مع إضافة صورة مصغرة للمواضيع وهذة الإضافة مهمة ومفيدة جداً للزائر لانها تعرض التدوينات المرتبطة بنفس القسم والآن مع شرح تركيب الإضافة ومعاينتها .
 
  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/AVvXsEiytKgK-Lh8ykm4-hMhFeh6JrmlhptuYLBruH3-XE4wS1vzwELsaj_wt0w-xK8PVSbJAvVm3k1khhSUNBZQ7e7a4lFCA55DuOiMaKy0DhNm0Y0FrGMe2K9UaKw2Q1KeWmVDGzemZnke_E0E/'};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. اللون         خاص بعدد عرض التدوينات
تم بحمد الله تعالى
تحميل أرقى 10 خلفيات بولجون

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

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

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

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

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

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

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



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

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


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

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

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

السلام عليكم ورحمة الله وبركاتة
مدونة هادى ستورتقدم لكم إضافة رائعة جداً لتغذية RSS لتدويناتك يمكنك إضافتها بالسيد بار أو أى مكان آخر فى المدونة أضفة أينما شئت حيث توفر لك الإضافة عرض جميع المشاركات بشكل جميل وجذاب والآن مع شرح تركيب الإضافة ومشاهدة الإضافة
.
معاينة الإضافة
  1.  اولاً ننصح بأخذ نسخة إحتياطية 
  2. ادخل على تحرير القالب HTML
  3. ونبدا البحث عن هذا الكود بإستخدام Ctrl+f ونبحث عن ]]></b:skin> ونضع الكود التالى قبلة
.MBL-container-header h1{font-weight:300; font-size:48px; text-align:center;}
 .MBL-container-header h2{font-size:30px; text-align:center;}     
  #MBLnewsticker1 ul { padding: 0px; }
.MBLnewsticker {
    width: 100%;
    overflow: hidden;
    height: 440px;
    position: relative;
    padding: 0 5px;
    box-sizing: border-box;
    margin: 0 auto;
    text-align:center;
}
.MBLnewsticker>ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
}
.MBLnewsticker>ul>li {
    display: none;
    width: 100%;
    height: 100px;
    background: #FFF;
    position: absolute;
    overflow: hidden
}
.MBLnewsticker>ul>li>.MBL-content {
    position: absolute;
    top: 0;
    bottom: 30px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 5%;
    overflow: hidden;
}
.MBLnewsticker>ul>li>.MBL-content a {
    text-decoration: none;
}
.MBLnewsticker>ul>li>.MBL-content a:hover {
    text-decoration: underline;
}
.MBLnewsticker>ul>li>.MBL-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    padding: 5px;
    border-top: solid 1px #DDD;
}
.MBLnewsticker>ul>li>.MBL-info a {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #0F0;
    opacity: 0.2;
    cursor: pointer;
}
.MBLnewsticker>ul>li>.MBL-info a:hover {
    opacity: 1;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBHuhdQoYYyDPMYAsJ0eGtmW1PoJjrFIXhqLSSgL0jUB7hQnDbBaelrn6kkCMuMXCUxMUIDVew7dC_Gxi4Iy2XHxiTzfTB0zlAZT0otgcmaZz9HP3evlWGF1O9-3goBS4h01YvcBLhSYV/s1600/buttons-black.png) 0 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBHuhdQoYYyDPMYAsJ0eGtmW1PoJjrFIXhqLSSgL0jUB7hQnDbBaelrn6kkCMuMXCUxMUIDVew7dC_Gxi4Iy2XHxiTzfTB0zlAZT0otgcmaZz9HP3evlWGF1O9-3goBS4h01YvcBLhSYV/s1600/buttons-black.png) -20px 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBHuhdQoYYyDPMYAsJ0eGtmW1PoJjrFIXhqLSSgL0jUB7hQnDbBaelrn6kkCMuMXCUxMUIDVew7dC_Gxi4Iy2XHxiTzfTB0zlAZT0otgcmaZz9HP3evlWGF1O9-3goBS4h01YvcBLhSYV/s1600/buttons-black.png) -40px 0 no-repeat;
    float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBHuhdQoYYyDPMYAsJ0eGtmW1PoJjrFIXhqLSSgL0jUB7hQnDbBaelrn6kkCMuMXCUxMUIDVew7dC_Gxi4Iy2XHxiTzfTB0zlAZT0otgcmaZz9HP3evlWGF1O9-3goBS4h01YvcBLhSYV/s1600/buttons-black.png) -60px 0 no-repeat;
    float: right;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupe6bbrZOQ14ps3bDs4JV1QAkanb78dtDZ4oc2pRquYi1ooBA8ruIiufgBAKDDbse9PVwviKFA5VnsyFmizeafocs3NY8C69AGMmW0RzbfTgJ9euJ1lHta7hmjpNjdrR5g-4ChDGODY9x/s1600/buttons-white.png) 0 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupe6bbrZOQ14ps3bDs4JV1QAkanb78dtDZ4oc2pRquYi1ooBA8ruIiufgBAKDDbse9PVwviKFA5VnsyFmizeafocs3NY8C69AGMmW0RzbfTgJ9euJ1lHta7hmjpNjdrR5g-4ChDGODY9x/s1600/buttons-white.png) -20px 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupe6bbrZOQ14ps3bDs4JV1QAkanb78dtDZ4oc2pRquYi1ooBA8ruIiufgBAKDDbse9PVwviKFA5VnsyFmizeafocs3NY8C69AGMmW0RzbfTgJ9euJ1lHta7hmjpNjdrR5g-4ChDGODY9x/s1600/buttons-white.png) -40px 0 no-repeat;
    float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupe6bbrZOQ14ps3bDs4JV1QAkanb78dtDZ4oc2pRquYi1ooBA8ruIiufgBAKDDbse9PVwviKFA5VnsyFmizeafocs3NY8C69AGMmW0RzbfTgJ9euJ1lHta7hmjpNjdrR5g-4ChDGODY9x/s1600/buttons-white.png) -60px 0 no-repeat;
    float: right;
}
.MBLnewsticker>ul>li>.MBL-info span {
    position: absolute;
    left: 80px;
    right: 30px;
    text-align: center;
    opacity: 0.4;
    z-index: 0;
    font-size: 13px;
    cursor: default;
}
.MBLnewsticker>div {
    width: 50px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    opacity: 0.3;
}
.MBLnewsticker>div:hover {
    opacity: 1;
}
.MBLnewsticker>div.MBL-top-arrow {
    top: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIPKgN-lt4QhpxnGudwzN5Hikas27nUwdFCIph1OQdT3TOpBxKI-Ceg83afGPDsVPfh-PWAhPmie0dTRVwdidVe2rgGig3Rx6m0znxyqYfBaVu52yQnThsafDr7UXnPmBi9O2BIdUN_pKA/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
    bottom: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIPKgN-lt4QhpxnGudwzN5Hikas27nUwdFCIph1OQdT3TOpBxKI-Ceg83afGPDsVPfh-PWAhPmie0dTRVwdidVe2rgGig3Rx6m0znxyqYfBaVu52yQnThsafDr7UXnPmBi9O2BIdUN_pKA/s1600/arrows-black.png) bottom no-repeat;
}
.MBLnewsticker .MBL-top0 {
    -ms-transform: scale(0.80);
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.85;
    top: 0;
    z-index: 1;
    display: block;
}
.MBLnewsticker .MBL-top1 {
    -ms-transform: scale(0.87);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.9;
    top: 20px;
    z-index: 2;
    display: block;
}
.MBLnewsticker .MBL-top2 {
    -ms-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0.95;
    top: 45px;
    z-index: 3;
    display: block;
}
.MBLnewsticker .MBL-active {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    top: 75px;
    z-index: 10;
    display: block;
}
.MBLnewsticker .MBL-bottom2 {
    -ms-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0.95;
    top: 105px;
    z-index: 6;
    display: block;
}
.MBLnewsticker .MBL-bottom1 {
    -ms-transform: scale(0.87);
    -webkit-transform: scale(0.90);
    transform: scale(0.90);
    opacity: 0.9;
    top: 130px;
    z-index: 5;
    display: block;
}
.MBLnewsticker .MBL-bottom0 {
    -ms-transform: scale(0.80);
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.85;
    top: 150px;
    z-index: 4;
    display: block;
}
.MBL-easing2 {
    transition: .25s linear;
    -moz-transition: .25s linear;
    -webkit-transition: .25s linear;
}
.MBL-easing li {
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
}
.MBL-radius li {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.MBL-radius2 li {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.MBL-shadow li {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
    -moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
    box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
}
.MBL-shadow-big {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
  •   والآن نبحث عن هذا الكود </head> ونضع الكود التالى قبلة مباشرة
<script type='text/javascript'>
/*<![CDATA[*/
(function(e) {
    $.fn.MBLnewsticker = function(e) {
        var t = {
            width: "100%",
            modulid: "MBLnewsticker",
            autoplay: true,
            timer: 3e3,
            itemheight: 130,
            infobarvisible: true,
            btnfacebook: true,
            btntwitter: true,
            btngoogleplus: true,
            btnlinkbutton: true,
            btnlinktarget: "_blank",
            pagecountvisible: true,
            buttonstyle: "black",
            pagenavi: true,
            pagenavistyle: "black",
            feed: false,
            feedcount: 100
        };

        var e = $.extend(t, e);
        return this.each(function() {
            function o() {
                function o() {
                    $(e.modulid + ">div").css({
                        left: ($(e.modulid).width() - 30) / 2
                    })
                }
                function u() {
                    $(e.modulid + " ul li").eq(r[0]).addClass("MBL-top0");
                    $(e.modulid + " ul li").eq(r[1]).addClass("MBL-top1");
                    $(e.modulid + " ul li").eq(r[2]).addClass("MBL-top2");
                    $(e.modulid + " ul li").eq(r[3]).addClass("MBL-active");
                    $(e.modulid + " ul li").eq(r[4]).addClass("MBL-bottom2");
                    $(e.modulid + " ul li").eq(r[5]).addClass("MBL-bottom1");
                    $(e.modulid + " ul li").eq(r[6]).addClass("MBL-bottom0")
                }
                function a() {
                    t--;
                    if (t < 0) t = n;
                    l()
                }
                function f() {
                    t++;
                    if (t == n + 1) t = 0;
                    l()
                }
                function l() {
                    $(e.modulid + " ul li").attr("class", "");
                    if (t == 0) {
                        r[0] = n - 2;
                        r[1] = n - 1;
                        r[2] = n;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    } else if (t == 1) {
                        r[0] = n - 1;
                        r[1] = n;
                        r[2] = t - 1;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    } else if (t == 2) {
                        r[0] = n;
                        r[1] = t - 2;
                        r[2] = t - 1;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    } else if (t == n) {
                        r[0] = n - 3;
                        r[1] = n - 2;
                        r[2] = n - 1;
                        r[3] = t;
                        r[4] = 0;
                        r[5] = 1;
                        r[6] = 2
                    } else if (t == n - 1) {
                        r[0] = n - 4;
                        r[1] = n - 3;
                        r[2] = n - 2;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = 0;
                        r[6] = 1
                    } else if (t == n - 2) {
                        r[0] = n - 5;
                        r[1] = n - 4;
                        r[2] = n - 3;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = 0
                    } else {
                        r[0] = t - 3;
                        r[1] = t - 2;
                        r[2] = t - 1;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    }
                    u()
                }
                $(e.modulid + " ul li").css({
                    height: e.itemheight,
                    background: e.itembgcolor,
                    border: "solid 1px " + e.bordercolor,
                    color: e.titlecolor,
                    "font-size": e.titlefontsize
                });
                $(e.modulid + " ul li").each(function(t, r) {
                    if (e.infobarvisible) {
                        i = '<div class="MBL-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">';
                        if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-facebook-' + e.buttonstyle + '"></a>';
                        if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-twitter-' + e.buttonstyle + '"></a>';
                        if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-google-' + e.buttonstyle + '"></a>';
                        if (e.pagecountvisible) i = i + "<span>" + ($(this).index() + 1) + " / " + (n + 1) + "</span>";
                        if (e.btnlinkbutton) i = i + '<a href="' + $(this).find(".MBL-content").attr("data-link") + '" class="MBL-easing2 MBL-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>';
                        i = i + "</div>"
                    }
                    $(this).append(i)
                });
                $(e.modulid + " ul li .MBL-content").find("a").css({
                    color: e.contentlinkcolor
                });
                $(e.modulid + " ul li").find(".MBL-info").find("a").click(function(e) {
                    if ($(this).attr("data-type") == "facebook") {
                        window.open("http://www.facebook.com/sharer.php?u=" + encodeURIComponent($(this).attr("data-url")) + "&t=" + encodeURIComponent($(this).attr("data-text")), "sharer", "toolbar=0,status=0,width=626,height=436");
                        return false
                    } else if ($(this).attr("data-type") == "twitter") {
                        window.open("http://twitter.com/share?text=" + $(this).attr("data-text") + "&url=" + $(this).attr("data-url"), "sharer", "toolbar=0,status=0,width=626,height=436");
                        return false
                    } else if ($(this).attr("data-type") == "google") {
                        window.open("https://plus.google.com/share?url=" + $(this).attr("data-url") + "&title=" + $(this).attr("data-text"), "sharer", "height=550,width=525,left=100,top=100,menubar=0");
                        return false
                    }
                });
                $(e.modulid + " ul li").click(function(e) {
                    t = $(this).index();
                    l()
                });
                if (e.pagenavi) {
                    $(e.modulid).append('<div class="MBL-top-arrow"></div><div class="MBL-bottom-arrow"></div>');
                    $(e.modulid).css({
                        height: e.itemheight + 200,
                        padding: "20px 10px",
                        width: e.width
                    })
                } else {
                    $(e.modulid).css({
                        height: e.itemheight + 160,
                        padding: "0px 10px",
                        width: e.width
                    })
                }
                o();
                $(window).resize(function(e) {
                    o()
                });
                u();
                $(e.modulid + ">div").click(function(e) {
                    if ($(this).attr("class") == "MBL-top-arrow") a();
                    else f()
                });
                if (e.autoplay) {
                    s = setInterval(function() {
                        f()
                    }, e.timer);
                    $(e.modulid).hover(function() {
                        clearInterval(s)
                    }, function() {
                        s = setInterval(function() {
                            f()
                        }, e.timer)
                    })
                }
            }
            function u() {
                $.ajax({
                    type: "GET",
                    url: document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + e.feedcount + "&callback=?&q=" + encodeURIComponent(e.feed),
                    dataType: "json",
                    async: false,
                    success: function(i) {
                        veri = i.responseData.feed.entries;
                        news = "";
                        $(veri).each(function(e, t) {
                            if (e == 0) news = news + '<li class="MBL-active"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == 1) news = news + '<li class="MBL-bottom2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == 2) news = news + '<li class="MBL-bottom1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == 3) news = news + '<li class="MBL-bottom0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == veri.length - 1) news = news + '<li class="MBL-top2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == veri.length - 2) news = news + '<li class="MBL-top1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == veri.length - 3) news = news + '<li class="MBL-top0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else news = news + '<li><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"
                        });
                        $(e.modulid + " ul").html("");
                        $(e.modulid + " ul").append(news);
                        n = veri.length - 1;
                        r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
                        o()
                    },
                    error: function() {
                        $(e.modulid + " ul").html('<li class="MBL-active"><div class="MBL-content">خطأ رجاء أعد المحاولة فى وقت لاحق</div></li>')
                    }
                })
            }
            e.modulid = "#" + $(this).attr("id");
            var t = 0;
            var n = $(e.modulid + " ul li").length - 1;
            var r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
            var i = "";
            var s = e.modulid;
            if (e.feed != false) {
                $(e.modulid + " ul").html("");
                $(e.modulid + " ul").append('<li class="MBL-active"><div class="MBL-content">إنتظر تحميل التغذية ...</div></li>');
                u()
            } else {
                o()
            }
        })
    }
})(jQuery)
/*]]>*/
</script>


  •  والآن مع الخطوة الأخيرة سنقوم بالضغط على تخطيط من لوحة التحكم وإضافة اداة javascript وضع بها الكود التالى
<div class="MBLnewsticker MBL-radius MBL-shadow MBL-easing" id="MBLnewsticker1">
<ul> <li>
 <div class="MBL-content" data-link="http://hadystore.blogspot.com/">Powered by hady store (Don't remove or Widget will not work).</div>
</li></ul>
 </div>  
<script>
 $(document).ready(function(){
  $("#MBLnewsticker1").MBLnewsticker({
feed:"http://feeds.feedburner.com/hadystore/hmBDo",
width:"100%",
contentlinkcolor: "#766D6D",
timer:5000,
titlecolor: "#333",
titlefontsize: "16px",
itembgcolor: "#FFF",
contentlinkcolor: "#766D6D",
infobgcolor: "#f2f2f2",
bordercolor: "#DDD"
});
  });
</script>

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

بعد ذلك إضغط (حفظ) انت الآن تتمتع بالإضافة نتمنى ان نكون إستفدت من الشرح شارك التدوينة عن طريق الأزرار أسفل التدوينة وشكراً لك . 
مجموعة باترنات بيزلي الإحترافية

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

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

سجل بريدك الإلكتروني ليصلك كل جديد

جميع الحقوق محفوظة © 2018 - 2014 | تجريب قالب هادي