أحدث المواضيع

كيفية انشاء قائمة المشاركات لشبكات الاجتماعية وعمل مؤثرات رائعة عليها

السلام عليكم ورحمة الله وبركاته

كيفية انشاء قائمة المشاركات لشبكات الاجتماعية بشكل متحرك جذاب


الشرح 
1. سجل الدخول الى مدونتك على لوحة التحكم اختر تخطيط اضافة اداة Html/Javascript
2. اضف الكود التالي في المكان المناسب بمدونتك



div dir="rtl" style="text-align: right;" trbidi="on">
<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>

<ul id="tbisose">
<li data-alt="تابعونا على فيس بوك"><a class="icon facebook" href="https://www.facebook.com/pages/%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D9%85%D8%AF%D8%A7%D8%AF-%D8%A7%D9%84%D8%AC%D9%84%D9%8A%D8%AF/563356490365166">تابعونا على فيس بوك</a></li>
<li data-alt="تابعونا على تويتر"><a class="icon twitter" href="http://twitter.com/mohammed1811990/">تابعونا على تويتر</a></li>
<li data-alt="تابعونا على جوجل Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/111748598580235575485/posts">الملف الشخصي على Google+</a></li>

<li data-alt="اشترك في  RSS"><a class="icon rss" href="http://feeds.feedburner.com/alamat%20feed%20rss">اشترك في التغذية RSS</a></li>
</ul>
</div>
3. قم بتغيير الروابط باللون الاحمر على مشاركاتك بالشبكات الاجتماعية 

الاضافة الثانية حسب الطلب
صورة الاضافة


طريقة الاضافة مثل السابقة

كود الاضافة


<div class='metro-social'><li><a class="fb" href=https://www.facebook.com/pages/%d9%85%d8%af%d9%88%d9%86%d8%a9-%d9%85%d8%af%d8%a7%d8%af-%d8%a7%d9%84%d8%ac%d9%84%d9%8a%d8%af/563356490365166?ref=tn_tnmn"></a></li><li><a class="tw" href=http://twitter.com/mohammed1811990"></a></li><li><a class="gp" href="https://plus.google.com/111748598580235575485"></a></li><li></li><li><a class="yt" href=http://www.youtube.com/mohammednnnn1></a></li><li></li></div><style>.metro-social{width:285px}.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}</style> 

غير الروابط صفحاتي باللون الاحمر بروابط صفحاتك 

4 تعليق على " كيفية انشاء قائمة المشاركات لشبكات الاجتماعية وعمل مؤثرات رائعة عليها "

اسعدني مرورك بتشكرك كتيرررررررر على المتابعة x-)

اريد ان اجعل قائمة المتابعة علي الصفحات الاجتماعية مثل هذة المدونة ياريت الشرح و الاكواد اذا سمحت ... واكون شاكر افضالكم

شكرا لطلبك تم تحديث الاضافة

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

نحن لانستخدم إعلانات ضارة او مزعجة في موقعنا نأمل منكم تعطيل الاداة في الموقع حتى تتمكن من مشاهدة الإعلانات.

شكرًا لك

×