29 يونيو 2016


أصبح التبادل الإعلاني سمة سائدة بين المواقع و المدونات ، و ذلك لما له فائدة و مردود مرضي لدى المتبادلين ، و ذلك بغض النظر عن ترتيب كلا الموقعين في أليكسا أو عدد الزوار ؛ لأن التبادل الإعلاني يعني أن المتبادلين قد أرتضوا بذلك ، فكلاهما يريد الدعم من الأخر . يوجد العديد من الأكواد المستخدمة في عملية التبادل الإعلاني بين المواقع و المدونات مختلفة الأشكال و الألوان و الأحجام ، و من بين هذه الأكواد أخترت لكم الإضافة الأكتر احترافية  و الأسهل إستخداماً و الأقل استخداما لتكون منصتنا للقيام بتبادل إعلاني إحترافي . لن أتكلم كثيراً عن أخلاقيات التبادل الإعلاني ؛ لأنه من البديهي لكلا الطرفين المتبادلين أن يفهموا ما أعنية بأخلاقيات التبادل الإعلاني " احترام مدة التبادل - إستخدام كود التبادل مع مواقع لا تخالف الشريعة الإسلامية ... إلخ ".



شرح تركيب الاضافة
  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>
  1. الان ابحت عن هدا الوسم   <body/> تم ضع الكود التالي فوقه :
<style> .header2 { background: #efefef url(http://1.bp.blogspot.com/-ihNxsNZB5HQ/Vj9Tew30GGI/AAAAAAAAGJU/ShVF-9MWGFg/s0-r/bg-cover.jpg) repeat fixed top center; margin-bottom: 10px; height: 150px; border: 5px solid #fff;}.header2-text { float: right; margin-top: 30px; margin-right: 20px; font-size: 40px; color: #fff; font-family: 'Lobster',ge_ss_threeregular !important;}.header2-text2 { float: right; margin-right: -170px; margin-top: 85px; color: #fff; font-family: 'saudi'; font-size: 20px;} .ads-2 { width: 728px; height: 90px; border: 5px solid #34495E; margin-bottom: 10px; background: white; float: left; margin-top: 30px; margin-left: 20px;}.ads-text-2 { margin-right: 300px; margin-top: 20px; font-family: Droid Arabic Kufi; font-size: 20px; color: #DD5B4B;} </style> <div class='header2'> <div class='header2-text'> رمضان كريم </div> <div class='header2-text2'> نتمنى لكم قضاء افضل الاوقات على المدونة </div> <div class="ads-2"> <div class="ads-text-2"> محترفي الحاسوب <span style=" float: left; background: #DD5B4B; border-radius: 7px; color: white; font-family: Droid Arabic Naskh; font-size: 11px; padding: 3px 5px 3px 5px; margin-left: 250px; ">للتبادل</span> </div> <div class="clear"></div> </div> </div>
  1. قم بوضع هذا الكود في المكان الذي يناسبك في مدونتك
<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 التعليقات

ممكن أخي طريقة إضافة صناديق وضع الأكواد مثل التي في مدونتك (y)

أنا أحتاج إلى كود CSS لتغيير شكلها

شكراً لك اخي حميد دائماً ننتظر جديدك تحياتي لك .

اخي قلي مالم تفهمه ساشرحه لك ؟