أزرار الشبكات الأجتماعية ثلاثية الأبعاد لمدونات البلوجر

بسم الله الرحمن الرحيم 

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

اليوم لدينا أضافة جميلة وخفيفة وهي عبارة عن أيقونات الشبكات الأجتماعية و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/AVvXsEhE720XR9RTwZ8R8o8zdG0ILM9EFSuUYQ7FSxsIVaGUPI5jCOvAxQQ2nCRNTyE_wcdaWlcFUFAtbfuqjHsHIsHY0umeGQVUzRGThTnL7RUtuscUfg5Lh5u32F_-w39GMzwW1Nb7Z3Uo1Oc/s1600/FACEBOOK-48x48.png" /></a>
        <a href="رابط صفحتك بتويتر ">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLd9nQFr0XceOQBpqJPww26j3EJ2fyaUm7yMCjiHBKT-ORRLFmnfrP4iKeOV1R19Paxzdt95C3o0TVMWSxN6Rgk2GM5Ed9mPCLelCoUPcFtDQSq1Mn6EBKLid8iOz_bFFuyMVLtqxhV44/s1600/TWITTER-48x48.png" /></a>
        <a href="هنا ضع رابط صفحتك بقوقل بلس">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZb3vn6emXiL6wyGD4TkgqHFAMWF9NjYyWZJ7gG-s3Vh1wLk2ZfDiGPTBTiA_M33OyBxXXArxTmPlPgEZn6MDZMIifdfpvJ8-E83lwNar7M3xSkBccTp_OkKW1Ay4uxUhzOgZtRUT5igM/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/AVvXsEg1lSFXJbIEFAxiZrNVK3ZIQ3h04QbYs4Z73ShLw7E2-nnAuCLNrrRWCoI9pm5IAzYew3l08QSVzJwF57FnKVCcgiW5YJHFIO-eaFD_7uePsY7Bl59NtO5KBdII7XaewFiX0sGYilONF5U/s1600/RSS-48x48.png" /></a>
        <a href="ضع هنا رابط للمراسلتك">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_ikfkxyiKUp1gVUJcgJUx9Hx2Dz8Pme6tnANs9rKBdIK2FgCpH4gjOBtOrk7gchg8Ffzq1HoVStR5Epz1iySyNYQ3Z0QmJP35MfPz8VdB1KOFaL34hxzwQK5BL8QzIB_78j-ophs8hk/s1600/RSS-EMAIL-48x48.png" /></a>
    </p></center>

ملاحظات 

لاتنسى التعديل على العبارات الموجودة في الكود والمشار لها بلون الأحمر بأسماء صفحات مدونتك في الشبكات الأجتماعية 


وكذلك تعديل أسم FeedBurner

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