شرح كامل لكيفية إضافة زر المتابعة لمدونة بلوجر | تحميل كود المتابعة لمدونة بلوجر جاهز

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

أقراء أيضاً : إنشاء مدونة بلوجر Blogger باستخدام الهاتف | دورة بلوجر Blogger .

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

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

أقراء أيضاً : شرح كامل اضافة اكواد الميتا تاج Meta tags | دورت بلوجر Blogger .

زر المتابعة لمدونة بلوجر

زر المتابعة (Follow Button) على مدونة بلوجر هو عنصر أو زر يُضاف إلى مدونة بلوجر ليتيح للقرّاء والزوّار متابعة مدونتك بسهولة واطلاعهم على أحدث المشاركات والمحتوى الذي تنشره. عندما ينقرون على زر المتابعة، سيصبحون متابعين لمدونتك وسيتم تحديثهم بشكل آلي عندما تقوم بنشر محتوى جديد.

أقراء أيضاً : كيفية اضافة زر اشتراك في مدونة بلوجر | شرح كامل لكيفية اضافة زر اشتراك في مدونة بلوجر .

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

مميزات زر متابعة المدونة

زر متابعة المدونة على بلوجر يأتي مع العديد من المميزات والفوائد، ومن بين هذه المميزات:

أقراء أيضاً : ربح 10 دولار يومياً من المشي | شرح كلمل لتطبيق Sweatcoin .

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

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

أقراء أيضاً : افضل بديل لجوجل ادسنس أدستيرا Adsterra | شرح كامل لشركة أدستيرا Adsterra .

شرح كيفية التحميل و التعديل على كود متابعة المدونة

لتحميل كود متابعة المدونة أضغط هنا .

كود متابعة المدونة

<style>

.about_blog { padding: 0; overflow: hidden;background: #fff; }

.about-Pro7web-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}

.about-Pro7web-img{position:relative;max-height:140px;overflow:hidden}

.about-Pro7web-img img {max-width:100%;width:100%;transition:all .6s;}

.about-Pro7web-img:hover img{transform:scale(1.2) rotate(-10deg)}

.about-Pro7web-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}

.about-Pro7web-img:hover:before{background:rgba(0,0,0,0.6);}

.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}

.about-Pro7web-float{text-align:center;display:table;width:100%;height:100%}

.about-Pro7web-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; font-size: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; border: 2px solid #FFFFFF; font-weight: bold; background: rgba(0,0,0,0.5); text-shadow: 0 2px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(19, 18, 18, 0.38), 0 3px 13px -1px rgba(0, 0, 0, 0.08); border-radius: 2px;}

.about-Pro7web-float:hover a{background:#fff; color: #444!important;}

.about-Pro7web-float a i{font-weight:normal;margin-left:5px}

.about-Pro7web-wrpicon{display:block;margin:0 auto;position:relative;}

.extender{text-align:center;font-size:16px; margin: 15px!important;}

.extender .about-Pro7web-icon{display: inline-block!important; border: 0!important; margin: 0!important; padding: 0!important; width: 32%!important;}

.extender .about-Pro7web-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; border-radius: 3px; font-size: 12px; width: 100%; border: 1px solid rgba(0,0,0,0.21); border-bottom-color: rgba(0, 0, 0, 0.27); text-shadow: 0 1px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0, 0, 0, 0), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0, 0, 0, 0.08);}

.extender .about-Pro7web-icon i{font-family:fontawesome;margin:10px 3px 0 0}

