دکمه دانلود پیشرفته با کمک CSS

با توجه به اینکه خیلی از دوستان سایت های دانلود دارند و دکمه دانلود بخش اصلی وبشون رو تشکیل میده تصمیم گرفتیم امروز به عنوان یک هدیه یک دکمه دانلود پیشرفته با css براشون آماده کنیم تا با گذاشتن این دکمه حسابی کاربران رو غافلگیر کنند.

این دکمه زیبا که به صورت توسی/نوک مدادی آماده شده (البته از طریق css میتوانید رنگ را تغییر دهید ) به صورتی است که متن “دانلود کنید” با فونت بزرگ به چشم میخورد اما هنگامی که موس روی این دکمه رفت این فونت کوچکتر میشود و نسخه و حجم فایل نمایان میشود. به صورت خیلی زیبا … در صورتی که میخواهید برای وردپرس خود استفاده کنید با تلفیقش با زمینه دلخواه میتوانید یک دکمه اتوماتیک و زیبا آماده کنید
( فایل psd لایه باز هم قرار دادیم ! )
برای دانلود و پیشنمایش همراه ما باشید…

دانلود پیش‌نمایش
مشاوره آموزشی رایگان
شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، از مشاوره رایگان کارشناسان آموزشی مجموعه همیار آکادمی استفاده نمائید.
 
مشاوران آموزشی
همیار آکادمی
پاسخگوی شما هستند
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

334,825 نفر

