كن مهووس: [حصريا] اضافة صندوق التبادل بشكل منزلق

أفضل المواضيع
  • قالب كن مهووس v3
  • أحدث وأضخم باتشات PES 2010 لعام 2016 باخر الانتقالات والاضافات الرهيبة
  • قالبي تدوين وماتلاين المدفوعين على بيكاليكا {تحديث}
  • قالب مدونة نكهة الاصلى مجانا بدون مشاكل
  • Stronghold Crusader 2 The Templar and The Duke-CODEX
  • هذه هي كافة أجهزة سوني التي ستدعم تحديث الأندرويد "مارشميلو 6.0" الجديد
  • تشغيل نت مجانى على خط فودافون
  • اضافة واجهة احترافية v2
  • اضافة صفحة الخطا v2
  • قالب كن مهووس v2 مجانا
نشر في
[حصريا] اضافة صندوق التبادل بشكل منزلق
كتب بواسطة
عدد التعليقات
4 التعليقات

اهلا بكم احبائى الكرام. صندوق التبادل منزلق بشكل خرافى واكثر من رائع حيث يوجد زر موجود فى القائمة فى الهيدر عند الضغط عليه تظهر قائمة التبادل من الاعلى بشكل خرافى وبتاثرات رائعة ويحتوى على التبادل البنرى والنصى بشكل رائع وتاثيرات رائعة


شرح طريقة التركيب

1- توجه الى لوحة التحكم مدونتك => قالب => تحرير html
2- ابحث عن </head> واضف قبله هذة الاكواد

<style>
/* صندوق التبادل منزلق */
.homer{background: #F74047; border: 0; color: #fff;float: right; margin-right: 5px;margin-left: 6px;font-family: &quot;flat-jooza&quot;,sans-serif;font-weight: 700;font-size: 12.69px;}
.fa {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.fa-navicon:before, .fa-reorder:before, .fa-bars:before {content: &quot;\f0c9&quot;;}
#ads-box{background:rgba(255, 255, 255, 0.91); color: #333; font-size: 13px; padding: 20px; position: fixed; width: 900px;
box-shadow: 0px 0px 0px 15px rgba(40, 49, 56, 0.2); z-index: 1000;top: -900px; margin-right: 180px;transition:all .5s}
#ads-box .closebox{background: #68AFEA; color: #fff; padding: 4px 6px; margin: 5px;} .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:#0894D8;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:#FC5401;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; }
.giftort-menu {background: #68AFEA; height: 23px; color: #fff; list-style: none; text-align: center;
cursor: pointer;width:76.9%;margin-right:158px;}
.float-ads-title { width: 260px; background: #254E71; color: #fff; font-size: 17px; font-weight: normal; padding: 6px 6px 7px; border-radius: 2px;}
</style>
3- ابحث عن </body> واضف قبله هذا الكود


&#160; <script src='https://trollvlhcv.googlecode.com/svn/trunk/fortroll/trolllg.js' type='text/javascript'/>
&#160; <!-- initialize the plugin -->
<script type='text/javascript'> //<![CDATA[ 
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width= a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el, k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}(); var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100); 
//]]>
</script>
4- ابحث عن  </head> واضف بعده هذة الاكواد 


<center>
<div id='ads-box' style='list-style:none;margin-top: 120px;text-align: center;'>
<a class='float-ads-title'><i class='fa fa-heart'/> تبادل اعلاني جديد من مهووس المعلوميات</a>
<center>
<style> 
.ads1 {margin-top: 10px;}.db_new-swim-banner125x125 {margin-right: -7px; text-align:center;}
.db_new-swim-banner125x125 img {width:125px; height:125px;margin: 
3px 8px 0 0;}
img.ads1{
border: 1px solid #FCFCFC;
    padding: 3px;
    background: #254E71;
    transition: all .7s ease-out 0s;
    width: 75px;
    margin-left: 0.8px;
    margin-right: -0.9px;
height: 66px;
}
img.ads1-125x125:hover,img#ads-move:hover,img#ads-move:hover,img#ads-move:hover{
zoom: 1;
transition: all 0.2s ease-out;
filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod=&#39;auto expand&#39;);}
img.ads1:hover{background: rgba(44, 62, 80, 0.69);}
img#ads-movehover{background:#444;border: 1px solid #FFFFFF;}
img#ads-move:hover{background:#444;border: 1px solid #FFFFFF;}
img#ads-move:hover{background:#444;border: 1px solid #FFFFFF;}
</style>
<div class='ads1' style='text-align:center;'>
<a href='رابط الموقع' rel='Nofollow' target='_blank'><img class='ads1' id='mohamed-db_new-swim-banner' src='رابط البنر' title='اسم الموقع'/></a>
<a href='رابط الموقع' rel='Nofollow' target='_blank'><img class='ads1' id='mohamed-db_new-swim-banner' src='رابط البنر' title='اسم الموقع'/></a>
<a href='رابط الموقع' rel='Nofollow' target='_blank'><img class='ads1' id='mohamed-db_new-swim-banner' src='رابط البنر' title='اسم الموقع'/></a>
<a href='رابط الموقع' rel='Nofollow' target='_blank'><img class='ads1' id='mohamed-db_new-swim-banner' src='رابط البنر' title='اسم الموقع'/></a>
<a href='رابط الموقع' rel='Nofollow' target='_blank'><img class='ads1' id='mohamed-db_new-swim-banner' src='رابط البنر' title='اسم الموقع'/></a>
<a href='رابط الموقع' rel='Nofollow' target='_blank'><img class='ads1' id='mohamed-db_new-swim-banner' src='رابط البنر' title='اسم الموقع'/></a>
<a href='رابط الموقع' rel='Nofollow' target='_blank'><img class='ads1' id='mohamed-db_new-swim-banner' src='رابط البنر' title='اسم الموقع'/></a>
<a href='رابط الموقع' rel='Nofollow' target='_blank'><img class='ads1' id='mohamed-db_new-swim-banner' src='رابط البنر' title='اسم الموقع'/></a>
</div>
</center>
<center>
<style>
#navlist { margin: 0px auto 0px auto; padding: 5px; list-style-type: none; float: center; display: block;}
#navlist a {-webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #254E71; font-size: 15px;border: 0px solid #254E71; font-size: 14px; text-decoration: none; color: #fff; display: block; text-align: center; line-height: 35px; margin-left: 10px; width: 215px; float: right;transition: all 0.7s ease 0s;
  border-radius: 70px 0px 70px 0px;}#navlist a:hover {border-radius: 0 70px 0 70px;background-color:#254E71;font-size: 14px; display: block; text-align: center;color: #fff; text-decoration: none; background: #3498DB;}#navlist a:before {content: &quot;\f005&quot;; color: #ccc; display: inline-block; font: 14px fontawesome; padding-right: 15px; float: right; bottom: 0; padding-top: 9px;}
</style>
<div class='widget-content'>
<ul id='navlist' style='width: 900px;'>
<table align='center' width='100%'><tbody><tr>
<td align='center' width='25%'>
  <a href='رابط الموقع' target='_blank'> اسم الموقع </a></td>
<td align='center' width='25%'>
  <a href='رابط الموقع' target='_blank'> اسم الموقع </a></td>
<td align='center' width='25%'>
<a href='رابط الموقع' target='_blank'> اسم الموقع </a></td>
<td align='center' width='25%'>
<a href='رابط الموقع' target='_blank'> اسم الموقع </a></td>
</tr></tbody></table></ul>
<ul id='navlist' style='width: 900px;'>
<table align='center' width='100%'><tbody><tr>
<td align='center' width='25%'>
<a href='رابط الموقع' target='_blank'> اسم الموقع </a></td>
<td align='center' width='25%'>
<a href='رابط الموقع' target='_blank'> اسم الموقع </a></td>
<td align='center' width='25%'>
<a href='رابط الموقع' target='_blank'> اسم الموقع </a></td>
<td align='center' width='25%'>
<a href='رابط الموقع' target='_blank'> اسم الموقع </a></td>
</tr></tbody></table></ul>
<ul id='navlist' style='width: 900px;'>
<table align='center' width='100%'><tbody><tr>
<td align='center' width='25%'>
<a href='http://www.the-pro-info2.gq/p/blog-page_49.html' style='background: #F74047' target='_blank'> اضف موقعك هنا مجانا </a></td>
<td align='center' width='25%'>
<a href='http://www.the-pro-info2.gq/p/blog-page_49.html' style='background: #F74047' target='_blank'> اضف موقعك هنا مجانا </a></td>
<td align='center' width='25%'>
<a href='http://www.the-pro-info2.gq/p/blog-page_49.html' style='background: #F74047' target='_blank'> اضف موقعك هنا مجانا </a></td>
<td align='center' width='25%'>
<a href='http://www.the-pro-info2.gq/p/blog-page_49.html' style='background: #F74047' target='_blank'> اضف موقعك هنا مجانا </a></td>
</tr></tbody></table></ul>
</div>
</center>
<input class='closebox' onclick='document.getElementById(&apos;ads-box&apos;).style.top=&apos;-900px&apos;;' title='اغلاق' type='button' value='x'/>
</div></center>
5- ضع كود الزر فى المكان الذى تريده ولكن يوصى بوضع فى الشريط العلوى او القائمة العلوية

<button class='homer ' onclick='document.getElementById(&apos;ads-box&apos;).style.top=&apos;60px&apos;;document.getElementById(&apos;count-box&apos;).style.display=&apos;none&apos;;'><a href='#' style='color:#fff;'><i class='fa fa-bars fa-l'/> مواقع ندعمها </a></button>
6- احفظ القالب

اذا كان هناك اى استفسار او طلب فباب التعليقات مفتوح وركن الاسئلة والطلبات
avatar

تم ذكر المصدر في مدونةنت مصر
https://net-eg.blogspot.com/2016/07/blog-post_25.html

delete 25‏/7‏/2016 3:50 م
avatar

اوك شكرا على وضع المصدر والتوفيق

delete 25‏/7‏/2016 5:51 م
avatar

حل للمشكل
div should not appear inside of head

delete 4‏/12‏/2016 11:18 ص
avatar

تاكد من الخطوة الرابعة جيدا
مذكور ضع الكود بعده ليس قبله

delete 13‏/12‏/2016 12:00 ص

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1-أن يكون التعليق خاص بمحتوى التدوينة
2-أن لا تضع أي روابط خارجية
3-لاضافة كود حوله اولا بمحول الاكواد
4-أي سؤال خارج محتوى التدوينة يرجى التواصل معنا عبر صفحتنا


محول الاكواد الابتسامات





اخبار الهواتف الذكيه
    فريق العمل

    Milad Shenouda

    Front-End Developer

    السيد ابراهيم

    مدير الموقع ومصمم فوتوشوب

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

    اعجب بصفحتنا على الفيسبوك
    ماذا تنتظر !!!
    أنضم الى اعضاء مدونة
    كن مهووس | هوسنا هو سر ابداعنا
    تابعنا الان على تويتر
    فنحن الافضل

    جميع الحقوق محفوظة

    كن مهووس

    2018

    تكويد وتطوير