أزرار المشاركات الإجتماعية بتأثير 3D

أزرار المشاركات الإجتماعية بتأثير 3D

يوجد الآن مشاهدة التعليقات : 9

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

كل الموقع لديه أزرار داخل المواضيع تخص مشاركة الموضوع على الشبكات الإجتماعية إن لم تكن تتوفر عليهم فيجب أن تضيفهم بدون تفكير على غرار التدوينة الأولى اليوم سأقدم لكم شيئ مختلف بتأثير 3D خفيفة وبتصميم Css كامل
شرح طريقة التركيب
1. من داخل القالب ابحث عن <b:skin/><[[ وضع الكود التالي فوقه
 .share_button { 
width: 300px;
height: 50px; 
margin: 10px auto; 
}
.share_button ul { 
width: 50%; 
height: inherit; 
float: left; 
list-style: none; 
margin: 0 !important; 
padding: 0 !important; 
}
.share_button ul h1 { 
margin-top: 9%; 
overflow: hidden; 
width: 100%;
color: #4889F0; 
font-size: 18px; 
text-shadow:2px 2px 2px #fff; 
}
.share_button ul li { 
position: absolute; 
height: inherit; 
width: 150px; 
margin: 0 !important; 
padding: 0 !important; 
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 { 
display: inline-block; 
width: 32%; 
height: 40px; 
overflow: hidden; 
margin-top: 5%; 
cursor: pointer; 
border: 0 !important; 
}
.share_button ul:first-child li:first-child{
text-align: right; 
}
.share_button ul:last-child li:first-child{
text-align: left; 
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
4. ابحث عن <div class='post-footer'> وضع الكود الأتي فوقه
* ملاحظة قد تجد الكود متكرر الأخير هو المقصود
<div class='share-box'>
<div class='share_button'>
<ul>
<li><h1>
شارك المقال 
</h1></li>
<li><h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="http://2.bp.blogspot.com/-UK3OEVM0cVw/UwJfjtO-exI/AAAAAAAAGPA/CqQmlIlNJAE/s1600/Facebook.png"/></a></h2>
<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="http://4.bp.blogspot.com/-XyPHPVsfdz4/UwJfkJmI3JI/AAAAAAAAGPQ/QRGykJJtGow/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1></h1></li>
<li>
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="http://3.bp.blogspot.com/-_YGvQ_Nrw10/UwJfjhXOGGI/AAAAAAAAGPU/tv1WNfkHdgg/s1600/Google-plus.png"/></a></h2>
<h2>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="http://4.bp.blogspot.com/-oZgH_AD169o/UwJfjl3ON0I/AAAAAAAAGPE/BLj5lWbsZyE/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>
</div>
* المحدد باللون الأحمر خاص بصور الشبكات الإجتماعية
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 9 تعليقات:

  1. شكراً لك اخ حسام ، في خصوص المشاركات شاهد هذه المشكلة :( http://im72.gulfup.com/qwuAi9.png الوصف لا صلة له بالموضوع إطــــــــــــــلاقــاً . . .


    ماهو الحل أخ حسام :) ؟

    ردحذف
  2. جرب وضع الرابط التالي بدل الأخر
    http://www.facebook.com/share.php

    ردحذف
  3. اخي حسام لدي مشكلة في تركيب ازرار التحميل والمعاينه مشكلتي ليس لها علاقه بهذا الموضوع
    انا عندما اضع الكود الخاص بالازرار قبل وسام ]]>
    واحفظ القالب واضع مشاركه جديد وعندما اخير التأليف الي html
    واضع كود الزر لا اجد الزر فقط الكلمة والرابط ولا اجد الزر ماذا افعل

    ردحذف
  4. تعني وسم skin !!!
    ضع اكواد الأزرار بيه هذين الوسمين <style> </style>
    بعدها ابحث عن </head> وضع الكود فوقه
    اذ لم تنجح الطريقة فهل لديك ازرار اخرى في القالب ؟

    ردحذف
  5. انه قالب من مدونتك اخي وهو قالب Lycoris النسخة الثانية
    انا لا اعرف ما هي المشكله هنا
    ارجو حل المشكله

    ردحذف
    الردود
    1. القالب به ازرار احذف التي وضعتها ..
      ما الكود الذي تستعمله لزر عندما تكتب الموضوع ؟
      اترك رابط مدونتك

      حذف
  6. اخي لقد نسيت
    < / div >
    في أخر كود
    شكرا لك تحياتي

    ردحذف
    الردود
    1. أشكرك على التنبيه أخي

      حذف
  7. حطيت الكودين بس ما صار شي

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم