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

خیلی از دوستان عزیز سایت در دیدگاه ها از ما پرسیده بودند که کد این اشتراک پیامکی گوشه سایت رو قرار بدیم ، الان هم آموزش و کد دکمه و باز شدن کادر ثابت با استفاده از فناوری 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 قرار بدید.

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

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

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

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

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

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

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

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

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

<?php wp_subscribes(); ?>

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

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

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

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

لینک دانلود

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

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

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