bloggerarchive
247125322047940
تحميل

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



[HTML2.png] 

اضافة المواقة الاجتماعية لمدونات بلوجر بالـ 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>

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

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

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

تحياتي.

المصدر: هنا




ما رأيك: 
ويب 5525568125455899593

إرسال تعليق تعليقات الموقع

لاضافة صورة او فيديو في التعليق ضع رابط الفيديو بين الوسمين كالتالي:
[video] رابط الفيديو [/video]
[img ]ربط الصور [/img]
للتعليق اضغط على مربع التعليق ياسم و اختر : الاسم / عنوان URL ثم اكتب اسمك فقط اذا اردت واضغط الاستمرار.

emo-but-icon

الصفحة الرئيسية item

اشترك ليصلك جديد الموقع.

تابعنا على تويتر

أنضم للموقع!