كيفية إضافة وحدة إعلانية نصية مشابهة لإعلانات جوجل ادسنس

اليوم في مدون محترف سوف نتبادل بعض المعلومات حول كيفية إضافة وحدة إعلانية نصية مُشابهة لإعلانات جوجل ادسنس النصية، بحيث هذه الإضافة لا تختلف بشيء عن إعلانات جوجل ادسنس. وتعمل بنفس الطريقة التي في الإعلانات بحيث عند مرور مؤشر الماوس على رابط إعلان يتم عرضه بشكل تلقائي، والجميل فيها إنك تستطيع إضافة عنوان الموضوع او المدونة مع ظهور الرابط ووصف المدونة والوانها هادئة ومُلفتة للإنتباه وتثبيتها سهل ولا يحتاج إلى خبرة. يُمكنك معاينة الإضافة عبر الزر التالي.
معاينة

كيفية تركيب الإعلانات

1. ادخل لوحة تحكم بلوجر


2. انقر على تبويب قالب


3. اضغط على تحرير HTML

ابحث عن الوسم </head> و اضف الكود التالي فوقه، إذا كان موجود لا تقم بإضافته

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

الان ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

/* Iklan Teks GA */
.iklan-teks{position:relative;margin:0;padding:10px;max-height:300px;overflow:hidden}
.iklan-teks div{position:relative;background:#FFF;height:120px;padding:8px 0;margin:0;z-index:1;color:#555}
.iklan-teks h5.iklan-header{position:relative;background:#FFF;font-size:12px;color:#0f7dc8;border-top:1px solid #d8d8d8;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}
.iklan-teks h5.iklan-header:first-child{border-top:0}
.iklan-teks h5.iklan-header:before{content:&quot;&quot;;width:0;height:0;position:absolute;top:20px;left:15px;border:5px solid transparent;border-color:#b2b2b2 transparent transparent;cursor:pointer}
.isi-iklan span.judul-iklan{font-weight: 700;font-size:12px;color:#0f7dc8;display:inline-block;cursor:pointer}
.isi-iklan span.url-iklan{font-size:12px;color:#0f7dc8;display:block;margin:8px 0;cursor:pointer}
.isi-iklan span.url-iklan:before{content:&quot;f0c0&quot;;font-family:FontAwesome;float:right;margin:0 0 0 10px}
.isi-iklan span.panah-besar{color:#fff;background:#e74c3c;border-radius:50%;height:34px;float:left;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}
.isi-iklan span.panah-besar:before{content:&quot;f053&quot;;font-family:FontAwesome;margin:0 3px 0 0;font-size:20px}
.isi-iklan span.panah-besar:hover{background:#34495e;color:#fff}
.isi-iklan p.isi{padding:0;margin:0 0 0 40px;color:#555;font-size:12px;text-align:right}

الان ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script type="text/javascript">
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h5 class="iklan-header">
'+b(this).data("header")+"</h5>
")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h5").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({left:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({left:-103},500,"easeInOutExpo")});
//]]>
</script>

الان قم بحفظ القالب ودعنا ننتقل للخطوة الأخيرة

خطوة إضافة الإعلانات تكون على الشكل التالي

1. ندخل لوحة تحكم بلوجر


2. انقر على تبويب تخطيط


3. إضافة أداة جديدة


4. ثم إضافة أداة JavaScript

<div class='iklan-teks iklan-teks-sidebar' id='iklan-teks'>
<!-- iklan ke 1 -->
<div data-header="مدون محترف">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">مدون محترف</span>
<span class='url-iklan' onclick="window.open('/');">http://mudwnp.blogspot.com</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>المدونة الاولى في بلوجر</p>
</span>
</div>
<!-- iklan ke 2 -->
<div data-header="أعلن هنا">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">أعلن معنا</span>
<span class='url-iklan' onclick="window.open('/');">http://www.xxxx.blogspot.com</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>لا تنسى زيارتنا</p>
</span>
</div>
<!-- iklan ke 3 -->
<div data-header="ايجي جيك">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">ايجي جيك</span>
<span class='url-iklan' onclick="window.open('/');">http://www.aegygeek.com/</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>ايجي جيم افضل المدونات التقنية</p>
</span>
</div>
<!-- iklan ke 4 -->
<div data-header="أعلن هنا">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">عنوان مدونتك هنا</span>
<span class='url-iklan' onclick="window.open('/');">رابط مدونتك هنا</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>وصف مدونتك هنا</p>
</span>
</div>
<!-- iklan ke 5 -->
<div data-header="أعلن هنا">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">أعلن هنا</span>
<span class='url-iklan' onclick="window.open('/');">رابط المدونة</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>وصف المدونة</p>
</span>
</div>
</div>

الإعدادات

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