بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
پیش فروش دوره جدید " چگونه در سئو شکست بخوریم ؟! " جزئیات بیشتر

ساخت دکمه پرینت در وب سایت بسادگی آب خوردن

مقالات طراحی سایت

در عرض چند ثانیه ، دکمه پرینت کردن صفحه را به وب سایت خودتان اضافه کنید !

0 156
ساخت دکمه پرینت در وب سایت بسادگی آب خوردن

زمانی که کاربران شما در حال مطالعه محتوای سایت شما هستند شاید تمایل داشته باشند تا محتوای این صفحه را پرینت گرفته و یا در قالب یک نسخه pdf داخل سیستم خودشان ذخیره نموده و از آن استفاده کنند . در این حالت شاید اینگونه بگوئید که می‌توان با کلیدهای ترکیبی Ctrl + p فرآیند چاپ صفحه مدنظر هر وب سایتی را انجام داد .

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

شما می‌توانید در تمامی وب سایت ها اعم از سایت های وردپرسی یا سایت هایی که قالب آنها html است ، این دکمه را قرار دهید به این دلیل که این دکمه ربطی به بخش های برنامه نویسی ندارد و کدهای ساخت این دکمه تماما توسط html هستند که در کل وب سایت ها قابل اجراست و البته ایجاد عملکرد این دکمه یعنی انتقال کاربر به قسمت پرینت ، توسط جاوا اسکریپت انجام خواهد شد که اجرای دستورات جاوا اسکریت نیز در تمامی وب سایت ها میسر است .

اگر علاقمند به اجرای دیزاین و طراحی خاص روی این دکمه هستید می‌توانید از Css نیز استفاده کنید تا ظاهر دکمه را با سلیقه خودتان دیزاین کنید .

ساخت دکمه پرینت با html

برای اینکار باید در صفحه مدنظر سایت خودتان کد زیر را قرار دهید :

<a href="#" onclick="window.print(); return false;" class="PrintPage">Print</a>

در این قسمت صرفا یک دکمه توسط تگ a قرار دادیم که توسط یک رویداد جاوا اسکریپتی بنام onclick که رویداد کلیک شدن روی دکمه را کنترل خواهد کرد قرار دادیم که البته داخل این رویداد onclick ، ویژگی window.print قرار دارد که مسبب پرینت شدن کل window یا همان پنجره نمایشی است .

متن دکمه را که ” Print ” است می‌توانید به دلخواه خودتان تغییر دهید ، و برای قسمت ظاهر دکمه نیز می‌توانید استایل دلخواه خودتان را بنویسید که یک نمونه از استایل های این دکمه می‌تواند به شکل زیر باشد :

.PrintPage{
	display:inline-block;
	padding:8px 12px;
	border-radius:6px;
	background-color:#515151;
	color:#faf4f4;
}

در داخل متن دکمه نیز می‌توانید بجای متن ” Print ” از آیکون فونت یا تصویر می‌توانید استفاده کنید . یکی از نکات مهم درمورد پرینت که مربوط به css است اینجاست که می‌توان مشخص کرد کدام المان های صفحه در هنگام پرینت گرفتن ، در چاپ نمایش داده نشده و چاپ نشود و یا حتی تغییراتی روی آنها انجام شود ( برای مثال اندازه فونت برخی قسمت های خاص بزرگتر شود ) . دستور زیر را توجه کنید :

@media print {
  /* All your print styles go here */
  #header,
  #footer,
  #nav {
    display: none !important;
  }
}

توسط این دستور ( که البته داستان آموزشی آن مفصل است ) می‌توان کلاس ها و آیدی های مربوط به المان های داخل هرصفحه را به نوعی تنظیم کرد که هنگام پرینت ، پرینت نشوند .

به همین سادگی و صرفا با قرار دادن یک قطعه کد html و کمی css که دیزاین و ظاهر آن را بهتر کند می‌توانید یک دکمه پرینت برای راحتی کاربران سایت خودتان بسازید . اگر قصد دارید تا هنگام نگه داشتن موس روی دکمه ، یک متن راهنما نیز نمایش داده شود :

title="Print this page"

کد بالا را داخل تگ a اضافه کرده و متن دلخواه را بجای ” Print this page ” داخل آن بنویسید . موفق باشید .

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

چگونه از سلکتور disabled: در css و طراحی سایت استفاده کنیم ؟ طراحی بهتر فرم های وب سایت با انتخاب کننده disabled را در این آموزش یاد بگیرید !

0 107

آیا امکان طراحی قالب و کسب درآمد تنها با یادگیری و تمرین زبان Css امکان پذیر است ؟ یا در این بین باید به سراغ زبان های دیگری نیز رفت ؟ به این سوال مهم در این مقاله به شکل کامل پاسخ خواهیم داد !

4 1,293
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود