اضافة صندوق المشاركة اسفل المواضيع CSS لمدونات بلوجر

مقدمة عن الاضافة :

السلام عليكم ورحمة الله .. اليوم مع موضوع جديد واضافة صندوق المشاركة للمواقع للاجتماعية اسفل المواضيع بشكل رائع ومتحرك بتقنية CSS ومن فوائد زر المشاركة ان تتيح للزائر مشاركة موضوعك بين اصدقائه مما يرجع بفائدة كبيرة لمدونتك وكسب زوار جدد

معاينة الاضافة

" حرك سهم الماوس على النموزج التالى لتشاهد المعاينة "

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

أولا : ادخل الى القالب ثم تحرير html .. اضغط ctrl+F وابحث عن الكود التالى :

]]></b:skin>

وضغ قبله (فوقه) الكود التالى : "هذا حاص بالاستايل css"

@font-face {
font-family: 'GESSTwoMediumRegular';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype'); }
.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font: 18px 'GESSTwoMediumRegular';
text-shadow: 2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child li:first-child{
text-align: right;
}
.share_button ul:last-child li:first-child{
text-align: left;
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

ثانيا : ابحث عن الكود التالى :

<div class='post-footer'>

اذا وجدته مرتين فالكود الثانى هو المقصود !

الصق بعده (تحته) الكود التالى :

<div class='share_button'>

<ul>
<li><h1>
الموضوع
</h1></li>

<li><h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeHQGV3xIJLnQLXlsqx_gZmC7PD6AmnH-21i03mBMTT9njWDUniE-Tz0eXen0NW041cCfjlaRH6h1p50HAKrfy1dIHaTRT5crBt86wGcdFNxMfGd1NdvTbhO9pFQw_1AKYNThv869orOo/s1600/Facebook.png"/></a></h2>

<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNJ9T6UnZIEb0YIuXJb7XMfPriXx8Lm_jjBrj980MjfTlrFG13KN3VMrj40MimDStRSReFNS0J7J5wpLTEHc9WWn5t7o1UuV4KydK3RuXXyhsQ_wzp0763G5O2FAUqK9voYqfQJAuBwME/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1> شارك هذا </h1></li>

<li>
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEmE_NmS7TYzOmi6TpVwUnzoAhzbNzwGoayVUhOntAwwUcG1DzaK-rkIRnvLmmumcOFHzpwAt6aAOu0zi_Xs5645GQlV0ZG_rkiGXGK-KclLTMuok-JRubdgovhV_efJt9BeyMIdKUzlk/s1600/Google-plus.png"/></a></h2>

<h2>
<a href='javascript:void((function(){var%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)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeRKaf6a-lEbD9yiPnyJ7rYmH-wxybPiYXVz5F9n2OPG9GUKlgkpApPHfwSD6zmPd4C_qoBHbWszPHyqebrs7LpSpTsCa7WP59JCB0_BxdKDIkoEo-g7vPrtTCpukssREOFtOTl2hWTdk/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>

وبالاخير قم بحفظ القالب ومبروك عليك الاضافه ولا تنسى ان تشاركنا رايك