الكود المثالي لصندوق التبادل الاعلاني ووضع الاعلانات

الكود المثالي لصندوق التبادل الاعلاني ووضع الاعلانات

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

معاينة

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

افتح مدونتك ثم اختر التخطيط

اختر اضافة اداة ثم اختر اداة الــ "HTML/JavaScript"

ثم قم بتسمية الاداة وضع هذا الكود بداخلها ثم قم بالحفظ

<style>
a.tip:hover:after { top: -15px;
    background: none repeat scroll 0% 0% rgba(232, 62, 59, 0.65);
    font-size: 14px;
    color: #FFF;
    content: attr(title);
    display: block;
    right: 7.5px;
    padding: 3px 3px;
    position: absolute;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 86%;
    height: 100%;
}a.tip { position: relative; }
.i3lan-ProFessorPc {text-align:center;margin:0 auto;transition:all 1s ease-out;}
.i3lan-ProFessorPc .sidebar .widget-content,.i3lan-ProFessorPc .sidebar-two .widget-content{padding:0;border:0;}
.i3lan-ProFessorPc .sidebar .widget {margin-bottom:0;padding:0;}
.i3lan-ProFessorPc img {background: #fff; text-align: center; margin: 5px 5px; padding: 3px; border: 1px solid #E0E0E0; vertical-align: 0;}
.i3lan-ProFessorPc  img:hover {background:#fdfdfd;border:1px solid #ff0000;}
</style>
<div class="i3lan-ProFessorPc">

<a class="tip" href="#" target="_blank" title="مساحة اعلانية"><img src="http://c.top4top.net/p_168m54u1.png" alt=".." width="125" height="125" /></a>

<a class="tip" href="#" target="_blank" title="مساحة اعلانية"><img src="http://c.top4top.net/p_168m54u1.png" alt=".." width="125" height="125" /></a>

<a class="tip"#" target="_blank" title="مساحة اعلانية"><img src="http://c.top4top.net/p_168m54u1.png" alt=".." width="125" height="125" /></a> 

<a class="tip" href="#" target="_blank" title="مساحة اعلانية"><img src="http://c.top4top.net/p_168m54u1.png" alt=".." width="125" height="125" /></a> 
</div>

<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=6109045480426282985&amp;widgetType=HTML&amp;widgetId=HTML5&amp;action=editWidget&amp;sectionId=sidebar1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML5&quot;));" target="configHTML5" title="تحرير">
<img alt="" height="18" src="https://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<div class="clear"></div>

اهم الاعدادات

لتغيير الصورة قم بتغيير هذا الرابط : http://c.top4top.net/p_168m54u1.png
لوضع رابط صفحة المعلن "الصفحة المراد الانتقال اليها" : قم بوضعة بدلا عن #
غير كلمة مساحة اعلانية بما تريدة ان يظهر بعد وضع مؤشر الماوس

ملحوظة : لو حصل مشاكل في تصميم الكود داخل المدونة فقط قم بوضع رابط مدونتك في تعليق ثم ساضع لك الكود المناسب لمدونتك