مدونة هلا تك

تركيب أزرار لنشر المواضيع على مواقع التواصل الأجتماعي أسفل التدوينات بلوجر

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

1- زيادة عدد الزوار
عند تسهيل مشاركة المواضيع عبر الشبكات الاجتماعية مثل فيسبوك، تويتر، واتساب وتلغرام، يزداد عدد الأشخاص الذين يطلعون على مقالاتك، مما يعزز حركة المرور على مدونتك.
2- تحسين السيو (SEO)
عندما يتم نشر محتواك بشكل واسع على منصات التواصل الاجتماعي، فإن ذلك يزيد من عدد الروابط الخارجية التي تشير إلى مدونتك، مما يرفع ترتيبك في محركات البحث مثل جوجل.
3- سهولة الاستخدام وتحفيز التفاعل
الزائر قد يعجبه محتواك لكنه لن يكلف نفسه عناء نسخه ولصقه يدويًا لمشاركته، بينما وجود زر مشاركة بنقرة واحدة يسهل عليه العملية ويحفزه على نشره.
4- زيادة الوعي بالعلامة التجارية
كلما تمت مشاركة محتواك أكثر، زاد عدد الأشخاص الذين يعرفون مدونتك، مما يساعد في بناء جمهور دائم وزيادة مصداقيتك في المجال الذي تتحدث عنه.
5- تعزيز فرص الربح
إذا كنت تستخدم برامج إعلانية مثل Google AdSense، فإن زيادة عدد الزوار تعني مزيدًا من المشاهدات والنقرات، وبالتالي أرباحًا أعلى.
الخلاصة
تركيب أزرار المشاركة في بلوجر خطوة بسيطة ولكنها فعالة لزيادة التفاعل، تحسين السيو، وتعزيز انتشار مدونتك بسرعة !

شرح التركيب بالفيدو

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

بعد الذهاب للمظهر و أختيارتعديل ~~HTML~~ قم بالبحث عن الوسم ~~<head>~~ عن طريق الضغط على ~~CTRL F~~
و قم بلصق الكود التالي اسفله الكود هو ~~مكتبة الايقونات~~

<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css' rel='stylesheet'/>

ثم أبحث عن المكان المتاسب لوضع الكود التالي مثلا فوق مواضيع ذات صلة او ابحث عن ~~كلاس post~~ الخاص بقالبك
وثم قم بجمعه و الصق الكود اسفله شاهد الفيديو لتفهم الطريقة

<b:if cond='data:blog.pageType == "item"'>
<div class='sharepost'>

<h12>شارك الموضوع</h12>
<button class='copy-btn' onclick='copyPostLink(this)'>
<i class='bi bi-copy'/>
<span class='copy-message'> تم نسخ الرابط</span></button>
<a class='shareicon' onclick='toggleShareButtons()'>
<i class='bi bi-share-fill'/> 
</a>
<div class='sharebtn'>
<a class='share-facebook' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'>
<i class='bi bi-facebook'/>
</a>

<a class='share-twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url' rel='nofollow' target='_blank'>
<i class='bi bi-twitter-x'/> 
</a>

<a class='share-linkedin' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:post.url' rel='nofollow' target='_blank'>
<i class='bi bi-linkedin'/>
</a>

<a class='share-pinterest' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' rel='nofollow' target='_blank'>
<i class='bi bi-pinterest'/>
</a>

<a class='share-reddit' expr:href='"https://www.reddit.com/submit?url=" + data:post.url' rel='nofollow' target='_blank'>
<i class='bi bi-reddit'/>
</a>

<a class='share-whatsapp' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + "%20" + data:post.url' title='المشاركة على الواتساب'>
<i class='bi bi-whatsapp'/>
</a>

<a class='share-telegram' expr:href='"https://t.me/share/url?url=" + data:post.url + "&text=" + data:post.title' rel='nofollow' target='_blank' title='المشاركة على تليجرام'>
<i class='bi bi-telegram'/>
</a>

</div>
</div>
</b:if>

<script>
//<![CDATA[
function toggleShareButtons() {
var shareButtons = document.querySelector(".sharebtn");
shareButtons.classList.toggle("open");
}
//]]>
</script>
<script>
function copyPostLink(button) {
var postUrl = window.location.href; // الحصول على رابط الصفحة الحالية
var tempInput = document.createElement("input");
tempInput.value = postUrl;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);

// إظهار رسالة النسخ فوق الزر
var message = button.querySelector(".copy-message");
message.classList.add("show-message");

// إخفاء الرسالة بعد 2 ثانية
setTimeout(function () {
message.classList.remove("show-message");
}, 2000);
}
</script>

قم بالبحث عن ~~]]></b:skin>~~ و قم بلصق اكود التالي أعلاه

.post .post-footer{margin:10px 0;border-top:1px solid #e4e4e4;padding:10px 0}
.post-footer-line,.author-profile{display:none}
.sharepost{margin: 10px 0px;padding: 12px;border: 1px solid #dfe0e4;}
.sharepost h12,.related-posts > p,#comments > h4,.simpleTabs > h4{font-weight:600;display:inline-block;font-size:16px}
.sharepost .sharebtn{float:left}
.sharepost .sharebtn a,.sharepost a.shareicon{display:none;float:left;margin:0 3px;font-size:14px;border-radius:50%;text-align:center;color:#fff;background:#339194;width:28px;height:28px;line-height:30px;visibility:hidden;opacity:0}
.sharepost .sharebtn{float:left;transform:translateZ(0);transform:translateX(-30px);transition:transform .35s ease}
.sharepost .sharebtn a.share-facebook{background:#3b5998}
.sharepost .sharebtn a.share-twitter{background:#35383a}
.sharepost .sharebtn a.share-gplus{background:#dd4b39}
.sharepost .sharebtn a.share-linkedin{background:#007bb5}
.sharepost .sharebtn a.share-digg{background:#005be2}
.sharepost .sharebtn a.share-myspace{background:#000}
.sharepost .sharebtn a.share-stumbleupon{background:#eb4924}
.sharepost .sharebtn a.share-pinterest{background:#cb2027}
.sharepost .sharebtn a.share-reddit{background:#ff4500}
.sharepost .sharebtn a.wa_btn{background:#4dc247}
.sharepost a.shareicon{display:inline-block;visibility:visible;opacity:1;cursor:pointer}
.sharebtn.open a{visibility:visible;opacity:1;display:inline-block;cursor:pointer}
.sharebtn.open{transform:translateZ(0);transform:translateX(0);transition:transform .35s ease}
.sharepost .fb-like{width:100%;margin-bottom:10px;text-align:center}
.copy-btn {padding: 8px 8px;background: #db3c21;color: white;border: none;cursor: pointer;font-size: 13px;border-radius: 30px;position: relative;float: left;line-height: 10px;}
.copy-message {display: none;position: absolute;top: 0px;left: 116px;transform: translateX(-50%);background: #d73929;color: white;padding: 8px 10px;font-size: 12px;border-radius: 3px;white-space: nowrap;opacity: 0;transition: opacity 0.3s ease-in-out;}
.show-message {display: block;opacity: 1;}

و ثم ثم بالحفظ و مبروك الأضافة

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

وفي الختام !

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