3 ديسمبر 2015

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

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

كيفية إضافة وحدة إعلانية نصية مُشابهة لإعلانات جوجل ادسنس النصية، بحيث هذه الإضافة لا تختلف بشيء عن إعلانات جوجل ادسنس

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


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

  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>

الإعدادات

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

سوف تجد الاكواد هذه مكررة اكثر من مرة نستبدلها كلها
اتمنى ان يكون الدرس اعجبكم
لا تنسوا مشاركته مع اصدقائكم

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

هناك 8 تعليقات :

  1. مشكور بارك الله فيك

    ردحذف
  2. غير معرف04 ديسمبر, 2015

    أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. اعتذر منك لا ننشر روابط إشهار

      حذف
  3. شكرا عزيزى ع الموضوع الاكثر من رائع

    ردحذف
    الردود
    1. لا شكر على واجب صديقي
      شكراً لمرورك

      حذف
  4. أخي ممكن تساعدني لوجه الله تعالى

    ردحذف
    الردود
    1. إذا بإستطاعتي من عيوني يا غالي

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r