کد جعبه دانلود حرفه ای

با سلام . امروز با یک کد کاربردی در خدمت شما هستیم . اگر در اکثر سایت های معروف دانلود دقت کرده باشید برای قرار دادن توضیحات و لینک دانلود از یک جعبه استفاده میکنند . در این پست ما یک جعبه دانلود زیبا برای شما آماده کرده ایم که با استفاده از قدرت CSS ساخته شده است و بسیار زیبا است . جهت دریافت این کد به ادامه مطلب بروید .

" مشاهده دمــــــــــــــو "

در ابتدا این کد را قبل از تگ head قرار دهید 

<style type="text/css"> .dl-p2g a, .dl-p2g li{ -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; } div.dl-p2g{ margin:0; padding:0; background-color: #bfb4b4; box-shadow:0 0 0px 2px #bfb4b4; width:500px; display:block; margin:0px; padding:0; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomleft: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; overflow:hidden; font-family: "B Yekan",Arial, tahoma, Sans-Serif; text-shadow:1px 1px 0px #fff; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; } div.dl-p2g:hover{ margin:0; padding:0; background-color: #878383; box-shadow:0 0 0px 2px #878383; width:500px; display:block; margin:3px; padding:0; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomleft: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-bottomright: 30px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; overflow:hidden; font-family: "B Yekan",Arial, tahoma, Sans-Serif; text-shadow:1px 1px 0px #fff; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; } div.dl-p2g-bg{ width:500px; margin:0; padding:0; border:2px #d4b20b dashed; box-shadow:0 0 25px 0px #00FFFF inset; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomleft: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; background:url('http://icons.iconarchive.com/icons/gakuseisean/aire/128/Download-Folder-icon.png') no-repeat right bottom; overflow:hidden; display:block; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; } div.dl-p2g-bg:hover{ width:496px; margin:0; padding:0; border:2px #d4b20b dashed; box-shadow:0 0 25px 0px #fff inset; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomleft: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-bottomright: 30px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; background:url('http://icons.iconarchive.com/icons/ampeross/ampola/128/downloads-icon.png') no-repeat right bottom; overflow:hidden; display:block; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; } .dl-p2g p:first-child{ font-size:20px; padding:0 33px 0 100px; margin:8px; background:#e3d7d7 url('http://icons.iconarchive.com/icons/ampeross/qetto-2/32/info-icon.png') no-repeat right top; border:2px #000 dashed; box-shadow:0 0 0px 2px #e3d7d7; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; } .dl-p2g p:first-child:hover{ font-size:20px; padding:0 33px 0 0; margin:8px; background: #fff url('http://icons.iconarchive.com/icons/ampeross/qetto-2/32/info-icon.png') no-repeat right top; border:2px #000 dashed; box-shadow:0 0 0px 2px #fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; } .dl-p2g ul{ list-style:none; padding:0; margin:0; } .dl-p2g ul li{ margin:8px; padding:2px 35px 2px 2px; background-color: #e3d7d7; border:2px #000 dashed; box-shadow:0 0 0px 1px #e3d7d7; max-width:250px; background-position:right top; background-repeat:no-repeat; font-size:20px; height:30px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .dl-p2g ul li:hover{ margin:8px; padding:2px 5px 2px 2px; background-color: #fff; border:2px #000 dashed; box-shadow:0 0 0px 1px #fff; max-width:320px; background-position: right top; background-repeat:no-repeat; font-size:20px; height:30px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .dl-p2g ul li.dl{ background-image:url('http://icons.iconarchive.com/icons/martz90/circle-addon2/32/downloads-icon.png'); } .dl-p2g ul li.dl2{ background-image:url('http://icons.iconarchive.com/icons/martz90/circle-addon2/32/downloads-icon.png') } .dl-p2g ul li.hajm{ background-image:url('http://icons.iconarchive.com/icons/martz90/circle-addon2/32/antivirus-universal-icon.png'); } .dl-p2g ul li.pas{ background-image:url('http://icons.iconarchive.com/icons/martz90/circle-addon2/32/xchat-icon.png'); } .dl-p2g ul li.manba{ background-image:url('http://icons.iconarchive.com/icons/martz90/circle-addon2/32/browser-icon.png'); } .dl-p2g ul li a{ color:#000; text-decoration:none; border:0; } .dl-p2g ul li a:hover{ color:#0000FF; text-shadow:0px 0px 2px #000; } </style>

و حالا این کد را در محلی که دوست دارید این کد نمایش داده شود قرار دهید 

<div class="dl-p2g"><div class="dl-p2g-bg"><p>لینک های دانلود و اطلاعات</p> <ul> <li class="dl"><a href="/">دانلود از لینک مستقیم</a></li> <li class="hajm">حجم : 1 مگابایت</li> <li class="pas">پسورد فایل : قالب استور</li> <li class="manba">منبع : <a href="/">قالب استور</a></li> </ul></div></div>

اگر میخواهید این کد را در یک پست قرار دهید 2 راه دارید :

1- در ابتدا کد css را در قبل از تگ head قرار دهید و کد اصلی را در پست قرار دهید ( این کد فقط برای بعضی از سیستم ها سازگاری دارد و پیشنهاد نمیشود

2- کل کد را در پست قرار دهید (در اکثر سیستم ها سازگاری دارد و پیشنهاد میشود)