مدونة المهندس العربي

الاثنين، 14 مايو 2012

نافذة منبتقة باعلانات جوجل ادسنس

نافذة منبتقة باعلانات جوجل ادسنس •• لأول مـرة !

السلام عليكم و رحمة الله تعالى وبركاته ،في هده التدوينة ان شـــاء الله سنتعلم طريقة جديدة لأدراج إعلانات الأدسنس على طريقة المواقع الكبيرة ودلك باستخدام طريقة " النافدة المنبتقة" أو ما يصطلح عليها بالإنجليزية "Pop-up-window" حيت تعد هده طريقة لا بأس بها لإغناء رصيدكم من الأدسنس وربح مزيد من الدولارات الإضافية ،واضفاء بعض الجمالية على مدونتك ان شاء الله...

صورة للإضافة....مع طريقة التركيب على مدونات بلوجـــــــــر...

قم بالذهاب الي تصميم ثم الي تحرير HTML. تم قم بتوسيع القالـب

ابحث عن هذا الكود </head> باستخدام CTRL+F .

انسخ الكود الموجود بالاسفل وضعه قبل هذا مباشرة </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>  
  jQuery(document).ready(function() {

   function on_Scroll_Resize()  {
    var wh = jQuery(window).height();
    var pph = jQuery("#popupslider").height();
    var fromTop = jQuery(window).scrollTop()+50;
    
    jQuery("#popupslider").css({"top":fromTop});
   }

  jQuery(window)
        .scroll(on_Scroll_Resize)
        .resize(on_Scroll_Resize)



    //alert(jQuery.cookie('sreqshown'));
 
       //var ww = jQuery(window).width();
       //var ppw = jQuery("#popupslider").width();
       //var leftm = (ww-ppw)/2;
       var leftm = 0;

       //var wh = jQuery(window).height();
       //var pph = jQuery("#popupslider").height();
       //var fromTop = (jQuery(window).scrollTop()+wh-pph) / 2;

       jQuery("#popupslider").animate({opacity: "1", left: "0" , left: leftm}, 1000).show();        


   jQuery("#closepp").click(function() {
     jQuery("#popupslider").animate({opacity: "0", left: "-300"}, 1000).show();
   });

});
</script>

احفظ قالب مدونتك.

قم بالذهاب مره اخرى ---->>>> الي عناصر تصميم الصفحه.

* قم باختيار انشاء اداه جديده من النوع HTML/javascript

* انسخ الكود الموجود بالاسفل واضفه للأداة.

<b:if cond='data:blog.pagetype == 'item'>
<div
id="popupslider" style="position: absolute;width:250px;height:280px;background:#222;top:50px;border:1px solid #929292;z-index:999;display:none;padding:10px;left:-300px;">
<p style="font-size:12px;font-weight:bold;color:green!important;"><a  style="color:#00FF00!important;"> Promotions </a> 
<a href="#" id="closepp" style="color:red!important;" onclick="return false;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlRjH6o1asBc1aPi68pMsyQc61kr6ga0-ZsIhPxV4_tn-Qa3QLtlQb1yIXgb8X7IiamW1Wy07Rz9ePuWvFWXA72WluOBkhn9opp0TeHIupZbHqALZRIq7p7JhXOR4dNvf17YgRIBpUxrb3/s1600/close+2.png" align="right" /> </a></p>

الكوود المحول هنا:موقع المهندس العربي
<center><a href="ADD HERE YOUR FEEDBURNER URL" title="Subscribe To Our Rss Feed"><img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgALj7KWFLxbEPEYqwW129iwF4TYWUSToF96hVVqT3FKc1i1z0Zp-9L8uf9JYlCEg42QNV1vUqgjgDcj1ZKvQngXzLqhX_F8fKUO3xGYD4JV17hUNGwVHDuuzPYqraRRNoH9PLPaTt_qFsX/s320/subscribe-rss-green.jpg"/></a></center></div
id="popupslider">
</b:if>
</div>
<div class='clear'></div>

ملاحظه:- قم بتغيير ما كتب بالأحمر بإعلان أدسنس بقياس عرض-250 و ارتفاع-250

قبل يجب تحويله بالأداة التالـــــــية : هنا

انسخ الكوود المحول واصلقه بالأداة الجديدة

تم بحمد الله ...تحباتي -->

شرح كامل | عدل "إقرأ المزيد" على طريقة المحترفين

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

أهلا و سهلا بجميع الزواار و متتبعي مدونة المهندس العربي،،،

،، في هده التدوينة سنرى كيفية إجراء تعديل جميل على تدوينات مدونتك،، ودلك بتغير شكل "اقرأأ المزيد" الإفتراضية لمدونتك بشكل اخر جميل ماقد يضفي جمالية لتدويناتك...

متال حي على الإضــــافة : من هنا

تابعواا معنا خطوات التطبيق.....

نتجـــه ،،

تصميم ----> تحرير html ----> تم نفعل توسيع القالـــــــــب،،

نضغط ،،

crtl+F

الان ابحث عن الجزء التالي (اضغط للبحث) :

<data:post.jumpText/>

واستبدله بالكود التالي:

يمكنك تغيير الجزء الملون من الكود برابط الصورة التي تريدها
اعمل "حفظ القالب"

تم بحمد الله.،،

تحياتي لكم.

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

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

متال على الخاصـية...

طريقة الإضــــافة :

عند كتابتك للتدوينة اتجه للتحرير HTML

تم اضف الكود التالي بالمكان الدي ترغب بــــــــه

مع تغيير ما كتب بالأحمر برابط الموقع الدي تريد استعراضـــه