50 مشروع جاهز ل سكيتشوير Zip

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>

 

كيفية تعديل الإضافة

مايمكنك تعديله هو تخصيص ألوان الإضافة في أكواد Css بما يناسبك.

لتغيير لون خلفية صندوق النافذة المنبثقة أستبدل كود RGB التالي بكود لون يناسبك يمكنك إستبداله بكود لون HEX أيضاً :

rgba(255,255,255,.98)

لتغيير لون النص أستبدل كلمة black بكود اللون المناسب لك :

#mytxtn{color:black;

لتغيير خلفية الزر أستبدل :

#4CAF50

لتغيير لون نص الزر أستبدل :

#fff

أما بخصوص رابط الإنتقال عند الضغط على الزر أو رابط الصورة فوضحنا ذلك في كود HTML السابق وإذا أحتجت لأي مساعدة لا تتردد في ترك تعليق.

والسلام عليكم ورحمة الله وبركاته