إضافة أزرار المواقع الإجتماعية بصيغة css

     

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

 لإضافة أزرار المواقع الإجتماعية بصيغة css أو HTML /java script إلى المدونة وفي هذه الطريقة يكون التركيب على مرحلتين وهذه الإضافة هي كود جميل لأزار المواقع الإجتماعية  ( youtube -Twiter - Facebook-Rss)
 أزار خفيفة و جميلة يتغير لونها عند وضع مؤشر الفأرة عليها كما تحتوي على عدد المشتركين                          

 حيث أنها تتم عن طريق الذهاب إلى المدونة  ثم قالب ثم تحريرHTML ونبحث عن الوسم التالي :  ]]></b:skin>  ونضع الكود التالي فوقه ثم نضغط حفظ النموذج

وإليك الكود :

"
social-icone{ height:108px;} .social-icone div{ margin: 8px 12px;} .social-icone a{ text-decoration:none;} .you-icone b, .twt-icone b,.face-icone b,.rss-icone b{ font:14px tahoma; color:#8c8b8b;} .you-icone span,.twt-icone span,.face-icone span,.rss-icone span{font:11px tahoma; color:#a3a3a3; } .you-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Ye2peWWzxe1M0qikFDy85yt9ptG5QEdjui8oO6x22xNQ83FmyzkO3J8kzmJoDuyOOsZfEyqwvBpS0lLHIDK0mo0yb44MA6yM0azRMM4w2EeSg7Fjyho_i3HH7JCvmisyghDxIAf2tVU/s1600/youtube.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .you-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF4k83DZ8vcoLGRzbS1M8_POdILrPJDXVrpP0iJNBAap3L5IiIkPmT6mP6e06jN9puzUJWsvrs1qvuuKl3le1UWsYZQEx82FcRyn7oiL5wKZsQxUVV18eR7nH184XhCLdCBE5oE0e_lWY/s1600/youtube2.png)top no-repeat;} .twt-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKvcnfABMkGGJaUMOwxVCyq7mNkk48t5fZ1WDmr78Gwgg4Rh6iQ1wIbrYi7R0Vpy9IyCFuBq2rEgKv0NBJq8TaDZBF2-6RSKOCZ6J_k3a9-Wv1fqIizhHeb_g0XCZxVr7RqUQctW9gNsw/s1600/twitter.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .twt-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDgCwnwhDeesZs0zJq_appPlQceTpXNW6dC_FAkGyyNMRpom6eLW2RoEwop_a0KY5KwFpw_G29HB1r58XoKqq3F1mJ3QPWEzGQcZx3Bib1xJaILRLuDn2zV8_N1JO8LXGI68f1wtNv_Y/s1600/twitter2.png)top no-repeat;} .face-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJbsd3Pe9Nbev5vYAlWK8etNAQTiUgPzJiGmNIswCPyTcQB42-kd1xxe2GwDZfVsJRjNLtHj1jQZge5wG9MalsomYUItPnBBk0tyMm1F8YyIX9hmnxGaqBYOPKFEhzpVvYUMwcabuyuc/s1600/facebook.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .face-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjMWyTX0Se9J5sVZYAPwuQIejEVmi0YcEru12dwfBuXt6YbzXNWvEbvp5pQp5_lqbgE9_H604BrZhRC_ZSF_QQRdz4pf8ZqQDbkaJzVqSYwcswhdxmMP6365CohNW2_x-9Lu8KuP_ozp8/s1600/facebook2.png)top no-repeat;} .rss-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrA9QYW-PQTTWgYAerNI3tDkJzFFlvBEkMkfv9hxOgKu9rNY63yqsfzU8_9WUM6SdhwziZoYxtqFbfouPwi7vaqZd5Bop2kCaYngku4dEPfWp-4jsPD-5r786NZbuuS1SsLxwjmLCRoJM/s1600/RSS.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .rss-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOzVq9ZL2x3LPyFjkPC6TYbIzQiKu3XuGWBIY5EUn_ep57NtHbZd5e3i4JklXU-isPNVfu2hVYNieP3yBX0zuPX4VIhSCYv2bnKhu7I7NJMAmyffUhW7BXvvWgAvz0IdW0exxu7vEwD3c/s1600/RSS2.png)top no-repeat;} .post-footer-line > * { margin-left: 0; }"

والمرحلة الثانية نضغط على التخطيط ثم إضافة أداة ونختار HTML /java script ونضع الكود التالي داخل الإطار الكبير ثم نضغط على حفظ

الكود :

"<div class="social-icone"> <a href="http://www.youtube.com/channel/UCQuVAuScyBL7wbhZaFfz5CA"rel="nofollow" rel="nofollow" target="_blank"> <div class="you-icone"> <b>400</b> <span>%u0645%u0634%u062A%u0631%u0643</span> </div> </a> <a href="https://twitter.com/Amine041M"rel="nofollow" rel="nofollow" target="_blank"> <div class="twt-icone"> <b>1000</b> <span>%u0645%u062A%u0627%u0628%u0639</span> </div> </a> <a href="https://www.facebook.com/mohammed.amine.526875"rel="nofollow" rel="nofollow" target="_blank"> <div class="face-icone"> <b>350</b> <span>%u0645%u0639%u062C%u0628</span> </div> </a> <a href="http://feeds.feedburner.com/KINAS29"rel="nofollow" rel="nofollow" target="_blank"> <div class="rss-icone"> <b>2.000</b> <span>%u0645%u0634%u062A%u0631%u0643</span> </div> </a> </div>  "

إستبدل الروابط ذات اللّون الأزرق بروابطك الخاصة 

يمكنك متابعة درس آخر لتركيب الإضافة لكن عن طريق HTML فقط من هنا 

                                              بالـــــــتوفيـــــــــــــــــق
      

Posted in: البلوجر