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

 

اضافة المواقة الاجتماعية لمدونات بلوجر بالـ 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/AVvXsEgxfAribwqZpBuAlCBG3_jwcyqX7C-THd7lgZy-227y2JuZALHIPrYdMak5AmNWvBr1vX-uQjYAohOB4bW9zoUiwJv2uTa0zdrR9tSGliAmZS_Hda8KL5UHyYcLG37A_JLByUf7YAOK7uM/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/AVvXsEjci3s9e3RPl2Vw0P_k_Jz1C1WY2Pk18mbT_XUPZ5DvXnyeIzhw_6DEQ67B-Pk4A9ayYPtzvnnUhjwV7EkLTIi1pC5BHGPDBVoHypGXxk7zETdUcx4sMm_MM-zVwaueFv7wPcDGEye_BGc/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/AVvXsEigzi6Ko_nLAS7LVGgXTKCqOYdHFiNG5lgpfQwHSWJu1kAXK5H2l3kG1QJVhGb1MwofGMIrvVqSwQtp-jzuOl0nI6WSiuByZ5V2w7py_vzQ0tVjY8ZT1WD9mRHLQ0sKYnc7d9-lCG1ZRw8/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/AVvXsEhUk9UPb4OHbwhUr5_xWSg6qx1-jVjhZ8I15Im8J5Yz9yJRydMHOcQVEg7sTjxI6j4iwZL0zXKhDH3EKO2aIEFuYNMTN3BLyvGUuQE_yeK0RCHFY6OwizOsok8jP0o18OZO3JGxBBjUHgo/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/AVvXsEg6EXSSZGiaaeNdNu-KAXam4gEDkLT2VvPdKnGFmpLK2KS5rSOuoQm7jPan2jJ1VVO3pBvwOnfLg3BUGflvGWK2Bq5s9xUmWN7bPhswxYCwiexdP4EnExGfojd7rxOaWrVe8gTXpCzPvH0/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/AVvXsEguheU9aMd8CPCtSE6hlwoylmGdmwI-oITCpd1HC1-kTH4-TOmInY-srNKjPGpkuSKD02ODNZqaGYjLbVh_wPcveZZzQFd2awxgIBMDUVW8L1Vb7oJw9WevuzI4gNX9DTiPOEgwTkCxsmg/s200/technorati.png" width='60px' height='70px'/></a></center>

</b:if>

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

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

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

تحياتي.

المصدر: هنا