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

الكاتب : Yassir Limouri

بتاريخ : 4:30 PM

عدد التعليقات : 0

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

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

أنا وهي إضافة أزرار الإشتراك على شكل وندوز 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/AVvXsEgZJmaO1b9htPyD8YgAONG0579A5-41UXoS0W-L7nvw-VT70VrCjSM_XytEFFJqN2fceZvVxMYDT_G99PTX-VPSOffLckw01DvNRJ1SkTItuz2nR35YM7iDrZaMIvc-FziLFtYdGPGSpDA/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/AVvXsEiNhDGQRF-NRX32Wol_HBJ3iXXnu6sRrrVPaDWY3jb6CULbkTu3WT6J51azsggbMo6dhEAK6j3j8krKq_wxoIYVj8JPWRUpMtHbOoHCFtKthe7cIHu7mlTMO8eRRSjuPPVPdDq1W-x0NfFF/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/AVvXsEh_CHBxrJIR5dpDGcgQIzInoq1ThUkzMYiCx0gVfBGJKlB6E5XBNQe6CW74cVxSkQ_ZRCbUMmTp7P-_XdlKxsbEin8GgXI5dtGompgA59HtuVvi6BaTF-L2tzOibhk0kvew5leln_GKJTyL/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/AVvXsEiIGllcnFPK9Q6vruzGS6TjY66eCxs0_ivZVGDBWWDT6wyXNVpjkBuajEs7SAnkTxoH4jFd2z1LoSvGcfyAhUTq0YPcZREOEwhv0K2zfD9B4PfYbHVBQm39-IaxBcwEQBlwxXxIWetKRwNj/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/AVvXsEjkOgA6asB_UXSGrn0rG5ACDZmwhKicyVAkeRfJ0Lsvex9ex6cMeKwPOcO3wWlbP11NIKVr0ETUuMHSNcg8iWVULpcoqgaMb1H2-rI99rHd-mbGlQftuK3z9C-Q8wQ2Q7urHTfDFSTDoBI/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/AVvXsEjCY_O2XIlL-m124Amx-AkwtGSt3fgfjkmNNppt2cSJ2ZmpICa-k3XebtndjnvQ0-gG-YLWa6HKrQL6L8IJunv4es2hYn2rt9DRZcD09GSDfEHdzZE3XPIf9gc3hTzR173qlkIfsNqhjj0/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/AVvXsEi2Nd9j9zDYrfZu78rifg-O0XjGIpVHRktnFQ0r0Bm-QR_fCSc0DjKy-6T0cNh9WBi8I8CYpA80nDIjBgjp29FD8snnF-HcIsZYmQIirInI-C9D3mYljbOBSYHg0MhfJn3E3ElVqy1U8IM/h120/rss.png) no-repeat center center;  -moz-transition:all .1s ease-in-out;  -webkit-transition:all .1s ease-in-out;  }

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

-->

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

]]></b:skin>

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

ياسر لموري

0 comments:

الشبكات الاجتماعية

اعلان على الموقع

تابعنا علي الفيسبوك

اعلان على الموقع

المشاركات الشائعة

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

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

ياسر لموري

0 comments:

الشبكات الاجتماعية

اعلان على الموقع

تابعنا علي الفيسبوك

اعلان على الموقع

المشاركات الشائعة

]]></b:skin>

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