ازرار المواقع الاجتماعية اسفل التدوينية بتأثير css3
http://www.techpointblog.com/2012/08/css3bloggertools.html
![[HTML2.png]](https://lh6.ggpht.com/-nONpCGMA_V0/UCEA_awjFdI/AAAAAAAACOY/J-mQLsDgegc/s1600/HTML2.png)
اضافة المواقة الاجتماعية لمدونات بلوجر بالـ CSS3 هذه الاضافة
عند تحريك المؤشر لعند احداها تدور بدرجة معينة لجهة عقارب الساعه
طبعا زر الفيس بوك هنا يمثل زر المشاركه "share" و زر التويتر يضيف تغريدة عن التدوينية...
تابع لتعرف كيفية تركيب هذه الإضافه:
- اذهب للوحة ادارة مدوونتك
- القالب
- تحرير HTML
- أشر على توسيع القوالب
- اضغط على زر 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 */
}
.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 == "item"'>
<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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + 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='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + 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='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + 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='"http://digg.com/submit?phase=2&url=" + 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='"http://reddit.com/submit?url=" + data:post.url + "&title=" + 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='"http://technorati.com/faves?add=" + 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>
الان اضغط حفظ النموذج ومبروك عليك ادخل اي تدوينية و ستجد هذه الاضافة موجودة
في حال وجود اي استفسار يمكنك طرحة هنا
ارجو منك تقدير لتعبي وضع تعليق ينسيني ما بذلته هنا
تحياتي.
المصدر: هنا
شكراااااااااً
ردحذفhttp://it-moe-2010.blogspot.com/