إضافة أيقونات الشبكات الاجتماعية بتقنية CSS3 لمدونات البلوجر

بسم الله الرحمان الرحيم والصلاة والسلام على رسولنا الكريم ، اخوتي الكرام زوار مدونة المهووس للمعلوميات  السلام عليكم ورحمة الله وبركاتة . دائما ما تحاول جعل موقعك او مدونتك تبدو بأحسن صورة و ذلك بإضافات أشياء جذابة تساعدك في جلب الزوار لموقعك لذلك إرتأيت ان أشاركك أداة جميلة بتقنية CSS3 إذن حتى لا أطيل عليك إتبع الشرح.

هناك 3 أشكال من هذه الإضافة ، إختيار أي منها واتبع الخطوات التالية لإضافتها إلى المدونة الخاص بك.

اختيار أي شكل يناسبك

نسخ التعليمات البرمجية

استبدال أسماء المستخدمين قتي لك

انتقل إلى تخطيط

انقر على إضافة أداة

اختر HTML/JavaScript

لصق الكود وحفظه.

الشكل الأول

الكود

<style>p#hb_socialicons img {

 /* Spinning Social Icons Widget By HelperBlogger */

    -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 HelperBlogger */

</style>  

<center><p id="hb_socialicons">

    <a href="http://www.facebook.com/theprogeek/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0c-MsEwKaZawwG76ccAimlGiD2gKPs8CSLxngMIx41s3ywh8m_bS3K1Ycl2i4aRPIHLUjpruj4XlvnCe8H3_C6hNxzkmvwGaBkTZu9Np2EUN6j8LrSHJzDK2k4jLWm5tHKhlqs6sxcc/s1600/helperblogger.com-facebook.png" /></a>

    <a href="http://www.twitter.com/habib2855/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWg67vL-mVRvsG2izvl2QSfsC1S87cm4Q79e0jtr5rQW-TUNYTO0GItzS7_oR_0DG8y0Vi79KpusWI99_3qZDg5KKI5qOc0I9b2SFKOsMOSDtVlcUzULOUf5Az6SQ_fpiWkOpCLhGY_M/s1600/helperblogger.com-twitter.png" /></a>

    <a href="https://plus.google.com/100070291731104269156">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7snwTLWYp1CTiU_bLgUYmFTgWvdXR6djNIvszQu3ol-xQU5y1m67GnFJopNXxGrBq6z3T4sMWwPXm8l6k2vh6DJuQ137Ft0bAWcliTYLWXbFSyR1rL7FR20u8VRdOiWDSxcewvYgj1oo/s1600/helperblogger.com-google_plus.png" /></a>

    <a href="http://feeds.feedburner.com/blogspot/bnFhq">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FFNbPJh1Kc1xV5jbpxm_kE07b7TdT3itSz4QGWLHRHOEn4lo3jxbhQjFNiDyb4HPgRMzLFUe2ZmTxF0D3yIhNuRtg824RyW-wpppbGhyxKYKM7z-QVKDwb7JOopzzynBH_5NUDG7zLY/s1600/helperblogger.com-rss.png" /></a>

    <a href="http://www.youtube.com/habib3504/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihV79F1l1VvDhNmsaHdsLe9EFHYvg2XSRGi_kNwHx_bOWDCjXaxb9kyl9EzfvYL4o8AGFSZtfv0_LMJywkOqUb14ykhDAMNtnOyLZ0EwqKAebz_0xIklAl5qGyKc0op-KPSKp0RqQW89s/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

الشكل التاني

الكود

<style>p#hb_socialicons img {

 /* Spinning Social Icons Widget By HelperBlogger */

    -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 Widget By HelperBlogger */

