05‏/04‏/2013

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

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

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


الشرح 
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 تعليقات

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

    ردحذف
  2. اسعدني مرورك بتشكرك كتيرررررررر على المتابعة x-)

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

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

    ردحذف

تعليقاتكم تشجعنا على تقديم المزيد وهي محل إهتمامنا دائمًا

© جميع الحقوق محفوظة مداد الجليد 2013 - حقوق الطبع والنشر | مدعومة بكل فخّر من blogger | سياسة الخصوصية