كيف تركب اضافة التبادل الاعلاني الخاصة ببلوجر - المطور العربي كيف تركب اضافة التبادل الاعلاني الخاصة ببلوجر

الرئيسية اضافات كل كيف تركب اضافة التبادل الاعلاني الخاصة ببلوجر

الأحد، 28 ديسمبر 2014

كيف تركب اضافة التبادل الاعلاني الخاصة ببلوجر

الكاتب Med Naim

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

وطريقة تركيب هاته الاضافة هي سهلة جدا فكل ما عليك فعله هو التوجه الى مدونتك تم صفحة تخطيط تم عنصر جديد في المكان الدي تريد ان تكون فيه هاته الاضافة واختر بعدها HTML/JAVASCRIPT وضع الكود التالي :

<style>
#advertise{
  margin: auto;
}
 .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; }
 .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; }
 .adss a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
 .adss img { max-height: 75px; max-width: 75px; }
 #adsanime:hover { opacity:0.2; }
 #adsanime a strong {
    -webkit-transition-property: opacity;
     -webkit-transition-duration: 500ms;
     -moz-transition-property: opacity;
      -moz-transition-duration: 500ms; }
 #adsanime a strong {
   opacity:0;
    -webkit-transition-property: opacity, top;
     -webkit-transition-duration: 300ms;
      -moz-transition-property: opacity, top;
       -moz-transition-duration: 300ms; }
 #adsanime {
    opacity:0.5;
     -webkit-transition-property: opacity, top;
      -webkit-transition-duration: 300ms;
       -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms; }
 #adsanime:hover { opacity:1; }
 #adsanime:hover a strong { opacity:1; top:-10px; }
</style> <center>
<div class="adss" id="adsanime">
<a 
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHGRyXCdmQDk-LI1ry3mKx_2TRZzH7Zg3xPs6rfWVgZaiAf4Q_vXfx2nHtV31Yd4_Cxs8RhuioGTyQs4sJj3e1R5LHjmpFWNwYtNh9qoiwWUTqo5v8U0yxQ0rLuuyUQBDegyjn_CV2ck9/s1600/adschange_125-125.jpg" />    <strong>اعلن هنا</strong></a>     </div>
<div class="adss" id="adsanime">
<a
 href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHGRyXCdmQDk-LI1ry3mKx_2TRZzH7Zg3xPs6rfWVgZaiAf4Q_vXfx2nHtV31Yd4_Cxs8RhuioGTyQs4sJj3e1R5LHjmpFWNwYtNh9qoiwWUTqo5v8U0yxQ0rLuuyUQBDegyjn_CV2ck9/s1600/adschange_125-125.jpg" />    <strong> أعلن هنا</strong>     </a
></div>
<div class="adss" id="adsanime">
<a 
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHGRyXCdmQDk-LI1ry3mKx_2TRZzH7Zg3xPs6rfWVgZaiAf4Q_vXfx2nHtV31Yd4_Cxs8RhuioGTyQs4sJj3e1R5LHjmpFWNwYtNh9qoiwWUTqo5v8U0yxQ0rLuuyUQBDegyjn_CV2ck9/s1600/adschange_125-125.jpg" />    <strong>أعلن هنا</strong></a>     </div>
<div class="adss" id="adsanime">
<a 
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHGRyXCdmQDk-LI1ry3mKx_2TRZzH7Zg3xPs6rfWVgZaiAf4Q_vXfx2nHtV31Yd4_Cxs8RhuioGTyQs4sJj3e1R5LHjmpFWNwYtNh9qoiwWUTqo5v8U0yxQ0rLuuyUQBDegyjn_CV2ck9/s1600/adschange_125-125.jpg" />    <strong>أعلن هنا</strong></a>     </div>
<div class="adss" id="adsanime">
<a
 href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHGRyXCdmQDk-LI1ry3mKx_2TRZzH7Zg3xPs6rfWVgZaiAf4Q_vXfx2nHtV31Yd4_Cxs8RhuioGTyQs4sJj3e1R5LHjmpFWNwYtNh9qoiwWUTqo5v8U0yxQ0rLuuyUQBDegyjn_CV2ck9/s1600/adschange_125-125.jpg" />    <strong>أعلن هنا</strong>     </a
></div>
<div class="adss" id="adsanime">
<a
 href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHGRyXCdmQDk-LI1ry3mKx_2TRZzH7Zg3xPs6rfWVgZaiAf4Q_vXfx2nHtV31Yd4_Cxs8RhuioGTyQs4sJj3e1R5LHjmpFWNwYtNh9qoiwWUTqo5v8U0yxQ0rLuuyUQBDegyjn_CV2ck9/s1600/adschange_125-125.jpg" />    <strong>أعلن هنا</strong>     </a
></div>
<div class="adss" id="adsanime">
<a href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHGRyXCdmQDk-LI1ry3mKx_2TRZzH7Zg3xPs6rfWVgZaiAf4Q_vXfx2nHtV31Yd4_Cxs8RhuioGTyQs4sJj3e1R5LHjmpFWNwYtNh9qoiwWUTqo5v8U0yxQ0rLuuyUQBDegyjn_CV2ck9/s1600/adschange_125-125.jpg" />    <strong>أعلن هنا</strong></a>     </div>
<div class="adss" id="adsanime">
<a 
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHGRyXCdmQDk-LI1ry3mKx_2TRZzH7Zg3xPs6rfWVgZaiAf4Q_vXfx2nHtV31Yd4_Cxs8RhuioGTyQs4sJj3e1R5LHjmpFWNwYtNh9qoiwWUTqo5v8U0yxQ0rLuuyUQBDegyjn_CV2ck9/s1600/adschange_125-125.jpg" />    <strong>أعلن هنا</strong></a>     </div>
<div class="adss" id="adsanime">
<a 
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHGRyXCdmQDk-LI1ry3mKx_2TRZzH7Zg3xPs6rfWVgZaiAf4Q_vXfx2nHtV31Yd4_Cxs8RhuioGTyQs4sJj3e1R5LHjmpFWNwYtNh9qoiwWUTqo5v8U0yxQ0rLuuyUQBDegyjn_CV2ck9/s1600/adschange_125-125.jpg" />    <strong>أعلن هنا</strong></a>     </div>
</center>
<a href="http://add-b.blogspot.com/"></a>

وبعد ذلك تضغط حفض, وفي حال اردت وضع صورة موقع ما ورابطه فعليك عندها تغيير رابط الصورة برابط خاص بالموقع او المدونة الذي تريد وضع لها اعلان على مدونتك تم تضيف رابط المدونة مكان # لكن تاكد ان يكون الرابط الذي ستضيفه اسفل المكان الدي وضعت فيه رابط الصورة .
اتمنى ان يكون هدا الشرح الصغير مفهوما ومفيدا وفي انتضار وضح شرح بالفيديو يشرح اكتر كل هاته الاضافات التي شاركناها معكم والقوالب ايضا على مدونتنا . استودعكم الله الذي لا تضيع ودائعه .

Med Naim

إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد. هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة, ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميلً