کد جعبه دانلود (1) همراه با توضیحات تکمیلی

با سلام به درخواست یکی از کاربران یک لرن استایل جعبه دانلود اختصاصی یک لرن رو در این پست قرار دادیم برای دریافت کد جعبه دانلود به ادامه مطلب مراجعه فرمایید .

کد جعبه دانلود

برای اینکه شما بتوانید از این کد جعبه دانلود استفاده کنید کد را به دو قسمت تقسیم میکنیم
کدی که باید در قسمت قالب شما قرار گیرد و کدی که باید در هر مطلب شما درج شود
در زیر شما کدی را میبینید که شما باید این کد را در هر پست خود درج کنید (در قسمت ویرایش کد html ) اما توضیحات این کد : در این کد مواردی که شما باید آن ها را عوض کنید کاملا واضح مشخص شده است مثلا به جای عبارت ” تاریخ را اینجا بنویسید ” شما باید تاریخ انتشار مطلب خود را بنویسید یا به جای ” عنوان را اینجا بنویسید ” عنوان دانلود خود را جایگزین کنید پس از انجام این جایگزینی ها کد خود را در پست قرار دهید و مطلب را ارسال کنید البته کار دیگری باقی مانده که باید حتما انجام شود که در مرحله بعد به آن گسترده تر میپردازیم .
<br>
<div class="dlinfo" dir="rtl">
<h3>مشخصات دانلود</h3>
<p>
<strong>عنوان دانلود :</strong>عنوان را در اینجا بنویسید<br />
<strong>حجم فایل :</strong>حجم را در اینجا بنویسید<br />
<strong>تاریخ انتشار مطلب :</strong>تاریخ را در اینجا بنویسید<br />
<strong>ارسال شده توسط : </strong>نام نویسنده را در اینجا بنویسید<br />
<strong>منبع :</strong>
<a href="">منبع را در اینجا بنویسید</a>
</p>
</div>
<div class="dlhelp" dir="rtl">
<h3>راهنمای استفاده</h3>
<p>
راهنمای استفاده را در اینجا بنویسید
</p>
</div>
<div class="dl" dir="rtl">
<h3>لینک های دانلود</h3>
<img src="http://dl.1learn.ir/admin/1learn/exclaim.gif" />
<b>حجم :</b>حجم فایل خود را اینجا بنویسید<br />
<img src="http://dl.1learn.ir/admin/1learn/arrow-down.gif" />
<a style="color:rgb(92, 160, 0)" href="لینک دانلود را اینجا بنویسید" target="_blank">دانلود با لینک مستقیم</a>
</div>
حال شما باید این کد را در قالب خود قرار دهید محل قرار گیری آن بعد تگ <head> یا قبل از<head/> میباشد .
<style>
.dlinfo{
background:#FFC;
padding: 1px 15px;
border-bottom: 3px solid #F5E462;
border-top: 3px solid  #F5E462;
position: relative;
color: #6E6831;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-border-radius: 7px;
border-radius: 7px;
margin: 10px 20px;
font-size: 12px;;
font-family:Tahoma, Geneva, sans-serif;
 
    }
.dlhelp{
background:#F3F8FB;
padding: 1px 15px;
border-bottom: 3px solid #BAD7E9;
border-top: 3px solid #BAD7E9;
color: #1D425A;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
margin: 10px 20px;
font-size: 12px;;
font-family:Tahoma, Geneva, sans-serif;
}
.dl{
background: #E6FFB2;
padding: 10px 15px;
border-bottom: 3px solid #B8EB59;
border-top: 3px solid #B8EB59;
position: relative;
color: #5CA000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
margin: 10px 20px;
font-size: 14px;;
font-family:Tahoma, Geneva, sans-serif;    
    }
</style>
اما حالا میخواهیم به طور دلخواه این جعبه دانلود را تغییر دهیم باید چه کنیم ؟ میخواهیم هم اکنون یکی از سه استایل بالا را با یک دیگر بررسی کنیم حال پس از این بررسی شما میتوانید به داخواه خود رنگبندی و … را عوض کنید.
مثلا استایل زیر را در نظر میگیریم ( این تکه استایل که مورد بررسی قرار میدهیم مربوط به قسمت راهنمای دانلود میباشد برای قسمت لینک های دانلود و مشخصات دانلود هم چنین فسمت هایی وجود دارد که میتوانید طبق آموزش زیر آن ها را نیز تغییر دهید) برای انجام تغییرات مختلف در آن طبق این آموزش جلو بروید
1- برای تغییر رنگ پس زمنیه در خط دوم به جای #F3F8FB کد رنگ مورد نظر خود را قرار دهید.
2- در خط سوم میتوانید با تعویض مقدار های عددی فاصله ی داخلی اجزای کادر را کنترل کنید .
3- در خط چهارم میتوانید با تعویض مقدار عددی مقدار ضخامت رنگ دور پایین را مشخص کنید هم چنین با عوض کردن این مقدار #BAD7E9 میتوانید رنگ دور پایین را تغییر دهید
4- در خط پنجم نیز مانند خط چهارم عمل کنید با این تفاوت که خط پنجم مربوط به رنگ دور بالا ولی خط چهارم مربوط به رنگ دور پایین میباشد .
6- در خط ششم با عوض کردن مقدار #1D425A میتوانید رنگ نوشته ها را عوض کنید
7- در خط هفتم و هشتم و نهم میتوانید با عوض کردن مقدار عددی مقدار کج شدگی لبه های کادر را تعیین کنید
8-با عوض کردن مقدار های خط دهم میتوانید فاصله خارجی کادر را مشخص کنید
9- با عوض کردن مقدار عددی خط یازدهم میتوانید سایز فونت نوشته را کم یا زیاد کنید
10- و در خط دوازدهم میتوانید نام فونت دلخواه خود را برای نوشته ها بنویسید
توجه کنید که این تغییرات مربوط به یک کادر بود (راهنمای دانلود ) ساختار استایل بقیه کادر ها نیز مشابه این استایل میباشد که میتوانید به دلخواه تغییر دهید .
.dlhelp{
background:#F3F8FB;
padding: 1px 15px;
border-bottom: 3px solid #BAD7E9;
border-top: 3px solid #BAD7E9;
color: #1D425A;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
margin: 10px 20px;
font-size: 12px;;
font-family:Tahoma, Geneva, sans-serif;
}

فرادرس

برچسب ها : ، ، ، ، ،