.about-Pro7web-icon.fbl a{background:#3b5998}

.about-Pro7web-icon.twitt a{background:#19bfe5}

.about-Pro7web-icon.crcl a{background:#d64136}

.about-Pro7web-icon.fbl a:hover,.about-Pro7web-icon.twitt a:hover,.about-Pro7web-icon.crcl a:hover{background:#313B42}

.extender .about-Pro7web-icon:hover a,.extender .about-Pro7web-icon a:hover{color:#fff;}

.about-Pro7web-info{margin:10px 0 0 0;font-size:13px;text-align:center;}

.about-Pro7web-info p{margin:5px 0;font: 12px Droid Arabic Naskh; color: #444;}

.about-Pro7web-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}

.about-Pro7web-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}

.about-Pro7web-info h4:before,.about-Pro7web-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0, 0, 0, 0.08)}

.about-Pro7web-info h4:before {margin-right:-50%;text-align:left;}

</style>

<div class="about_blog">

<div class="inner_wrapper">

<div class="about-Pro7web-img">

<img alt="إسم المدونة الخاصة بك" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcL3NVOKO_7dVRDncFoNfy0GMAYI698sT8mDMi52D7ts1tI8i8SZnASmVBQ5fWbOyVy6gLdKEhuN4Zb5ecx1Fd-D_MiICqwNfAqeUpRgCgoob8CumXSorkxzt0EZCU0Di0E4ON9EUMFiwV/s320/Festival-Of-Colors-People-HD-Wallpaper.jpg" width="300" />

<div class="aboutfloat-img">

<span class="about-Pro7web-float"><a href="رابط متابعة المدونة" rel="nofollow" target="_blank"><i class="fa fa-user"></i> انضم لموقعنا</a></span></div>

</div>

</div>

<div class="about-Pro7web-info">

<h4>

لتعرف على كل جديد </h4>

تميز بلا حدود</div>

<div class="about-Pro7web-wrpicon">

<ul class="extender">

<li class="about-Pro7web-icon fbl"><a href="رابط صفحة الفيسبوك" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> صفحتنا</a></li>

<li class="about-Pro7web-icon twitt"><a href="رابط تويتر" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> تابعنا</a></li>

<li class="about-Pro7web-icon crcl"><a href="رابط يوتيوب" rel="nofollow" target="_blank"><i class="fa fa-youtube fa-fw"></i> يوتيوب</a></li>

</ul>

</div>

</div>

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

أقراء أيضاً : أفضل برنامج لحرق الويندوز على فلاشة USB | تحميل Rufus 2024 .

تغير إسم المدونة الخاصة بك

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

<img alt="إسم المدونة الخاصة بك" class="img-responsive" height="auto" src="رابط الصورة" width="300" />

يجب أن تبحث عن النص "إسم المدونة الخاصة بك" وتقوم بتغييره إلى الاسم الجديد الذي ترغب في استخدامه.

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

أقراء أيضاً : أفضل موقع لربح عملة سولانا solana (SOL) | صنبور عملة سولانا solana (SOL) .

تغير رابط متابعة المدونة 

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

<a href="رابط متابعة المدونة" rel="nofollow" target="_blank"><i class="fa fa-user"></i> انضم لموقعنا</a>

يجب أن تبحث عن الرابط "رابط متابعة المدونة" وتقوم بتغييره إلى الرابط الجديد الذي ترغب في استخدامه.

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

أقراء أيضاً : أفضل إعلان مربح على اليوتيوب | فعّله في فيديوهاتك لزيادة الأرباح .

تغيير الصورة والروابط:

يمكنك تغيير صورة المدونة الحالية بوضع رابط الصورة الجديدة في السطر التالي:

<img alt="إسم المدونة الخاصة بك" class="img-responsive" height="auto" src="رابط الصورة الجديدة" width="300" />

قم بتغيير روابط وسائل التواصل الاجتماعي الحالية في السطرات المماثلة:

<li class="about-Pro7web-icon fbl"><a href="رابط صفحة الفيسبوك" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> صفحتنا</a></li>

<li class="about-Pro7web-icon twitt"><a href="رابط تويتر" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> تابعنا</a></li>

<li class="about-Pro7web-icon crcl"><a href="رابط يوتيوب" rel="nofollow" target="_blank"><i class="fa fa-youtube fa-fw"></i> يوتيوب</a></li>

أقراء أيضاً : شرح شامل لموقع سيو سبرينت SEOsprint | أفضل مواقع لكسب الروبل الروسي من خلال تنفيذ المهام على الإنترنت .

تغيير النصوص والعناوين:

يمكنك تغيير النصوص والعناوين التي تظهر في الكود بوضع النص الجديد في الأماكن المناسبة.

تخصيص الأنماط والألوان:

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

إضافة مزيد من وسائل التواصل:

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

تخصيص أحجام الصور والنصوص:

يمكنك تغيير أحجام الصور والنصوص بتعديل الأقيام (مثل max-height, width, font-size, إلخ) في الكود.

تحسين الاستجابة (Responsive):

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

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

أقراء أيضاً : تحميل أداة ترجمة قوالب بلوجر Blogger Templates Translation Assistant .

كيفية الحصول على رابط متابعة المدونة الخاصة بك 

  للحصول على رابط متابعة المدونة الخاصة بك من خلال إضافة أداة المتابعون في بلوجر، يمكنك اتباع الخطوات التالية:

1. تسجيل الدخول إلى حساب بلوجر: ابدأ بتسجيل الدخول إلى حساب بلوجر الخاص بك.
2. الوصول إلى لوحة تحكم المدونة: انتقل إلى لوحة تحكم المدونة التي تريد إضافة أداة المتابعون إليها.
3. اضافة أداة المتابعون: في لوحة تحكم المدونة، انقر على "الاستخدام" (Layout) في القائمة الجانبية.
4. إضافة عنصر صفحة جديد: في قسم "التخطيط" (Layout)، انقر على "إضافة عنصر صفحة" (Add a Gadget).
5. اختيار أداة المتابعون: ستظهر نافذة "اختيار عنصر الصفحة" (Choose a New Page Element)، ابحث عن "أتباع المدونة" (Followers) أو ما يشابه ذلك وانقر عليه.
6. تخصيص أداة المتابعون: ستظهر لك خيارات لتخصيص أداة المتابعون. يمكنك تغيير عنوانها وشكلها وتصميمها حسب احتياجاتك.
7. حفظ التغييرات: بمجرد تخصيص أداة المتابعون حسب احتياجاتك، انقر على "حفظ" (Save).
8. الحصول على رابط المتابعة: بعد حفظ التغييرات، قد يتم عرض أداة المتابعون على مدونتك. يمكن للقراء الآن النقر على زر المتابعة للمتابعة لمدونتك.
9. الحصول على رابط متابعة المدونة: للحصول على رابط مباشر لصفحة المتابعة، قد تحتاج إلى نشر أو نشر مسبقًا للمدونة. ثم، قم بالانتقال إلى مدونتك وابحث عن زر المتابعة. انقر بزر الفأرة الأيمن على زر المتابعة واختر "نسخ عنوان الرابط" (Copy Link Address) للحصول على الرابط.

بهذه الطريقة، يمكنك الحصول على رابط متابعة المدونة ومشاركته مع القراء للدعوة إلى متابعتك.

أقراء أيضاً : اثبات ملكية المدونة في محركات بحث بنج Bing | دورة بلوجر Blogger .

اضافة كود متابعين بلوجر | اضافة خاصية الاشعارات فى مدونة بلوجر.

شرح مبسط لكيفية إضافة كود متابعين وخاصية الإشعارات في مدونة بلوجر:

خطوة 1: تسجيل الدخول والوصول إلى لوحة التحكم

ابدأ بتسجيل الدخول إلى حسابك على بلوجر.

انتقل إلى لوحة التحكم الخاصة بمدونتك.

خطوة 2: إضافة عنصر HTML/JavaScript

في لوحة التحكم، اختر "تخطيط" من القائمة الجانبية.

انقر على "إضافة عنصر صفحة" واختر "HTML/JavaScript".

خطوة 3: تخصيص الكود والزر

في مربع العنوان، يمكنك إضافة عنوان اختياري مثل "تابعنا" أو تركه فارغًا.

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

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

خطوة 4: حفظ التغييرات ونشرها

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

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

أقراء أيضاً : قالب متجر الأندرويد المعرب والأجنبي مجاناً | تحميل قالب بلوجر .