الرئيسية / / طريقة إضافة صورة تلقائيا للمواضيع التى لا تحتوى على صورة لمدونات بلوجر

طريقة إضافة صورة تلقائيا للمواضيع التى لا تحتوى على صورة لمدونات بلوجر

إضافات بلوجر كثيره جدا ولكن بالتأكيد سوف تجد الكثير من الإضافات لا يقوم بنشرها أصحاب مدونتات كثيره ويفضلون بيعها ، ولكن بأذن الله سوف أقوم فى عالم المدون بتوفير أكبر قد من الإضافات بشكل مجانى من خلال تصميم الخاص ، اليوم مع موضوع جديد وهى عن طريقة إضافة صورة تلقائيا للمواضيع التى لا تحتوى على صورة لمدونات بلوجر.

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

طريقة إضافة صورة تلقائيا للمواضيع التى لا تحتوى على صورة لمدونات بلوجر


وهذه الطريقة بسيط جدا لانه تتوفر فى كود واحد فقط هو كود html ولكن اذا كانت الأكواد قليله ليس معنى ذلك أن الأضافه سوف تكون سهل ، وايضا لن تكون صعب سوف يكون عليك فقط معرف بعض الأمور عن css لتنسق الأكواد ، وهذه الإضافات تعتمد على تلخيص المواضيع فى بلوجر.

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

صورة من الإضافة

طريقة إضافة صورة تلقائيا للمواضيع التى لا تحتوى على صورة لمدونات بلوجر

طريقة إضافة صورة تلقائيا للمواضيع التى لا تحتوى على صورة لمدونات بلوجر


كما قلت كم أن الإضافه سهل التركيب لانه تعتمد على كود واحد فقط وسوف يكون عليك وضع هذا الكود أسفل هذا الكود فى مدونتك.

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>

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

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='posts-thumb'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
<b:else/>
<a expr:href='data:post.url' style='background:url(&quot;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNXy2Sn7dCNmBHuTZ-F_PGFwryMT8G0Rm7d_Qihyphenhyphen0g9IkiAVKBcf9rnAHCkQAeXFQH1hKM4KEL8Pd2SctU-4miRD4micjK0ZMBNcJpFMD6veF7oRzFdzQs00ATq9dg9TiSeL1De5QfPUo/w600-c-h400/90.jpg&quot;) no-repeat center center;background-size:cover;background-repeat: no-repeat;width: 240px;height: 200px;display: block;'>
</a>
</b:if>
</div>

<div class='post-info'>
<h1 class='post-title entry-title' itemprop='name headline'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</div>

<div class='post-snippet'><data:post.snippet/></div>
</b:if>
</b:if>

كما قلت لكم أن هذا الكود ليس فقط لاظهر صورة للمواضيع التى ليس به صور ولكن ايضا لتلخيص المواضيع وإضافة صور مصغرة مع عنوان الموضوع وايضا مع حزء من المقال.

سوف أقوم بتحديد لكم الأكواد حتى يمكنك معرفة الأكواد والأكواد فى الأعلى تنفصل كما قلت لكم الى ثلاث امور وسوف أحددها لكم.

شرح خصائص الكود


1- اولا الكود المحدد باللون الأحمر هذا الكود هو الخاص بموضوع اليوم وهذا الكود الذى يجلب لك صورة مصغرة من الموضوع ويقوم بوضع صورة بشكل تلقائى للمواضيع التى ليس به صورة ويمكنك تغيير روابط الصورة فى الكود باى صورة تريدها وسوف تجد فى الأكود طول وعرض الصورة التى سوف تظهر بشكل تلقائى يمكنك ايضا التحكم بهم.

2- الكود المحدد باللون الأخضر هو الكود خاص بجلب عنوان الموضوع ويمكنك حذف اى كود أنت لست بالحاجة له .

3- اخر كود هو الخاص بجلب جزء الموضوع بشكل تلقائى لا يمكنك التحكم فى عدد الكليمات لان هذا الكود يعمل بشكل تلقائى من بلوجر.

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .

شارك المقال

ليست هناك تعليقات:

جميع الحقوق محفوظة لــ 3srtec تصميم نقطة ويب