ازرار المواقع الاجتماعية اسفل التدوينية بتأثير css3

Follow @TechPoint_Blog

 

اضافة المواقة الاجتماعية لمدونات بلوجر بالـ CSS3 هذه الاضافة

عند تحريك المؤشر لعند احداها تدور بدرجة معينة لجهة عقارب الساعه

طبعا زر الفيس بوك هنا يمثل زر المشاركه "share" و زر التويتر يضيف تغريدة عن التدوينية...

تابع لتعرف كيفية تركيب هذه الإضافه:

1. اذهب للوحة ادارة مدوونتك 
2. القالب
3. تحرير HTML 
4. أشر على توسيع القوالب
5. اضغط على زر Ctrl+F من لوحة المفاتيح

الأن ابحث عن الوسم التالي:

]]></b:skin> 

و الصق الكود التالي اسفله مباشرة:

*------------ TYB Image Rotate--------------*/
.social img:hover
{
transform: rotate(-30deg);
-ms-transform: rotate(-30deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari and Chrome */
-o-transform: rotate(-30deg); /* Opera */
-moz-transform: rotate(-30deg); /* Firefox */
}

الان ابحث عن الوسم التالي:

<data:post.body/>

و الصق بعدة الكود التالي مباشرة:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<center><span style='color: #7AA1C3; font-size: 16px; font-family: Verdana;'><b>Thank you for making this possible ! Kindly Bookmark and Share it.</b></span>

<!--Facebook-->

<a class='social' 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'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifKEGeIpE-XP63Ot_MbCzgOfwHYPoIgLVw-OJHcXx1-Mm3NMlB-xhiQ8WgTEc-riDJBvOrmECT7eRNfb35qNd8p0Sqe30EThhHFrEB6PvYBEPuArwc-f8R6V-ZVtTE34CwgWEKDWyikgw/s200/facebook.png" width='60px' height='70px'/></a>

<!-- Twitter -->

<a class='social' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdj0_nprHlR1WB0StboHjpNeSjpWO8voVYhwZsJ1xtUofWEsy3EYMmZrmBsvu-YzyD-GkLhnKN2UT-2p7Nv3-3cMAyNW1iGE8P2QyiDjnuEN0ucTbu_pwKfpepGANuX6v0r9wcGgv95lc/s200/twitter.png" width='60px' height='70px'/></a>

<!--Stumble-->

<a class='social' 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'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6-0a_8DY5sl88BtKP5jynlV6BR1eJbG6Z0-k9a1atuKP_aqXVc8E97d-1RhOxSmyp4JpEOLfNlr8hzUSL9dnDoW6XFqGdEYiUpnoWzuWQrE_7PZQ7w5zJoTJuisacj49AARc_5QmzeUM/s200/stumbleupon.png" width='80px' height='80px'/></a>

<!--DIGG-->

<a class='social' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAcn8Uxnq8wish_Oj-jeN5WARhEQ9hc0xv1YmgFPu64blkOIJJGm6O5QA3hT0IIwo2o3yYyLh7qnCQAE0Van045772yecB3AzzmJUaqdAfBSsiaykJNXOlIRNbGK8JNcaKbC7UDEdlHJE/s200/digg.png" width='80px' height='80px'/></a>

<!--Reddit-->

<a class='social' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlrhvMN3lTXp8xaqxObrh1N77s9LzhQJoXi7RgApyye9ZHXVHIhyphenhyphen4sSf8YPIyPN-IRjPogS18fvDDj-OplRmjIWdQn1yo33bNd-JBUZ9fvNC344_FSJWi-jMDtAPp0O5b1hGhCsixYx8/s200/reddit.png" width='60px' height='70px'/></a>

<!--Technorati-->

<a class='social' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGIjj6fSDQ_hE-qthhRtyht9ydsu1i-Tk4h3uaIvgYKLnHbM1Rud9a82g4k0eFAC9yPNkivtbuRMs_EyoKOF01BgM4zGdDELcqI7jOJudX7s3LyV7ehKki48bqoN87G0qCB15qQg6ZKQ/s200/technorati.png" width='60px' height='70px'/></a></center>

</b:if>

الان اضغط حفظ النموذج ومبروك عليك ادخل اي تدوينية و ستجد هذه الاضافة موجودة

في حال وجود اي استفسار يمكنك طرحة هنا 

ارجو منك تقدير لتعبي وضع تعليق ينسيني ما بذلته هنا

تحياتي.

المصدر: هنا

الكاتب : Salem Shami

مؤسس نقطة تقنية، مهتم بأخبار التقنية و التجارة الإلكترونية،أسعد بالتواصل معك عبر حساباتي في المواقع الإجتماعية أدناه

• تواصل معي :
• fb
• tw
• gl