شارك هذه التدوينة على:
فيسبوك جوجل تويتر
0

أزرار المواقع الاجتماعية لمشاركة موضوع

موقع لديه أزرار داخل المواضيع تخص مشاركة الموضوع على الشبكات الإجتماعية إن لم تكن تتوفر عليهم فيجب أن تضيفهم بدون تفكير على غرار التدوينة الأولى التي بها أيقونات تنزلق ،اليوم سأقدم لكم شيئ مختلف بتأثير 3D خفيفة وبتصميم Css كامل



1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع الكود التالي فوقه
.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'> 
5. ضع الكود الأتي فوقه
* ملاحظة قد تجد الكود متكرر الأخير هو المقصود .. إذا كنت تتوفر على إضافة المشاركات الإجتماعية إستبدلها بالكود الأتي
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYH8Aj1WCJ_dJxW57BJjTOovh-5X-DQPZ-LXpZF9kz58IIyzHn1lwKNEMcJ-rlPB-Hj61ndn6caON9BZ4zRBIEMlqAiJPSFQuAJYh6HnHuWuoiQgmsQAuhn9_hc81gGTMKBrO6a9laTrlk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0C8Va20h3ZsrjBh2Ul5mYoDy-AQpLef1f3ONZs62zWkozSPWRGOrU_ayMJCcxf2sLca3Iqk7qzsjc2SK7xtbngm2cmLjfoDSkH_bOoS9lw6DWzRsyHBVF3Pbg57p2fdN_A3Ra3kg97u8e/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZq23UooEnVnWzEJnU3NOCVKcAuF4FjkqwnHuajiNGc8JPdDIPLaC7O8qOeBBZZUtpEl1C7_BKRRBeHtJnsPjG_ly5AzljYtn3IGwM25LKHOpHZNVgoKS1wt0EysHddb7RM8QNtY5mQjdj/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tEWnDVfWGKIDZkzkcBtLBLoGKNVx8x_ln2dNacLs2Cnv2_g1cuB9Qq7sdGjavEJKb6kUpTX-gZ2LPDPe0W4JMgtjt-9_NOFkv_fSXyznRpy0OlYAUeeyPz8EzthVPlpqpTjSQPSuVFC2/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>

* المحدد باللون الأصفر خاص بصور الشبكات الإجتماعية
 عنوان التدوينة: موقع لديه أزرار داخل المواضيع تخص مشاركة الموضوع على الشبكات الإجتماعية إن لم تكن تتوفر عليهم فيجب أن تضيفهم بدون تفكير على غرار التدوينة الأولى التي بها أيقونات تنزلق ،اليوم سأقدم لكم شيئ مختلف بتأثير 3D خفيفة وبتصميم Css كامل 



1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع الكود التالي فوقه
.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'> 
5. ضع الكود الأتي فوقه
* ملاحظة قد تجد الكود متكرر الأخير هو المقصود .. إذا كنت تتوفر على إضافة المشاركات الإجتماعية إستبدلها بالكود الأتي
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYH8Aj1WCJ_dJxW57BJjTOovh-5X-DQPZ-LXpZF9kz58IIyzHn1lwKNEMcJ-rlPB-Hj61ndn6caON9BZ4zRBIEMlqAiJPSFQuAJYh6HnHuWuoiQgmsQAuhn9_hc81gGTMKBrO6a9laTrlk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0C8Va20h3ZsrjBh2Ul5mYoDy-AQpLef1f3ONZs62zWkozSPWRGOrU_ayMJCcxf2sLca3Iqk7qzsjc2SK7xtbngm2cmLjfoDSkH_bOoS9lw6DWzRsyHBVF3Pbg57p2fdN_A3Ra3kg97u8e/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZq23UooEnVnWzEJnU3NOCVKcAuF4FjkqwnHuajiNGc8JPdDIPLaC7O8qOeBBZZUtpEl1C7_BKRRBeHtJnsPjG_ly5AzljYtn3IGwM25LKHOpHZNVgoKS1wt0EysHddb7RM8QNtY5mQjdj/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tEWnDVfWGKIDZkzkcBtLBLoGKNVx8x_ln2dNacLs2Cnv2_g1cuB9Qq7sdGjavEJKb6kUpTX-gZ2LPDPe0W4JMgtjt-9_NOFkv_fSXyznRpy0OlYAUeeyPz8EzthVPlpqpTjSQPSuVFC2/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>

* المحدد باللون الأصفر خاص بصور الشبكات الإجتماعية
 عنوان التدوينة: أزرار المواقع الاجتماعية لمشاركة موضوع
ما هو التقييم الذي يمكنك اعطاءه لهذه المدونة ؟

فظيعة

سيئة

متوسطة

جيدة

ممتازة

لا

مكتبة قطر الندى للمواقع الاخبارية والتطبيقات الذكية تأسست سنه 2017 في العراق .

ٌ

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

إرسال تعليق

تواصل معنا !

للتواصل أو الإستفسار معنا يرجى مراسلتنا من خلال نموذج المراسلة أسفله !


video

مكتبة قطر الندى للمواقع الاخبارية والتطبيقات الذكية تأسست سنه 2017 في العراق .

صاحب الموقع : الاعلامي كرار الكعبي عراقي الجنسية من مواليد 1996 مطور ومصمم مواقع وتطبيقات احترافية.

www.facebook.com/IRAQ.KGB97

جميع الحقوق محفوضة لـ شركة قطر الندى هوست للبرمجة
تصميم و تطوير : كرار الكعبي
تابع موقع قطر الندى للبرمجة
Join on this site

كن احد متتبعي ال