حصريا اضافة زر تحميل رائع بالجيوكوري






السلام عليكم ورحمة الله تعالى و بركاته اهلا زوارنا الاوفياء موضوع تدوينة اليم هو ن طريقة اضافة زر تحميل رائع بتقنية
الجيوكوري حيث انه عندما تضغط على الزر تندسل قائمة تحتوي على معلومات التحميل بامكانك معاينه في الاسفل.

الخطوات :
  • ادهب الى المدونة ثم تحرير القالب 
  • ابحث عن </head> وضع فوقه الكود التالي مباشرة 
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


الكود في الفوق هو كود استدعاء مكتبة الجيوكيوري وهو ضروري جدا 
  • بعد اضافة الكود ابحث عن  ]]></b:skin> واضف فوقه الكود التالي مباشرة.

.buttonWrap{width:170px; height:80px; display:block;}
   
.toggleButton{
    display:block;
    width:170px;
    height:30px;
    padding:10px 0 0 0;
    text-size:24px;
    font-family:arial, sans-serif;
    font-weight:bold;
    text-align:center;
    color:#FFF;
    text-decoration:none;
    border-radius:7px;
    cursor:pointer;
    border:1px solid #05ABE0;
    text-shadow:-1px -1px 0px #05ABE0;
    background: #87E0FD;
    background: -moz-linear-gradient(top, #87E0FD 0%, #53CBF1 40%, #05ABE0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87E0FD), color-stop(40%,#53CBF1), color-stop(100%,#05ABE0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87E0FD', endColorstr='#05ABE0',GradientType=0 );
}
.toggleButton:active{    
    background: #87e0fd;
    background: -moz-linear-gradient(top, #05ABE0 0%, #53CBF1 40%, #87E0FD 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05ABE0), color-stop(40%,#53CBF1), color-stop(100%,#87E0FD));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05ABE0', endColorstr='#87E0FD',GradientType=0 );
}
       
a.toggleSection{
    display:none;
    color:#333;
    background:#EEE url(icon-dl.png) no-repeat 5px center;
    border-left:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD;
    border-radius:0  0 5px 5px;
    width:60px;
    float:right;
    padding:5px 5px 5px 40px;
    margin:0 10px 0 0;
    font-family:arial, sans-serif;
    font-size:12px;
    text-decoration:none;
}
a.toggleSection span{font-weight:bold; display:block;}


الكود في الفوق هو كود CSS كما تعلم.
  
  • الخطوة التالية هي البحث عن </head>
  • اضف فوقه الكود التالي وهوكود الجيكيوري.



<script>
$(document).ready(function() {
    $('.buttonWrap').click(function() {
        if ($('.toggleSection').is(":hidden")) {
            $('.toggleSection').slideDown("slow");
        } else {
            $('.toggleSection').slideUp("slow");
        }
        return false;
    });
});
</script>

الان انتهينا من  المسائل الضرورية ناتي لنرى طريقة استخدام الزر 
عندما تريد استخدام الزر اضف هدا الكود في التدوينة
<div class="buttonWrap">
    <div class="toggleButton">حمل الان </div>
     <a href="#" class="toggleSection">
            <span>Exe</span>
            7.27 MB    </a>
</div>
غير مابالاحمر الى حجم الملف و مبروك عليك للمعاينة انضر في الاسفل . 


حمل الان
Exe 7.27 MB




شارك الموضوع مع اصدقائك؟

هل أعجبك الموضوع ؟

اذا كان لديك اي استفسار عزيزي الزائر بامكانك وضعه في تعليق!

هناك تعليق واحد:

مدونة اقلام الويب هي مدونة تهتم بكل ماله بتقنيات تطوير الويب عامة وبلوجر بشكل خاص,هدفنا هو مثل جميع اهداف المدونات الاخرى وهو اثراء المحتوى العربي فيما يخص الويب والتقنية,مقر المدونة بالمغرب,تحت ادارة ياسين بوصباع