كيفية إضافة زر مشاركة اجتماعية أنيق في منشور بلوجر

السلام عليكم ورحمة

الله تعالى وبراكاته

مرحبا أصدقاء وزوار شبكة نور التقنية

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

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

كيفية إضافة زر مشاركة اجتماعية أنيق في منشور بلوجر

قم بتسجيل الدخول إلى لوحة معلومات مدونة بلوجر الخاصة بك.

ثم انتقل إلى الموضوع>> تحرير HTML.

انقر في أي مكان داخل منطقة الرمز واضغط على مفتاحي Ctrl + F لفتح مربع البحث.

الآن ، ابحث عن]]> </ b: skin> أو </style> والصق الرمز أدناه أعلى هذه العلامة مباشرةً.

/*== Post Share By noortechno ==*/
.post-share{display:inline-block; display:flex; flex-wrap:nowrap; align-items:center; background-color:#fff; padding:1px 0px 0px; position:absolute bottom:0px; z-index:1;}
.post-share svg{width:25px; height:25px; vertical-align:-4px;}
.post-share svg path{fill:#ffffff; transition:all .3s ease;}
.post-share .total{display:inline-block; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; width:100%; font-size:16px; font-weight:500; color:#005af0; padding:10.8px 0px; border-top:3px solid #005af0; cursor:not-allowed;}
.post-share .total i{font-style:normal; white-space:nowrap;}
.post-share .total svg{margin-right:3px;}
.post-share .total svg path{fill:#005af0;}
.post-share a{width:100%; padding:10px 0px; border-top-width:3px; border-top-style:solid; text-align:center; box-shadow:none; transition:all .3s ease;}
.post-share a:hover svg path{fill:#fff !important;}
.post-share a.facebook{border-color:#3a579a;}
.post-share a.facebook:hover{background-color:#3a579a;}
.post-share a.facebook svg path{fill:#3a579a;}
.post-share a.twitter{border-color:#00abf0;}
.post-share a.twitter:hover{background-color:#00abf0;}
.post-share a.twitter svg path{fill:#00abf0;}
.post-share a.pinterest{border-color:#cd1c1f;}
.post-share a.pinterest:hover{background-color:#cd1c1f;}
.post-share a.pinterest svg path{fill:#cd1c1f;}
.post-share a.linkedin{border-color:#2554BF;}
.post-share a.linkedin:hover{background-color:#2554BF;}
.post-share a.linkedin svg path{fill:#2554BF;}
.post-share a.tumblr{border-color:#314358;}
.post-share a.tumblr:hover{background-color:#314358;}
.post-share a.tumblr svg path{fill:#314358;}
.post-share a.whatsapp{border-color:#4dc247;}
.post-share a.whatsapp:hover{background-color:#4dc247;}
.post-share a.whatsapp svg path{fill:#4dc247;}
.post-share a.messenger{border-color:#448AFF;}
.post-share a.messenger:hover{background-color:#448AFF;}
.post-share a.messenger svg path{fill:#448AFF;}

الآن ، ابحث عن علامة <data:post.body/> والصق الرمز أدناه بعد هذه العلامة مباشرةً.

ملاحظة: - إذا رأيت هذا الرمز مرة واحدة أو أكثر ، فحدد الرمز الذي يظهر في المرة الأخيرة.

<b:if cond='data:view.isPost'>
<div class='post-share'>
            <span class='total'><svg viewBox='0 0 24 24'><path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'/></svg><i><b>SHARE</b></i></span>
            <a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' onclick='window.open(this.href,&quot;sharer&quot;,&quot; toolbar=0,status=0,width=626,height=436&quot;);return false;' rel='nofollow' title='Share to Facebook'><svg viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>
            <b:if cond='data:blog.isMobileRequest'>
              <a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url.canonical' rel='nofollow' title='Share to WhatsApp'><svg viewBox='0 0 24 24'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg></a>
              <a class='messenger' expr:href='&quot;fb-messenger://share?link=&quot; + data:post.title + &quot; - &quot; + data:post.url.canonical' rel='nofollow' title='Share to WhatsApp'><svg viewBox='0 0 24 24'><path d='M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z'/></svg></a>
            </b:if>
            <a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title + &quot; (by: @username) &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' title='Share to Twitter'><svg viewBox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>
            <a class='pinterest' data-pin-config='beside' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow' title='Share to Pinterest'><svg viewBox='0 0 24 24'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg></a>
            <a class='linkedin' expr:href='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;' rel='nofollow' title='Share to Linkedin'><svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg></a>
            <a class='tumblr' data-notes='right' expr:href='&quot;https://www.tumblr.com/share/link?url=&quot; + data:post.url.canonical' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;' rel='nofollow' title='Share to Tumblr'><svg viewBox='0 0 24 24'><path d='M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17'/></svg></a>
          </div>
</b:if>

انقر فوق حفظ الموضوع.

قبل نشر رسالتك ، شاهد معاينة لمنشور مدونتك.

إذا كانت المعاينة صحيحة ، فقم ببساطة بنشرها.

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

 

تعديل المقال