شروحات بلوجر : اضافات ازرار تابعنا على مواقع التواصل الاجتماعي فيس بوك - تويتر - قوقل بلس - يوتوب بشكل انيق وراع جدا
شروحات بلوجر : اضافات تابعنا على مواقع التواصل الاجتماعي فيس بوك - تويتر - قوقل بلس - يوتوب بشكل انيق وراع جدا
بعد السلام اهلا بكم من جديد متابيعي مدونة الشروحات | المعلوماتية والتقنية
أقدم لكم في هذا الدرس كود اضافة الازرار او روابط مباشرة للصفحات التتبع
على مواقع اجتماعية
مقدمة للدرس:
الكثير منا لديه مدونة ويرد ان يلحق او يمع متابعيه لكن لا يستطيع اخباره بشكل سريع على الجديد المتوفر لديه سواء كان مواضيع او غيرها
في هدا الدرس اضع بين ايديكم كود يتيح لك السماح للجميع في اشتراك و متابعتك على صفحاتك الاجتماعية
طريقة التركيب:
- الدخول على لوحة التحكم الخاصة بمدونتك رابط https://www.blogger.com/home.
- اختر المدونة المراد اضافة لها الكود.
- ثم ادهب الى تخطيط.
- اضافة اداة HTML/Javascript
- وضع عنوان للاداة + لصق الكود الموجود في الاسفل.
- حفظ.
الشرح مصور تابع:
الدخول على لوحة التحكم الخاصة بمدونتك رابط https://www.blogger.com/home.
اختر المدونة المراد اضافة لها الكود.
ثم ادهب الى تخطيط.
اضافة اداة HTML/Javascript
وضع عنوان للاداة + انسخ الكود الموجود في الاسفل.
لصق الكود.
ثم حفظ.
النتيجة.
كود ذو خلفية بيضاء
<style>p#hb_socialicons img { /* Spinning Social Icons Widget By www.4we-eb.blogspot.com */ -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } p#hb_socialicons img:hover { -moz-transform: rotate(120deg); -webkit-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } /* Spinning Social Icons Widget By www.4we-eb.blogspot.com */ </style> <center> <p id="hb_socialicons"> <a href="رابط حسابك في الفيسبوك"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZOkggFb4XPFc8iCGjU29IwXQv_ND01PVD0DBwhM57HkhyBtrkTa7m0PytA5aXYe-gBbhICg3ceY3n9HhpLkwfr81sls-W_nQfHvwHtI74_6GJJkAZA7aT63QnidAA-DV8RmkrROn_s0/s1600/helperblogger.com-facebook.png" /></a> <a href="رابط حسابك في تويتر"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3azWI63edEsEX3XXgzG4PcG3hH4Zd5y8kApAlvaBhBdP9JruK2X_zRuk4nuR0kMtOGyRO79uEKbXTwxvFBmGhEVP2yrsJbOpc6gqrwRasJXCvQEyH3ZHE0-k8E4ab9jpt6Brfaq_d0do/s1600/helperblogger.com-twitter.png" /></a> <a href="رابط حسابك في جوجل بلس"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8YzPD6ZJnhhV-zltZoV4BsJm9IDuAX7VbPKQNVhbquoeiiz0ZU8vCaQiIw7-fNhgIcjAJEnWMQ9u6idPipSYMv6A8b3-tRcoxQhOPMpQr5p0tyPaAFMLh-Z_RFbrsovSCwzdx2HupBew/s1600/helperblogger.com-google_plus.png" /></a> <a href="رابط خلاصات مواضيع مدونتك"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sEWDmLSHhGYg4kzGILgPg2_GWxfSMh06S65MxZiimlTtP3kh6H6aDfU1jqfi5DYqEh6TZ2FHExu73arBqgh6-rsvwhGrEXvTsjzgwNUqNaZyEdt2ur9qpkWfbLtzkgbJ9qJy0qUvzpc/s1600/helperblogger.com-rss.png" /></a> <a href="حسابك في اليوتوب"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDV91I1k0t4HfLuo_R_EaFnk6LIJOqSqVDPnwsoaMZ6SLOwPDrVkEZLHnS79G_XsvjHwppv3dCx8VD5YZZe-zFA_08MefTgZKSadnqjdaFJfIwuN_wr2rev4lJdTWudXUfm5RfybgGa_o/s1600/helperblogger.com-youtube.png" /> </a></p></center>
كود ذو خلفية ملونة
<!-- Start Code Share -->ملاحظة : ان اردت تغيير لون الخلفية مع لةن حافة الاضافة قم بتغيير الكود الملون بالاحمر حسب قالبك.
<div style="background:none repeat scroll 0 0 #ff7c68;border:5px solid #fff;border-radius:6px; -moz-border-radius:6px;-webkit-border-radius:6px;-webkit-box-shadow:0 0 3px #ccc; -moz-box-shadow:0 0 3px #ccc;box-shadow: 0 0 3px #ccc; display:table;color:#e74c3c;margin:0 auto;padding:4px;">
<div align="center" style="background-color:#fff;text-align:center;" class="smallfont">
تابعنا على مواقع التواصل الاجتماعى
</div>
<p align="center">
</p>
<div align="center" class="sharelinks">
<style>p#hb_socialicons img { /* Spinning Social Icons Widget By www.4we-eb.blogspot.com */ -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } p#hb_socialicons img:hover { -moz-transform: rotate(120deg); -webkit-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } /* Spinning Social Icons Widget By www.4we-eb.blogspot.com */ </style> <center> <p id="hb_socialicons"> <a href="رابط حسابك في الفيسبوك"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZOkggFb4XPFc8iCGjU29IwXQv_ND01PVD0DBwhM57HkhyBtrkTa7m0PytA5aXYe-gBbhICg3ceY3n9HhpLkwfr81sls-W_nQfHvwHtI74_6GJJkAZA7aT63QnidAA-DV8RmkrROn_s0/s1600/helperblogger.com-facebook.png" /></a> <a href="رابط حسابك في تويتر"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3azWI63edEsEX3XXgzG4PcG3hH4Zd5y8kApAlvaBhBdP9JruK2X_zRuk4nuR0kMtOGyRO79uEKbXTwxvFBmGhEVP2yrsJbOpc6gqrwRasJXCvQEyH3ZHE0-k8E4ab9jpt6Brfaq_d0do/s1600/helperblogger.com-twitter.png" /></a> <a href="رابط حسابك في جوجل بلس"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8YzPD6ZJnhhV-zltZoV4BsJm9IDuAX7VbPKQNVhbquoeiiz0ZU8vCaQiIw7-fNhgIcjAJEnWMQ9u6idPipSYMv6A8b3-tRcoxQhOPMpQr5p0tyPaAFMLh-Z_RFbrsovSCwzdx2HupBew/s1600/helperblogger.com-google_plus.png" /></a> <a href="رابط خلاصات مواضيع مدونتك"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sEWDmLSHhGYg4kzGILgPg2_GWxfSMh06S65MxZiimlTtP3kh6H6aDfU1jqfi5DYqEh6TZ2FHExu73arBqgh6-rsvwhGrEXvTsjzgwNUqNaZyEdt2ur9qpkWfbLtzkgbJ9qJy0qUvzpc/s1600/helperblogger.com-rss.png" /></a> <a href="حسابك في اليوتوب"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDV91I1k0t4HfLuo_R_EaFnk6LIJOqSqVDPnwsoaMZ6SLOwPDrVkEZLHnS79G_XsvjHwppv3dCx8VD5YZZe-zFA_08MefTgZKSadnqjdaFJfIwuN_wr2rev4lJdTWudXUfm5RfybgGa_o/s1600/helperblogger.com-youtube.png" /> </a></p></center>
<!-- / End Code -->
</div>
</div>
- لون الحافة : #ff7c68
- لون الخلفية : #e74c3c
ليست هناك تعليقات