أضف أداة للمشاركة على المواقع الاجتماعة تنقلب عند التأشير عليها وبتقنية css لبلوجر

شاركه على +Googleأضفه الى Deliciousشاركه على Twetter شاركه على Facebookأضفه الى StumbleUpon أضفه الى Digg

اليوم سنتطرق الى طريقة وضع  اداة النشر على المختلف المواقع الاجتماعية الكبير وطبعا كلنا نعرف دورها ,لكن هده الاداة التي سنتطرق لها ليست جامدة كأدوات النشر الاخر فعند التأشير على أي أيقونة تتحرك الايقونة  الى الأعلى  وتضهر مكانها أيقونة جديدة ,   والجميل في الاضافة أنها لاتشتغل بأي اسكربتات التي من شأنها  ابطاء ضهور الاضافة, فقط تستعمل تقنية css  وهو يساعد في ضهور الاضافة بسرعة .

 

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

 ثم قم بالبحث عن الكود التالي بالضغط على  ctrl+F

 <data:post.body/>

 ثم اضف الكود التالي مباشرة أسفله

 <style>

 /*- 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/AVvXsEhEZg6LBPq4I-Yg80WzZ9N61YKLlRaQdfjDyDHcXzt5K9R_TOtg2Td96PpI_qrXG-wq5J1JM8lPTzjSHqdzhyHPdKvFRlIcYU9VogiGNMAuzYUbjpTCYs-f1znFZp-aTn1fn_Ec0UMNEx5q/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">

أعجبك الموضوع؟ اذن شاركه على :

</div>

<!--Google Plus-->

<a class='googleplus' href="http://plus.google.com/" 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='شاركه على  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='أنشره على   Twitter  :&gt;'/>

<!-- Pinterest -->

<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='أنشره على  pinterest :&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='أضفه الى  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  :&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 :&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='أضفه الى  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"/>

 ثم  احفض القالب ,

ملاحضة  ادا اردت حدف اي  أيقونة خاصة بأي موقع نشر فقط احدف الكود الخاص  بها  كيف ؟

مثلا ادا أردنا حدف  كود موقع reedit  واننا لا نريده  في الاداة يكفي فقط  تضليل الكود المرغوب في حدفه هكدا ثم ضلله وقم بحدفه  

<!-- 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='أضفه الى  Reddit :&gt;'/>

 هدا كل ما في الموضوع والسلما عليكم

Tweet

Social Sharing Widget bychamelcool

التصنيف : أدوات بلوجر,أكواد و هكات