اضافة ازرار المشاركة الاجتماعية لمدونات بلوجر بدون جافا سكريبت

اضافة ازرار المشاركة الاجتماعية لمدونات بلوجر بدون جافا سكريبت

2:22:00 م

شارك مع اصدقائك:

يساعد اضافة ازرار المشاركة الاجتماعية لمدونات بلوجر في الحصول على المزيد من الزيارات من مواقع التواصل الاجتماعي مثل فيسبوك وتويتر و Pinterest و Stumbleupon و Linkedin و Digg وما إلى ذلك.

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

 بطبيعة الحال مميزات ايقونات المشاركة الاجتمايعة addthis كثيرة كـ:
  1. التخصيص الكامل
  2. تركيب الكود السهل
  3. تحديد مكان الظهور
  4. العديد من المواقع الاجتماعية المشهورة والغير مشهورة

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

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

#1 إزالة ازرار المشاركات الاجتماعية الافتراضية

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

#2 اضافة خط Awesome

Font Awesome خط خاص بظهور الايقونات في الازرار، في الغالب قد يكون مضاف عندك في اكواد قالب مدونتك للتاكد من ذلك قم بالضغط من الكيبورد على 'CTRL + F' وقم بالبحث عن 'awesome' اذا كان هناك فمباشرة قم بتخطي هذه الخطوة.
لاضافة خط font awesome كل ماعليك الدخول الى قالب مدونتك (المظهر ← تحرير HTML) والبحث عن '/head' و ضع فوقها مباشرة الكود التالي.
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' rel='stylesheet'/>

#3 كود المشاركة في المواقع الاجتماعية

كود HTML
  1. ابحث عن <data:post.body/> في الغالب ستجد اكثر من وسم.
  2. كل ماعليك فعله و ضع تحت كل وسم  كلمة لتحدده مثلا الوسم الاول ضع اسفله test1 و الثاني test2 و الثالث test3 و هكذا.
  3. بعد ذلك قم بحفظ القالب ومعاينة احد مواضيع مدونتك وحدد مكان و ضع ازرار المشاركة على مواقع التوصل الاجتماعي على حسب ما وجدت.
  4. بعد ان تحدد المكان ترجع للقالب وتزيل تلك الكلمات التي ادخلتها مع الابقاء على الصحيحة منها فقط.
  5. اذا اردت ان تضيف ايقونات المشاركة الاجتماعية اعلى تدويناتك كل ما عليك اضافة الكود الاتي فوق <data:post.body/> الصحيح الذي وجدته، والعكس فاذا اردت ان تكون اسفل التدوينات فقط ضع الكود اسفله.
<p style='font-size: 20px;font-weight: bold;font-family: &quot;Droid Arabic Kufi&quot;, sans-serif;'>شارك مع اصدقائك: </p>
 <div class='share_button'>
    <a class='xosocial' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter fa_icon_share'/></a>

<a class='xosocial' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='share This'><i class='fa fa-facebook fa_icon_share'/></a>

    <a class='xosocial' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Share This On Google'><i class='fa fa-google fa_icon_share'/></a>
    <a class='xosocial' expr:href='&quot;https://www.pinterest.com/pin/create/button/? url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Pin This On Pinterest'><i class='fa fa-pinterest fa_icon_share'/></a>
  <a class='xosocial' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Share This On Linkedin'><i class='fa fa-linkedin fa_icon_share'/></a>
   <a class='xosocial' expr:href='&quot;https://www.digg.com/submit?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Submit URL On Digg'><i class='fa fa-digg fa_icon_share'/></a>
   <a class='xosocial' expr:href='&quot;https://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Submit URL On Stumbleupon'><i class='fa fa-stumbleupon fa_icon_share'/></a>
  </div>

يمكنك ان تخصص الكود الذي بالاعلى بحذف كود الزر التي تريد ازالتها (كجوجل+ فلا فائدة منه مادامت الخدمة قد توقفت) وترك الذي تريد الابقاء عليه.

كود CSS
  1. قم بالبحث عن وسم ]]></b:skin>
  2. واضف الاكواد التالية فوقه مباشرة
.share_button{}
.share_button a{color:white}
.fa_icon {
  padding: 9px;
  font-size: 26px;
  width: 45px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
  background: #00aff0;
  color: white;
}
.fa-android {
  background: #a4c639;
  color: white;
}
.fa-dribbble {
  background: #ea4c89;
  color: white;
}
.fa-vimeo {
  background: #45bbff;
  color: white;
}
.fa-tumblr {
  background: #2c4762;
  color: white;
}
.fa-vine {
  background: #00b489;
  color: white;
}
.fa-foursquare {
  background: #45bbff;
  color: white;
}
.fa-stumbleupon {
  background: #eb4924;
  color: white;
}
.fa-digg {
  background: black;
  color: white;
}
.fa-reddit {
  background: #ff5700;
  color: white;
}
.fa-rss {
  background: #ff6600;
  color: white;
}

#4 تخصيص تصميم ايقونات المشاركة الاجتماعية

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

1- شريط المشاركات الاجتماعية

اضف الكود التالي فوق ]]></b:skin>
.fa_icon_share {
  padding: .5%;
  font-size: 30px;
  width: 9%;
  text-align: center;
  text-decoration: none;
}

2- ازرار المشاركات الاجتماعية شكل مربعي

اضف الكود التالي فوق ]]></b:skin>
.fa_icon_share {
  padding: 1.5%;
  font-size: 25px;
  width: 5%;
  text-align: center;
  text-decoration: none;
}

3- ايقونات المشاركات الاجتماعية شكل دائري

اضف الكود التالي فوق ]]></b:skin>
.fa_icon_share {
  padding: 1.5%;
  font-size: 25px;
  width: 5%;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;
}
إذا كنت تعتقد أنك بحاجة إلى مزيد من التخصيص، فيمكنك عمل ذلك من اكواد CSS.

هل كان الموضوع مفيدا ام لا؟ اخبرنا بالتعليقات 👇


–>