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

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

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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhro54jFrvyAw-Hv9Jd3N1ulqp9XajsAv2rvFaQ-l6N6yRAARmOmUAwrVYGte7nM90HYY-xebM7Z3MSWyO_0-FHr6w6PHlyBYC4Bm5jmze_38O_6t1Yu3vW_7ysjhuVnfqcRLUKqCHFESs/h120/pctoolstips.blogspot.com.png);
}
ul.social li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcTYiJA9mCLMfM-OokAUgHvDqhqNfrO7CAIoeq1mQZRTSxw3371jHdzX6J4YtQvXzsk2dsJW1JuJjsf93VhqcDsVdzuogQnQwwbeaqKyPDux2syRL-0cn9OeFJrSULxdkdNefWN512wso/h120/pctoolstips.blogspot.com.png);
}
ul.social li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2BfHKvyjiXF5leCt8FHVFq87wDarGVP04CJSAoohYICxjijV3eSrJBZDTTYbYaHyMxbLoV283kPo30mZOSsOLLaM_U2vtH8gjjWtGJYtHVhoZhkusWX7HL7pTdU9ca6T1bb8cFscZ8uc/h120/pctoolstips.blogspot.com.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAi-0Vrh4aUF55qXN5LotQeLWdTwDf6Npt3apnhh3h7Ec2w7O1ExmVnNiYGUCZCizW9cQELiTZCWLp3tAfIVi2EGGothCcwbOhXPOkQLKDQUa181fLu-eSEvZn7T_XcMMolezxoZHWYxg/h120/pctoolstips.blogspot.com.png);
}
ul.social li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEima5IypQFQ8eD4ToAppFknkZhuth-gg2URUz257d1f8KT1U0BUzHFN1euHEzaHYMDWhXI5WYltrn0MDD155Hzk5aRfIW46hY2H0Tex0uXFglaRSuJP9oB7CIvd_6pIrTOVVuOppg1RNSg/h120/pctoolstips.blogspot.com.png);
}
ul.social li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOCOjeKRqsarzRvXlV10iPqTH9pCoa87amvveuv4pAu2Uz3qzWZCWQDJCplxmwYJxgJj5zrwV0RG1upNZ1MWSJf28PzK3NesOc6EoERGxi_wfIdzWW5E66B2q6iVegfmDZXlEsRNRvK3A/h120/pctoolstips.blogspot.com.png);
}
ul.social li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0z8d3IGhQqOYiw2j8IPakHimkrrjtBorJacb04pGAzE_ACye2-nbs0vGGk2J-hT3bw2wai_WJiRK1rOsjb7ld8NbyRF9B2YpFMTadHTlUkQMbyeGchaHtwbPbm8sYQje_u68Juu6ZFlc/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 == "item"'>
<div style='font-size: 22px;'><b>شارك الموضوع مع أصدقائك.</b></div>
<ul class='social' id='animation'>
<li class='abfacebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' 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:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر

كتب بواسطة Expert Blogger

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

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