اضافة ازرار المواقع الاجتماعية بشكل متحرك ورائع

 

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

اليوم ويانا اضافة بسيطة ورائعة لكنها مهمة في نفس الوقت لكل مدونة من مدونات بلوجر يجب ان تحتوي على ازرار المواقع الاجتماعية فهي تختلف بين شكل واخر لكن اليوم ويانا شكل احترافي وانيق منزلق تتحرك الاضافة عند النزول والصعود في المدونة وتظهر بجانب السكرول بار الاضافة تسهل على الزائر الوصول اليك الى حساباتك في المواقع الاجتماعية والمتابعتك والتواصل معك لاطيل عليكم نمر الى طريقة التركيب

طريقة اضافة الازرار لمدونتك

1- من  لوحة التحكم -> قالب -> تحرير HTML 

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

قم بالبحث عن الكود ]]></b:skin> واضف قبله مباشرا الكود التالي

 .sosmed-kananblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsKiA5nahIdkAoWpSkZ4WG8Huy9WRSIK2PJp7m6kHJ8RPo4TFb2NbIdM2SFFHJOTAewNGvj6-NDW2T5P9pUMJAii587MKcLdyV8fmh91NTMJFwSqLdV1JzF5edfW7hpwxJYz-Uasml6xI/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;transition:all 300ms ease-in-out;border-radius:100px}
.sosmed-kananbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp5rx9OsG4ORtvz-YchOpK30AipnIU6U9hizWnT4gINlP6tRdAqa_jtVwh2kjIaAgXoCg7mfh67-APF85lzkM9dI7UDvseNlAJi6nquatt_Bpx0URpsS_NIxAGFW95sNtGM8VQ-734aYxZ/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;transition:all 300ms ease-in-out}
.sosmed-isiblogger{margin:0px 0 0 43px}
.sosmed-kanantwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9PcSzDqSI5l4puAVNtj618klRNTObE9XzPkLmu7cz8UGLkBmxZ_tOLqw3uXRC0CNQwXbUlT9zPnHNXSfVL-GhoMjUwlIrgpVidsF-rlqRK06clWsB4KAt24YwqOKsEUb4Bz97cFlu5SuZ/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;transition:all 300ms ease-in-out;border-radius:100px}
.sosmed-kanantwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLGMRL87mup1iUtamv_qZUE1Q1ziVzSr7yv4oOKaWSglyXqnNGqZdP5_LzhXDfh-OnpOwcU5Pc9NKJTkbAWEYmP9xISCp1PIh9MkDz7j6NCa4YADpzyFloFoSuHjaeJFIS0UtCJceO0JDc/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;transition:all 300ms ease-in-out}
.sosmed-isitwitter{margin:0px 0 0 43px}
.sosmed-kananfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmqAXiSRbS80d1Vdgq9RAcmDNgYSKNDnf_yE9Er0a2_sbYhAOAGKNRENpASAq7jJ_-c058CfhHS-LJVQxHo9dIkqL0I6glyXI4D7CjlPmH9kFHSIIo5ZvBncfsMvZFm9KMi56l-9YtDDe9/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;transition:all 300ms ease-in-out;border-radius:100px}
.sosmed-kananfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsYsDSmCfOxVE6Snq5srD3DFgid-oMdt6gkOWbV3jqWPhQ2QEpztyLG1NyjuwBQaNdPQFs-V2QRoVG_du_15MRrAoOEPCzjk479Yhx3XNgdCBNoEvd1bokMuC9o3PqRMRLzbjLfldnDVZ/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;transition:all 300ms ease-in-out}
.sosmed-isifacebook{margin:0px 0 0 43px} 

4- والان قم بالبحث عن الكود </body> واضف قبله الكود التالي

 <div class='sosmed-kananblogger' onmouseout='this.className=&apos;sosmed-kananblogger&apos;' onmouseover='this.className=&apos;sosmed-kananbloggerc&apos;'>
<div class='sosmed-isiblogger'>
<a href=' http://ahmed-wab.blogspot.com/' target='_blank'>
<img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bnm_SgJ1dpIzb2Ay8e2WxTuhb6fcTuFBRbyvNZ9ZITcToR5E1wR4zKl4nmYlvLabVAa-E1awY1xpIFSVe07dXpT3-fDtSO-vgLotnA1oD1JyaCaFqFmR8yuwbg_Bq9vPAXNE_vyDXUgk/s1600/FB-open-new.png' title='Like us on Facebook'/></a><br/>
</div>
</div>
<div class='sosmed-kanantwitter' onmouseout='this.className=&apos;sosmed-kanantwitter&apos;' onmouseover='this.className=&apos;sosmed-kanantwitterc&apos;'>
<div class='sosmed-isitwitter'>
<a href='http://ahmed-wab.blogspot.com/' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgkeolzTgWNnhn1FS6zyz6pF92CA27VQvOhr9pzq7iUJaMu9u8XIDg_tzhybUXaI9qZdOKkD0A7_1NSWeoB-aVln9e6d1Hhd69PnmBeLCdAPCNptSQCpu3bODTC6PaCFRSXqaxMjNabyBx/s1600/TW-open-new.png' title='Follow us on Twitter'/></a><br/>
</div>
</div>
<div class='sosmed-kananfacebook' onmouseout='this.className=&apos;sosmed-kananfacebook&apos;' onmouseover='this.className=&apos;sosmed-kananfacebookc&apos;'>
<div class='sosmed-isifacebook'>
<a href='http://ahmed-wab.blogspot.com/' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHIqhOfFF5qXbGDU6hVT0IagDCVl52cbY-jdc18VmooKRS3JZ5qErqPkmPMCI4snN0AHZAOefDN0T0K0BzqbUj-bF4v9Jm6Ijf-3wJGyP27qpAgZD1EfQuu8bwGwyW2alE_tHg7EUzB-ml/s1600/G+-open-new.png' title='Recommend us on Google Plus'/></a>
</div>
</div> 

قم بتغير رابط المدونة http://ahmed-wab.blogspot.com/ الى الحسابات والروابط الخاصة بك في المواقع الاجتماعية واخيرا دوس حفظ

لا تبخل علينا بتعليق بسيط ،، يشجعنا ،، و يمنحك فرصة لاستفادة اكبر :)

لاتتردد بوضع اي استفسار حول الموضوع ضعه في تعليق ويتم الرد عليه في اقرب وقت انشاء الله

دمتم برعاية الله وحفظه