بلوجر » أضافة أزرار المشاركة الاجتماعية المخصصة إلى منشورات أو صفحات بلوجر

أضافة أزرار المشاركة الاجتماعية المخصصة إلى منشورات أو صفحات بلوجر

أزرار المشاركة الاجتماعية

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

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

إليك بعض الأزرار الاجتماعية المخصصة التي تم تحديثها في عام 2021 ، ستعجبك.

لقد استخدمنا Font Awesome 5 و HTML و CSS.

سنرى الان كيفية إضافة أزرار الوسائط الاجتماعية إلى منشورات بلوجر.

إزالة أزرار المشاركة الافتراضية

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

أزرار المشاركة الاجتماعية

تثبيت FONT AWESOME

Font Awesome هي مكونات إضافية مشهورة لأيقونات الخط.

لتثبيت Font Awesome في بلوجر ، انتقل إلى لوحة تحكم بلوجر > المظهر > تعديل HTML والصق الكود التالي في نموذج HTML الخاص بك اسفل العلامة <head>.

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>

أدخل كود HTML في "تذييل المنشور"

ابحث عن post-footer الخاص بك ، الصق الكود التالي بعد div المحدد مباشرةً.

<b:if cond='data:view.isSingleItem'>
  <div class="social-share">
      <ul>
          <li class="share-now"><i class="fas fa-share-alt"></i></li>
          <li>
              <a expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url.canonical' target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
          </li>
          <li>
              <a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url.canonical + "&amp;text=" + data:post.title' rel="nofollow" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
          </li>
          <li>
              <a expr:href='"https://www.linkedin.com/shareArticle?url=" + data:post.url.canonical' rel="nofollow" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
          </li>
          <li>
              <a expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url.canonical + "&amp;media=" + data:post.featuredImage + "&amp;description=" + data:post.title' rel="nofollow" target="_blank" title="Pinterest">
                  <i class="fab fa-pinterest-p"></i>
              </a>
          </li>
          <li>
              <a expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url.canonical' rel="nofollow" target="_blank" title="Whatsapp"><i class="fab fa-whatsapp"></i></a>
          </li>
          <li>
              <a expr:href='"https://reddit.com/submit?url=" + data:post.url.canonical + "&amp;title=" + data:post.title' rel="nofollow" target="_blank" title="Reddit"><i class="fab fa-reddit-alien"></i></a>
          </li>
          <li>
              <a expr:href='"mailto:?subject=" + data:post.title + "&amp;body=" + data:post.url.canonical' rel="nofollow" target="_blank" title="Email"><i class="fas fa-envelope"></i></a>
          </li>
      </ul>
  </div>
  <!--./social-share-->
</b:if>

يمكنك تخصيص الكود أعلاه الزر الذي تريد الاحتفاظ به أو إزالته.

أدخل كود CSS

ابحث عن ]]></b:skin> من تعديل HTML الخاص بالقالب والصق واحد من اكود CSS التالية قبله مباشرة

  1. أزرار المشاركة الاجتماعية المربعة CSS
أزرار المشاركة الاجتماعية
.social-share{display:block;overflow:hidden;margin:1rem 0}.social-share ul{margin:0;padding:0;list-style:none}li.share-now i{font-size:25px;padding:1rem;height:45px;width:45px;text-align:center}.social-share ul li{float:left;margin-left:1rem}.social-share ul li a i{color:#fff;font-size:25px;padding:1rem;height:45px;width:45px;text-align:center;opacity:1}.social-share ul li a i:hover{opacity:.7}.social-share ul li a i.fa-twitter{background-color:#1da1f2}.social-share ul li a i.fa-facebook-f{background-color:#3b5998}.social-share ul li a i.fa-whatsapp{background-color:#25d366}.social-share ul li a i.fa-envelope{background-color:#222831}.social-share ul li a i.fa-reddit-alien{background-color:#ff4500}.social-share ul li a i.fa-linkedin-in{background-color:#0077b5}.social-share ul li a i.fa-pinterest-p{background-color:#e60023}

2. أزرار المشاركة الاجتماعية المستديرة CSS

أزرار المشاركة الاجتماعية
.social-share{display:block;overflow:hidden;margin:1rem 0}.social-share ul{margin:0;padding:0;list-style:none}li.share-now i{font-size:25px;padding:1rem;height:45px;width:45px;text-align:center}.social-share ul li{float:left;margin-left:1rem}.social-share ul li a i{color:#fff;font-size:25px;padding:1rem;height:45px;width:45px;text-align:center;border-radius:50%;opacity:1}.social-share ul li a i:hover{opacity:.7}.social-share ul li a i.fa-twitter{background-color:#1da1f2}.social-share ul li a i.fa-facebook-f{background-color:#3b5998}.social-share ul li a i.fa-whatsapp{background-color:#25d366}.social-share ul li a i.fa-envelope{background-color:#222831}.social-share ul li a i.fa-reddit-alien{background-color:#ff4500}.social-share ul li a i.fa-linkedin-in{background-color:#0077b5}.social-share ul li a i.fa-pinterest-p{background-color:#e60023}

3. شريط أزرار المشاركة الاجتماعية CSS

أزرار المشاركة الاجتماعية
.social-share{display:block;overflow:hidden;margin:1rem 0}.social-share ul{margin:0;padding:0;list-style:none}li.share-now i{font-size:18px;height:30px;text-align:center}.social-share ul li{float:left;margin-left:1rem}.social-share ul li a i{color:#fff;font-size:18px;padding:6px;height:30px;width:100PX;text-align:center;border-radius:3px;opacity:1}.social-share ul li a i:hover{opacity:.7}.social-share ul li a i.fa-twitter{background-color:#1da1f2}.social-share ul li a i.fa-facebook-f{background-color:#3b5998}.social-share ul li a i.fa-whatsapp{background-color:#25d366}.social-share ul li a i.fa-envelope{background-color:#222831}.social-share ul li a i.fa-reddit-alien{background-color:#ff4500}.social-share ul li a i.fa-linkedin-in{background-color:#0077b5}.social-share ul li a i.fa-pinterest-p{background-color:#e60023}@media (max-width:767px){li.share-now{display:none}}

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

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

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

تم تصميم الموقع بواسطة منشئ الصفحات Oxygen Builder بشكل كامل.
لطلب خدمة تصميم الموقع تواصل معنا من الزر بالإسفل
خدمة تصميم الموقع
منتجات أوصي بها
إشترك فى قناتنا على يوتيوب ليصلك كل جديد
جميع الحقوق محفوظة لـ نور للمعلوماتية © 2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram