الأحد، 9 يونيو 2013

إضافة أزرار مواقع التواصل الاجتماعي ثلاثية الأبعاد مع وجود تأثير الدوران بشكل رائع - على البلوجر




من منـا لا يعرف مدى أهمية مواقع التواصل الإجتماعي في إشهار و نشر مُدَوناتنا ومشاركتها مع الأصدقاء و زوار هذه المواقع.
 

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


مثال حي عن هذه الإضافة 


Icon Icon Icon

spice up your blog


طريقة إضافة هذه الأزرار على مدونة البلوجر
 

1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على تخطيط من القائمة الجانبية.

2- ثم اضغط على إضافة أداة و اختر HTML/JAVASCRIPT. 

3- وقم بلصق الكود التالي :

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="ضع رابط على FeedRSS هنا" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupmNl9JyqE3Y-TFYnMKt7nDrpAhwbiNpUOcUq72F-h4qYP63BCYS5D9APOyVAV7MLUl1CWGnKW5Y8dTq9m8NCiMk-8pMwCefB5iMNpFxHyhImffLoe05IFOtpu8hGTaCfdSbQ7LBsJSvl/s1600/RSS-48x48+-+www.afkarpro.blogspot.com.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="ضع رابط EMAIL-RSS هنا" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSkNG9wqtCLGRYQdcJ3oU2uB91aX0ZElN148CFUfLw82Gpj9hMSlT-ab5Tbp2DanlRki-Kvqr7r651EO8vwHdvYkoxsGRvDepCuBSwho4-V1QZUCUczlh-4J4t3UbOme4hoLJx9sCj_DY/s1600/RSS-EMAIL-48x48+-+www.afkarpro.blogspot.com.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="ضع رابط صفحة الفيسبوك هنا" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_223WORc4dQGb9HG-irurDt3tHnlPJgLkYl6CRBVOfph9zJZMrTZzE2-TrHDz4AMlPz2JYBXPIUioxCckaryFGCSCN0TNbe5hRJgvn1-6m2P9ffH6Pqb9QE2nHZJQtdtJBjfU8hvjdmxI/s1600/FACEBOOK-48x48+-+www.afkarpro.blogspot.com.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="ضع رابط التويتر هنا" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xg3fReyLfbzs90RMd2hzp6JFeiBTXlobcSNqbyVggt5nB9Q8L-jMHh-KGqP9gJSXgfTRh-RLy1zBtMw5hBRvRUEcQSSMbi3zC27rgRleTf7rrexoT0zn9yuyC1h8fMFu90K5Z_JWiP11/s320/TWITTER-48x48+-+www.afkarpro.blogspot.com.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="ضع رابك جوجل بلس هنا" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK_dCKArloxn4m9WDB0aqNsUHUkxUoctzb2fkcIwnfMZeTQ2TR-7r_Kx9CLHYCnU6Zdm51ACTXOQvAJOSAG9yTPbmLioqEOJ1t555gr26INyC65l8mS7UWnq5nU5laB9ZUdw5YLPJDTbfH/s320/GOOGLE-PLUS-48x48+-+www.afkarpro.blogspot.com.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="ضع رابط PINTEREST هنا" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqAqzOC3CJftWV4BEEKoi4YuOU4reIOOx-KAg29safHVvDmPjUUB-9uSj-rhwthQbV0crv2z9SlpHYAIm9gZG6GQ3m0axF2E7Jt3_hngzEyZYDWvJnt4XPQDG60Kl6yTeMks0gXqYfzNd0/s320/PINTEREST-48x48+-+www.afkarpro.blogspot.com.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="ضع رابط FEEDBURNER هنا" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

4- قم بالتعديل على الروابط الملونة بروابط حساباتك الخاصة على مواقع التواصل الإجتماعي، ثم قم بحفظ الأداة.


*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...




ـ
روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode

هناك تعليقان (2) :

  1. لو انا معنديش غير صفحة فيس بوك بس مينفعش تظهر عندي اضافة الفيس بوك بس على المدونه ...

    ردحذف
  2. DongHae
    *******
    نعم ممكن تظهر إضافة الفيسبوك فقط (أو أي إضافة أخرى كما تشاء)

    أنسخ الكود أسفله الخاص بالفيسبوك فقط :
    ______________________________________




    <style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -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; } #social img:hover { -moz-transform: rotateundefined360deg); -webkit-transform: rotateundefined360deg); -o-transform: rotateundefined360deg); -ms-transform: rotateundefined360deg); transform: rotateundefined360deg); } </style>

    <center>
    <div id="social">

    <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="ضع رابط صفحة الفيسبوك هنا" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-VJAZJi4uTlk/UbSlb9x5-OI/AAAAAAAAC50/ZS91pGBOIBY/s1600/FACEBOOK-48x48+-+www.afkarpro.blogspot.com.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon-->

    </div>
    </center>

    ردحذف