اضافة مشاركة هذه الصفحة اسفل التدوينه احترافيه 2014 - حصريا مدونة علي نائل

اضافة مشاركة هذه الصفحة css اسفل كل تدوينه باحترافيه كبيره حصريا بمدونة علي نائل




الان ناتي لطريقة التركيب
1- قم بالدخول الى لوحة التحكم ----- ثم اذهب الى قالب ثم ------ تحرير ---- HTML 

بعدها قم بالبحث عــن ]]></b:skin>
واضف بعدها الكود التالي 

 .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-SIZE: 18PX;
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/AVvXsEgMs7vLFbvL6OMs5lTuKkGnrk7L6xooSrJKnvxrmnR1azGOchTtsoVnrU7sqO-5gp3xxnouPNtgiIRxTt1HM-haPAi4ouk8CHBuoZACIf1NO6gI0XlCtCStflZwKOymoTXdBEzcYsvNx49w/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/AVvXsEibwvs0jR9xPNhcmmdUZkUb1uuCmcdU5GwhTzifxDvylpg482q8CH1oHDq2L4h6ruMZ5eYNJSesul-2oUXHzI3KqRKMWs5TkWj6qIJ8ofb8HXUCnBNoB7OCTgERuldGZ1wTjb7EWKXcigYj/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/AVvXsEhaXG9_dMT20quolcW1jV_g0g5M4HfM8Xn6DJ7neY8ZCB4DSXaFFRBXv2idaoSD869P7fz09qSisuwhkD5l-NJ8d01WF02gtbAUIbY80H20PprnRvp5t4SOBN_QznLuIgXkN1Y4Ee0ICFJw/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/AVvXsEhTN1LkLeeVQLA2JdCzQqSC0I5odDLiotugVbI8frzJgMaGnMWVEt_PBN2P1kZpuOtyTHdvkAFejuefgIbMfDUmum8se1LtwhN6-EqfGiBrav8_MT-DiMAM1CuyLqfTgJ6zKnuLdinmODrH/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>