آخر الأخبار

الاثنين، 6 يناير 2014

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

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



طريقة تركيب الإضافة 

1- ادخل إلة مدونتك / واختر تحرير قالب

2- إبحث عن الوسم <data:post.body/>

3- ضع الكود التالي تحته

الكود


<style>
ul.social {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social li.abfacebook {
background-image:url(https://lh4.googleusercontent.com/-g96XDS6An1k/UfKcLRScMGI/AAAAAAAAAws/Bk1SpOZZcKI/h120/pctoolstips.blogspot.com.png);
}
ul.social li.abtwitter {
background-image:url(https://lh4.googleusercontent.com/-TINZTLR3nDU/UfKcUH69IAI/AAAAAAAAAw0/B_xd2yul5jE/h120/pctoolstips.blogspot.com.png);
}
ul.social li.abgoogleplus {
background-image:url(https://lh5.googleusercontent.com/-8qFL3ScInaE/UfKcavK8C2I/AAAAAAAAAw8/em1ZG0kI9WM/h120/pctoolstips.blogspot.com.png);
}
ul li.abpinterest {
background-image: url(https://lh3.googleusercontent.com/-QaumEsRAMgE/UfKcic6jRWI/AAAAAAAAAxE/Cs78xNOnWAY/h120/pctoolstips.blogspot.com.png);
}
ul.social li.abstumbleupon {
background-image:url(https://lh5.googleusercontent.com/-jX6SXprh5oE/UfKcpZZ99sI/AAAAAAAAAxM/w0eE4aEWLJo/h120/pctoolstips.blogspot.com.png);
}
ul.social li.abdig {background-image:url(https://lh3.googleusercontent.com/-R5EnJzrZhqA/UfKcv_u5tqI/AAAAAAAAAxU/WCADuBE5qFc/h120/pctoolstips.blogspot.com.png);
}
ul.social li.ablinkedin {
background-image:url(https://lh6.googleusercontent.com/-VfzchHt2tFg/UfKc2V1CSnI/AAAAAAAAAxc/KaLyLj4Eji8/h120/pctoolstips.blogspot.com.png);
}
#animation:hover li {
opacity:0.2;
}
#animation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation li:hover {
opacity:1;
}
#animation li:hover a strong {
opacity:1;
top:-10px;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>شارك الموضوع مع أصدقائك.</b></div>
    <ul class='social' id='animation'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); 
return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);
e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>
</center>
<div align="right">
<a href="http://experts-program.blogspot.com/2013/12/feedburner.html" class="tt">للحصول على مثلها<span class="tooltip"><span class="top"></span><span class="middle"> الإضافة مقدمة من : مدونة الخبراء للبرامج.</span><span class="bottom"></span></span></a></div>
<style>

4- احفظ القالب 


Note:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر
no image
موضوع المشاركة: إضافة أزرار المشاركات الإجتماعية تحت كل مشاركة 9 من خلال 10 وعلى أساس 10 تصنيف. 9 تعليقات المستخدمين.
  • تعليقات بلوجر
  • تعليقات الفيس بوك

0 Comments:

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

إرسال تعليق

Item Reviewed: إضافة أزرار المشاركات الإجتماعية تحت كل مشاركة Description: إضافة أزرار المشاركات الإجتماعية تحت كل مشاركة Rating: 5 Reviewed By: home blogger