</style>  
<center><p id="hb_socialicons">

    <a href="http://www.facebook.com/theprogeek/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0c-MsEwKaZawwG76ccAimlGiD2gKPs8CSLxngMIx41s3ywh8m_bS3K1Ycl2i4aRPIHLUjpruj4XlvnCe8H3_C6hNxzkmvwGaBkTZu9Np2EUN6j8LrSHJzDK2k4jLWm5tHKhlqs6sxcc/s1600/helperblogger.com-facebook.png" /></a>

    <a href="http://www.twitter.com/habib2855/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWg67vL-mVRvsG2izvl2QSfsC1S87cm4Q79e0jtr5rQW-TUNYTO0GItzS7_oR_0DG8y0Vi79KpusWI99_3qZDg5KKI5qOc0I9b2SFKOsMOSDtVlcUzULOUf5Az6SQ_fpiWkOpCLhGY_M/s1600/helperblogger.com-twitter.png" /></a>

    <a href="https://plus.google.com/100070291731104269156">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7snwTLWYp1CTiU_bLgUYmFTgWvdXR6djNIvszQu3ol-xQU5y1m67GnFJopNXxGrBq6z3T4sMWwPXm8l6k2vh6DJuQ137Ft0bAWcliTYLWXbFSyR1rL7FR20u8VRdOiWDSxcewvYgj1oo/s1600/helperblogger.com-google_plus.png" /></a>

    <a href="http://feeds.feedburner.com/blogspot/bnFhq">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FFNbPJh1Kc1xV5jbpxm_kE07b7TdT3itSz4QGWLHRHOEn4lo3jxbhQjFNiDyb4HPgRMzLFUe2ZmTxF0D3yIhNuRtg824RyW-wpppbGhyxKYKM7z-QVKDwb7JOopzzynBH_5NUDG7zLY/s1600/helperblogger.com-rss.png" /></a>

    <a href="http://www.youtube.com/habib3504/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihV79F1l1VvDhNmsaHdsLe9EFHYvg2XSRGi_kNwHx_bOWDCjXaxb9kyl9EzfvYL4o8AGFSZtfv0_LMJywkOqUb14ykhDAMNtnOyLZ0EwqKAebz_0xIklAl5qGyKc0op-KPSKp0RqQW89s/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

الشكل الثالث

الكود

<style>p#hb_socialicons img {

 /* Spinning Social Icons Widget By HelperBlogger */

    -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 Widget By HelperBlogger */

</style>  

 

<center><p id="hb_socialicons">

    <a href="http://www.facebook.com/theprogeek/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0c-MsEwKaZawwG76ccAimlGiD2gKPs8CSLxngMIx41s3ywh8m_bS3K1Ycl2i4aRPIHLUjpruj4XlvnCe8H3_C6hNxzkmvwGaBkTZu9Np2EUN6j8LrSHJzDK2k4jLWm5tHKhlqs6sxcc/s1600/helperblogger.com-facebook.png" /></a>

    <a href="http://www.twitter.com/habib2855/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWg67vL-mVRvsG2izvl2QSfsC1S87cm4Q79e0jtr5rQW-TUNYTO0GItzS7_oR_0DG8y0Vi79KpusWI99_3qZDg5KKI5qOc0I9b2SFKOsMOSDtVlcUzULOUf5Az6SQ_fpiWkOpCLhGY_M/s1600/helperblogger.com-twitter.png" /></a>

    <a href="https://plus.google.com/100070291731104269156">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7snwTLWYp1CTiU_bLgUYmFTgWvdXR6djNIvszQu3ol-xQU5y1m67GnFJopNXxGrBq6z3T4sMWwPXm8l6k2vh6DJuQ137Ft0bAWcliTYLWXbFSyR1rL7FR20u8VRdOiWDSxcewvYgj1oo/s1600/helperblogger.com-google_plus.png" /></a>

    <a href="http://feeds.feedburner.com/blogspot/bnFhq">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FFNbPJh1Kc1xV5jbpxm_kE07b7TdT3itSz4QGWLHRHOEn4lo3jxbhQjFNiDyb4HPgRMzLFUe2ZmTxF0D3yIhNuRtg824RyW-wpppbGhyxKYKM7z-QVKDwb7JOopzzynBH_5NUDG7zLY/s1600/helperblogger.com-rss.png" /></a>

    <a href="http://www.youtube.com/habib3504/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihV79F1l1VvDhNmsaHdsLe9EFHYvg2XSRGi_kNwHx_bOWDCjXaxb9kyl9EzfvYL4o8AGFSZtfv0_LMJywkOqUb14ykhDAMNtnOyLZ0EwqKAebz_0xIklAl5qGyKc0op-KPSKp0RqQW89s/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

للتعديل على الإضافة قم بإستبدال ما باللون الأحمر بما يناسبك ...وإن كان هناك أي إستفسار حول الإضافة أتر تعليقا بالأسفل و تنسى مشاركة و تقييم الموضوع.

هل إسـتفدت ؟ كن إيجابيا و شارك المحتوي ليستفيد غيرك.

شاركها !

الأن يمكنك أن تصل الى الموقع بسرعة وسهولة تامة وذلك بكتابة : المهووس للمعلوميات في محرك البحث جوجل. تسعدنا زيارتك.

الموضوع من طرف : الحبيب أعشاري

الحبيب مدون مغربي اطمح من هذه المدونة و التي هي عبارة عن مدونة تضم عدد كبير من المواضيع كــ شروحات المواقع برامج والخدمات بالإضافة الى مقالات تقنية, الأخيرة و التي من خلالها نحاول التقرب من الشاب العربي والأخير الذي يهدف الى تطوير مهاراته وزيادة معلوماته فيما يخص التكنولوجيا و الاعلاميات يمكنك متابعتي على تويتر