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

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

في هذه التدوينة الجميلة أتيتكم بإضافة متميّزة

أنا وهي إضافة أزرار الإشتراك على شكل وندوز 8 و هي إضافة جميلة و مريحة بألوانها

و لإضافة هذا الكود نذهب إلى القالب ثم تحرير HTML

ثم نبحث على كلمة

]]></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/AVvXsEhvkvr483VguD23Q9wPkiKGD69enCuaxV_dhJGQmTjh3CSqJ4tebv2lI4k_OZ1vuQ_4uH5w5PkfCY2z0ZJ6zMYJiouCRNkPeEaBQaXPcdZirOgKEWMnaYjqllDmLm265LhFHrQX01jLZ40/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/AVvXsEiUtShQ1y24lvC3Ff_ucxFXYF9prAQey5rkIBpekkLzfjRKKN6PgaraO3BaEiyH8fw7ROqxKtriEWQBZbyYApdZlt8HLDM67L2YLCpE01hZy-HJZE-tpxMOXVQoYOuIuFoHfhyl7ho2o3YG/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/AVvXsEjJ60RY3ceu_cYvkUHRIVxXTIKspM-tsr0eDkBKzi-OzO4b8nwdY5tn93fXbJbFoiUkCBoRBfCqptOK-XodMxb-CLOG77MyX9Ph76PFnT798W6os7bTRIiVA_XhtJYe9T40mXxCXV0atx_b/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/AVvXsEg1H7m28jCbjiSAjVpnk_2kbT4nSpjcJh5Hjtzo0InP_Vfg5vpVcytd0W-bkHR2T7BDNHfZvRPZ0astIaweCvaujTfw8bJ6kkitwwMXZQJEvHJi6RKWR3Zxkgqz_fDGAOmEdwv5ElAGRC24/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/AVvXsEjhc65dfCmgVvTz0s0NiBxjX3RtH7WcQm4bAXNrP6VLFJLPyNpz5X1CW9jOjUcOIGoQjqzh6ZJG3IkGKPe5h5uXp6kSHYtqKqnbuadb7ZAjDkMk-n5mieXj661xvt2fifb-GLqukBF6eXI/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/AVvXsEhIw_LpEIr-jNjr4K5XnGl9-FRY4TCHsmMUYrrGPfD-oLUMJi0TVH3XXyp_dB5dNQ7zW3YFrD9DY8dLKRoLK9njRd3WZN1RhyphenhyphensRoffrfbAstYiJT9W8B3HBAIrGU2WIi0fURVFEk3o5VJQ/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/AVvXsEjyTorhRByO0obYPGRQsZIYis2AmYyK-YSoAU2NHSeGOGgwTLc2X9N_UR-kpo56BSSFULn6I1D1AbaTD7QPKgm-LwRSj-hyCa2TA4zSxtMAltX54IAiU0hRpjdJoEzlxrl8VmqkJVlKwRE/h120/rss.png) no-repeat center center;  -moz-transition:all .1s ease-in-out;  -webkit-transition:all .1s ease-in-out;  }

ثم قم بحفظ القالب و إتجه إلى تحرير ثم إضافة أداة و قم يوضع هذا الكود

-->

مدونة مهتمة بمجال المدونة هنا

مقالات عن العمل الحر والتصميم، وبعض فلسفاته وأفكاره

تابعنا

إخترنا لك

قائمة المدونة

أحدث التدوينات

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

]]></b:skin>

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

مدونة مهتمة بمجال المدونة هنا

مقالات عن العمل الحر والتصميم، وبعض فلسفاته وأفكاره

تابعنا

إخترنا لك

قائمة المدونة

أحدث التدوينات

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

]]></b:skin>بعد أن تجده ضع فوقه مباشرة هذا الكود

مواضيع مهمة أيضا :

]]></b:skin>

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