Tedom تيدوم: اضافة ازرار المشاركة على المواقع الاجتماعيه بتقنية css3

السلام عليكم ورحمة الله وبركاته

اضافة ازرار المشاركة على المواقع الاجتماعيه بتقنية css3

اضافة المواقع css3 بلوجر

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

المواقع الاجتماعيه بلوجر

لنبدأ الشرح

1- لوحة التحكم

2- قالب

3- تحرير HTML
4- توسيع قوالب عناصر واجهة المستخدم

ابحث عن هذا الكود :

</head>

قم باضافة هذا الكود بعده مباشرة

<style type='text/css'> /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org & Modified By Rida @ www.ridasail.blogspot.com */ ul.social { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: url("http://i.imgur.com/uoKjU.png") no-repeat scroll 3px 1px #202020; border-color: #000000 #333333 #333333 #000000; border-radius: 6px 6px 6px 6px; border-style: solid; border-width: 1px; display: inline-block; line-height: 18px; list-style-position: outside; list-style-type: none; margin: 10px 10px 0 0; padding-bottom: 10px; padding-left: 110px; padding-right: 10px; padding-top: 9px;} ul.social { list-style:none; margin:1px auto;display:inline-block; }ul.social li { display:inline; float:left; background-repeat:no-repeat; }ul.social li a { display:block; width:48px; height:48px; padding-right:5px; position:relative; text-decoration:none; }ul.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff;padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0,0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0,0.5);}ul.social li.facebook { background-image:url("https://lh3.googleusercontent.com/-Go0YEGKKgRM/UECkQ_4X85I/AAAAAAAAAfs/LwoktCldbwU/s48/facebook.png"); }ul.social li.twitter { background-image:url("https://lh4.googleusercontent.com/-ZiKWE_BV9fQ/UECkSbkOj4I/AAAAAAAAAgI/TdmRTY-ece8/s48/twitter.png"); } ul.social li.googlebuzz { background-image:url("https://lh3.googleusercontent.com/-leSwB-HHao0/UECkRdLxSCI/AAAAAAAAAfk/j-8ILcwc8gQ/s48/google%252B.png"); }ul.social li.stumbleupon { background-image:url("https://lh3.googleusercontent.com/-oNCLXQh8zXk/UECkR0-fNEI/AAAAAAAAAf4/O0xiqTLJ1Po/s48/stumbleupon.png"); }ul.social li.digg { background-image:url("https://lh3.googleusercontent.com/-N4T3Gv1SGDo/UECkQ_7TO4I/AAAAAAAAAfo/kzrzqCxsCR0/s48/digg.png"); }ul.social li.delicious { background-image:url("https://lh6.googleusercontent.com/-Jck0zYd-Ep8/UECkQ1nGnsI/AAAAAAAAAfc/IzF5rA5BaTE/s48/delicious.png"); }ul.social li.linkedin { background-image:url("https://lh6.googleusercontent.com/-tSk0GtFoMeU/UECkRwX6HkI/AAAAAAAAAf8/vrFSmj0nEXs/s48/linkedin.png"); }ul.social li.reddit { background-image:url("https://lh4.googleusercontent.com/-Q6rNe7_LjA0/UECkRyCgiMI/AAAAAAAAAgA/zJ5nobNhYR4/s48/reddit.png"); }ul.social li.technorati { background-image:url("https://lh4.googleusercontent.com/-D6m-H54D9Lg/UECkSROmY3I/AAAAAAAAAgQ/OJ55CLwW1_s/s48/technorati.png"); }#cssanime:hover li { opacity:0.2; }#cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }#cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }#cssanime li:hover { opacity:1; }#cssanime li:hover a strong { opacity:1; top:-10px; } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org & Modified By Rida @ www.ridasail.blogspot.com */ </style>

الان ابحث عن الكود التالي

<data:post.body/>

بعده مباشرة اضف هذا الكود

<b:if cond='data:blog.pageType == "item"'>
<ul class='social' id='cssanime'>
<li class='facebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'>Facebook</a>
</li>
<li class='twitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false; ' rel='nofollow' title='Tweet This!'>Twitter</a>
</li>
<li class='googlebuzz'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&imageurl="'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Post on GoogleBuzz'>Google Plus</a>
</li>
<li class='stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>StumbleUpon</a>
</li>
<li class='digg'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Digg this!'>Digg</a>
</li>
<li class='delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on del.icio.us'>Delicious</a>
</li>
<li class='linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on LinkedIn'>LinkedIn</a>
</li>
<li class='reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Reddit'>Reddit</a>
</li>
<li class='technorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url 'onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Technorati'>Technorati</a>
</li>
</ul>
</b:if>

مبروك على الاضافة !
..

Tedom تيدوم

26‏/01‏/2013

اضافة ازرار المشاركة على المواقع الاجتماعيه بتقنية css3

ليست هناك تعليقات:

إرسال تعليق

تابعنا ليصلك كل ما هو جديد

أرشيف المدونة الإلكترونية