إضافة أداة أزرار المتابعة الإجتماعية في بلوجر بشكل جذاب ورائع

 جميع أزرار متابعة مواقع التواصل الإجتماعي في أداة واحدة بتنسيق مميز

بسم الله والصلاة والسلام على رسول الله، سيدنا محمد بن عبدالله النبي الهاشمي، وبعد..

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

أهمية أزرار المتابعة في موقعك

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

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

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

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

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

1. قم بتسجيل الدخول إلى حسابك في منصة بلوجر، واختر المدونة المراد عرض الأداة بها.
2. إذهب إلى التنسيق
3. توجه إلى العمود الجانبي السايدبار
4. إضافة أداة
5. اختر HTML/JavaScript
6. ثم اضف الكود التالي داخل المربع الثاني، ثم حفظ الإضافة

<style>

#cnmu-iconsiT{margin:10px auto 0;overflow:hidden;position:relative;clear:both;max-width:300px;}

#InTable{margin:0 -3px;}

#InTable span{float:left;width:25%;}

#InTable a{height:60px;line-height:60px;background-color:#0084fe;margin:0 3px 6px!important;text-align:center;text-decoration:none!important;font-size:30px;display:block;color:#fff;transform:perspective(300px) rotateY(0deg);transition:transform 0.4s linear,background-color 0s linear 0.2s,color 0s linear 0.2s;}

#InTable span:hover a{transform:perspective(300px) rotateY(180deg);transition:transform 0.2s linear,background-color 0s linear 0.1s,color 0s linear 0.1s;}

#InTable i{transition:transform 0s linear 0.2s,text-shadow 0s linear 0.2s;display:block;line-height:inherit;}

#InTable span:hover i{transition:transform 0s linear 0.1s,text-shadow 0s linear 0.1s;transform:scale(-1,1);text-shadow:0 0 50px rgba(255,255,255,0.5);}

#InTable span:nth-child(1):hover  a {background-color: #3B5998;}

#InTable span:nth-child(2):hover  a {background-color: #00ACED;}

#InTable span:nth-child(3):hover  a {background-color: #FD3500;}

#InTable span:nth-child(4):hover  a {background-color: #E3316B;}

#InTable span:nth-child(5):hover  a {background-color: #F8B706;}

#InTable span:nth-child(6):hover  a {background-color: #4183C4;}

#InTable span:nth-child(7):hover  a {background-color: #3399CC;}

#InTable span:nth-child(8):hover  a {background-color: #EA4C89;}

#InTable span:nth-child(9):hover  a {background-color: #3F729B;}

#InTable span:nth-child(10):hover  a {background-color: #FF0084;}

#InTable span:nth-child(11):hover  a {background-color: #F26300;}

#InTable span:nth-child(12):hover a {background-color: #396FD7;}

@media screen and (max-width : 400px) {#cnmu-iconsiT{max-width:260px;}#InTable span{width:33.33%;}}

</style>

<div id="cnmu-iconsiT">

<div id="InTable">

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-youtube-play"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-snapchat-ghost"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-tumblr"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-paper-plane"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-qq"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-user-secret"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-suitcase"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-html5"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-css3"></i></a></span>

</div>  

</div>