دکمه دانلود با کدنویسی css3

دسته‌ها : اسکریپت, سی اس اس علی میرزائی 28 دیدگاه‌ها

دکمه دانلود css

سلام، اگه ازمدیران یک سایت دانلود هستید یا حداقل در سایتتون فایل هایی رو برای دانلود میذارید، حتما از نیاز داشتن یک دکمه دانلود (Download Botton) زیبا و متفاوت برای پست هاتون باخبرید، به همین خاطر امروز یک دکمه دانلود شیک و مدرن رو براتون آماده کردم تا از اون در قالب و زمینه های دلخواهتون استفاده کنید  و خدمات و امکانات حرفه ای تری رو در اختیار بازدیدکنندگانتون قرار بدید.
در کد نویسی این دکمه زیبا از کدهای css3 استفاده شده و با تمامی مرورگرها سازگاره و همونطور که تو تصویر میبینید می تونید مشخصه حجم فایل و توضیحات هم بهش اضافه کنید.

دیدگاه کاربران در مورد این نوشته

  1. سلام خواهشا به طور دقیق و کامل توضیح بدید که چطوری این دکمه رو بذاریم تو پست هایی که ارسال میکنیم ؟

    توسط ziya پاسخ

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

    توسط رامین0098 پاسخ

    1. سلام. بله امکانش هست، اما به این شرط که رز بلاگ، امکان دسترسی به کدهای قالب رو داشته باشه.

      توسط علی میرزائی پاسخ

  3. سلام میشه بگین چطور باید این اسکریپت رو نصب کرد دقیقا؟
    ممنون میشم اگه ساده بگین

    توسط علی پاسخ

    1. سلام، میتونید توضیحات رو در لینک زیر مطالعه کنید:
      http://tiny.alimir.ir/d

      توسط علی میرزائی پاسخ

  4. الان دیگه سایتم مشکل پیدا کرده

    توسط محمدعلی فاضلی پاسخ

  5. اگه درست شد چه طور فونتشو بی یکان کنم.فقط برای مبتدیا بگید من مبتدیم

    توسط محمدعلی فاضلی پاسخ

    1. برای این کار میتونید از دستور @font-face در css استفاده کنید.
      http://tiny.alimir.ir/uQ

      توسط علی میرزائی پاسخ

  6. سلام نگاه کنید چه جور شده دکمه؟؟
    bazihub.com/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D8%AA%D8%B1%DB%8C%D9%84%D8%B1-%D8%A7%D8%B2-%D8%A8%D8%A7%D8%B2%DB%8C-%D9%85%D8%A8%D8%A7%D8%B1%D8%B2%D9%87-%D8%AF%D8%B1-%D8%AE%D9%84%DB%8C%D8%AC-%D8%B9%D8%AF%D9%86/
    بعدش تو دیدگاه های بالا میگید کلاس باتون تو ایندکس رو بردارید کجا هست؟؟از چه کدی به بعد رو بردارم؟؟

    توسط محمدعلی فاضلی پاسخ

    1. سلام،
      دوست من نباید کل div ها رو به همراه فراخوانی ماژولها در قالب قرار بدید! پیشنهاد میکنم یکبار لینک زیر رو به دقت مطالعه کنید.
      http://tiny.alimir.ir/d

      توسط علی میرزائی پاسخ

  7. من تا این استایلشو تو استایل قالبم گذاشتم سایتم کا مل بهم ریخت و وقتی دیدم این طوری شدهاستایل قالبم رو دوباره از نو گذاشتم و اون کد دکمه رو پاک کردم ولی سایت درست نشد کد های body و warm رو نگذاشتم

    توسط محمدعلی فاضلی پاسخ

    1. سلام،
      الان سایتتون به درستی لود میشه، ممکنه اون لحظه کش صفحتون فعال بوده باشه.
      در مورد اسکریپت، همونطور که در دمو میبینید مشکلی وجود نداره. نحوه استفاده از اسکریپت رو در دیدگاه های بالایی یا لینک زیر دنبال کنید:
      http://tiny.alimir.ir/d/

      توسط علی میرزائی پاسخ

      1. سلام من اون موقع شانس آوردم ورژن جدید قالب اومده بود اون موقه هم که سایت به هم ریخته بود کش مرور گر رو پاک کرده بودم.

        توسط محمدعلی فاضلی پاسخ

  8. سلام ببخشید می خواستم بدونم محتوی استایل رو کجای شیوه نامه ی قالب بگذارم؟؟

    توسط محمدعلی فاضلی پاسخ

    1. سلام،
      فرقی نداره، فقط داخل پروپرتی یا سلکتورهای دیگه نباید قرار بگیره. (مثلا میتونید در آخر کدهای موجود در شیونامه قرارش بدید.)

      توسط علی میرزائی پاسخ

  9. سلام علی آقا
    من می خوام از این دکمه برای دانلود توی وردپرس به صورت زمینه دلخواه استفاده کنم.
    استایل رو با تغییر نام button در استایل اصلی قالب کپی کردم. اما کد ایندکس رو هرجا که می ذارم فقط دکمه آبی رنگ ظاهر میشه و افکتش بالا و پائینش کار نمیکنه.
    اگر امکان داره آموزش کاملی برای استفاده و گذاشتن این دکمه توی زمینه دلخواه بذارید یا دست کم بنده رو راهنمایی کنید.
    با تشکر

    توسط میلاد پاسخ

  10. این قابلیت رو داره که بخوای کدهاشو تغییر بدیم
    میشه اینکارو برام انجام بدی.هزینشم بگو باهم حساب میکنیم.
    میخوام این قابلیت رو داشته باشه که بتونم دانلود های هرکدوم از کاربرا رو مدیریت کنم که دراین افزونه هست.اما میخوام دکمه دانلودش چین چیزی باشه که در این افزونه کدهای سی اس اس هم میشه تنظیم کرد.

    توسط مهدي پاسخ

    1. به قول یکی از دوستان، هیچی چیز در وردپرس غیر قابل تغییر نیست…
      افزونه ی WP-Filebase رو میگی دیگه؟!؟ از طریق فرم تماس بهم ایمیل بزن تا صحبت ها رو اونجا انجام بدیم…

      توسط علی میرزائی پاسخ

  11. اونکاری که میخواستم انجام بدم رو به راهنمایی دوست عزیزی تصمیم گرفتم از WP-Filebase استفاده کنم.
    فقط میخواستم بدونم میشه این رو رو باهم ادغام کرد.آخه خیلی ازین کد خوشم اومده.
    میشه از اون افزونه استفاده کرد ولی ظاهر دکمه های دانلود رو به اینی که اینجا گذاشتید تغییر داد؟

    توسط مهدي پاسخ

    1. والا با این افزونه کار نکردم، اما اگه استایل پیشفرض داشته باشه میتونی با یه سری تغییرات در نام توابع، فرمش رو به این شکل در بیاری.
      در غیر این صورت میتونی فایل های رو در افزونه آپلود و با تعریف (و استایل دهی) زمینه های دلخواه لینک ها رو در اونجا قرار بدی.

      توسط علی میرزائی پاسخ

  12. میشه یکم راهنمایی کنید؟چون تقریبا تازه با وردپرس دارم کار میکنم و خیلی از افزونه هاش سررشته ندارم. قبلا با فیوژن و e107 کار میکردم

    توسط مهدي پاسخ

    1. والا من خودم از ابتدا با پلاگین download monitor کار کردم، امکانات خوبی داره و میشه گفت تقریبا افزونه ی قدرتمندیه (البته نقایصی هم داره ولی تا اینجا که من مشکل چندانی باهاش نداشتم!)
      با اینحال میتونی تو خود مخزن وردپرس هم سرچ کنی، شاید موردهای جدید و خوبی اضافه شده باشه!
      اینم چند لینک نمونه که شاید یکیش بتونه به دردتون بخوره.
      http://wordpress.org/plugins/download-monitor/
      http://wordpress.org/plugins/simple-download-monitor/
      http://wordpress.org/plugins/download-manager/
      http://wordpress.org/plugins/cm-download-manager/

      توسط علی میرزائی پاسخ

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

    توسط مهدي پاسخ

    1. تو دنیای وردپرس و برنامه نویسی، هیچ چیز نشد نداره…
      بهترین راه کد نویسیه که یه سری پیش زمینه ها رو تو حوزه ی پی اچ پی، پایگاه داده و… میطلبه.
      البته، افزونه های مدیریت دانلود هم داریم که با یه سرچ تو مخزن وردپرس میتونید لیستی از این افزونه ها رو مشاهده کنید.

      توسط علی میرزائی پاسخ

  14. دوست عزیز سلام
    چندی پیش و به صورت اتفاقی با وب‌سایت شما آشنا شدم. به جرات می‌گویم مطالب بسیار خوب و مفیدی دارید و کلا با خوش سلیقگی آن‌ها را انتخاب می‌کنید. یکی از افزونه‌هایی که معرفی کردید خیلی به درد سایت ما خورد و الان که این دکمه دانلود را دیدم، متوجه شدم یکی از موارد بسیار کاربردی دیگر است.
    در وب‌سایت ما بخشی برای دانلود مجلات الکترونیکی داریم که لینک یکی را در پایین می‌بینید:
    http://itresan.com/11253/آی‌تی‌رسان-شماره-۲.html
    برای گذاشتن این کدها، ابتدا فایل ایندکس را با نوت پد باز کردم و کل کد را در متن نوشته گذاشتم.
    سپس قالب استایل را باز کردم و از گزینه .button a { به پایین را در بخش CSS Custom پوسته گذاشتم. نتیجه فقط نشان دادن لوگوی سایت شما و چند نوشته بود که با حرکت موس بر روی آن‌ها، بالا و پایین می‌رفتند.
    متشکر می‌شوم که کمی دقیق این مورد را توضیح دهید چون کمک بزرگی به ما خواهد بود.
    البته اگر تمایل هم داشتید، با توجه به رنک مناسب سایت و بازدید بسیار بالای آن، خوشحال خواهم شد همکاری متقابلی را با یکدیگر انجام دهیم.
    شاد باشید

    توسط پیمان پاسخ

    1. سلام،
      ممنونم دوست عزیز، این نظر لطف شماست.
      تو فایل ایندکس نباید کل کدها رو بردارید چون بخشیش مربوط به نمایش اسکریپته، شما تنها باید از کدهای کلاس button استفاده کنید.
      در مورد کدهای css هم فک کنم بخش بالاش که .button هست رو جا انداختید.
      * این اسکریپت فرم استاتیک داره، برای استفاده در پستهای مختلف باید کدهای زمینه دلخواه رو هم بهش اضافه کنید، پیشنهاد میکنم اگه با زمینه های دلخواه آشنا نیستید ابتدا در گوگل سرچ کنید و با این قسمت بیشتر آشنا شید. کدهاش رو هم در بسیاری از سایتها میتونید پیدا کنید، اگه نتیجه ای نداشت یا مشکلی داشتید بهم ایمیل بزنید تا کامل تر راهنماییتون کنم.
      باعث افتخاره، می خواهید در چه حوزه ای همکاری داشته باشیم؟ (تبادل لینک (لوگو) یا مطلب، کاری و…؟)

      توسط علی میرزائی پاسخ

  15. سلام
    این دکمه چه جوری تو مطالب مون بزاریم واستایل شو چکار کنیم
    من استایل رو در فایل استایل کپی کردم که عکس های صفحه ام رو به هم ریخت
    میشه در مورد گذاشتن استایل ها وطریقه گذاشتن دکمه توضیح بدی

    توسط دانیال پاسخ

    1. سلام.
      ابتدا فایل index رو با notepad یا wordpad ای چیزی باز کنید و محتویات کلاس button رو از اونجا بردارید و درجایی که می خواید استفاده کنید قرار بدید.
      بعد نوبت به فایل استایل میرسه، اون رو هم از کلاس button به بعد کپی کنید و در شیوه نامتون قرار بدید. توجه کنید که کدهای مربوط به body و warp مورد نیاز شما نیستند.
      علت بهم ریختگی سایت شما هم به همین دلیل بوده که کدهای warp و body رو هم کپی کرده بودید.
      * تو برخی قالب های ممکنه قبلا از کلمه ی button استفاده شده باشه! برای این جور مواقع برای اینکه مشکل به وجود نیاد نام کلاس button رو که در index بود تغییر بدید و تغییر نام جدید رو در کدهای css هم اعمال کنید.

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید