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

پیشنهاد بعدی  ارسال ایمیل هنگام پاسخ به نظرات وردپرس با Subscribe To Comments Reloaded

کد دومی که در واقع این کد اون چیزی هستش که داخل سایت نمایش داده میشه ، هر کجای قالب بالای تگ <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="https://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>

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

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

پیشنهاد بعدی  خبرنامه حرفه ای برای وردپرس با افزونه Email newsletter

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

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

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


<?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 ( آدرس قدیم سایت بودش ! )

 

پیشنهاد بعدی  استخراج ایمیل کاربران در وردپرس با افزونه Export Email

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

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

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 1 رای
Loading...