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

السلام عليكم ورحمة الله وبركاته

في درسنا اليوم سوف نتعرف على طريقة تركيب كود أعلاني نصي على مدونات بلوجر وبشكل جديد .

1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر -> قالب -> تحرير قالب HTML .

3- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

4- اضف الكود التالي فوقه .

 /* Iklan Teks GA */
.iklan-teks{position:relative;margin:0;padding:10px;max-height:320px;overflow:hidden}
.iklan-teks div{position:relative;background:#FFF;height:120px;padding:8px 0;margin:0;z-index:1;color:#555}
.iklan-teks h2.iklan-header{position:relative;background:#FFF;font-size:18px;color:#0f7dc8;border-top:1px solid #d8d8d8;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}
.iklan-teks h2.iklan-header:first-child{border-top:0}
.iklan-teks h2.iklan-header:before{content:"";width:0;height:0;position:absolute;top:20px;right:15px;border:5px solid transparent;border-color:#b2b2b2 transparent transparent;cursor:pointer}
.isi-iklan span.judul-iklan{font-size:18px;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:"\f015";font-family:FontAwesome;margin:0 10px 0 0}
.isi-iklan span.panah-besar{color:#fff;background:#e74c3c;border-radius:50%;height:34px;float:right;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}
.isi-iklan span.panah-besar:before{content:"\f0a5";font-family:FontAwesome;margin:0 0 0 3px;font-size:20px}
.isi-iklan span.panah-besar:hover{background:#34495e;color:#fff}
.isi-iklan p.isi{padding:0;margin:0 40px 0 0;color:#555;font-size:12px;text-align:left}

5- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

6- اضف الكود التالي فوقه .

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

7- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

8- اضف الكود التالي فوقه.

 <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('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").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({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});
//]]>
</script>

9- احفظ القالب .

10- بعد ذلك إذهب إلى تخطيط ، ثم أختر من تخطيط إضافة أداة :

11- اضف الكود التالي في صتدوق الأداة ثم احفظ .

 <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('اضف رابط المدونة هنا/');">الصفحة الرئيسية</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('اضف رابط المدونة هنا/');">الصفحة الرئيسية</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('اضف رابط المدونة هنا/');">الصفحة الرئيسية</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>

انقر هنا للمعاينة