الرئيسية / الأزرار

الثلاثاء، 8 مارس 2016

انشاء رابط لاعادة توجيه بعداد

اضف تعليق
أكمل المقال
طريقة انشاء زر تحويل تلقائي لرابط ما بوقت محدد. إعادة توجيه رابط هو شيء بديهي على شبكة الانترنت يستعمل في مواقع الاعلانات وما يماثلها ارتأيت ان تستخدم في اشياء اخرى ربما لكم افكار لها لذا سأوفر لكم الكود ولكم حرية الاستعمال
طريقة الاستخدام
1. يمكنك وضعها بموضوع معين بوضع الكود بتبويب HTML
<style type="text/css">
#ar1web-timer{width: 200px; background: #2AA9E0; color: #fff; text-align: center; padding: 5px 0px 5px 0px; margin: 10px auto;    font: normal normal 13px Droid Arabic Naskh,sans-serif; border-radius: 3px;}
#ar1web-timer:hover {opacity: .94; }
</style>

<div style="text-align: center;">
<script type="text/javascript">
        var settimmer = 0;
        $(function(){
        window.setInterval(function() {
        var timeCounter = $("b[id=show-time]").html();
        var updateTime = eval(timeCounter)- eval(1);
        $("b[id=show-time]").html(updateTime);
        if(updateTime == 0){
 $("div[id=ar1web-timer]").html("").html("جاري اعادة التوجيه");
        window.location = ("http://www.ar1web.com");
        }
        }, 1000);
        });
    </script>
سيتم تحويلك للملف</div>
<div id="ar1web-timer">
من فضلك انتظر... <b id="show-time">10</b> ثانية        
    </div>
التعديلات
* لتغيير لون الزر فهو محدد بالأحمر
* لتغيير الخط فهو محدد بالأزرق
* لتعديل على الثواني غير 10 بالعدد الذي تريد
* ضع بدل www.ar1web.com الرابط الذي سيتجه اليه

الأحد، 14 فبراير 2016

اضافة زر تحميل بعداد لعدد التحميلات

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

لمن أراد تركيبها فليتابع الشرح بعد التجربة
شرح طريقة التركيب
1. ادخل على موقع Firebase لإنشاء استضافة بيانات
2. إن لم يكن لديك حساب قم بإنشائه ثم سيوجهك للواجهة
3. أنشئ تطبيق جديد بأي إسم كان ثم اضغط CREATE NEW APP



* لا تنسى تسجيل الإسم لأننا سنحتاجه لاحقا
تركيب الإضافة في الموقع
1. حرر القالب >> ابحث عن ]]></b:skin> وضع الكود التالي فوقه
.center { text-align:center }
.loading { display:inline-block; width:82px; height:9px; background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQYqLUlG15zTGZ6w8OTyTsjx-eSiJ7S4KimAVJc0FmfNT_TeMf0pv_nCb0wJGUFIe5ewycJrLvAorDqhZnrjFnNtECWMJzM9WMu4Ip4Ipjox4f3JzrJAcuZztIIPVti6FXlJ8MLa3ztpLL/s1600/loading.gif') no-repeat 0 0 }
a.download:hover{background:#666}
a.download:after{ content: '\f019'; background: rgba(0,0,0,0.1); position: absolute; right: 0; top: 0; font-weight: normal; display: inline-block; margin: 0 0 0 10px; color: #fff; padding: 16px 15px; font-family: fontawesome; transition: all .3s; }
a.download{background-color:#2C64B4; display: inline-block; font: 14px/30px Droid Arabic Naskh,sans-serif; color: #FFF; text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px -3px 0px rgba(0, 0, 0, 0.1) inset, 0px 3px 0px rgba(0, 0, 0, 0.1); border-radius: 5px; position: relative; line-height: normal; transition: all .3s; max-width: 170px; padding: 10px 50px 10px 15px; margin: 0 0 10px;}
a.download:active{position:relative;top:2px;  box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);}
#download-count{font:bold 12px tahoma}
#download-count span{color:#289728}
2. ابحث عن <div class='post-header'> ثم ضع الكود الآتي أسفله - قد تجد الكود متكرر الأخير هو المنشود
<div class='obs_id' expr:id='data:post.id'/>
3. الآن قم بوضع الكود التالي فوق </body>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
// <![CDATA[
$(function () {
    var a = $('.obs_id'),
        b = $('.obs_button'),
        id = a.attr('id'),
        e = new Firebase('http://ta7mil.firebaseio.com/unduh/' + id);
    a.each(function () {
        e.on('value', function (snapshot) {
            var data = snapshot.val();
            if (data == null) {
                data = 0;
                e.set(data);
            }
            b.find('span').removeClass('loading').html(data);
        });
        b.children('a').click(function () {
            var z = parseInt($(this).siblings('.download-count').children('span').text());
            z++;
            e.set(z);
        });
    });
});
//]]>
</script>
* غير ta7mil بالإسم الذي سجلته سابقا وقم بحفظ النموذج
4. الخطوة الأخيرة وهي وضع كود زر التحميل داخل موضوع بتبويب HTML
<div class="center obs_button">
<a class="download" href="الرابط هنا" target="_blank">حمله من هنا</a>
<div class="download-count">عدد التحميلات : <span class="loading"></span> مره</div>
</div>

الجمعة، 29 يناير 2016

اضافة صندوق بأزرار في السيدبار

اضف تعليق
أكمل المقال
كيف تجعل الأزرار في السيدبار، عادة هذه الاضافة تجدونها في المواقع التي تقدم القوالب بصفة عامة واليوم سنتكلم عن طريقة اضافتها، لن أشارككم فقط السكربت الذي يجعل الصندوق في اليسار بل ايضا ترافقه صناديق وأزرار فنحن أيضا نستخدمها في تحميل القوالب والملحقات وبناء على طلباتكم وضعنا تدوينة لها وأظنها لمسة جميلة لأصحاب المواقع الذين لديهم روابط للتحميل بكثرة.
الآن يمكنكم رؤية المعاينة قبل أن ندخل للشرح
شرح طريقة التركيب
1. ضع الكود التالي فوق ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
/*تحميل  معاينة */
#store-style{overflow:hidden;font-family:Droid Arabic Naskh,sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px}
#store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}.rio-ss{padding-top:15px;overflow:hidden}
a.storebutton.but3,a.storebutton.but2 { display: inherit; padding: 10px 0; margin: 20px auto; width: 97%; background: #4F4F52!important; }
a.storebutton.but2 {background: #F9A741!important;margin:0 auto!important}
#store-style .storebutton:hover,a.storebutton.but3:hover{background:#333!important;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px}
.storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:right}
.storelist:last-child{border-bottom:none}
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}
2. ضع الكود التالي فوق </head>
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){ 
$('a[name="details"]').before($('#Theme-details').html()); 
$('#Theme-details').html(''); 
}); 
/*]]>*/
</script>
3. ابحث عن كود السيدبار الخاص بك الكود يختلف من قالب لقالب وقد يكون هكذا : <aside id='sidebar-wrapper' أو هكذا : <div id='sidebar-wrapper' وإن كان عكس ذلك ولم تعرفه فقط ابحث عن اسم الأداة الأولى وسيوجهك اليه بعدها ضع الكود التالي أسفله
<a name='details'/> 
<div class='clear'/>



4. قم بحفظ النموذج
تركيب الأزرار
1. قم بتحرير موضوع ثم انتقل الى تبويب HTML وضع الكود التالي في أي مكان
<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<center>
<a class="storebutton but1" href="رابط المعاينة#" target="_blank">معاينة مباشرة</a>
<a class="storebutton but3" href="رابط التحميل#" target="_blank">تحميل القالب</a>
</center>
</div>
<div id="store-style">
<center>
<a class="storebutton but2" href="رابط الشراء#" target="_blank">$5 - النسخة المدفوعة</a></center>
<div class="rio-ss">
<span class="storelist">دعم دائم</span>
<span class="storelist">حذف حقوق التصميم</span>
<span class="storelist">يستخدم بأي مدونة</span>
<span class="storelist">لا وجود للسكربتات المشفرة</span>
<span class="storelist">تغيير ألوان القالب</span>
<span class="storelist">والمزيد...</span>
</div>
</div>
<div style="clear: both;">
</div>
</div>
</div>
2. غير الروابط والكلمات ثم انشر الموضوع