القائمة الرئيسية

الصفحات

أخر المشاركات

اضافة نمودج الاتصال وصندوق الاشتراك معا

السلام عليكم ورحمة الله وبركاته
نقدم لكم اليوم في هذه التدوينة اضافة نمودج الاتصال وصندوق الاشتراك معا
وهي عبارة عن سلايدر منبثق بتويبين لعرض نمودج
الاتصال وصندوق الاشتراك كلاهما معا


طريقة التركيب:

توجه الى القالب ثم تحرير html
الكود التالي هو كود الزر ضعه في المكان الذي يناسبك

<a class="modal-open" href="#modal-tabbed">اضغط هنا</a>

ابحث عن </head> وضع فوقه الكود التالي

<style>
a.modal-open {
display:block;
padding:20px;
color:#424242;
font-weight:bold;
margin:50px auto;
width:200px;
background:#e0e0e0;
border-radius:2px;
text-align:center;
text-decoration:none;
font-family: droid arabic kufi;
}
.modal {
background:rgba(0,0,0,0.7);
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
bottom:0px;
transition:all .5s ease-in-out;
opacity:0;
z-index:-1;
}
.modal:target {
opacity:1;
transition:all .5s ease-in-out;
z-index:+1;
}
.modal-content {
position:fixed;
top:50%;
left:50%;
width:500px;
background:#fff;
border-radius:4px;
transform:translate(-50%, -200%);
transition:all .5s ease-in-out;
perspective: 1000;
outline:1px solid transparent;
opacity:0;
font-family: droid arabic kufi, sans-serif;
}
.modal:target .modal-content {
transform:translate(-50%, -50%);
transition:all .5s ease-in-out;
transition-delay:.5s;
z-index:9999;
opacity:1;
}
.modal-close {
float:left;
text-decoration:none;
width: 8%;
color:#424242;
font-weight:800;
transition:all .5s ease-in-out;
z-index:+1;
background:rgba(0,0,0,0.1);
text-align:center;
height: 40px;
line-height: 3;
}
.modal-close:hover {
color:#fff;
background:rgba(0,0,0,0.5);
}
.modal-content h3 {
padding:20px;
display:block;
text-align:center;
border-bottom:1px solid #e0e0e0;
text-transform:uppercase;
background:rgba(2,162,239,1);
color:#fff;
border-radius:4px 4px 0 0;
}
.modal-area {
padding:0;
}
.modal-area input[type="radio"] {
display:none;
}
.modal-area label {
float:right;
display:block;
padding:6px 20px;
font-weight:700;
cursor:pointer;
z-index:+2;
background:rgba(0,0,0,.3);
color:#fff;
transition:all .5s ease-in-out;
width: 46%;
text-align: center;
}
.modal-area input[type="radio"]:checked + label {
background:#fff;
color:#424242;
}
.tab-list {
display:block;
padding:20px;
margin:0;
list-style-type:none;
width:100%;
overflow:hidden;
height:460px;
transition: 0.5s;
}
ul.tab-list.clicked {
height: 248px;
}
.tab-list:before {
content:"";
display:block;
height:0;
clear:both;
}
.modal-tab {
display:inline-block;
width:92%;
padding-top:20px;
transform:translateX(-150%);
transition:all 300ms cubic-bezier(0, 0, .40, 1);
opacity:0;
top:0px;
position:absolute;
height:150px;
perspective:1000;
text-align: right;
}
#opentab1:checked ~ .tab-list .tab1 {
transform:translateX(0%);
opacity:1;
}
#opentab2:checked ~ .tab-list .tab2 {
transform:translateX(0%);
opacity:1;
}
</style>

ابحث عن </body> وضع فوقه الكود التالي
ثم قم بتغيير ما يلي 
xxxxx  باسم رابط الخلاصة

اتمنئ ان يكون الموضوع اعجبكم لا تنسى الاشتراك في الموقع ليصلك كل جديد
والي اللقاء في موضوع اخر انشاء الله

reaction:

تعليقات