الجمعة، 3 نوفمبر 2017

احصل على هذة الاداة من هنا

قائمة منبثقة بتقنية jquery



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


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


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

    1. توجه الى القالب ثم تحرير html
    2. ابحث عن الوسم ]]></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;
}
  1. ثم ابحث عن  </head>
  2. بعدها ضع الكود التالي اسفله مباشرة
 
<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='https://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='https://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>

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

 
<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>

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


EmoticonEmoticon