إضافة تابعنا على مواقع التواصل الإجتماعي لمدونات بلوجر بشكل جديد

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

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

معاينة

و كما شاهدت في المعاينة تم تصميم الإضافة بأيقونات مصطحة دات جودة عالية لكن قمت بظغطها و تحويلها إلى صيغة WebP لكي لا تؤتر على سرعة تحميل مدونتك كما أن الإضافة مصممة بالكامل بناءا على HTML و CSS فقط ما يجعلها خفيفة جدا و لن تؤتر بأي شكل من الأشكال على مدونتك كما أنها سهلة التركيب و العديل وقد قمت بتصميمها خصيصا لمدونات بلوجر مما يجعلها متوافقة مع جميع المدونات .

أولا قم بالتوجه إلى لوحة تحكم بلوجر
تم من القائمة الجانبية قم بإختيار التخطيط
بعدها مباشرقة قم بإضافة أذاة HTML/Javascript جديدة في القائمة الجانبية لمدونتك أو في المكان اللذي تريد أن تظهر فيه هذه الإضافة

الآن قم بنسخ الكود التالي و ألصقه داخل محتوى الأداة التي قمت بإنشائها .

<style>
/* Tooltip container By Technical-Dose.blogspot.com */

.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #4fc9ec transparent transparent transparent;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #4fc9ec;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

#socialmedia {list-style-type:none;}
#socialmedia li {
display: inline-block;
padding: 0;
}
.sfacebook{opacity:1;transition:all .5s;}
.sfacebook:hover {opacity:0.5;border-radius:20px;transition:all .5s;}
.stwitter{opacity:1;transition:all .5s;}
.stwitter:hover {opacity:0.5;border-radius:20px;transition:all .5s;}
.syoutube{opacity:1;transition:all .5s;}
.syoutube:hover {opacity:0.5;border-radius:20px;transition:all .5s;}
.sinstagram{opacity:1;transition:all .5s;}
.sinstagram:hover {opacity:0.5;border-radius:20px;transition:all .5s;}
.sapp{opacity:1;transition:all .5s;}
.sapp:hover {opacity:0.5;border-radius:20px;transition:all .5s;}
</style>
<ul id="socialmedia"><a href="https://technical-Dose.blogspot.com" style="display:none;">kalammoufid</a>

<li class="tooltip"><a href="https://facebook.com/YourUserName" target="_blank"><img class="sfacebook" src="https://1.bp.blogspot.com/-NKbFWKHXvsI/XsdQugGSzGI/AAAAAAAAABQ/VyCIgt52lVcf2PKiq6aAeCNNuLeOyWrJgCPcBGAYYCw/s1600/facebook.webp"/></a><span class="tooltiptext">فيسبوك</span></li>
<li class="tooltip"><a  href="https://twitter.com/YourUserName" target="_blank"><img class="stwitter" src="https://1.bp.blogspot.com/-567fS67k5ls/XsdQvk9yubI/AAAAAAAAABQ/K4u6LEm7HI4J4UOUim8K9yZ1ckswVSg2ACPcBGAYYCw/s1600/twitter.webp"/></a><span class="tooltiptext">تويتر</span></li>
<li class="tooltip"><a  href="https://youtube/YourUserName" target="_blank"><img class="syoutube" src="https://1.bp.blogspot.com/-or1bgvNzKVI/XsdQv5JSowI/AAAAAAAAABM/XjHBTfzqBC8Vyr40tGWDe2OCrcXvUFmUwCPcBGAYYCw/s1600/youtube.webp"/></a><span class="tooltiptext">يوتيوب</span></li>
<li class="tooltip"><a  href="https://instagram.com//YourUserName" target="_blank"><img class="sinstagram" src="https://1.bp.blogspot.com/-EOWSR-x_ZIs/XsdQuOGJOnI/AAAAAAAAABI/SFL5rtFNbwQ8ihBJOCoDTqhfYSJ_7o3eQCPcBGAYYCw/s1600/instagram.webp"/></a><span class="tooltiptext">انستجرام</span></li>
<li class="tooltip"><a href="https://YourAppDownloadlink.abc" target="_blank"><img class="sapp" src="https://1.bp.blogspot.com/-n8sMcLy8LP0/XsdQuMrN_mI/AAAAAAAAABE/k-rhQ2O376I-YhLwi4klu9Us8pcBjOl2wCPcBGAYYCw/s1600/android.webp"/></a><span class="tooltiptext">حمل التطبيق</span></li>
</ul>

لكن تأكد أنك قمت بالتعديل على الروابط بما يناسبك ففي أسف الكود ستجد اربعة روابط لمواقع التواص الإجتماعي قم بتغيير YourUserName إلى إسم المستخدم الخاص بصفحتك أو صفحة موقعك

أما بالنسبة للسطر الخامس فهو خاص برابط لتحميل تطبيق المدونة فإدا كنت تتوفر بالفعل على رابط مدونتك فيمكنك تغيير https://YourAppDownloadlink.abc برابط تحمييل التطبيق الخاص بمدونتك . أما إذا لم تكن تتوفر على تطبيق لمدونتك فيمكنك حذف ذلك السطر كاملا وهذا هو السطر تحسبا لأن تقوم بأي أخطاء

  <li class="tooltip"><a href="https://YourAppDownloadlink.abc " target="_blank"><img class="sapp" src="https://1.bp.blogspot.com/-n8sMcLy8LP0/XsdQuMrN_mI/AAAAAAAAABE/k-rhQ2O376I-YhLwi4klu9Us8pcBjOl2wCPcBGAYYCw/s1600/android.webp"/></a><span class="tooltiptext">حمل التطبيق</span></li>