إضافة أزرار المشاركات الإجتماعية لمدونات بلوجر فلات 2016.

أزرار المشاركة الإجتماعية فلات للبلوجر:

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

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

2- الخطوة الثانية قم بحفظ نسخة إحتياطية لقالب بلوجر الخاص بك 
نسخ القالب
3- قم بالدخول على تحرير قالب بلوجر
الدخول للقالب HTML
4- الخطوة الرابعة قم بالبحث عن الكود التالي:</style>
- إن لم تنجح في هذا المكان قم بالبحث عن:</b:template-skin>
- لم تنجح بقي لدينا خيار وحيد هنا : ]]></b:skin>
بالضغط على CTRL+F
ملاحظة : لنسخ الأكواد كاملة وصحيحة قم بالضغط مرتين عليه .
البحث في القالب 
5- قم بوضع كود CSSالتالي قبلها مباشرة يعني فوقها.
 /* CSS Share Button */
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px} 
6- كما في المرة السابقة قم بالبحث عن كود:<head/>
وضع الكود التالي فوقه أيضا .

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> 
7- الخطوة الأخيرة قم بالبحث عن الكود التالي<data:post.body/>
- ملاحظة: ربما تجد في قالبك الكود مرتين أو ثلاثة قم بإضافتها تحت الأخير .
وضع الكود التالي تحتها طبعا .
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='sharepost'>
                <ul>
                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

                <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>

                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>

    <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

                <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

                </ul>
         </div> </b:if> 
- الآن قم بحفظ قالب بلوجرالخاص بك ومبروك عليك اضافة أزرار المشاركات  والتي سوف تساعدك في نشر مواضيعك وتساعد الزوار في نشرها أيضا بتبادل المواضيع عبر المواقع الإجتماعية .
فيديو يوضح كيفية إضافة أزرار المشاركات الإجتماعية لمدونات بلوجر فلات 2016.

مدونة كيف ويندوز برامج بلوجر نافذة مفتوحة على العالم لدعم المحتوى العربي ،  نتمنى أن يكون مروركم علينا مفيدا كما نتمنى منكم دعمنا على المواقع الاجتماعية كيف برامج وبلوجر
ندعوك للإشتراك بـ: القائمة البريدية لمدونة كيف

اشترك الآن Subscribe

الموضوع السابق
الموضوع التالي

هناك 12 تعليقًا :

  1. شكرا لك أخي بارك الله فيك نجحت معي و لكن الأيقونات لم تظهر

    ردحذف
  2. قم بضافة كود الايقونات font-awesome/4.3.0/css ;s وستظهرلك هاته الايقونات

    ردحذف
    الردود
    1. انا عملت كل الخطوات كود الايقونات ده منين

      حذف
    2. قم بنسخ هذا الكود هو موجود في الموضوع وستظهر لك الايقونات maxcdn.bootstrapcdn.com

      حذف
  3. شكرا لك أخي نجحت معي أخيرا بارك الله فيك

    ردحذف
    الردود
    1. وفيك بارك الله شكرا لمرورك على مدونة كيف

      حذف
  4. شكرا لك اخي الكريم افلحت الطريقة مع مدونتي :)

    ردحذف
    الردود
    1. العفو مرحبابكدوما على مدونة كيف

      حذف
  5. شكرا على الإضافة الرائعة
    http://www.ob-tech1.com

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

      حذف
  6. قمت بالتجريب لكن للأسف أخي الكود لا يعمل

    ردحذف
    الردود
    1. الكود يعمل بطريقة جدية صديقي قم باعادة المحاولة وتابع الفيديو جيدا او قم بتحميل القالب وارساله ساقوم بتركيبها

      حذف