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

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

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


الشرح 
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz67mSNmUd34jCnY_PPd4h_s7QFNWP3QGuAxk5OnnMCAlA7JAS2QW-32JCvmYgw6fIOUpRhEYY99C9WLH8P0q1cFHra2DDSgkUr6ovaN-c4cp7NsUiNAdHgQY-RfkSquB-QOz8jeVem-Y/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 تعليق
  • Ice flower
    Ice flower 10‏/04‏/2013، 10:52:00 م

    روووعة ,
    سلمت يداك ..

  • مداد الجليد
    مداد الجليد 10‏/04‏/2013، 11:39:00 م

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

  • Unknown
    Unknown 28‏/06‏/2013، 8:48:00 م

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

  • مداد الجليد
    مداد الجليد 28‏/06‏/2013، 9:36:00 م

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

أضف تعليق
عنوان التعليق