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

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

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

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

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

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

]]>

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

.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/AVvXsEhK09Ix-jbamRA2Psvi6HCihfRIvKj8Exz2mmMWNaBykqb_lEO95QwsTsWMiw0cTfq29r5Bw0q2DQwXDIzaOXaj_e1NJT0ULKrNQpodiSIq2w8trSETpGpgFp9YecraPXqBniiHYdIm6S8/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/AVvXsEiYNd3SpPbArMpFlKlgI7Z4IjK40FPjWvPpZcN8VXAs5hjd6t0qp7LKZVKS6q0vzVxdQ3QxxgYQ514kQ8a9pmfOwI0V5ZZ6Df79lkLnkAc72kT16mAma-qKltz9yhfndf6xuwv9Wp7hL5OF/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/AVvXsEjcXXtYV2XlpfRD3xBUcF20VC8_a0DwjF4SS2gFbTVL7J4MY14-7hcVQaH0Kg7yBXnnF9xL2EJqZO7FaVf3D01B3ucCDcrW6bBPMMz31F47frsz7mRHimHJFnUWGZiwuwzt-X_R24OpVPMh/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/AVvXsEi64gCjSROrNiO4J0Ey06KILaCyC8eB88hI7Xic80ct8pH9VquOeisg3auB-ruAmR95nJBuKQ2tMMFPa8_VXmdy5IufXur9PlUANOLY3pvh5RGN8vAtXoCQAJ_WwALGyQ9K6aq7lohbYJDP/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/AVvXsEgewxAma95mKvcOZeHdzpNdiyoqk-4HbgYyptmsnV_GC8CnpTkVSgcfL4buAlj2IS9vN2L_zWq_YbMiQdYSSMD0bG6Ms-ZKYK_WtCuk-bF4xtvPaRV3IWHvSKXhFqT18dy3a8eDpjeqFaI/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/AVvXsEjhv1ZsZjqLnL07e0Y4XqlYODA-gHb0YfYKkEI8gL4bkA_mm-4czH52S5Hb_IAFD8GLwIssBUFjRO7U2AQG0Rp-jAqLScQmTd_4_DvmE04jlddWIDlgXMrwkxJJ6e8z1dgHKadTO95XI3Q/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/AVvXsEhhVslibmDtEaCPQaXyGChcWESHlj1y6Deh9oyM1Qxo0pmHEsVPApqZD-6s5kXS80yh_scxlqNUm1B6xGktztQtrVd3sXGCybFXzVTUwVej03dY_Kn3-nDTIgGxl8zdhhkRIgkPmlDL0sE/h120/rss.png) no-repeat center center;  -moz-transition:all .1s ease-in-out;  -webkit-transition:all .1s ease-in-out;  }

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

-->