إعلان أسفل السلايدر 1

إعلان أعلى الموضوع

اضافة نافذه منبثقه لبلوجر لتضع بها ماتريد من ادوات

Mohamed Amrبواسطة   الأقسام: اضافات بلوجر , بلوجر 0 التعليقات
اضافة نافذه منبثقه لبلوجر لتضع بها ماتريد من ادوات




مقدمه
من الصعب جدا وضع كل الادوات وكل الاضافات في صفحه واحده ، مما سيقوم بجعل الصفحه اكبر من الازم او متراكمة الادوات ومزدحمه ، وهذه هي فائدة تلك الاضافة : عمل اداة  في بلوجر بضغطت زر اي انه عندما تضغط علي زر يُفترض انه في اعلي الصفحه : تُفتح لك اداه بشكل انيق في مربع مُنبثق .

تجربة الاضافة 

يمكنك تجربة كيف تعمل الاضافة من خلال زيارة رابط المعاينه
ستجدها موجوده كـ زر بأيقونه في القائمة العلويه :



طريقة التركيب
طريقة تركيب سهله وبسيطه وهي من خلال تواجدك بلوحة تحكم بلوجر :
قم بالدخول  > المظهر > تحرير HTML وقم باضافة الاكواد الاتيه في اماكنها كما هو مذكور


الكود الاول : كود جافا سكريبت الخاص بالاضافة وهو المسؤل عن اعطاء الاوامر للازرار بفتح النافذه
ويوضع هذا الكود فوق الوسم </body>

<script>
var modal2 = document.getElementById('myModal2');

var btn2 = document.getElementById("myBtn2");

var span = document.getElementsByClassName("close2")[0];

btn2.onclick = function() {
    modal2.style.display = "block";
}

span.onclick = function() {
    modal2.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal2) {
        modal2.style.display = "none";
   }
}
</script>


ثم قم بوضع هذا الكود ايضا تحت الوسم <body>


<div class='demo2'>
   
<!-- The Modal -->
<div class='modal2' id='myModal2'>

  <!-- Modal content -->
  <div class='modal-content2'>
    <div class='modal-header2'>
      <h2>
-</h2>
</div>
<div class='modal-body2'>

<b:if cond='not data:view.isLayoutMode'>
      <b:section id='contact'>
      <!-- ضع هنا ماتريد -->
      </b:section>
</b:if>

    </div>
<div class='modal-footer2'>
      <h3>
<span class='close2'>اغلاق</span></h3>
</div>
</div>
</div>
</div>
<br/>


وحسناً ويتبقي لنا الخطوه الاخيره وهي اضافة كود CSS اسفل الوسم <head>



<style>


/** Menu Window 2 **/
.modal2 {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content2 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border-top: 8px solid #4465c1;
    width: 25%;
    box-shadow: 0px 0px 25px #636363;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
.close2 {
    color: white;
    border-radius: 3px;
    padding: 5px 30px 5px 30px;
    float: right;
    font-family: sans-serif;
    cursor: pointer;
    box-shadow: 2px 2px 20px #fff;
    transition: box-shadow 0.3s;
    background: linear-gradient(192deg,#8ac4ff,#474fad);
}
.close2:hover,
.close2:focus {
    box-shadow: 2px 2px 20px #9e9e9e;
  
}
.modal-header2{
    padding: 2px 16px;
    color: #616161;
    margin-right: 5px;
    margin-left: 5px;
}
.modal-body2 {padding: 20px; color :#616161;}
.modal-footer2 {
    padding: 60px 16px;
    color: #616161;
    margin-right: 5px;
    margin-left: 5px;
}
 
 </style>



ومن ثم حفظ القالب ومعاينته ستجد الاضافة ويمكنك تكرار هذه الخطوه مع تغيير id كل وسم اذا اردت اضافة صناديق اخرى ..
اي مساعده ؟ - التعليقات !

الموضوع مازال تحت التحديث ربما تكون هنالك اكواد معطله ، للتبليغ من هنا


التسميات: ,

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)

إعلان أسفل الموضوع