طريقة تركيب اضافة المشاركة على مواقع التواصل الاجتماعية بتقنية CSS وبشكل جذاب

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


طريقة اضافتها لمدونتك

الطريقة سهلة كل ما عليك فعله هو الدهاب الى مدونتك ثم االى خيار قالب ثم تحرير HTML ثم ابحث عن الكود 
<data:post.body/>
ثم اضف قبله الكود التالي:

<style> 
/*--------Flipper Sharing Widget ------*/ 
.flipper a { 
display:block; 
height:48px; 
width:48px; 
padding:0 4px; 
float:left; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2SQ8LvOGmD3MChEJGC3LhMXXjUhDMihr5qDwFSwY_NKYomy79H1ZOwuEqte217OkrzeSDC0lEV6g_HBJoHttvW2TpzDdp3WfQgBsUrxJrNo5QYQbfiNEIz8hnDqZHgki30UuBL3K7Qutl/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:#333333; 
font-weight:bold; 
font-size:20px; 
font-family:sans-serif;
} 
</style>

<div class='flipper'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare"> 
Please Share it! :) </div>

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

<!--Facebook--> 
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter --> 
<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='Tweet this :&gt;'/>

<!-- Pinterest --> 
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious --> 
<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 :&gt;'/>

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

<!-- 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 :&gt;'/>
<!--RSS --> 
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> 
</b:if></div>
<div style="clear:both"/>

يمكنك التعديل على الروابط كما يحلو لك
يمكنك التعديل على الالوان من خلال تغيير #333333

لا تقرا وترحل كافئ مجهوداتنا بكلمة شكر تكفيني لاعطى  المزيد .....

جميع الحقوق محفوظة © 2015 محترف الويب

تصميم :