الجمعة، 15 يونيو، 2012

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

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









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

http://1.bp.blogspot.com/-h0rOChviwlI/T8to10f-dsI/AAAAAAAABRE/wpNfHtp2Uzw/s1600/resized_ez.jpg

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

 <data:post.body/>


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

 <style>
 /*- Sharing Widget -*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(http://4.bp.blogspot.com/-dlD3BDKTZjA/T9IuXkfhSeI/AAAAAAAAGno/s8BGOkjdwX0/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;'/>


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

Social Sharing Widget bychamelcool


3 التعليقات:

اضافه أكثر من رائعه تسلم الايادى
تم التركيب بنجاح للمعاينه
http://goooolvideo.blogspot.com/2012/06/blog-post_7164.html

@ نور فارس

مبروك الاضافة + مدونة واعدة ان شاء الله

إرسال تعليق

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Gadgets By chamelcool Blog