طريقتين لتغيير شكل مشاركة مميزة إلى شكل احترافي وجميل في بلوجر

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

إضافة هذه المشاركة المميزة:

1. تركيب اكواد تغيير شكل مشاركة مميز إلى شكل احترافي
2. توجه إلى لوحة التحكم في المدونة
3. تأكد من تفعيل إضافة مشاركة مميز من التخطيط.
4. بعد التأكد من تفعيل الإضافة توجه إلى المظهر تم تحرير HTML تم ابحث عن

<b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>
</b:widget>

قم باغلاقة عن طريق الضغط على المساحة الفارغة قبل رقم السطر في اليسار تم حدد علية الى ان تصل  </b:widget> واستبدلة بكود التالي، ان لم تظهر لك الويدجت يجب اضافة المشاركة المميزة بشكل يدوي من بلوجر وبعد ان تتم الاضافة اعد المحاولة مرة اخرى:

صورة الكود في المحرر:

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

<b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>
  <b:widget-settings>
    <b:widget-setting name='showSnippet'>true</b:widget-setting>
    <b:widget-setting name='showPostTitle'>true</b:widget-setting>
    <b:widget-setting name='showFirstImage'>true</b:widget-setting>
    <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <!-- Only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:include name='content'/>
    <b:include name='quickedit'/>
  </b:includable>
  <b:includable id='content'>
    <div class='item-list'>
      <div class='item item-1'>
        <div class='img'><a href='javascript:;'>
          <div class='like'><i aria-hidden='true' class='fa fa-heart'/></div></a>
          <a expr:href='data:postUrl'>
            <b:if cond='data:showFirstImage and data:postFirstImage != ""'>
              <div class="img-content" style="background-image: url(<data:postFirstImage/>);"></div>
            </b:if>
          </a>
        </div>
        <div class='social'>
          <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:postUrl' target='_blank'>
            <div class='fb'><i aria-hidden='true' class='fa fa-facebook'/></div></a>
          <a expr:href='"whatsapp://send?text=" + data:postUrl' target='_blank'>
            <div class='ig'><i aria-hidden='true' class='fa fa-whatsapp'/></div></a>
          <a expr:href='"http://twitter.com/share?url=" + data:postUrl' target='_blank'>
            <div class='tw'><i aria-hidden='true' class='fa fa-twitter'/></div></a>
        </div>
        <div class='text-container'>
          <div class='title'>
            <b:if cond='data:showPostTitle and data:postTitle != ""'>
              <a expr:href='data:postUrl'><data:postTitle/></a>
            </b:if>
          </div>
          <div class='content'>
            <p><data:postSummary/></p>
          </div>
          <div class='readmore'>
            <h4><a expr:href='data:postUrl'>أقراء المزيد</a></h4>
          </div>
        </div>
      </div>
    </div>

    <style type='text/css'>
    /* CSS styles here... */
    </style>

    <script>
    //<![CDATA[
    $(".item a .ig").click(function() {
      var ua = navigator.userAgent.toLowerCase();
      var isAndroid = ua.indexOf("android") > -1;
      var Ismobile = ua.indexOf("mobile") > -1;
      var isiPhone = ua.indexOf("iPhone") > -1;
      if(isAndroid) {
      }else if(Ismobile){
      }
      else if(isiPhone){
      } else {
        alert("لا يمكنك مشاركة التدوينة على الواتساب من الحاسوب !");
      }
    });
    //]]>
    </script>
  </b:includable>
</b:widget>

11111111111

✨ طريقة ثانية لتثبيت الاضافة

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

📋 مميزات الإضافة:

• ✅ تصميم متجاوب وأنيق
• ✅ عرض الصورة الأولى للمشاركة تلقائيًا
• ✅ أزرار مشاركة على فيسبوك، تويتر، واتساب
• ✅ مقتطف تلقائي من المشاركة

📎 كود الإضافة (انسخه وضعه داخل قالب بلوجر):

<b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>
  <b:widget-settings>
    <b:widget-setting name='showSnippet'>true</b:widget-setting>
    <b:widget-setting name='showPostTitle'>true</b:widget-setting>
    <b:widget-setting name='showFirstImage'>true</b:widget-setting>
    <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2 class='featured-title'><data:title/></h2>
    </b:if>
    <b:include name='content'/>
    <b:include name='quickedit'/>
  </b:includable>
  <b:includable id='content'>
    <div class='featured-post-box'>
      <a expr:href='data:postUrl'>
        <b:if cond='data:showFirstImage and data:postFirstImage != ""'>
          <div class='featured-image' style='background-image:url(<data:postFirstImage/>);'></div>
        </b:if>
      </a>
      <div class='featured-content'>
        <b:if cond='data:showPostTitle and data:postTitle != ""'>
          <h3 class='featured-heading'><a expr:href='data:postUrl'><data:postTitle/></a></h3>
        </b:if>
        <p class='featured-snippet'><data:postSummary/></p>
        <div class='featured-share'>
          <a expr:href='"https://www.facebook.com/sharer.php?u=" + data:postUrl' target='_blank'><i class='fa fa-facebook'></i></a>
          <a expr:href='"https://twitter.com/share?url=" + data:postUrl' target='_blank'><i class='fa fa-twitter'></i></a>
          <a expr:href='"whatsapp://send?text=" + data:postUrl' target='_blank'><i class='fa fa-whatsapp'></i></a>
        </div>
      </div>
    </div>

    <style>
    .featured-post-box {
      display: flex;
      flex-wrap: wrap;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      overflow: hidden;
      margin: 20px 0;
    }
    .featured-image {
      flex: 1 1 300px;
      height: 200px;
      background-size: cover;
      background-position: center;
    }
    .featured-content {
      flex: 1 1 300px;
      padding: 20px;
      text-align: right;
    }
    .featured-heading {
      font-size: 20px;
      margin-bottom: 10px;
      color: #1976d2;
    }
    .featured-heading a {
      text-decoration: none;
      color: inherit;
    }
    .featured-snippet {
      font-size: 15px;
      color: #444;
      margin-bottom: 15px;
    }
    .featured-share {
      display: flex;
      gap: 10px;
      justify-content: flex-start;
    }
    .featured-share a {
      width: 32px;
      height: 32px;
      background: #1976d2;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: 0.3s;
    }
    .featured-share a:hover {
      transform: scale(1.1);
      background: #0d47a1;
    }
    </style>
  </b:includable>
</b:widget>

💡 ملاحظة: تأكد من وجود مشاركة منشورة تحتوي على صورة ومقتطف ليتم عرضها بشكل صحيح.