به درخواست یکی از کاربران سایت پی سی دی ال این سری برای شما کد جعبه دانلود با طرح فلت آماده کردم. این جعبه دانلود بسیار زیبا با رنگ های روشن و آیکون های متحرک هست. این جعبه دانلود دارای افکتی جالبی هست. کارایی این افکت این هست که زمانی که موس بر روی لینک دانلود میرود ، ایکون تغییر رنگ میده، لینک تغییر رنگ میده و جا به جا میشه ، جلوی لینک دانلود یک متن به صورت چشمک زن به نمایش در میاد. و با بازگشت موس از روی آن این اتفاقات بر میگردد به حالت اولیه.
این جعبه دانلود قالب های سایت چهارده هست و با اجازه مدیر سایتش در سایت پی سی دی ال منتشر شد.
جهت استفاده ابتدا کد زیر رو داخل قالبتون قرار دهید.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!-- Code by : WwW.Pi3idl.Com --> <script src="http://livicons.com/js/jquery-1.9.1.min.js"></script> <script src="http://livicons.com/js/raphael-min.js"></script> <script src="http://livicons.com/js/livicons-demo-1.3.min.js"></script> <style> .pi3idlmainbox{direction:rtl; text-align:right} .box-downloads{background:#f6584c;display:inline-flex;border-radius:1em 1em 0px 0px;width:25%;} .box-downloads b{font-size:25px;margin-top:3px;display:block;float:right;font:13px b yekan,tahoma;color:#f2f2f2;text-shadow:1px 1px 0px #e55247;text-align:right;} .box-downloads span{font-size:25px;margin:3px 6px 1px;display:block;float:right;color:#f2f2f2;text-shadow:1px 1px 0px #e55247;} .download-links{background:#f2f2f2;padding:2px 5px;border-radius:5px 0px 5px 5px;border:1px solid #E5E5E5;} .download-links li:last-child{border-bottom:medium none;} .download-links ul li{transition:all 0.3s ease-out 0s;font:13px b yekan,tahoma;padding:3px 5px;color:#444;margin:2px 0px;border-bottom:1px solid #E5E5E5;list-style:none;} .download-links ul li a{color:#444;text-decoration:none;color:#1a1a1a;transition:all 0.3s ease-out;} .download-links ul li a:hover{color:#e55247;padding:3px 6px;} .download-links ul li p{opacity:0;float:left;transition:all 0.3s ease-out 0s;font:11px tahoma;color:#F6584C;direction:ltr;margin:1px 0px;} @keyframes logo{from{color:#f2f2f2;} to{color:#F6584C}} .download-links ul li:hover p{opacity:0.5;animation:logo 0.6s infinite;} .download-links > ul li:before{font-family:FontAwesome;font-size:13px;margin-left:6px;color:#878787;} </style> <h2 style="position:fixed; top:1000%"><a href="http://pi3idl.com">کد وبلاگ</a></h2> <h2 style="position:fixed; top:1000%"><a href="http://www.pi3idl.com/2014/09/flat-download-box-code/">کد جعبه دانلود فلت</a></h2> <!-- Code by : WwW.Pi3idl.Com --> |
حال کد زیر رو در داخل مطالب سایتتون جهت نمایش جهبه دانلود قرار دهید.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- Code by : WwW.Pi3idl.Com --> <div class="pi3idlmainbox"><div class="box-downloads"><span class="livicon" data-n="cloud-down" data-s="30" data-c="white" data-hc="false"></span> <b>دانلود باکس</b> </div><div class="download-links" itemprop="contentUrl"><ul><li><span class="livicon" data-n="angle-double-left" data-s="20" data-c="silver" data-hc="black" data-hc="true"></span> <a href="http://downloadlink1.com" rel="nofollow" target="_blank">دانلود با لینک مستقیم</a> <p> Download Now! </p> </li><li><span class="livicon" data-n="angle-double-left" data-s="20" data-c="silver" data-hc="black" data-hc="true"></span> <a href="http://downloadlink2.com" rel="nofollow" target="_blank">دانلود با لینک غیر مستقیم</a> <p> Download Now! </p> </li></ul></div></div> <h2 style="position:fixed; top:1000%"><a href="http://pi3idl.com">کد وبلاگ</a></h2> <h2 style="position:fixed; top:1000%"><a href="http://www.pi3idl.com/2014/09/flat-download-box-code/">کد جعبه دانلود فلت</a></h2> <!-- Code by : WwW.Pi3idl.Com --> |
باتشکر ازشما برای سیستم ممدیریت محتوای وردپرس هست
برای تمامی سیستم های مدیریت محتوا میشه استفاده کرد
سلام من کد هارو باید کجا بذارم؟؟؟اگه میشه بیاید تو سایتم بگید ممنون
نیمی از کد داخل قالبتون و باقی کد ها رو داخل مطلبتون که میخواهید جعبه دانلود نمایش داده شود.
با سلام . ممنون از زحماتتون . بسیار زیبا و ساده . کاش فلت همجا بشه . خیلی تمیزه
ممنون استفاده کردیم