إضافة أزرار المواقع الإجتماعية بصيغة 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/AVvXsEhZZR-kOcpiNEVuKWGyHIBRelMbuNIxRYVXLwN1_WCaKjoA40LtcilOGNxSBrIP8UW8A9Fl-56gvlvq6awrnO7Z2EoJa1xIZjrL7oF3U6YceTr4lgGVbF-7UmUwmx8pWPeToM1uoYeaGMc/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/AVvXsEg72O2vD8CcWDjh1yqt0S-G6AP9W9vbJ2vRFMusJYAIpMWjkABQwvM6KmgpvNBCz-ZSBlwj-vVKZ68kzJeJZhpQk_Wp_YsR3PitNNg71dYJXA-NaODZek6lG-3dniYBmpeBu1V3vcbP2Sc/s1600/youtube2.png)top no-repeat;} .twt-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1A1kco34mPbO90C1E7ewBT26b_dfiNqpX1C9goeuqf9t97HjKMmfv_fA1YUwfmT6Vgh77gAHYu0ac7GGqKuBXXWFwtbLULpMrKComxNtHrb-f0IBunhToV5LxEntMKUoOuVClYS0W4Wo/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/AVvXsEgUHtlF4MrpdDPdV3TGmkfyzilHOrYflop7rVVi-fmFJw-eJ_9M9paqL0rwI_7BUsQRcahSGazYtAcPfYoNQU8UINR-ifBy5w9rRGtPT1h15Il7nl1dMJV1cKwVw9l4Bssh_boUx1jiGCA/s1600/twitter2.png)top no-repeat;} .face-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVWBr12uI-dMmc9gaXN8PE_dC0EEdqba5eeY7zZGn-62eh7aD8i8P0iiSJOCBeG-x5UsBUmdxDNGXJTlqM7ZelVSS9yxlLO2BpItak2MFRdeUokSSelJzWeKl2kVmw579Z_Yt6N1mjfGs/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/AVvXsEiA48BzJE8zV8RRxJTtHTIVDRnFkblz5EVJ-gFoxrOV2lu5BImMl1pDAkWoR8_j31ju_0mSmTeruEFx1W3njv1tiyxZ1WNZS91KIlG9RUAn4TAmfXQEuoZS4Bxna-_mSvMwTIO8G9w0EqI/s1600/facebook2.png)top no-repeat;} .rss-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKF3as2Jc7YeUlYY0MEj80Vq7lSJr_YTj81fiAE2jzv19jMFISal9U7zU1zZqt2tdnW12-R2pVUmNEspGmW6AIpM_QEFBGYRFRBPgrHQZTDs6zIyi-6QIT441bCuTSTJsTTYtAHdw-JcI/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/AVvXsEhCtsmpi7EWNCfD1irUUvYWYYpiuP0UeXmkrhoPCx5s672f-I0MHcAGTMXMDbS0tGVcC4HCNGYhDhjW22uKvbIPcMBqkUtZT2anO-0f_fw3j-jHGr1nHfy_bfd8ejozMaQPNNtUuhmztJ8/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 فقط من هنا 

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