ايقونات نشر فى المواقع الاجتماعية مع تاثيرات | مدونة يلا نسيطر

» » ايقونات نشر فى المواقع الاجتماعية مع تاثيرات

الكاتب : YallaNsaytar

الأربعاء، 18 ديسمبر 2013 | 8:50 ص


ايقونات نشر فى المواقع الاجتماعية مع تاثيرات


اليوم سوف نقول لك كيف يمكنك إضافة ايقونات النشر CSS3 تحت كل مشاركة. هذه الرموز  يكون لها تأثير جميل عند المرو الماوس فوق هذه الرموز. وتتكون هذه الرموز من CSS دون استخدام أي تفعيل جافا مما يبطئ سرعة صفحتك. سوف النقر على أي أيقونة يظهر لك رابط جديد يحمل رابط المشاركة الخاص بالموقع .

معاينة
معاينة


 
طريقة التركيب
نذهب الى لوحة تحكم المدونة ← القالب ← تحرير القالب
ونبحث عن <div class='post-footer-line post-footer-line-1'>  او <div class='post-footer-line post-footer-line-2'>
ونضف قبلها هذا الكود

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

شاركنا بتعليقك :) ولا تتردد فى الاستفسار عن اى شى

Item Reviewed: ايقونات نشر فى المواقع الاجتماعية مع تاثيرات Description: اليوم سوف نقول لك كيف يمكنك إضافة ايقونات النشر CSS3 تحت كل مشاركة. هذه الرموز يكون لها تأثير جميل عند المرو الماوس فوق هذه الرموز. وتتكون هذه الرموز من CSS دون استخدام أي تفعيل جافا مما يبطئ سرعة صفحتك. سوف النقر على أي أيقونة يظهر لك رابط جديد يحمل رابط المشاركة الخاص بالموقع . Rating: 5 Reviewed By: YallaNsaytar

ضع تعليق