پاسخی بگذارید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. سلام نمی تونم دانلود کنم میگه لینکی وجود نداره!

  2. سلام
    من میخوام دکمه دانلود مثل سایت شما داشته باشم
    یعنی روش که کلیک میشه پاپ اپ باز بشه و ایمیل رو دریافت کنه
    میشه معرفی کنید

  3. 4 سال عضو همیار وردپرس

    سلام جناب حاجی محمدی …
    بعضی قالب ها با بخش گرافیکی بعضی دکمه ها مشکل دارن …
    بطوریکه زمانیکه دکمه رو قرار میدیم
    در صفحه سایت دکمه بصورت متنی قرار میگیره و هیچ حالت گرافیکی نداره
    برای مثال شما برای قالب banda چه افزونه یا اسکریپتی رو پیشنهاد میکنید؟

  4. همش خوبهفقط نکته منفی اینکه آموزش قرر دادنشو نمیزارید!!
    چه دلیلی داره نمیدونم!

  5. احسنتم.

  6. 6 سال عضو همیار وردپرس

    وقتی global رو به ته style.css اضافه میکنم و تو استایلم index رو اضافه میکنم یکی از بیضی ها بالا یکی دیگه که نسخه و اینچیزا شو مینویسه پایین یکی دیگه هم خالیه پایین پایین بالایه هم دانلود کنید با افکتش میاد.
    چی کار کنم؟؟

  7. ممنون

  8. سلام
    ممنون میشم طریقه ی استفاده از این دکمه رو بگید الان یکساله همه دارن کامنت میذارن آموزش بدین شما حتی یه جوابم نمیدید!
    خب حداقل بگید نمیخوام توضیح بدم ما تکلیفمونو بدونیم 😀

    • 9 سال عضو همیار وردپرس

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

  9. درود
    درست و کامل توضیح نمی دید چرا ؟
    لطف کنید “دقیق” بفرمائید “چه کُدهایی” رو “کجا” بایستی بگذاریم.
    نسیه توضیح میدید چرا ؟
    سه ساعته دارم سعی می کنم این دکمه رو وارد سایتم کنم امّا موفّق نشدم.
    دیگران نیز که سئوال می کنند، میگید “کدها رو وارد کنید توی سایتتون”.
    لطفاً لطفاً “دقیــــــــق” بفرمائید “فلان کد” رو “فلان جا” بگذارید، تا اینقدر گیج نشیم..
    عذرخواهی می کنم اگر لحنم کمی تند بود.
    چرا که هرچه کلنجار رفتم، موقّق نشدم. 🙁
    سپاس فراوان

  10. این آموزشی که گذاشتید کاملاً نا مفهومه کاشکی یک آموزش تصویری از گذاشتن این دکمه می گذاشتید.

  11. سلام ممنون از مطلب جالبتون داداش یه سوال فایلو دانلود کردمچجوری به کد تبدیل کنم یعنی .css رو آپلود کردم کجا بگذارم لای کدوم کد یا میخام نمایش بدم چجور در سایت نمایش بدم کمک میکنید؟

  12. سلام اگه میشه یک آموزش کامل در مورد نصب همین دکمه دانلود بدید هی می گید فایل های اضافی رو آپلود کنید و … کسایی مثل من هستن که تازه کارن و نیاز به آموزش کامل برای نصب همین دکمه دانلود دارند.با تشکر.:-)

  13. با سلام
    آقای حاجی محمدی
    ستفاده از این مدل دکمه ها بسیار مهم و زیباست
    ولی متاسفانه شما با دریافت کامنت های مختلف ،ببخشید مثل گداها از آموزش و نحوه ی تنظیمات آن سر باز می زنید
    پس در صورت امکان یا پست را حذف نمایید و یا اینکه بدون هیچ درخواست و منت کشی آموزش را قرار دهید

  14. ممنون عالی بود

  15. تشکر عالی بود .

  16. کاش منم مثل شما مادرزادی برنامه نویس بودم!!!!!
    اگه اینقدر بلد بودیم که خودمون با دریام ویور طراحی میکردیم.نکنه فقط کپی زدی و خودتم …..ناقلا!!!!

  17. با سلام
    من فونت و فایل CSS رو آپلود کردم و آدرسشون رو جایگذاری کردم اما
    این فایل download.psd رو هم آپلود کردم حالا باید آدرسش رو کجا بزارم؟؟؟؟؟
    توی کدو فایل و کجا؟؟؟؟؟
    لطفا راهنماییم کنید؟؟؟

  18. سلام
    من یه مبتدی هستم میتونید یه آموزش استفاده از این دکمه ها و چگونه قرار دادن اون در سایت معرفی کنید !
    بینهایت تشکر

  19. سلام علی آقا
    داداش من میخوام از دکمه ای استفاده کنم که شما خودتون ازش به عنوان دکمه دانلود استفاده کردید.میشه راهنماییم کنید؟؟؟؟؟

  20. داداش طراحی کردی (کردین D:) یا از اینجا کپی کردی؟؟؟؟؟؟؟؟؟؟؟
    http://boxtuffs.com/files/Download-Me!/slice-download-me/

  21. سلام آقای علی حاجی محمدی نمی خوای جوابمونو بدی حاقل یه راهنمایی بکن داداش

  22. سلام.عزیز میشه بگید من اینو چه جوری تو ادامه مطلب سایتم بزارم.جوری که زمینه دلخواه سایزش و لینک دانلودش تو قسمت پست مطلب سایتم بیاد.میشه به صورت کامل توضیح بدید.بعد منو به این پست هم نفرستید بگید جوابتون اینجاست:d
    http://www.hamyarwp.com/wordpress/%D8%B2%D9%85%DB%8C%D9%86%D9%87-%D8%AF%D9%84%D8%AE%D9%88%D8%A7%D9%87-%D9%88-%D9%86%D8%AD%D9%88%D9%87-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%A2%D9%86-%D8%AF%D8%B1-%D9%88%D8%B1%D8%AF/#
    خواهشن درستو درمون توضیح بده.اگه نیاز به فایله single داری بگو اینجا لینکو میزارم برات

  23. سلام علی جان من اینو خواستم توی وبلاگ خود بذارم ولی یه بگراوند سیاه میگیره چطور ان بگراوند را از بین ببریم که مایل به تمام بگرواند ها شود؟ موفق باشید..

  24. اقا دستت دردنکه.مرسی

  25. سلام : ممنونم که جواب میدید…نتونستم دیگه هر چی از دستم برمیومد انجام نشد
    بالاخره فرق بین آماتور و حرفه ای اینجا مشخص میشه….

  26. خیلی خیلی ممنون آقا علی
    خیلی باحالی
    درضمن ببخشید که تو قسمت سفارش طراحی سوال کردم
    اون یاد گرفتم بعدش بهم می گی باید چی کار کنم؟؟؟

  27. از زمینه های دلخواه استفاده کردن (البته فکر کنم)

  28. من که بالاخره نفهمیدم چجوری شد ، خیلی چیز جالبیه ، موندم تو کف نمیدونم چه جوری وارد کنم؟
    یه فایل css داریم
    یه فایل font داریم
    یه فایل با پسوند eot
    حالا اون سی اس اس رو ببرم تو cpanel و کجا آپلود کنم ؟ یا اینکه باید کدش رو از طریق ویرایش پوسته بذارم بذارم تو doc.php یا header.php ?

    فونت و اون فایل eot رو کجا ببرم ؟ تو روت اصلی آپلود کنم مشکلی نداره؟

    وای خدا دارم دیوونه میشم از این دکمه جذاب ، به خدا آخرش با کمک مدیریت این سایت میذارمش تو سایت خودم…

  29. سلام : کمک کنید اینو بذارم تو سایتم
    قایل سی اس اس و اون فونت کناریش رو دقیقا باید کجا بذارم ؟
    مثلا تو فانکشن یا سربرگ ؟ کجا دقیقا بگید.

    آدرس اون کد چیه ؟ از کجا باید بیارم؟

  30. سلام من این فایل رو دانلود کردم اما در مرحله نصب پیام خطا در نصب داد . میشه راهنمائی کنید .سپاسگذارم
    م تشکر ویژه بخاطر سایت پر محتوای شما دارم

  31. با سلام …من از جوملا توی هاست وب سایت استفاده میکنم …میشه اموزش بدین که چطوری این فایل رو توی جوملا استفاده کنم … خیلی ممنون میشم …اگه کسی بلده لطف کنه و در حق من بزرگواری کنه و آموزشش رو برای من ایمیل کنه..اینم ادرس ایمیل من :
    yaser@europe.com

  32. ببخشد چطور سی اس اس رو واردکنم وجای فایل سی اس اس رو تغیر بدم
    لطفا کمک کنید

  33. چطور این رو تتوی وردپرس بزارم ممنون میشم جوابم رو بدین

  34. سلام جناب یه سوال این کد ها را کجا و چگونه باید بذارم ممنون میشم راهنمایی کنید

  35. سلام . ممنون از این قرار دادن این مطلب . اما می شه آموزش قرار دادن داخل قالب رو هم بزارید . من که گذاشتم داخل هدر هم css رو فرا خوانی کردم . قالب خراب شد . البته من فایل html رو قرار ندادم .اگه یه راهنمایی کلی کنید ممنون میشم

  36. بسیار عالی و موفق باشید

  37. سلام
    من خیلی گشتم… ببین من یه چیزی می خوام مثل همین دکمه های سایت خودتون … که پیش نمایش و دریافت فایل را پایین مطلبم قرار بدم …
    شما از چه افزونه ای استفاده می کنید ؟؟؟

    میشه راهنمایم کنین؟؟

    • آقای حاجی محمدی …فکر میکردم یه تفاوتی بین ما کاربران قدیمی سایت و بقیه هست … حداقل یه راهنمایی می کردین…

  38. سلام.
    من دو تا سوال در مورد این مطلب داشتم:
    1.وقتی این قابلیت رو به قالب اضافه می کنم فونت تمام قالب تغییر می کنه.
    2.به جای اینکه دکمه به طرف چپ بره به طرف راست میره و نسخه ی دانلود زیرش پنهان میشه.
    موفق باشید/.

  39. سلااااااااام. من میخوام این دکمه رو تو وبلاگم بززارم. سرویس دهنده ی بلاگ من بلاگره. لطفا راهنماییم کنید. چطور میتونم اینکارو کنم. ایکاش درکنار فایل سی اس اس اش یه فایل کمکی اچ تی ام ال میزاشتین که ما هم بتونیم استفاده کنیم. منتظر کمکتون هستم.

  40. جالب بود ممنون

  41. چرا این مطالب رو صفحه اول نمیذاری؟
    خیلی حیف هستن…
    مطلب جالبیه 🙂
    منم شانسی از FB اومدم این مطلب رو دیدم.

    • 9 سال عضو همیار وردپرس

      خب عزیزم باید یه فرقی بین هوادارای ما در سایر شبکه های اجتماعی با غیر هوادارها باشه… البته فقط فیس بوک منظورم نیست بقیه شبکه ها هم هستیم

مطالب زیر را حتما بخوانید

    به راحتی باکس دانلود بسازید

    سلامی گرم خدمت شما دوستان عزیز ، مخصوصا اعضای همیار وردپرس ! اول بگم که این نخستین نوشته من در این سایت است و امیدوارم که بتوانم خدمتی هر...

دوره‌های آموزشی