المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : إضافة أزرار المواقع الاجتماعية



salima
11-01-2013, بتوقيت غرينيتش 08:13 AM
هذه الأداة تظهر أزرار المواقع الاجتماعية عائمة في صفحة مدونتك بتاثيرات جميلة عند التأشير
مقدمة من موقع نجوم الضحك
مدونة blog نجوم الضحك The Best Funny Pictures website on the internet. (http://www.starfunny.com)

للإضافة هذه الأداة اتبع الخطوات التالية:
في لوحة تحكم المدونة blog توجه الى التخطيط > إضافة أداة > HTML/JavaScript
ثم ضع هدا الكود code




http://4.bp.blogspot.com/-g7QgbnW_Nug/UW_kpZX8CvI/AAAAAAAAO9g/83FPkLrivJA/s320/img_1351619679_223.jpg

كود code:
<div class=&quot;flt-wdt&quot;>

<style>#floatingbookmarks {
right:25px;
top:40px;
margin-top:10px;
position:fixed;
width:40px;
}

#floatingbookmarks .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}
</style>

<b:if cond='data:blog.pagetype == &quot;item&quot;'>
<div id='floatingbookmarks'>

<a style=&quot;text-decoration:none;&quot; href=&quot;http://www.facebook.com/YourLink&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open('http://www.facebook.com/YourLink');return false;&quot; title=&quot;تابعيني عبر الفايسبوك &quot;> <img border=&quot;0&quot; id=&quot;Facebook&quot; style=&quot;padding-bottom:1px;&quot; alt=&quot;تابعني عبر الفايسبوك&quot; src=&quot;http://4.bp.blogspot.com/-lfV0s1Swxb8/UEvwyyankiI/AAAAAAAAAH0/oIAiBU0GQW4/s1600/facebook.png&quot; name=&quot;Facebook&quot;/> </a>

<a style=&quot;text-decoration:none;&quot; href=&quot;https://twitter.com/YourLink&quot; rel=&quot;nofollow&quot; rel=&quot;nofollow&quot; target=&quot;_Blank&quot; rel=&quot;nofollow&quot; onclick=&quot; window.open('https://twitter.com/YourLink'); return false;&quot; title=&quot;تابعني على توتير&quot;> <img border=&quot;0&quot; id=&quot;Twitter&quot; style=&quot;padding-bottom:1px;&quot; alt=&quot;تابعني عبر تويتر&quot; src=&quot;http://1.bp.blogspot.com/-1etn6aStcTQ/UEvw1dcKNKI/AAAAAAAAAIU/ph6X_Z8ru04/s1600/twitter.png&quot; name=&quot;Twitter&quot;/> </a>

<a style=&quot;text-decoration:none;&quot; href=&quot;http://YourLink/feeds/posts/default&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open('http://YourLink/feeds/posts/default');return false;&quot; title=&quot;تابعني عبر خلاصات المدونة blog&quot;> <img border=&quot;0&quot; id=&quot;Facebook&quot; style=&quot;padding-bottom:1px;&quot; alt=&quot;&quot; src=&quot;http://2.bp.blogspot.com/-iUuRs_V0QoQ/UEvw0kD9noI/AAAAAAAAAIM/AsrY3hydIRE/s1600/rss.png&quot; name=&quot;RSS&quot;/> </a>

<a style=&quot;text-decoration:none;&quot; href=&quot;https://plus.google.com/YourLink&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open('https://plus.google.com/YourLink');return false;&quot; title=&quot;تابعني عبر جوجل GOOGLE +&quot;> <img border=&quot;0&quot; id=&quot;Facebook&quot; style=&quot;padding-bottom:1px;&quot; alt=&quot;تابعني عبر جوجل GOOGLE +&quot; src=&quot;http://1.bp.blogspot.com/-xC96yIIGrUs/UEvw0LHmblI/AAAAAAAAAIE/dQ6Nu96qQC4/s1600/google.png&quot; name=&quot;Google +&quot;/> </a>

<a href=&quot;javascript:window.external.AddFavorite('http ://YourLink/', 'اسم المدونة blog');&quot; title=&quot; أضف المدونة blog لمفضلتك&quot;><img border=&quot;0&quot; src=&quot;http://3.bp.blogspot.com/-IyXNMiQ2raA/UEvwzupvYzI/AAAAAAAAAH8/mxwT6NP36HU/s1600/favorite.png&quot; /></a>

</div>
</b:if>
</div>

لا تنسى تغغير الروابط التي باللون الأحمر الى الحسابات الخاصة بك

بعد ذلك توجه الى قالب template > تحرير HTML و ابحث عن

كود code:
]]></b:skin>

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

كود code:
.flt-wdt{
position:fixed; right:10px; top:40%;
}
.flt-wdt img{
float:right;
clear:right;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}

قم بحفظ التغييرات على قالب templateك
واستمتع بأزرار المواقع الإجتماعية على مدونتك

Read more: إضافة أزرار المواقع الاجتماعية (http://www.starfunny.com/2014/04/blog-post_5326.html#ixzz2YpjI4ZnJ)





https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى