قائمة منبثقة بتقنية jquery بشكل جديد وحصري للبلوجر

السلام عليكم ورحمة

الله وبركاته

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

قائمة منبثقة بتقنية jquery وبتصميم انيق وجذاب

ويمكنك معاينتها من خلال المدونة بالضغط على الزر الموجود في الناف بار

-----------------------------------------------

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

توجه الى القالب ثم تحرير html
ابحث عن الوسم ]]></b:skin> وضع الكود التالي فوقه مباشرة

/* Box Info */
.fixednav li.ortilex-box{color:rgba(255,255,255,1);z-index:2;font:normal 24px FontAwesome;cursor:pointer;float:left;display:inline-block;padding:18.5px 20px;transition:all 0.5s ease-out}
.icon-box{background-color: #ec3636;
    padding: 8px 13px;
    border-radius: 5%;
    color: rgb(255, 255, 255);
    margin-left: 10px;
    border: 2px solid white;}
.icon-box:hover{color:white;background-color:rgba(66,133,244,1)}
.notif-info{background-color:rgba(245,245,245,0.5);border:1px solid #eee;padding:5px 8px;margin-bottom:10px;cursor:pointer;text-align:right}
orti a {
    color: #335775;
}
.notif-info:hover{opacity:0.8}
.notif-info p{font-size: 11px;
    color: #2C3E50;
    margin: 0;
    margin-top: -28px;
    margin-right: 167px;
    /* text-align: right; */
    margin-bottom: 6px;
    background-color: #FFFFFF;
    padding: 3px 16px 2px 0px;
    border: 1px solid #eee;}
#ortilexbox{background:#fff;color:#333;font-size:13px;top:-381px;left:306px;padding:20px;position:fixed;width:320px;box-shadow:0 1px 5px rgba(0,0,0,.1);z-index:100;transition:all .5s}
#ortilexbox .closebox{background:none;color:#999;padding:4px 6px}
.closebox{background:none;border:none;position:absolute;top:0;left:0;cursor:pointer;font-size:18px;font-weight:700;color:#888}
.closebox:focus{outline:none}.closebox:hover{color:#ec5149;opacity:0.5}.closebox:active{color:#ec5149;opacity:1}
#mydonasi{position:fixed;top:-500px;z-index:101;transition:0.4s all ease-in-out}
#myModal{position:fixed;top:-550px;z-index:101;transition:all .4s}
.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%)}
.modal-dialog{position:fixed;top:50px;right:25%;margin:10px;width:100%;max-width:700px}
.modal-content{position:relative;background:#fff;background-clip:padding-box;outline:none;box-shadow:0 2px 5px rgba(0,0,0,.1)}
.modal-header{min-height:16.42857143px;padding:15px;border-bottom:1px solid #e5e5e5}
.modal-header .close{margin-top:-2px}
button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:transparent;border:0}
.close{float:left;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}
.modal-title{margin:0;font-size:120%;font-weight:400}
.modal-body{position:relative;padding:20px;text-align:right}
.modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:left;border-top:1px solid #e5e5e5}
.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent}
.btn-primary{background:#428bca;color:#fff;border:0;border-radius:3px}
#overlay{background:transparent;z-index:100;position:fixed;top:0;right:0;left:0;bottom:0;display:none}
.orti a {
    color: #2C3E50;
}

ثم ابحث عن </head>
بعدها ضع الكود التالي اسفله مباشرة

 

<div id='ortilexbox'>

<div class='notif-info info' onclick='document.getElementById(&apos;myModal&apos;).style.top=&apos;80px&apos;;document.getElementById(&apos;overlay&apos;).style.display=&apos;block&apos;;'><i class='fa fa-gift icon-box' style='padding: 10px 13px;'/><orti><a href='http://profmasterissam.blogspot.com/p/blog-page_27.html'>صفحة الهدايا</a></orti><p>هدايا قيمة لزوارنا الكرام</p></div>

<div class='notif-info' onclick='document.getElementById(&apos;mydonasi&apos;).style.top=&apos;80px&apos;;document.getElementById(&apos;overlay&apos;).style.display=&apos;block&apos;;'><i class='fa fa-info icon-box' style='padding: 10px 16px;background-color:#00BCD4;'/><orti><a href='http://profmasterissam.blogspot.com/p/blog-page_31.html'>سياسة الخصوصية</a></orti><p>حقوق الموقع P.P</p></div>
<input class='closebox' onclick='document.getElementById(&apos;ortilexbox&apos;).style.top=&apos;-381px&apos;;' title='Close this' type='button' value='×'/>

</div>

زر التفعيل يمكنك وضعه في المكان الذي تراه مناسب

 

<li class='ortilex' onclick='document.getElementById(&apos;ortilexbox&apos;).style.top=&apos;60px&apos;;document.getElementById(&apos;count-box&apos;).style.display=&apos;none&apos;;'><i class='fa fa-bars fa-lg'/></li>

اللون الاصفر العناوين
اللون الازرق الروابط

اورتيلكس للمعلوميات

Pages

قائمة منبثقة بتقنية jquery بشكل جديد وحصري للبلوجر

قائمة منبثقة بتقنية jquery بشكل جديد وحصري للبلوجر

المتابعون

معلومات عن التدوينة

تابعونا عبر المواقع الاجتماعية

اعلن هنا مجانا

صاحب المدونة

مؤلف ؟

تبادل اعلاني

زوارنا حول العالم