اضافة اداة المشاركة علي المواقع الاجتماعية بتقنية CSS للمدونة بلوجر
نتحدث في هذه الايام عن طرق جديدة لاضافة الادوات بأشكال جميلة وجذابة ومتحركة في نفس الوقت واليكم اضافة متميزة كود اداة المشاركة علي المواقع الاجتماعية بصورة متحركة بتقنية 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/AVvXsEhSOWyZ3Yi3TmkWqkIl7E3JSYNBWTJxxfXVeYiHHdJSEMtPqMXZ-pQtE6pKkif2cGmgVmR2f2Q4_E_nBKXKV9UU2yjc-xa-kJGeBwFgbkIyLWeeJ7578T2u-dh7QD4FHr2zdIZIvULyqhOX/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 == "item"'>
<div class="Pleaseshare">
أعجبك الموضوع ؟ اذن شاركه على :
</div>
<!--Google Plus-->
<a class='googleplus' href="http://plus.google.com/" rel='external nofollow' target='_blank' title='+1 it :>'/>
<!--Facebook-->
<a class='facebook'
expr:href='"http://www.facebook.com/sharer.php?u=" +
data:post.url + "&t=" + data:post.title'
rel='external nofollow' target='_blank' title='شاركه على Facebook
:>'/>
<!-- Twitter -->
<a class='twitter'
expr:href='"http://twitthis.com/twit?url=" +
data:post.url + "&title=" + data:post.title'
rel='external nofollow' target='_blank' title='أنشره على Twitter
:>'/>
<!-- Pinterest -->
<a class='pinterest'
href="http://pinterest.com/" rel='external nofollow' target='_blank'
title='أنشره على pinterest :>'/>
<!-- Delicious -->
<a class='delicious'
expr:href='"http://del.icio.us/post?url=" +
data:post.url + "&title=" + data:post.title'
rel='external nofollow' target='_blank' title='أضفه الى Delicious
:>'/>
<!--DIGG-->
<a class='digg'
expr:href='"http://digg.com/submit?phase=2&url="
+ data:post.url' rel='external nofollow' target='_blank' title=' أضفه
الى Digg :>'/>
<!--Stumble-->
<a class='stumbleupon'
expr:href='"http://www.stumbleupon.com/submit?url=" +
data:post.url + "&title=" + data:post.title'
rel='external nofollow' target='_blank' title=' أضفه الى Stumble
:>'/>
<!-- Reddit -->
<a class='reddit'
expr:href='"http://reddit.com/submit?url=" +
data:post.url + "&title=" + data:post.title'
rel='external nofollow' target='_blank' title='أضفه الى Reddit
:>'/>
<!--RSS -->
<a class='rss'
expr:href='data:blog.homepageUrl +
"feeds/posts/default"' title='Bookmark plz
:>'/>
</b:if></div>
<div style="clear:both"/>
وان كنت تريد حذف ايقونة من مواقع النشر الاجتماعية مثلا twitter
فقط قم بحذف الكود الموقع التالي مثل
<!-- Twitter -->
<a class='twitter'
expr:href='"http://twitthis.com/twit?url=" +
data:post.url + "&title=" + data:post.title'
rel='external nofollow' target='_blank' title='أنشره على Twitter
:>'/>
ثم قم بحفظ القالب لتظهر هكذا
أعجبك الموضوع ؟ اذن شاركه على :
----------------------------
0 comments :
Post a Comment