دکمه و باز شدن کادر ثابت | اشتراک پیامک

خیلی از دوستان عزیز سایت در دیدگاه ها از ما پرسیده بودند که کد این اشتراک پیامکی گوشه سایت رو قرار بدیم ، الان هم آموزش و کد دکمه و باز شدن کادر ثابت با استفاده از فناوری fade toogle جی کوئری رو قرار هستش با هم مرور کنیم ، پس با ما باشید !

دکمه و باز شدن کادر ثابت | اشتراک پیامک

fade toggle جی کوئری چیست ؟

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

استایل دکمه گوشه سایت و کادر ثابت

ابتدا شما باید چند تا class و id جدید به استایل قالب خودتون اضافه کنید.کدها زیر رو به انتهای کدهای  فایل style.css قالب خودتون اضافه کنید.


.input, #subscribe_name, #subscribe_mobile {
 background: none repeat scroll 0 0 #FFFFFF;
 border: 1px solid #DDDDDD;
 border-radius: 4px 4px 4px 4px;
 box-shadow: 0 0 5px #EEEEEE inset;
 color: #555555;
 margin: 5px 0;
 padding: 5px;
 text-shadow: 1px 1px #FFFFFF;
 transition: all 0.2s linear 0s;
}
#subscribe_mobile {
 direction: ltr;
}
.submit, #submit, #submit_newsletter {
 background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 transparent;
 border: 1px solid #DDDDDD;
 border-radius: 4px 4px 4px 4px;
 box-shadow: 0 0 5px #EEEEEE inset;
 color: #555555;
 padding: 5px;
 text-shadow: 1px 1px #FFFFFF;
}
.submit:hover, #submit:hover, #submit_newsletter:hover {
 background: linear-gradient(to bottom, #E5E5E5 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
 cursor: pointer;
}
.subscribe {
 background: none repeat scroll 0 0 #FFFFFF;
 border: 11px solid #555555;
 border-radius: 10px 10px 10px 10px;
 direction: rtl;
 display: none;
 position: fixed;
 right: 40%;
 top: 20%;
 z-index: 2;
}
#subscribe-sms {
 text-align: center;
 font-family:tahoma;
 font-size:12px;
 width:250px;
}
.subscribe-sms-fixed {
 background:#00a4ed;
 border-bottom: 1px solid #BBBABA;
 border-radius: 5px 5px 5px 5px;
 bottom: 33px;
 color: #FFFFFF;
 left: 30px;
 opacity: 0.7;
 padding: 5px;
 position: fixed;
 text-align: center;
 transition: all 0.2s linear 0s;
 font-family:tahoma;
 font-size:9px;
 padding-bottom:5px;
}
.subscribe-sms-fixed:hover {
 border-bottom: 1px solid #4ACCFF;
 color: #FFFFFF;
 cursor: pointer;
 opacity: 1;
}
.subscribe-sms-fixed p {
 font-weight: bold;
}
.subscribe-sms-fixed p:hover {
}
#subscribe {
 background: none repeat scroll 0 0 #FFFFFF;
 border: 0 none !important;
}
#subscribe tr {
}
#subscribe td {
color:#000000;
 border-bottom: 1px dashed #EEEEEE;
 padding: 5px 12px;
}
#close {
 position: absolute;
 right: 3px;
 top: 2px;
}
#close:hover {
 cursor: pointer;
}

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

دوتا کد هستش ، این کد زیر رو به ابتدای کدهای قالبتون قبل از رسیدن به تگ <head/> قرار بدید.اگر از وردپرس استفاده می کنید باید این کدها رو در فایل header.php قرار بدید.


&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&amp;quot; &amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
$(document).ready(function(){
$(&amp;quot;#search&amp;quot;).click(function(){
$(&amp;quot;#search-form&amp;quot;).fadeToggle();
});
$(&amp;quot;#sms, #sms-2&amp;quot;).click(function(){
$(&amp;quot;.subscribe&amp;quot;).fadeToggle();
});
$(&amp;quot;#close&amp;quot;).click(function(){
$(&amp;quot;.subscribe&amp;quot;).fadeToggle();
});
});
&amp;lt;/script&amp;gt;

فقط دقت کنید خیلی از قالب ها  اون خط دوم کد رو خودشون دارند ، ببینید اگر jquery.min.js داخل قالبتون فراخوانی شده دیگه این کد رو تکرار نکنیدش.

کد دومی که در واقع این کد اون چیزی هستش که داخل سایت نمایش داده میشه ، هر کجای قالب بالای تگ <body/> قرار بدید.اما من توصیه می کنم که در این کد رو اون آخرا دقیقا قبل از تگ <body/> قرار بدین ، چون آخر سر لود میشه و باعث میشه که سرعت بارگزاری سایتتون کم نشه تقریبا.


&amp;lt;div class=&amp;quot;subscribe&amp;quot; style=&amp;quot;display: none;&amp;quot;&amp;gt;
&amp;lt;img id=&amp;quot;close&amp;quot; src=&amp;quot;https://doctorwp.com/wp-content/themes/chertopala/images/close.gif&amp;quot; alt=&amp;quot;close&amp;quot; title=&amp;quot;بستن&amp;quot;&amp;gt;
&amp;lt;p id=&amp;quot;subscribe-sms&amp;quot;&amp;gt;&amp;lt;img src=&amp;quot;https://doctorwp.com/wp-content/themes/chertopala/images/subscribe-sms.gif&amp;quot; alt=&amp;quot;subscribe-sms&amp;quot; title=&amp;quot;کادر ثابت&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p id=&amp;quot;subscribe-sms&amp;quot;&amp;gt;حالا اون متن و یا فرمی که مد نظرتون هست داخل این قالب قرار بدید !!&amp;lt;/p&amp;gt;
&amp;lt;p id=&amp;quot;subscribe-sms&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;http://doctorwp.com&amp;quot;&amp;gt;www.doctorwp.com&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;quot;subscribe-sms-fixed&amp;quot; id=&amp;quot;sms-2&amp;quot;&amp;gt;
&amp;lt;img src=&amp;quot;https://doctorwp.com/wp-content/themes/chertopala/images/mobile.gif&amp;quot; alt=&amp;quot;subscribe-sms&amp;quot; title=&amp;quot;دکمه شما&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;دکمه شما&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;

در این کد از تصاویر اشتراک پیامکی با آدرس این تصاویر در سایت خودم استفاده شده ، شما دیگه خودتون می تونید تغییرشون بدید.

پایان آموزش ! حالا می تونید ازین کد در اشتراک پیامک هم استفاده کنید به طور مثال !

کد اشتراک پیامک

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

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


&amp;lt;?php wp_subscribes(); ?&amp;gt;

اضافه کنید یعنی کد سوم ما که قرار بود قبل <body/> قرار بگیره ، اینطوری میشه.


&amp;lt;div class=&amp;quot;subscribe&amp;quot; style=&amp;quot;display: none;&amp;quot;&amp;gt;
&amp;lt;img id=&amp;quot;close&amp;quot; src=&amp;quot;https://doctorwp.com/wp-content/themes/chertopala/images/close.gif&amp;quot; alt=&amp;quot;close&amp;quot; title=&amp;quot;بستن&amp;quot;&amp;gt;
&amp;lt;p id=&amp;quot;subscribe-sms&amp;quot;&amp;gt;&amp;lt;img src=&amp;quot;https://doctorwp.com/wp-content/themes/chertopala/images/subscribe-sms.gif&amp;quot; alt=&amp;quot;subscribe-sms&amp;quot; title=&amp;quot;اشتراک پیامک&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;?php wp_subscribes(); ?&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;quot;subscribe-sms-fixed&amp;quot; id=&amp;quot;sms-2&amp;quot;&amp;gt;
&amp;lt;img src=&amp;quot;https://doctorwp.com/wp-content/themes/chertopala/images/mobile.gif&amp;quot; alt=&amp;quot;subscribe-sms&amp;quot; title=&amp;quot;اشتراک پیامک&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;اشتراک پیامک&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;

پیش نمایش دانلود اسکریپت

مشاهده پیش نمایش

لینک دانلود

رمز فایل زیپ : www.picor.ir ( آدرس قدیم سایت بودش ! )

 

همچنین در مطالب قبلی سایت کد ” دکمه های ثابت کنار سایت ” آموزش داده بودیم که شبیه این مطلب ما هم بودش.

منبع : این کدها مربوط به آقای مصطفی صوفی از سایت ایران۹۸ می باشند که از ایشون تشکر می کنیم.

