مدونة معاون

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

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

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

شرح كيفية تركيب اضافة أزرار المشاركة:

- اولا قم بدخول الى هذا رابط لمعاينة اضافة.

- لان انتقل الى لوحة تحكم مدونتك ثم المظهر بعدها تحرير html قم بالبحث عن الوسم التالي.

</b:skin>

بعد ايجاده ضع فوقه الكود التالي.

.flipper{background:#ddd;overflow:hidden;text-align:center;padding:10px;}

.flipper a{display:inline-block;height:48px; width:48px; padding:0 4px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwB6gmhEa0ptleLhovf98LGdr-8CJ239spHUeMczDHwFZ0ji7w_YA4mKX-OenHPhrNpoXeLVcoEv3PYoD_SLUv33HOFWXurgbqpYly2D-5jlC17vUmGevl2dlMb9s3VXDv9oPCQ1IOW6vS/s1600/flipper.png) no-repeat;-webkit-transition:ease-in 0.15s all;-moz-transition:ease-in 0.15s all;-o-transition:ease-in 0.15s all;-ms-transition:ease-in 0.15s all;transition:ease-in 0.15s all;cursor:pointer;}

.flipper a.googleplus{background-position:0px -348px;}

.flipper a.googleplus:hover{background-position:0px -406px;}

.flipper a.pinterest{background-position:0px -464px;}

.flipper a.pinterest:hover{background-position:0px -522px;}

.flipper a.delicious{background-position:0px 0px;}

.flipper a.delicious:hover{background-position:0px -58px;}

.flipper a.digg{background-position:0px -116px;}

.flipper a.digg:hover{background-position:0px -174px;}

.flipper a.stumbleupon{background-position:0px -812px;}

.flipper a.stumbleupon:hover{background-position:0px -870px;}

.flipper a.technorati{background-position:0px -928px;}

.flipper a.technorati:hover{background-position:0px -406px;}

.flipper a.twitter{background-position:0px -928px;}

.flipper a.twitter:hover{background-position:0px -986px;}

.flipper a.facebook{background-position:0px -232px;}

.flipper a.facebook:hover{background-position:0px -290px;}

.flipper a.reddit{background-position:0px -580px;}

.flipper a.reddit:hover{background-position:0px -638px;}

.flipper a.rss{background-position:0px -696px;}

.flipper a.rss:hover{background-position:0px -754px;}

.Pleaseshare{margin:10px 0px;color:#333;font:bold 20px sans-serif;}

- اعد البحث عن الكود التالي.

<data:post.body/>

هناك اكثر من كود قم باختيار اخر واحد وضع اسفله الكود الموالي.

<div class='flipper'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="Pleaseshare">شارك مع أصدقائك</div>

<a class='googleplus' expr:href='"https://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it'/>

<a class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;t=" + data:post.title' rel='external nofollow' target='_blank' title='شارك على الفيس بوك'/>

<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='شارك على التويتر'/>

<a class='pinterest' href="https://pinterest.com/" rel='external nofollow' target='_blank' title='شارك على بنترست'/>

<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious' />

    <!--DIGG--><a class='digg' expr:href='&quot;https://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this'/>

<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this' />

    <!-- Reddit --><a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit'/>

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz'></a>

</b:if>

</div>

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