یک طراح وب

از من می‌پرسید به نظرم به‌تر هست همیشه برای کارهای‌تان ارزش قائل شوید. چون اولین گام ِ موفقیت، اهمیت دادن به آن کار است. پس چه به‌تر که از همان آغاز، یک شروع ِ جالب داشته باشیم.

بگذریم. می‌خواهیم یک چیز ِ کوچولو درست کنیم که تا زمان ِ آغاز به‌کار ِ سایت یا وبلاگ و یا هرچیز ِ دیگری که هست، تعداد روزها و ساعات ِ باقی‌مانده را برای بازدیدکننده‌گان بشمارد. مثلا بگوید “به‌زودی تا ۵ روز و ۸ ساعت و ۲۷ دقیقه و ۴۰ ثانیه‌ی دیگر سایت افتتاح خواهد شد” یا یک همچین‌چیزی :)

coming-soon

کار ِ سختی نیست. اول، کتاب‌خانه‌ی جی‌کوئری را از اینجا بگیرید (اگر اجازه نداد، از اینجا بگیرید).

سپس این اسکریپت را دریافت کنید.

یک فایل با نام index.html بسازید و کدهای زیر را در آن بگذارید:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>به‌زودی...</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="countdown.js"></script>
</head>
<body>
<center><div id="count_down_container"></div></center>
<script type="text/javascript">
var currentyear=new Date().getFullYear()
var target_date=new cdtime("count_down_container", "december 31, "+currentyear+" 18:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
</body>
</html>

در خط ِ ۱۲، تاریخ ِ مربوط به پایان ِ شمارنده را باید تعیین کنید. مثلا من آن را روی آخرین روز ِ سال گذاشته‌ام. یعنی ۳۱اُم دسامبر و همچنین هجده ساعت هم به آن اضافه کرده‌ام.

حالا دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه کنید:

body {background-color: #ddeef6;}
#count_down_container {color: #e43c01; font: bold 150px Georgia; direction: rtl;}
sup {font: bold 13px Tahoma; color: #666; margin-left: 60px;}

در انتخاب‌گر ِ count_down_container، دستورات مربوط به فونت و ظاهر ِ اعداد ِ شمارنده را تعریف می‌کنیم.

خب، تمام شد دیگر. نمونه‌ی این شمارنده را اینجا ببینید و آن را کامل دریافت کنید:

دیدگاه‌ها (۲۵)

محمد
در ۸۸/۰۷/۱۸ گفت:

سلام , خوبه و خیلی کار آمده :)

قبلا یکی رو دیده بودم که روی روزی که تعیین می کردی گیر می کرد , ولی این بهتره.

ممنون میشم به وبلاگ تازه نفس من هم سری بزنید !

موفق باشید !

پاسخ
محسن
در ۸۸/۰۷/۱۹ گفت:

جدیدا رو هرچی دست می زارم می بینم با جی کوئری انجام شده یا میشه انجامش داد . ضرورتا ایجاب می کند که برویم اصولی یاد بگیریم این قسم را ! شما منبعی سراغ داری عجالتا ؟ ( البته غیر از شخص شخیص جنابتان )

پاسخ
محمد
در ۸۸/۰۷/۲۰ گفت:

@محسن

با اجازه صاحب بلاگ :)

شما به سایت خودش برید یا دنبایل jquery chm manual در گوگل باشید !

با تشکر

پاسخ
Ali
در ۸۸/۰۷/۲۱ گفت:

سلام ، فکر نکنم اینجا از جی کوئری اصلا استفاده کرده باشید ها! نه اون اسکریپت پلاگین جی کوئری هست نه تو صدا زدنش از جی کوئری استفاده شده

پاسخ
علیرضا
در ۸۸/۰۷/۲۱ گفت:

@Ali
بله درست می‌فرمایید. این مقاله دو قسمتی هست و استفاده‌ی جی‌کوئری‌مون هم در قسمت ِ بعدی هست که سعی می‌کنم به‌زودی منتشرش کنم :)

پاسخ
مصطفی مقدم
در ۸۸/۰۷/۲۲ گفت:

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

پاسخ
گرافیست، شوخ، تلخ...
در ۸۸/۰۷/۲۴ گفت:

میشه گذاشت واسه تمام شدن سال تحصیلی جدید :))

مرسی علیرضا :)

پاسخ
امید
در ۸۸/۰۷/۲۶ گفت:

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

پاسخ
علیرضا
در ۸۸/۰۷/۲۶ گفت:

@امید
این به‌خاطر فـیــلـتریـنـگ مخابرات هست، یکی از دوستان مطلب کاملی در این مورد نوشته:
http://web3b.wordpress.com/2008/07/02/fiilter-all-blog-publish-post-to-wordpress-and-blogger/

پاسخ
voltan
در ۸۸/۰۸/۰۲ گفت:

بسیار عالیه ! دستت درد نکنه ! توی وبلاگ های فارسی که من سرمیزم وب لاگ شما بیش از همه در مورد جی کوری مینویسه !

پاسخ
سیدمصطفی
در ۸۸/۰۸/۰۳ گفت:

سلام
بدون دانلود jQuery کد اجرا شد!! :)
کلاً از آموزشهاتون تشکر زیاد.

پاسخ
علیرضا
در ۸۸/۰۸/۰۳ گفت:

@سیدمصطفی
مراجعه کنید به این کامنت :)
http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/#comment-1732

پاسخ
الهیار
در ۸۸/۰۸/۰۵ گفت:

مرسی با تایمر حال کردم D:

پاسخ
آرش
در ۸۸/۰۸/۱۹ گفت:

ممنون. تو سایتم از این کد استفاده کردم.

پاسخ
vaxiti
در ۸۸/۰۸/۲۰ گفت:

مفید بود مرسی

پاسخ
ممد
در ۸۸/۰۹/۱۸ گفت:

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

پاسخ
علیرضا
در ۸۸/۰۹/۱۸ گفت:

@ممد
احتمالا اگر تاریخ رو به‌صورت شمسی دربیاریم دیگه مشکلی نداشته باشه. تست نکردم البته خودم..

پاسخ
ممد
در ۸۸/۰۹/۱۸ گفت:

چطوری باید این کار را کرد؟ می‌شه توضیح بدید؟ ممنون.

پاسخ
Funi69
در ۸۸/۱۰/۲۴ گفت:

سلام علی جان
واقعا وبلاگ پروحتوا و آموزنده ای داری
خیلی حال کردم
فقط من یه اسکریپتی، چیزی میخوام که از یه تاریخ مشخص که بهش میدیم ثانیه ثانیه اضافه بشه
زیاد شونده باشه
مثلا از ۱/۱/۲۰۱۰ بشماره سال، ماه، روز، ساعت، دقیق، ثانیه و اگر شد صدم ثانیه
با تشکر منتظر مطالب جدیدتریت هستم

پاسخ
علیرضا
در ۸۸/۱۰/۲۶ گفت:

عالی بود :)

پاسخ
محمد
در ۸۸/۱۲/۰۴ گفت:

خیلی عالی بود ولی ای کاش فایل pdf هر آموزش رو هم قرار بدید که ما بتونیم پیشمون نگه دایم

پاسخ
محمد
در ۸۸/۱۲/۰۵ گفت:

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

پاسخ
mohammad
در ۸۸/۱۲/۱۸ گفت:

MER100-80 KHEYLI KHOB BOD

پاسخ
NASA_DE
در ۸۸/۱۲/۱۸ گفت:

سلام یک طراح وب !
از بابت این اموزش و کارهای Open Source ای تون ممنونم.
از این شمارنده در وبلاگ خودم استفاده کردم.
____________________________________________
در مورد استفاده از ای جکس در بلاگ های WordPress هم
در صورت امکان اطلاعاتی رو قرار بدید.

پاسخ
محمدرضا
در ۸۹/۰۶/۱۴ گفت:

سلام . این افکت لودینگ برای تصاویر که در همین سایت هم استفاده میشه رو میتونین توضیح بدین.
که تا قسمت مورد نظر لود نشه عکس با افکت fade in میاد

پاسخ