امتیاز شما برای این مقاله
43 نظرات
  1. فرزاد می گوید

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

  2. emir می گوید

    سلام
    میشه لطفاً توضیح بدین چطور میشه جای دکمه ی اول رو تغییر داد، کدوم بخش از کدها باید تغییر کنه؟

  3. آرمان می گوید

    سلام داداش
    میشه بگید چطور میشه عرض و ارتفاع کادری که باز میشه رو تغییر داد؟؟؟
    آخه هرچی گشتم نه اثری از width بود و نه اثری از height
    لطفا راهنمایی دقیق کنید

  4. علی می گوید

    سلام!

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

  5. امیر می گوید

    سلام
    عزیز میخواستم بدونم چطور میشه این کادر بدون دکمه کار کنه …
    یعنی اینکه بلافاصله که وارد سایت شدیم این کادر در وسط صفحه نمایش داده بشه بدون اینکه کاربر بخواد دکمه ایی رو بزنه ؟
    تشکر

    1. امیر می گوید

      البته برای html
      نه wp

  6. مخاطب می گوید

    سلام
    وقت به خیر
    از این مطلب شما استفاده کردم (به عنوان دکمه راهنمای قسمتی از سایتم)
    بسیار ممنونم

    البته من مبتدیم ولی به نظر میاد که این قسمت:
    $(“#search”).click(function(){
    $(“#search-form”).fadeToggle();
    });
    هیچ نیازی بهش نیست. و با وجود این قسمت، اگر آی دی جستجوی سایت به نام این تبع باشه (که معمولا هست)، کلیک روی قسمت جستجو، باعث محو شدنش میشه.
    پس بهتره که این قسمت حذف بشه

    موفق باشید

  7. مجتبی می گوید

    سلام یک سوال خیلی مهم …

    من میخام یک لینک داشته باشم که یعد از کلیک کردن کاربر اون کادر اس امس اس باز بشه … چطوری؟

  8. مهرداد می گوید

    سلام . ممنون از آموزشتون . من همه کارا رو انجام دادم و به خوبی داره کاره میکنه ولی یه مشکلی هست اونم اینه وقتی گزینه ارسال شماره فعالسازی رو فعال میکنم و وقتی پیامک میاد برام درونش یه شماره عدد هست . تا اینجا کار درسته ولی زمانی که من عدد رو توی کادر مورد نظر وارد میکنم تا شماره ثبت بشه هیچ تغییری نمیکنه و شماره توی وردپرس همچنان غیرفعال هستش.لطفا کمکم کنید . با تشکر

    1. آرش حیدری می گوید

      سلام
      این مشکل افزونه هستش که بهتر هستش با نویسنده افزونه و انجمن وردپرس پارسی در میان بزارید تا پاسخ شما رو بدم ، ما فقط یک کد برای باز شدن کادر ثابت قرار داده بودیم .
      با تشکر

  9. شایان می گوید

    داداش من میخوام فقط با کلیک کردن روش به یه لینکی هدایت بشه
    باید چیکار کنم؟؟

    1. آرش حیدری می گوید

      خیلی سادست ، بجای پنجره و … فقط کد لینک یعنی پاسخ

  10. وب سایت رسمی کبودراهنگ می گوید

    با عرض سلام و ادب

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

  11. مهیار منتظر می گوید

    سلام،کد رو .قتی قبل از میزارم دکمه نشون داده نمیشه.
    وقتی هم که بعد از میزارمش سرعت لود سایت خیلی میاد پایین.
    چیکار کنم؟

    1. آرش حیدری می گوید

      سلام
      برای این که سرعت بالا لومدن سایت کم نشه ، اونو تو قسمت footer سایتتون قرار بدید.

  12. شایان می گوید

    آیا افزونه ای برای این کار هست؟

    1. آرش حیدری می گوید

      سلام
      من که ندیدم ، یک بار جستجو کنید خودتونم
      با تشکر

  13. مهرداد می گوید

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

    1. آرش حیدری می گوید

      سلام
      حتما یک جا دارید اشتباه می کنید ، دوباره مراحل رو چک گنید و با دقت انجام بدید
      در ضمن کپی کردن مطالب سایت کاره خوبی هستش اما با درج منبع !
      موفق باشید

  14. محمد می گوید

    سلام آقا آرش… در رابطه با سیستم عامل جوملا چطور باید عمل کرد؟

    1. آرش حیدری می گوید

      سلام
      ما تو این آموزش چندتا کد قرار دادیم که ربطی به سیستم مدیریت محتوا ( نه سیستم عامل ! ) نداره …
      داخل همه قالب ها میشه ازش استفاده کرد.

      1. محمد می گوید

        آره :) عجب سوتی بدی دادم… خسته بودم نوشتم سیستم عامل … وگرنه اونقدرها شوت نیستم :) سیستم مدیریت محتوی یا CMS.
        آخه یه جانوشتی:
        اگر از فزونه پیامک وردپرس نوشته آقای مصطفی صوفی استفاده می کنید ….

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

      2. آرش حیدری می گوید

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

      3. محمد می گوید

        بسیار عالی. بنده منظورم همون قسمت داخل کادر بود… حالا 1 تا سوال دکتر عزیز:
        1- ایت پنجره پاپ آپ می رفت زیر عناصر صفحه ام که با تغییر z-index و افزایشش درست شد.. منتهی پونکه قالب من ریسپانسو هست.. این پنجره پاپ آپ حالت ریسپانسیو نداره.. ینی مکانش که fixed و فاصله از راست هم فکر کنم 40% باشه.. توی نمایش پی سی جاش خوبه و مرکز صفحه است اما دیوایس های دیگه مرکز نیست و از حاشیه زده بیرون.

      4. آرش حیدری می گوید

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

  15. waha می گوید

    سلام و خسته نباشید ، ممنون از این مطلب مفید شما !
    فقط الان من یه مشکل دارم ، این کد رو طبق دستور توی سایت وردپری خوردم قرار دادم ولی وقتی کد دوم رو که فرمودید میزارم اسلایدر سایت از کار میوفته ،همچنین فقط عکس مورد نظر سمت چپ میاد با کلیک روش چیزی باز نمیشه ، برمیدارم اسلایدر دوباره درست میشه ولی همچنان با کلیک روی عکس چیزی باز نمیشه !
    ممنون میشم راهنمایی بفرمایید

    1. آرش حیدری می گوید

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

      1. waha می گوید

        با سلام مجدد
        من خط :

        رو پاک کردم (چون فقط با این روش اسلایدر کار میکرد) اسلایدر دوباره کار کرد ولی همچنان با کلیک روی تصویر اتفاق خاصی نمیوفته!

      2. آرش حیدری می گوید

        سلام
        دیدگاهتون کامل نیومده ظاهرا یبار دیگه ارسال کنید
        ممنون

  16. شایان می گوید

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

    1. آرش حیدری می گوید

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

  17. محمد می گوید

    سلام آرش جون.واقعا کارت عالیه .

    یه سوال داشتم.من این دکمه رو همونجوری که توضیح دادی درست کردم.حالا می خوام یه فرم از طریق فرم تماس 7 داخل اون بزارم.وقتی که کد فرم را داخل اون قسمت داخلش کپی می کنم فقط متن اون کد نشون داده میشه مثل این
    [contact-form-7 id="22" title="فرم تماس 1"]

    چیکار کنم .توروخدا راهنمایی کن

    1. آرش حیدری می گوید

      سلام
      خوب shortcode رو نشون نمیده دیگه ، افزونه های در این بابت هستند که می تونید ازشون استفاده کنید یا ببینید اصلا افزونه تماس کد php نداره تا بشه ازش استفده کرد بجای shortcode … جستجو کنید
      اگر باز نتونستید بگید منم سرچ کنم جواب رو پیدا کنم
      تشکر

  18. محمد می گوید

    سلام.
    آقا ممنونم ازتون.
    زحمت کشیدید. هم کاربردی بود هم ساده با توضیحات عالی

  19. محمد می گوید

    میدونم باید ستایل رو ویرایش کنم اما قسمتی که دیرکشن دمکه رو مشخص کرده باشه پیدا نکردم! الان فکر کنم مقدارش left! من میخوام right باشه! چی کنم؟

    1. آرش حیدری می گوید

      راستش امتحان نکردم خودم ، ولی باید فکر کنم مقدارشو خودتون اضافه کنید.

  20. محمد می گوید

    سلام آرش جان ! یه سوال بخوام این دکمه رو سمت راست نمایش بده چی کار کنم؟

    1. آرش حیدری می گوید

      سلام
      طبیعتا باید کدهای شیوه نامه رو ویرایش کنید و دمه رو متناسب با قالب خودتون در جای مشخصش قرار بدید.

  21. رسول می گوید

    سلام خسته نباشید
    برای این که از این اشتراک پیامکی استفاده کنیم باید پنل پیامکی بخریم. ( منظورم اینه که چطور پیامک ارسال میشه و از کجا ارسال میشه )

    1. آرش حیدری می گوید

      بله ، نیاز به وب سرویس هستش.

  22. امین می گوید

    سلام
    آقا این افزونه آماری که آقای مصطفی صوفی نوشتن وقعا درست کار میکنه؟
    اینجوری که این میکه من تو یه هفته 461 بازدید کننده دارم!!!!
    تازه هفته اول افتتحاح سایت

    1. آرش حیدری می گوید

      بهتره که از خوشدون سوال کنید !

  23. جواد می گوید

    سلام
    بسیار کاربردی بود آرش جان
    موفق باشی

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.