كيفية انشاء قائمة المشاركات لشبكات الاجتماعية وعمل مؤثرات رائعة عليها
السلام عليكم ورحمة الله وبركاته
كيفية انشاء قائمة المشاركات لشبكات الاجتماعية بشكل متحرك جذاب
الشرح
1. سجل الدخول الى مدونتك على لوحة التحكم اختر تخطيط اضافة اداة Html/Javascript
2. اضف الكود التالي في المكان المناسب بمدونتك
3. قم بتغيير الروابط باللون الاحمر على مشاركاتك بالشبكات الاجتماعية كيفية انشاء قائمة المشاركات لشبكات الاجتماعية بشكل متحرك جذاب
الشرح
1. سجل الدخول الى مدونتك على لوحة التحكم اختر تخطيط اضافة اداة Html/Javascript
2. اضف الكود التالي في المكان المناسب بمدونتك
div dir="rtl" style="text-align: right;" trbidi="on">
#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/AVvXsEhUwnIRFb9tDvwPzyKTpsa0K4mkGte9h7Za3ZkSsT3l-42D0Isdtta76jdU4AScDsvMNOW8J1OAsdonQkEwU5fkNTWIObMRaejSrTXlMY5TWDEsDVx758YAHasenH1CEUcfmwS1tli50uw/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);}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 ">تابعونا على فيس بوكhttp://twitter.com/mohammed1811990 /">تابعونا على تويترhttps://plus.google.com/u/0/111748598580235575485/posts">الملف الشخصي على Google+ http://feeds.feedburner.com/alamat%20feed%20rss ">اشترك في التغذية RSS
الاضافة الثانية حسب الطلب
صورة الاضافة
طريقة الاضافة مثل السابقة
كود الاضافة
.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}
غير الروابط صفحاتي باللون الاحمر بروابط صفحاتك