12‏/11‏/2015

السلام عليكم ورحمة الله وبركاته
أعود لكم بدرس جديد من دروس إضافات بلوجر والذي يتمثل في إضافة صورة الموضوع والعنوان فوق السيدبار ومحتوى الموضوع أي ستكون كالكوفر وهذا ما تمثلة صورة هذه التدوينة وأيضا المثال الذي سنشاهده بالمعاينة، طبعا هذه الإضافة قد تغير الكثير في شكل موقعك من حيث المواضيع لأنها تقوم بأخذ الصورة الرئيسية للموضوع وتفرقها بمكان واسع وواضح... أود أن أذكر أن لها سلبية بسيطة وهي أن لابد أن تضيف كود بداخل كل موضوع لديك لتظهر الصورة فإذا كان لديك أزيد من 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>
* طبعا إن كان لديك مواضيع كثيرة فيمكنك فقط نقل الكود الآخير وتغييره بما لديك حتى لا تتكبد العناء ولا تنسى نسخ الصورة ووضعها بدل مكان المحددة بالأخضر
انتهى الموضوع والشرح... ومرحبا بالإستفسارات 
السلام عليكم ورحمة الله وبركاته
أعود لكم بدرس جديد من دروس إضافات بلوجر والذي يتمثل في إضافة صورة الموضوع والعنوان فوق السيدبار ومحتوى الموضوع أي ستكون كالكوفر وهذا ما تمثلة صورة هذه التدوينة وأيضا المثال الذي سنشاهده بالمعاينة، طبعا هذه الإضافة قد تغير الكثير في شكل موقعك من حيث المواضيع لأنها تقوم بأخذ الصورة الرئيسية للموضوع وتفرقها بمكان واسع وواضح... أود أن أذكر أن لها سلبية بسيطة وهي أن لابد أن تضيف كود بداخل كل موضوع لديك لتظهر الصورة فإذا كان لديك أزيد من 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>
* طبعا إن كان لديك مواضيع كثيرة فيمكنك فقط نقل الكود الآخير وتغييره بما لديك حتى لا تتكبد العناء ولا تنسى نسخ الصورة ووضعها بدل مكان المحددة بالأخضر
انتهى الموضوع والشرح... ومرحبا بالإستفسارات 
20 Blogger تعليقات
Disqus
20 التعليقات
المشرف
avatar
المشرف
avatar

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

المشرف
avatar

تم حل المشكل أخي حمله مجددا

المشرف
avatar

هل من الميديافاير

المشرف
avatar

كلاهما محدث

المشرف
avatar

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

المشرف
avatar

في قالبك هذا هو المطلوب : main-content container clearfix

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

جرب حذف هذه الأكواد في الخطوة 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}

المشرف
avatar

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

المشرف
avatar

ابحث عن هذا : <div id="main-mb3">

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

ابحث عن هذا <div id='main-hossam'>

المشرف
avatar

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة