- fahad
- 1:23 ص
- الشبكات الاجتماعية
- 2 تعليقات
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اليوم لدينا أضافة جميلة وخفيفة وهي عبارة عن أيقونات الشبكات الأجتماعية وrss وأيقونة المراسلة قمت بعمل بعض التعديلات وتغيير شكل الأيقونات بحيث جعلتها 3D وكذلك وضعت لها القليل من خصائص CSS فعند مرور مؤشر الماوس تدور الأيقونة دولرة كاملة ثم ترجع لطبيعتها السابقة
الأضافة مهمة جدا لجميع المدونات ولذلك أحببت أن أطرح عدة أشكال وألوان وطرق لكي بأذن الله تعالى تتناسب مع جميع الأذواق
وهذه بعض الدروس ومواضيع أخرى لعدة أيقونات وأضافات للشبكات الأجتماعية للأطلاع عليها قبل الأستمرار بالموضوع
قائمة أفقية مثبت في الفوتر لمدونات البلوجر
جديد أيقونات الشبكات الأجتماعية RSS لـblogger
كود أيقونات الأجتماعية مختلفة بخصائص css لمدونات البلوجر
كود أزرار الشبكات الأجتماعية منزلقة لمدونات البلوجر
أداة القطعة العائمة تابعني بـTwitter لمدونات البلوجر
أضافة قوقل بلس وتويتر وفيسبوك بجانب المدونة بتقنية jequery
وللمزيد قم بالأطلاع على الرابط التالي
أضافات وأيقونات الشبكات الأجتماعية للمدونات البلوجر
نعود للموضوعنا
طريقة التركيب سهلة جدا وبأمكانك وضعه في مكان مناسب تجده في القالب
توجه للوحة التحكم الخاصة بمدونتك
تصميم>>أضافة أداة>>أختار تهيئة HTML/JavaScript
أما للوحة التحكم الجديدة
من القائمة المنسدلة>>تخطيط>>أضافة أداة>>
أختار تهيئة HTML/JavaScript
ثم بعد ذلك أضف الكود التالي داخل الصندوق
<style>p#hb_socialicons img { /* Spinning Social Icons mdonti-n.blogspot */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#hb_socialicons img:hover {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
/* Spinning Social Icons mdonti-n.blogspot */
</style>
<center><p id="hb_socialicons">
<a href="رابط صفحتك بالفيسبوك/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4RKD6T7PLk0kXUqmj1vXhaCkhrzWMK5SWfIpmuk9VhiJNyxBE7lg_d4r6pZUhP1cg8ZJwsgOOaDdi19i-IV3ITxowdW3Bj3mhyphenhyphenm-aD9-L3XAs8HBX-blr-rvFuP61r_zY2ks-mUcWKT8/s1600/FACEBOOK-48x48.png" /></a>
<a href="رابط صفحتك بتويتر ">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlHVgKzuTzrVYPow_v0Jd3TrQHhNVdYOJPsr0H4xjMrYepPbPuxgFwLkfGQddCu71TX4knPtx6XI8MEMiskONUpVjum6Ny7bdVihyphenhyphenMu_ntmxWpRf7RAGwXA5AE1yiZ3vVnia0098sK2n4/s1600/TWITTER-48x48.png" /></a>
<a href="هنا ضع رابط صفحتك بقوقل بلس">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCobseP5N8r9MQY6vlglnXhpfZLoXTGxZuKlZSlBX1LV1E_Dxcags99WF9x-dh0DjcSGIeK86qGSORgXUizMWiVZSOGz7uto-ZqRnv-BQKq-AbrFzJtFFtEFE_iSgFyQQEW-mc9m4OXfI/s1600/GOOGLE-PLUS-48x48.png" /></a>
<a href="http://www.feeds.feedburner.com/ضع هنا أسم المستخدمFeedBurner/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKiDCjA8vdXUTdsYd3FahLCxZU1sF_dFWWlFhtpOY5-rQLevMXM_QaqGJgAyA8HiGmx1-7duXVPPCWykUAWKuGT9aaf05pasX_KtWUM-qnqb1s0iO0oeIyIQKVy1tlcErNsCWc7Oct5Ac/s1600/RSS-48x48.png" /></a>
<a href="ضع هنا رابط للمراسلتك">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZO4y3ucYw6siStdNRk2SBFqkaq05z_yWurkva8zsoLQC0TZ75dcYNDPOs-VemSHKNw1J97MZdqbHmC0qJ0btQRRTq8kOJs18sPwb2Ve-PogGsayI8B5a7i_BD8aNU83HAT1sJTpnuydo/s1600/RSS-EMAIL-48x48.png" /></a>
</p></center>
ملاحظات
لاتنسى التعديل على العبارات الموجودة في الكود والمشار لها بلون الأحمر بأسماء صفحات مدونتك في الشبكات الأجتماعية
وكذلك تعديل أسم FeedBurner
وسلام عليكم ورحمة الله وبركاته
السلام عليكم ورحمة الله
ردحذفالكود جميل وروعة بارك الله فيك ونفع بك
أهلا بك أخي
ردحذفسعدت بمرورك وتعليقك
جزيت خيرا