طريقة جعل صورة الموضوع فوق السيدبار والموضوع

طريقة جعل صورة الموضوع فوق السيدبار والموضوع

يوجد الآن مشاهدة التعليقات : 21

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

السلام عليكم ورحمة الله وبركاته
أعود لكم بدرس جديد من دروس إضافات بلوجر والذي يتمثل في إضافة صورة الموضوع والعنوان فوق السيدبار ومحتوى الموضوع أي ستكون كالكوفر وهذا ما تمثلة صورة هذه التدوينة وأيضا المثال الذي سنشاهده بالمعاينة، طبعا هذه الإضافة قد تغير الكثير في شكل موقعك من حيث المواضيع لأنها تقوم بأخذ الصورة الرئيسية للموضوع وتفرقها بمكان واسع وواضح... أود أن أذكر أن لها سلبية بسيطة وهي أن لابد أن تضيف كود بداخل كل موضوع لديك لتظهر الصورة فإذا كان لديك أزيد من 100 موضوع قد تجد صعوبة في تحرير كل موضوع وإضافة الكود ولكن إذا أحببتها وتريدها بموقعك فطبعا ستفعل الواجب.
شرح طريقة التركيب
1. ابحث عن </head> وضع الكود التالي فوقه
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#items-thumbnail{display:none}
.post-upper{text-align:center;margin:0 auto;padding:20px 0 20px;}
.post-upper p.title{font-size:37px;font-weight:500;line-height:1.3em;color:#fff;margin:0;padding:0;position: absolute; top: 500px; left: 0; text-align: center; right: 0;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.36);z-index: 99;}
.post-upper .thumb-post{text-align:center;margin:0;padding:0}
.post-upper .thumb-post img{width:100%;max-width:100%;height:550px;margin-top:15px;border: 1px solid #dedede;border-radius: 3px;}
h3.post-title,.post-header,.post h1,.post h2{margin:0!important;padding:0!important;height:0!important;font-size:0!important;line-height:0!important;}
p.att-javascript{font-size:150%;text-align:center}
.thumb-post img { -webkit-filter: brightness(0.9); transition: 0.2s all ease-in-out; } .thumb-post img:hover { -webkit-filter: brightness(1); }
</style>
</b:if>
* كما شاهدتم بالمعاينة فمكان العنوان وسط الصورة إذا أردت وضعه خارج الصورة أي بأعلاها فاحذف الكود المحدد بالأحمر
* لتغيير لون الخط فهو محدد بالبرتقالي
* إن لم يرق لك التأثير الذي يضلل على الصورة بالأسود فيمكنك حذفه وهو محدد بالأخضر
2. ضع الكود التالي فوق </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var items=document.getElementById("items-thumbnail"),divs=document.getElementsByClassName("thumb-post");[].slice.call(divs).forEach(function(e){e.innerHTML=items.innerHTML});
//]]>
</script>
</b:if>
3. المرحلة بعد الأخيرة وقد يختلف كل قالب عن هذا الكود: <div class='main-outer'> إذا وجدته ضع الكود الآتي أسفله
للقوالب المعدلة إبحث عن هذا <div class='content-wrapper'> : أو هذا : <div class='outer-wrapper'>



* إذا واجهت صعوبة في إيجاده فأدعوك لمراسلتي برابط موقعك عبر مراسلتنا وسأرد عليك بمكانه
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-upper'>
<p class='title'>
          <data:blog.pageName/>
        </p>
<div class='thumb-post'/>
  </div>
</b:if>
وصلنا للمرحلة الأخيرة من فضلك تذكر أنه يجب أن تكون صورة الموضوع ذات مقاس معقول أي لا تكون صغيرة وهذا المقاس الأفضل 720px x 350px ويفضل أن لا يتعدى حجمها 100kb.
4. الآن عندما تفتح موضوع إنتقل لتبويب HTML واحذف ما به من كتابة إذا وجدتها ثم إرفع الصورة واختر الحجم الأصلي بعدما تضاف أحذف الكودات المحددة بالأحمر :
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-yR56elXEFVU/VjyheFbDpII/AAAAAAAAJNI/-wn6e8O2LFo/s1600/Pop-out-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-yR56elXEFVU/VjyheFbDpII/AAAAAAAAJNI/-wn6e8O2LFo/s1600/Pop-out-widget.png" /></a></div>
بحذف رابط الصورة والإطار سيصبح هكذا :
<div class="separator" style="clear: both; text-align: center;"><img  src="http://3.bp.blogspot.com/-yR56elXEFVU/VjyheFbDpII/AAAAAAAAJNI/-wn6e8O2LFo/s1600/Pop-out-widget.png" /></div>
ثم أضف الكود : id = "items-thumbnail" بعد <div ليصبح هكذا :
<div id = "items-thumbnail" class="separator" style="clear: both; text-align: center;"><img  src="http://3.bp.blogspot.com/-yR56elXEFVU/VjyheFbDpII/AAAAAAAAJNI/-wn6e8O2LFo/s1600/Pop-out-widget.png" /></div>
* طبعا إن كان لديك مواضيع كثيرة فيمكنك فقط نقل الكود الآخير وتغييره بما لديك حتى لا تتكبد العناء ولا تنسى نسخ الصورة ووضعها بدل مكان المحددة بالأخضر
انتهى الموضوع والشرح... ومرحبا بالإستفسارات 
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 21 تعليقًا:

  1. أخي عندما وضعت قالب وجهات النسخة الأول وعندما أدخل لتدوينة معينة تستمر الصفحة في التحديث تلقائيا ما العمل

    ردحذف
    الردود
    1. تم حل المشكل أخي حمله مجددا

      حذف
  2. هل من الميديافاير

    ردحذف
  3. اخى انا لم اجى اى كود من الاكواد اللى فى الخطوة الثالثة
    ماذا افعل وهذا القالب اللى استعملو http://www.rm4na.xyz/
    ارجو ارد سريعا

    ردحذف
    الردود
    1. في قالبك هذا هو المطلوب : main-content container clearfix

      حذف
  4. نجحت معى اخى شكرا لك http://asikjwq.blogspot.com.eg/2016/01/blog-post_82.html
    ولكن هناك شى اخير وهو انا عنوان الموضوع انا لا اريده انا يظهر على الصورة او اعلى الصورة
    انا اريده ان يظعر فى مكانه الطبيعى فوق الموضوع

    ردحذف
    الردود
    1. احذف هذا الكود في الخطوة 3 :
      <p class='title'>
      <data:blog.pageName/>
      </p>

      حذف
    2. لم ينجح اخى لقد اختفى العنوان http://asikjwq.blogspot.com.eg/2016/01/blog-post_82.html
      ولم تنجح

      حذف
    3. جرب حذف هذه الأكواد في الخطوة 1:

      .post-upper p.title{font-size:37px;font-weight:500;line-height:1.3em;color:#fff;margin:0;padding:0;position: absolute; top: 500px; left: 0; text-align: center; right: 0;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.36);z-index: 99;}

      h3.post-title,.post-header,.post h1,.post h2{margin:0!important;padding:0!important;height:0!important;font-size:0!important;line-height:0!important;}
      p.att-javascript{font-size:150%;text-align:center}

      حذف
  5. غير معرف3/09/2016

    اخي لم اجد الخطوة 3
    http://bouaouadv1.blogspot.com/

    ردحذف
    الردود
    1. ابحث عن هذا : <div id="main-mb3">

      حذف
  6. السلام عليكم
    اخى هذه الاضافة مثبتة فى قالب سيو ألوان وتظهر بغير ارادتى وانا أريد ازالتها تماما
    هل ارسل لك نسخه من القالب لتزيلها
    وشكرا على القالب

    ردحذف
    الردود
    1. عليكم السلام يمكنك اخفاء الصورة بخلفية انظر للتعليق اسفله المذكور للأخ animeiat hd

      حذف
  7. السلام عليكم
    اخى هذه الاضافة مثبته فى فقال فقال ألوان أريد معرفة كيف ازيلها أرجوك أريد رد

    ردحذف
    الردود
    1. عليكم السلام الاضافة ليست مثلها في الأكواد... يمكنك وضع لون مكان الصورة بحيث لن تظهر لفعل ذلك ضع هذا الكود
      .mg_intop:after {background: #E24A37!important;}
      فوق ]]></b:skin>

      حذف
  8. اخي لم اجد اكواد http://kamal-ajsame.blogspot.com/

    ردحذف
  9. ابحث عن هذا <div id='main-hossam'>

    ردحذف
    الردود
    1. كيف اقوم بأخفاء الصوره الاولى في مواضيع , وافتقدناك اخي

      حذف
  10. انا مش لافى كلمة head لدى فى البلوجر

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم