إضافة أيقونات الشبكات الاجتماعية بتقنية 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/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTa0ge_n5O9Ec74D-_OoC2S_G5CXLlRzK5IesSK7M4suemhhqTe0BGGu_ctFvu8aZBEghGM-ShNGLvV46n_fnkdvozBzv_fEDiZrOl3APdEgrGFCfm8uERaxGFw8zB9uEcaAqrTymOB0/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9eqfE6NjG_J0ftztPfU0WLb9vqX3eX7C1BrZCaRPkilqYlXbzqbXnHHezLtOxCF_FO6WVIYfq4iYxKuTW0JBn8tEMF3jZQvbbUDlZdZIOWNV6Yrgno55m4MXx5TNVc2Y0oIINZ4RNpE4/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVqk85YGE_Ap6Veh8gF6flDfwKN7sGkawtmha4hT7RPwAH6PxN3yzXjP1ribZB70xDIksVidpHn_HjndcCvpT5ZCxUtY_N3pEyxsBj5bVJOmVM4EEQCwjKsenqGLwzq_G3LwjiCxknPc/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://feeds.feedburner.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdwmmEFPKUumP5xnqk5rbm0vt2v4OGTwv4Ku97UxuOELPxec7o7-f9Kj2dotxMqTl-xlTnFzFSVmsP24glbpcqTt08rrIUu8wUI5Abh5Wp8euBZhrdQpwyqGgAYlkC0FSqfMuh1NWU3A/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2o_gsQTA1Vsq1kKfoTulzx4MI58GaZZg1n2fm4QxaFEDQXeUYu4IBk5JKmh0beNkha68xhFPj__Ubyy2Pvt8P8wYG5o_HJJHp0k1ywBYlCoBio0HnsxsdnlP8HfWYNoEdfrtrLiflbiE/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/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTa0ge_n5O9Ec74D-_OoC2S_G5CXLlRzK5IesSK7M4suemhhqTe0BGGu_ctFvu8aZBEghGM-ShNGLvV46n_fnkdvozBzv_fEDiZrOl3APdEgrGFCfm8uERaxGFw8zB9uEcaAqrTymOB0/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9eqfE6NjG_J0ftztPfU0WLb9vqX3eX7C1BrZCaRPkilqYlXbzqbXnHHezLtOxCF_FO6WVIYfq4iYxKuTW0JBn8tEMF3jZQvbbUDlZdZIOWNV6Yrgno55m4MXx5TNVc2Y0oIINZ4RNpE4/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVqk85YGE_Ap6Veh8gF6flDfwKN7sGkawtmha4hT7RPwAH6PxN3yzXjP1ribZB70xDIksVidpHn_HjndcCvpT5ZCxUtY_N3pEyxsBj5bVJOmVM4EEQCwjKsenqGLwzq_G3LwjiCxknPc/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://feeds.feedburner.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdwmmEFPKUumP5xnqk5rbm0vt2v4OGTwv4Ku97UxuOELPxec7o7-f9Kj2dotxMqTl-xlTnFzFSVmsP24glbpcqTt08rrIUu8wUI5Abh5Wp8euBZhrdQpwyqGgAYlkC0FSqfMuh1NWU3A/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2o_gsQTA1Vsq1kKfoTulzx4MI58GaZZg1n2fm4QxaFEDQXeUYu4IBk5JKmh0beNkha68xhFPj__Ubyy2Pvt8P8wYG5o_HJJHp0k1ywBYlCoBio0HnsxsdnlP8HfWYNoEdfrtrLiflbiE/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/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTa0ge_n5O9Ec74D-_OoC2S_G5CXLlRzK5IesSK7M4suemhhqTe0BGGu_ctFvu8aZBEghGM-ShNGLvV46n_fnkdvozBzv_fEDiZrOl3APdEgrGFCfm8uERaxGFw8zB9uEcaAqrTymOB0/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9eqfE6NjG_J0ftztPfU0WLb9vqX3eX7C1BrZCaRPkilqYlXbzqbXnHHezLtOxCF_FO6WVIYfq4iYxKuTW0JBn8tEMF3jZQvbbUDlZdZIOWNV6Yrgno55m4MXx5TNVc2Y0oIINZ4RNpE4/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVqk85YGE_Ap6Veh8gF6flDfwKN7sGkawtmha4hT7RPwAH6PxN3yzXjP1ribZB70xDIksVidpHn_HjndcCvpT5ZCxUtY_N3pEyxsBj5bVJOmVM4EEQCwjKsenqGLwzq_G3LwjiCxknPc/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://feeds.feedburner.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdwmmEFPKUumP5xnqk5rbm0vt2v4OGTwv4Ku97UxuOELPxec7o7-f9Kj2dotxMqTl-xlTnFzFSVmsP24glbpcqTt08rrIUu8wUI5Abh5Wp8euBZhrdQpwyqGgAYlkC0FSqfMuh1NWU3A/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2o_gsQTA1Vsq1kKfoTulzx4MI58GaZZg1n2fm4QxaFEDQXeUYu4IBk5JKmh0beNkha68xhFPj__Ubyy2Pvt8P8wYG5o_HJJHp0k1ywBYlCoBio0HnsxsdnlP8HfWYNoEdfrtrLiflbiE/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

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