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

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

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

أنا وهي إضافة أزرار الإشتراك على شكل وندوز 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/AVvXsEj_CiIHJuoybVVKqu5Pya0PzyPU1XDEOqAQp3rzpusI1OBnkA7D74RASQRt44W5McmmWQINMpHaHV4WJUjwv4KAzD1tpAkBGDL3y9OuAld_ARm3zhEzW3tuPUQTOTCtupQpPvC0C5ZgTXM/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/AVvXsEgjIDZjL5eYsgqsgX4bjSFuOY4jU1wH2t3Gwq2ovxu8I5n1CcmY1uv50Mm9Mnn7On61zf2qJgfD3LLzZhBiFFw1bjphrnsvGuX9fNapTMYmMDAInIyZji_SxbxK-YW3jLj-48pmwg5cwZKk/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/AVvXsEgq16DQFYHRRq2LH2DHroVokJHhyphenhyphenmFIl4V6TXJT8wjnI9u4tjU7ilyhcZT6UYu5x6WulqwiN4QS3QLpR1IPe4-AC8qdE1npt7o7DxpLE9QeS3GR6Ekmf7WPFpJYyxlyZ1CJj05kJHZUn7Q6/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/AVvXsEh6tvKpPyivOtpZel-DMxKJeKyPVS8j0u1mi6NTwsShtN9b_iksblwF8WO_9SKrQtzwf7j42VGq8jK7lFgU-cGJFwaFl2BpTsxyVyoc7165IE-aBR7TmY2pHm3MedNPusg_xadmcFbXkoIm/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/AVvXsEhd2HJw2HIeR5A_OVPA3xxJRmdkUoUoGFj8O2iaUmSjQ7LjekB2e8nnvZgr6m3x20TPoDFEfpbXiV14Qg7eczkWdzePZwK-svf12rASU7OwHHbJ-nzoLvGHebUon-HGd1OO2sWN6Hmg3Zs/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/AVvXsEiYyUyoFVjbNXOIobkCv4ICv5ereY7vHZDqODSpmzng23IHyo9dZDqAtayoXfI2dLAmvhn-R69ew-QewiaHqdaPCn2zA25IDAemXmCKd_iUNOEL_QaTuIo9IWm_oLwkp-wx0C4LfPii3YY/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/AVvXsEhaqJmH1F_GbF-seYk6zLsELSyTP3dJDZuZpEjeKfLJWfe5v53VJmO1IVJXSx1ZvhwPA8qmIHfojqbPx4ScyOCo_q6wrsPHSdaL8HeVyHLHXjwDjKgj9iCmgPJsmEXOb_EJiWPMFtcOEWo/h120/rss.png) no-repeat center center; -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; }

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

<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>
 

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

***لا تنسوا تقييم الشرح***

أستودعكم في الله و السلام عليكم 

-->