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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

السلام عليكم ورحمة الله وبركاته
أعود لكم بدرس جديد من دروس إضافات بلوجر والذي يتمثل في إضافة صورة الموضوع والعنوان فوق السيدبار ومحتوى الموضوع أي ستكون كالكوفر وهذا ما تمثلة صورة هذه التدوينة وأيضا المثال الذي سنشاهده بالمعاينة، طبعا هذه الإضافة قد تغير الكثير في شكل موقعك من حيث المواضيع لأنها تقوم بأخذ الصورة الرئيسية للموضوع وتفرقها بمكان واسع وواضح... أود أن أذكر أن لها سلبية بسيطة وهي أن لابد أن تضيف كود بداخل كل موضوع لديك لتظهر الصورة فإذا كان لديك أزيد من 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg201Px0ROdkLqAajabV-fkBHP7Z7vXgwGF36xJkfXlrowg-srdRoIsQfi5ibGLK64uXu-pYMje3jYl-yXshSHd7x768S510VyrYwPpBBssTfZcayJ8V7IP0LBzzj44aGnCPMJWY7ZXBiM/s1600/Pop-out-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg201Px0ROdkLqAajabV-fkBHP7Z7vXgwGF36xJkfXlrowg-srdRoIsQfi5ibGLK64uXu-pYMje3jYl-yXshSHd7x768S510VyrYwPpBBssTfZcayJ8V7IP0LBzzj44aGnCPMJWY7ZXBiM/s1600/Pop-out-widget.png" /></a></div>

بحذف رابط الصورة والإطار سيصبح هكذا :

<div class="separator" style="clear: both; text-align: center;"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg201Px0ROdkLqAajabV-fkBHP7Z7vXgwGF36xJkfXlrowg-srdRoIsQfi5ibGLK64uXu-pYMje3jYl-yXshSHd7x768S510VyrYwPpBBssTfZcayJ8V7IP0LBzzj44aGnCPMJWY7ZXBiM/s1600/Pop-out-widget.png" /></div>

ثم أضف الكود : id = "items-thumbnail" بعد <div ليصبح هكذا :

<div id = "items-thumbnail" class="separator" style="clear: both; text-align: center;"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg201Px0ROdkLqAajabV-fkBHP7Z7vXgwGF36xJkfXlrowg-srdRoIsQfi5ibGLK64uXu-pYMje3jYl-yXshSHd7x768S510VyrYwPpBBssTfZcayJ8V7IP0LBzzj44aGnCPMJWY7ZXBiM/s1600/Pop-out-widget.png" /></div>

* طبعا إن كان لديك مواضيع كثيرة فيمكنك فقط نقل الكود الآخير وتغييره بما لديك حتى لا تتكبد العناء ولا تنسى نسخ الصورة ووضعها بدل مكان المحددة بالأخضر
انتهى الموضوع والشرح... ومرحبا بالإستفسارات 

• 
  تركيب اضافة مانع الإعلانات بشكل جديد
  بالنسبة لناشري adsense، يمثل مانع الإعلانات تحديًا. فهو يؤدي إلى انخفاض الدخل بش
• 
  اضافة تأثيرات الظل على شعار المدونة
  جعل تأثير الظل يتحرك ذهابا وإيابا على شعار المدونة. هذا التأثير رائع حقا سيعطي لشعار مدون
• 
  كيفية إظهار عدد تعليقات Disqus
  كيف تظهر عدد التعليقات الخاصة بـDisqus بكل سهولة ـ في الواقع، العديد من الطرق منتشرة
• 
  اضافة صفحة الأرشيف لمدونات بلوجر
  اضافة فهرس المواضيع لمدونات بلوجر بشكل احترافي. حان وقت تحديث هذه الإضافة فآخر تدوينة لهذ
• 
  تثبيت محرك بحث مخصص من جوجل
  كيفية تثبيت محرك بحث Google المخصص لمدونات بلوجر، درسنا لهذا اليوم سيكون خفيف الظل. محرك
• 
  استضافة ملفات Javascript و Css بموقع Github
  كما يعلم البعض أن شركة جوجل قامت بالإعلان عن تعطيلها لخدمة إستضافة الملفات منذ عامين

ملحوظة:

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

عن الكاتب : Hussam

إرشادات

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

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

أين تجدنا؟

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


كلمة الختام

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

أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم