ازرار المواقع الاجتماعية اسفل التدوينية بتأثير 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="http://3.bp.blogspot.com/-ZXTHHjldPDE/UB_mNQ1r58I/AAAAAAAACIo/GGiwE7cDtXs/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="http://4.bp.blogspot.com/-fCzj-iIwkGA/UB_mVJ2lAOI/AAAAAAAACJQ/srvFhqp98TQ/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="http://3.bp.blogspot.com/-6rCtjovX8Gg/UB_mSKVs0xI/AAAAAAAACJA/IyODIWNBJ8I/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="http://4.bp.blogspot.com/-vTJ-UGMtgKU/UB_mMNaTq-I/AAAAAAAACIg/C4bIUY9AmNw/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="http://3.bp.blogspot.com/-F-u1729U3zI/UB_mQfgqYGI/AAAAAAAACI4/tH7t9wx1p8w/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="http://4.bp.blogspot.com/--kX0uVAf30E/UB_mTdyJOxI/AAAAAAAACJI/8zhiUSVTMLQ/s200/technorati.png" width='60px' height='70px'/></a></center>

</b:if>

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

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

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

تحياتي.

المصدر: هنا

الكاتب : Salem Shami

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

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