الاثنين، 10 أغسطس 2015

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

salamo%2B3alaykom%2B-%2BAfkarPro.blogspot

add-gadget-widget-inside-blogger-header+-+www.afkarpro.blogspot.com
أهلاً بكم زوار ومتتبعي مدونة أفكار-برو، الكثير من المدونين خصوصا الذين يستخدمون القوالب غير المعدلة يتساءلون عن كيفية تقسيم الهيدر إلى شطرين، لتخصيص الجزء الأول منها لشعار المدونة (اللوغو)
والجزء الثاني لمساحة إعلانية (إعلانات أدسنس، بنر إعلاني لأحد المواقع بمقابل مادي محدد، أو أي شيء آخر تريده).
وتعتبر هذه المساحة المضافة جِدّْ مميزة بالنسبة لأصحاب إعلانات أدسنس و كسب المزيد من الأرباح، بحيث يمكن أن تضع بها إعلانات 468x60 أو 728x90 حسب عرض اللوغو الذي تستعمله.
%D8%B4%D8%B9%D8%A7%D8%B1+%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9+++%D9%85%D8%B3%D8%A7%D8%AD%D8%A9+%D8%A5%D8%B9%D9%84%D8%A7%D9%86%D9%8A%D8%A9+-+www.afkarpro.blogspot.com
شرح طريقة تقسيم الهيدر إلى شطرين :

1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على تصميم من القائمة الجانبية، و اضغط على تعديل القالب "Edit HTML".
*لا تنسى أخذ نسخة احتياطية من القالب
2- اضغط على CTRL+F للبحث عن (id) السطر التالي :
#header
3- الآن قم باستبدال محتوى (id) أعلاه بالكود التالي :
.header-right {
    display: inline-block;
    height: 90px;
    width: 220px;
    float: right;

    }
.header-left {
    display:inline-block;
    float:left;

    padding: 0px;
    }

4- يمكنك استبدال مايلي حسب الرغبة.

*اللون الأخضر : لتحديد إرتفاع شعار اللوغو (60px إن كنت تريد استخدام إعلان 468x60 ، و 90px في حالة استخدامك لإعلان 728x90).
*اللون الأزرق : لتحديد عرض شعار اللوغو، في حالة استخدامك لإعلان 728x90 يرجى أن لا تتجاوز قيمته 220px).
*اللون الأحمر : أي خاصية "float" ، يمكنك التحكم عن طريقها بمكان الإعلان أو اللوغو في اليمين "right" أو الشمال "left".

5- ثم اضغط على CTRL+F للبحث عن السطر التالي :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

6- و استبدله بالكود التالي :
<b:section class='header header-right' id='header' maxwidgets='1' showaddelement='no'>

7- نبحث للمرة الأخيرة عن أحد الكودين التاليين بالضغط على CTRL+F :
    </div>
</div>
<div class='header-cap-bottom cap-bottom'>
    <div class='cap-left'/>
* إن لم تتمكن من إيجاد الكود أعلاه قم بالبحث عن الكود التالي :
                <b:include name='description'/>
                </div>
            </b:if>
        </b:includable>
    </b:widget>
</b:section>
8- ثم قم بلصق السطر التالي فوق أحد الكودين أعلاه :
<div style='clear:both;'/>

9- في اضغط على "حفظ القالب"،و انتقل إلى صفحة تخطيط حيث ستجد أداة "إضافة أداة" داخل الهيدر، من هناك ستتمكن من إضافة إعلاناتك أو أي شي آخر حسب الرغبة.
%D8%A5%D8%B6%D8%A7%D9%81%D8%A9+%D8%A3%D8%AF%D8%A7%D8%A9+-+www.afkarpro.blogspot.com

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
و دمتم في رعاية الله وحفضه



ـ
img_1315720267_147
روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode
Related-Posts-blogger-widgets

إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد. هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة, ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميلً