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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmEUdmeptdogIPSWz0tX4mcldwEjB1VnF-Ple0wlP_aij4BkMElUbjk-dtj63n1lM5CtxcTfIDFPV5YZoWreNM6pr_mWRuZxAFBVDaRuyyPY2FF4fXWlzi60yKC6H2x5glMbmiJCfF5HU/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>

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



شرح تركيب الاضافة
  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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmEUdmeptdogIPSWz0tX4mcldwEjB1VnF-Ple0wlP_aij4BkMElUbjk-dtj63n1lM5CtxcTfIDFPV5YZoWreNM6pr_mWRuZxAFBVDaRuyyPY2FF4fXWlzi60yKC6H2x5glMbmiJCfF5HU/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 Blogger تعليقات
Disqus
6 التعليقات
المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar
المشرف
avatar
المشرف
avatar

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

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