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

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

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

- قم بدخول الى لوحة تحكم مدونتك ثم الى القالب بعدها الى تحرير html، وابحث عن الكود التالي:
<b:skin><![CDATA[
- عند ايجاده اضف الكود التالي اسفله (تحته).
/* share button ==================================== */
.arlina-tooltip {position:relative;display:inline-block;}
.arlina-tooltip:before,.arlina-tooltip:after{position:absolute;opacity:0;z-index:1000;pointer-events:none;}
.arlina-tooltip:hover:before,.arlina-tooltip:hover:after{opacity:1;}
.arlina-tooltip:before {content:&#39;&#39;;position:absolute;background:transparent;border:4px solid transparent;position:absolute;}
.arlina-tooltip:after{content:attr(data-arlina-tooltip) !important;background:#494158;color:#fff;padding:0 10px;font-size:10px !important; font-family:inherit !important;white-space:nowrap;-webkit-backface-visibility:hidden;margin-right:initial;}
.arlina-tooltip-top:before{bottom:120%;right:10%;margin:0 0 -11px 0;border-top-color:#494158;}
.arlina-tooltip-top:after {bottom:110%;right:0%;}
.share-post1 {text-align:center;margin:20px auto;padding-top:15px;overflow: hidden;}
.widget .post-body &gt; .share-post1 ul {padding:0;}
.share-post1 li{height:35px;float:right;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}
.share-post1 li a{padding:0px 35px 0px 0px;color:#fff;display:block;font-size:18px;font-family:inherit;font-weight:600;transition:all 0.6s ease-out;line-height:35px;}
.share-post1 li a:hover{color:#fff;}
.share-post1 li .twitter{background-color:#19bfe5;}
.share-post1 li .facebook{background-color:#3b5998;}
.share-post1 li .gplus {background-color:#d64136;}
.share-post1 li .pinterest{background-color:#cb2027;}
.share-post1 li .tumblr{background-color:#304e6c;}
.share-post1 li .twitter:hover,.share-post1 li .facebook:hover,.share-post1 li .gplus:hover,.share-post1 li .pinterest:hover,.share-post1 li .tumblr:hover{color:#fff;}
.share-post1 li:last-child{margin-left:0;}
.share-post1 li .fa:before{position:absolute;top:0;right:0;display:inline-block;padding:10px;font-family:fontawesome;text-align:center;color:#fff;font-size:15px;background:#444;}
.share-post1 li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post1 li .fa{display:initial;}
.share-title {display:inline-block;font-family:Droid Arabic Kufi;font-size:16px;font-weight:600;position:relative;top:-7px;border-bottom:2px solid #555;}
- اعد البحث عن الكود التالي:
<data:post.body/>
- ملاحظة اذا وجدت اكثر من كود قم بذهاب الى أخر واحد وضع اسفله الكود التالي:
<div class='share-post1'>
<div class='share-title'>شارك المقالة مع أصدقائك </div>
<ul>
<li><a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك على تويتر' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
<li><a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك على الفيس بوك' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
<li><a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك على جوجل' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
<li><a class='tumblr arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك على تمبلر' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
<li><a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك على بنترست' 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'/>Pinterest</a></li>
</ul></div>
<div style='clear:both'/>
- بعدها احفظ القالب، وشاهد النتيجة.
ملاحظة: في حال ظهرت لك ايقونات على شكل مربع هذا يعني ان مدونتك لا تحتوي على نكتبة الفونت اوسم، ويمكنك اضافتها عبر التدوينة التي شرحنا فيها كيفية اضافة مكتبة الفونت اوسم لمدونات بلوجر.
اذا واجهتك اي مشكلة في تركيب الاضافة اتركها في تعليق وسنقوم بحلها لك باذن الله، سلام.

شارك المقالة مع أصدقائك

mo3awin

هناك 4 تعليقات:

  1. جربتها أخي لكن لم تنجح معي

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

      حذف
    2. ممكن رابط صفحتك على الفيس بوك اود مراسلتك وشكرا

      حذف
    3. جميع روابط تواصل الاجتماعي موجودة في اسفل الموقع .. مثل الفيسبوك و التويتر و جوجل بلس و يوتيوب ...
      وهذا رابط الصفحة https://www.facebook.com/Mo3awin

      حذف