إضافة نافذة منبثقة لتحميل تطبيق مدونتك أو شركتك + تخصيصها كما تحب

Welcome To Sketchware Egy

بسم الله الرحمن الرحيم

مقدمة

السلام عليكم ورحمة الله وبركاته أهلاً ومرحباً بكم في مقال وشرح جديد من قسم بلوجر تحية طيبة مباركة أما بعد:

في مقال اليوم نقدم لكم أضافة نافذة منبثقة إحترافية للترويج عن تحميل تطبيق مدوناتكم أو مواقعكم وهذا بدلاً من صفحة هبوط التطبيقات هذه الإضافة بإستخدام HTML,Css,JavaScript وحينما نذكر HTML و Css فهذا يعني أننا نستخدم أحدث إصدارتهما وهما HTML5 و Css3 كما أن هذه الإضافة يمكنك تخصيصها كيفما تشاء.

على سبيل المثال يمكنك تخصيصها ل ( للإشتراك بقناة يوتيوب أو قناة تيلجرام أو جروب واتساب أو صفحة فيسبوك...إلخ ) وفيما يلي بسطور المقال التالية شرح لكيفية تركيب الإضافة وكيفية تعديلها وتنسيقها كما تحب.

كيفية تركيب الإضافة

قبل أي شئ ننصح بأخذ نسخة أحتياطية من قالبك

أولاً : أذهب إلى المظهر > تعديل HTML > أبحث عن وسم <head/>

ألصق أكواد Css التالية أعلاه أي فوقه :

<style type='text/css'>
/* Start Of Box App Code By | Mo Hisham With ♡ */
/* sketchwareegy.blogspot.com */
.BoxApp{user-select:none;box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.98);padding:14px 0;z-index:99;text-align:center;display:none;}

.containertext-center{margin:auto;}

.inst{text-decoration: none;}

.playst{color:#fff;height:40px;width:50%;font:unset;font-weight:normal;font-size:12px;background-color:#4CAF50;border-radius:5px;letter-spacing:1px;outline-color:none;}

.img-app{width:150px;height:150px;border-radius:30px}

#mytxtn{color:black;font-size:20px;}

.closeme{text-align:center;background:#fff;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:red;outline:none;transition:all .3s;border:1px solid red;}

@media (max-width:767px){

.closeme{margin:auto;font-size:12px;top:-17px;bottom:initial;height:26px;width:26px;right:20px;border:1px solid red;background-color:#fff;}

.playst{color:#fff;height:40px;width:80%;font:unset;font-weight:normal;font-size:12px;background-color:#4CAF50;border-radius:5px;letter-spacing:1px;outline-color:none;}

.img-app{width:100px;height:100px;border-radius:15px}

#mytxtn{color:black;font-size:15px;}

}
/* End Of Box App Code By | Mo Hisham With ♡ */
</style>

ثانياً : أبحث عن وسم <body/> وألصق أكواد HTML و JavaScript التالية أعلاه أي فوقه :

<div class='BoxApp'> 
	<div class='containertext-center'> 
  		<img class='img-app' src='ضع هنا رابط ايقونة التطبيق برابط مباشر' title='حمله الآن'/>
		<br /><br />
		<p id="mytxtn" align="center">حمل تطبيق موقعنا الأن !</p>
		<br/>
			<a class='inst' href="ضع هنا رابط تحميل التطبيق" >
 		<button class='playst'>تثبيت</button>
           	</a>  
 		<button class='closeme' title='أغلق هذه الرسالة'>✕</button> 
    		
    </div>
</div>

<script type='text/javascript'> 

//<![CDATA[ 

// BoxApp Script

$(document).scroll(function(){$(this).scrollTop()>380?$(".BoxApp").slideDown('fast'):$(".BoxApp").slideUp('fast')});$(document).ready(function(c){$(".closeme").on("click",function(c){$(".BoxApp").fadeOut("slow",function(c){$(".BoxApp").remove()})})}); 

//]]> 

</script>