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

مرحبا لكل متابعي مدونة PH3ahmed

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


الشرح 
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/AVvXsEiGtB8m3WREG66Qz_vUNRFwpZ-_9AfGW1CxtCyvUC-XbazmD5oJlyHq-3URsU0dqIKXihiYYBeTxrDuoG7Y15uGFHcMCgfikptirNxCQsIJwVh-BKtEGh8G6Sc5achMtDfO-wowc3jfTO8/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/PH3ahmed"></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/PH3ahmed></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> 

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

واختر الحفظ ومبروك عليك

هل أعجبك الموضوع ؟

Share

Tweet