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

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

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

* اولا اتجه الى لوحة تحكم مدونتك.

* بعدها الى المظهر (القالب).

* ثم اضغط على سهم جنب كلمة تخصيص.

* بعدها اختر تحرير html.

* الان اضغط داخل صندوق اكواد وقم بضغط على Ctrl + F من لوحة مفاتيح كمبيوتر.

* سيظهر لك مربع بحث قم بالبحث عن هذا الكود التالي (الموالي).

<b:skin>

عند ايجاده الوسم السابق قم بإضافة الكود الموجود أدناه اسفله (تحته).

.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'/>

* بعد انتهاء من جميع الخطوات السابق ذكرها بتدريج. قم بحفظ القالب. وشاهد النتيجة.

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

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