أعود لكم بدرس جديد من دروس إضافات بلوجر والذي يتمثل في إضافة صورة الموضوع والعنوان فوق السيدبار ومحتوى الموضوع أي ستكون كالكوفر وهذا ما تمثلة صورة هذه التدوينة وأيضا المثال الذي سنشاهده بالمعاينة، طبعا هذه الإضافة قد تغير الكثير في شكل موقعك من حيث المواضيع لأنها تقوم بأخذ الصورة الرئيسية للموضوع وتفرقها بمكان واسع وواضح... أود أن أذكر أن لها سلبية بسيطة وهي أن لابد أن تضيف كود بداخل كل موضوع لديك لتظهر الصورة فإذا كان لديك أزيد من 100 موضوع قد تجد صعوبة في تحرير كل موضوع وإضافة الكود ولكن إذا أحببتها وتريدها بموقعك فطبعا ستفعل الواجب.
1. ابحث عن </head> وضع الكود التالي فوقه
<b:if cond='data:blog.pageType == "item"'>
<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 == "item"'>
<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>
للقوالب المعدلة إبحث عن هذا <div class='content-wrapper'> : أو هذا : <div class='outer-wrapper'>
* إذا واجهت صعوبة في إيجاده فأدعوك لمراسلتي برابط موقعك عبر مراسلتنا وسأرد عليك بمكانه
<b:if cond='data:blog.pageType == "item"'>
<div class='post-upper'>
<p class='title'>
<data:blog.pageName/>
</p>
<div class='thumb-post'/>
</div>
</b:if>
4. الآن عندما تفتح موضوع إنتقل لتبويب HTML واحذف ما به من كتابة إذا وجدتها ثم إرفع الصورة واختر الحجم الأصلي بعدما تضاف أحذف الكودات المحددة بالأحمر :
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iLPeZk86EgQVhrsGgotRbdYTPgmGZSPrHmxAmsjk7zskdpQawe8B7XXeZkMgD4VMekADsGRNFAT150bOWyv3X4yFtikbgwD7VzGpbgoGeFz0n4q7b5oZW0oz6fTim-DU2r2LCp0P_G8/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/AVvXsEh9iLPeZk86EgQVhrsGgotRbdYTPgmGZSPrHmxAmsjk7zskdpQawe8B7XXeZkMgD4VMekADsGRNFAT150bOWyv3X4yFtikbgwD7VzGpbgoGeFz0n4q7b5oZW0oz6fTim-DU2r2LCp0P_G8/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/AVvXsEh9iLPeZk86EgQVhrsGgotRbdYTPgmGZSPrHmxAmsjk7zskdpQawe8B7XXeZkMgD4VMekADsGRNFAT150bOWyv3X4yFtikbgwD7VzGpbgoGeFz0n4q7b5oZW0oz6fTim-DU2r2LCp0P_G8/s1600/Pop-out-widget.png" /></div>
<div id = "items-thumbnail" class="separator" style="clear: both; text-align: center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iLPeZk86EgQVhrsGgotRbdYTPgmGZSPrHmxAmsjk7zskdpQawe8B7XXeZkMgD4VMekADsGRNFAT150bOWyv3X4yFtikbgwD7VzGpbgoGeFz0n4q7b5oZW0oz6fTim-DU2r2LCp0P_G8/s1600/Pop-out-widget.png" /></div>
انتهى الموضوع والشرح... ومرحبا بالإستفسارات