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

أدخل كلمات بحثك

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


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


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

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='https://goo.gl/DwOB2U' 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='https://net-eg.blogspot.com/p/blog-page_15.html' style='background: #F74047' target='_blank'> اضف موقعك هنا مجانا </a></td>
<td align='center' width='25%'>
<a href='https://net-eg.blogspot.com/p/blog-page_15.html' style='background: #F74047' target='_blank'> اضف موقعك هنا مجانا </a></td>
<td align='center' width='25%'>
<a href='https://net-eg.blogspot.com/p/blog-page_15.html' style='background: #F74047' target='_blank'> اضف موقعك هنا مجانا </a></td>
<td align='center' width='25%'>
<a href='https://net-eg.blogspot.com/p/blog-page_15.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- احفظ القالب

منقول من كن مهووس

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

محمد علاء

تنبية هام
لا يسمح بنقل الموضوع بدون ذكر المصدر فى نهاية الموضوع المنقول ووضع رابط الموضوع الأصلى للكاتب

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

  1. برجاء ذكر المصدر فى نهاية التدوينة

    ردحذف
  2. جميل اخي شكرا لك
    هل يمكنك ارسال اكواد صندوق الاقتباس الذي وضعن بداخله هذه الاضافة ؟
    ايميلي : albasit787@gmail.com

    ردحذف
  3. حل المشكل
    div should not appear inside of head

    ردحذف

يسعدنا تفاعلكم بالتعليق، لكن يرجى عدم وضع أي روابط خارجية أو إشهارية حتى ينشر التعليق