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

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

الخطوات :

ادهب الى المدونة ثم تحرير القالب
ابحث عن </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>

الان انتهينا من المسائل الضرورية ناتي لنرى طريقة استخدام الزر

عندما تريد استخدام الزر اضف هدا الكود في التدوينة