إضافة أزرار المشاركة بشكل جميل

السلام عليكم

زوار مدونة عين العرب أقدم لكم إضافة جميلة لأزرار المتابعة على فيس بوك وتويتر وجوجل

إضافة بسيطة لكن مميزة وتركيبها سهل فقط إتبع الخطوات كما يلي

أولا إبحث عن هذا الكود

 ]]></b:skin>

 

بعد أن تجده ضع فوقه هذا الكود

 .widget-item-control a { display:none; } .widget-item-control a { display:none; } #supportive { width:300px; float:left; margin-top:10px; } #supportive li { position:relative; cursor:pointer; padding:0!important; } #supportive .facebook,.googleplus,.rss,.twitter { position:relative; -moz-transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out; z-index:5; display:block; float:left; margin:1px; } #supportive .icon { overflow:hidden; } #supportive .facebook { width:147px; height:150px; background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE8O6OLhmQsY5zl2x_DvvgWWXfdkuAqBU8UaC6jeRVj9nrr5kaIlsx_jkSkrrbcVYeTWQAEvVw5gMwAIIFhSPP_ejGId3Il_C-0zhTUcAOZgWk-FHbrbdFv6SbFtc-Dfz4tdQxOLaB5AM/h120/facebook.png) no-repeat center center; } #supportive .twitter { width:148px; height:74px; background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDDostsw1-pIr5NDqCOLJ6z6hvL7Z66HzwFSbZdp8ne0XbRCe8_KoNeYNbiNhdYzY8RknAk2FdqTXES_E0hzaIc_jE6uHnDRS4Otdu0QBjjODU09iJHqrS7eAiUctyIkh9ZGWqPVkF5gkQ/s1600/Twitter.png) no-repeat center center; } #supportive .googleplus { width:148px; height:74px; background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh89VwJmxU1FGDIFQP2vmc4mhkbPDsl-toxo5mQJMBlsgcruDCbEfxCgCuigGsQZQYSqr6xZURXDFtN2fscc7JJNlNLbs4EM8ienFA7HvCV8Zmw19YwXsEG41L924fY5c4jWBQvG84MFJJv/s1600/google+plus.png) no-repeat center center; } #supportive .rss { width:299px; height:74px; background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGYmmTFI5VKcS1gqTqfdZC08oGcNZ9r6vtj3mi9aSoKAU600JHIZ3lH1XHCHsS97q7lYASGBg6FSH5QAFZwHbkQng17DO6Nbk9JNdP4VmPGnNR0u9gPR3qdArvjtCrD5tHQDbM2gRFIsrS/s1600/rss.png) no-repeat center center; } #supportive li:hover .facebook { background-color:#3468B6; -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; } #supportive li:hover .twitter { background:rgba(64,153,255,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZSFJ5JOrjLOjFt7fOSSBWvL-uTekCfSSmBmmOW0WqnIUSlMDI2f8R6TM7XzRALsYoyqAoDUaoc7jR4Tf8NweLBOEMUDzCcBgGVhDjKifYYwYd50I6ABR3T2pKJX44-UmnSMxOeHnv8gY/h120/Twitter.png) no-repeat center center; -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; } #supportive li:hover .googleplus { background:rgba(228,69,36,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJ2WnFRC1DGqP7f5nZeRYGP_abejeuRpK_9ViDsL3JhZR2cF1EPynGP-9Dz7en7CmfESi0SoZAK8tYDTz2DTqaFo0HM668s6HLkIVcQG3nqPmXTSkyzGen_3Da3VMSw1KCuG-KOYuulU/h120/google+plus.png) no-repeat center center; -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; } #supportive li:hover .rss { background:rgba(255,102,0,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhRQ4aIFOcM05AeHI3rotd6fX32qcGDDph1INRLiI1fggb24OL3GyG4yZUGujPIt0WWsTk2OCkINZNoVktAjZuGKdReNHdfMLer1cB38tWf7ZUWDMjEnqGvpzhjjIZcZrEN0Beqb4sN0/h120/rss.png) no-repeat center center; -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; }

بعد ذالك عد للتخطيط وقم بإضافة اداة HTML جديدة وانسخ فيها هذا الكود

 

 <ul id='supportive'> <li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li> <li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li> <li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUserID/'/></a></li> <li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li> </ul>

 

بالتوفيق وأي سؤال انا في الخدمة