اضافة صندوق التبادل بشكل منزلق !

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

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

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- احفظ القالب

qwetq

مدونة تجيك تكنولوجي : مدونة تقنية متواضعه بها عدد كبير من المواضيع الحصرية والمثيرة فى كثير من المجالات مديرها حمزة محمد عمري 17 سنة وطنى الاردن ولكن مقيم فى مصر بلدي الثانيه اعشق التدوين والتقنية .

Pages

mawke3ea