حصريا ولأول مرة عربيا محرر اكواد html

Tweet

Pin It

السلام عليكم ورحمة الله

اليوم تم انهاء مشروع المحرر وتمت تجربته والحمد لله لاتوجد اخطاء

المحرر مفيد لكل مطور او معرب ويسهل العمل كثيرا

ليس هذا فقط بل استخداماته عديدة انا شخصيا يساعدني في بناء وتطوير الاضافات  كما انه يستعرض بسرعة دون الحاجة لاعادة التحميل والحفظ في كل مرة

الان نعطي مثال تطبيقي لتتضح لك فكرة المحرر اونلاين

اولا قم بزيارة المحرر

تفضل من هنا



الان قم بتعويض عبارة هنا كود  css     بهذا الكود وطبعا هو كود css


 

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}

.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQEkoPeJiRWg4JqKjFky-gwmQld_5rIAjLLJWBJeX3oYJfZ-C6wjp7KzKg3uCl8KJxV0tN9mdtSUpYpwgSXlfNm4hrCCnoGc3OJrIpRaIb4dq40mm94OJHCBBEqnf42XkE6EZQPEeqH0/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8hTKHSl3OI-OTqSwYzNx0m58YNE51_T6Eh-JMRs9uhtepfFGIDtiozivUDbNtnT1yW8pRiNDmndHzPPkfnmaBTp6-T4OtPpdSA-u_oUTMvpQc2cQx7Y2ldVMNTv7KavAv87_EWLsqS4/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJV5fwrJzXA53Gysc1WLxs4HMMgxQ2JMl0OSv0qJcOSdjdU23ZItsJo4HG7_-Pnz3YiDNy5jESwASyXNYmXTCfvMvDaOd8E2UIGSwTHAbmJtJk9W6UacCHCR11BXauRBIqSQAHD-gzUa8/s1600/digg_32.png'); }
.dribbble{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJSCtiiaPlcqMNioaQfQ-nwcOPqI68n0uSdYVCjMthIbjIb97OmDBzmjI5ROtyuTQEZM_Y6kcv7kamiG_rGZNNX_VoBxAKXLQmIUpzsF1D4upNDl4TUEWJVPzDzsnquOt5hqQq6vOWxc/s1600/dribbble_32.png'); }
.email{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCF0fE9UoeZwqFKY2baECnieUzea5h8bo3C4LjRRLfr5hl3wdQiWr4SaygMkKQkpyh-WSzX3RtnFKqbvYLhm2Zx2Loby0EnOeNpv_NzuH7-sM6_xaxf3v300N38cwDsv5JUzJsbPOhiI8/s1600/email_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc75V_6L6wKmixP-SSpj3S780UBaHS_0cAAlm513Oonznbv2MVUtUJah1NzGPrJTvCNbwJWr4pGxsJiye4ZNiCPX47o1GwtXJjq7ot3tO-LHC2-FHhL9QyIIZ0N1rNnnp-sKJNpFJ9o-A/s1600/facebook_32.png'); }
.flickr{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWGsjpg02zMF0ruyWK-0O9eCAzRAsubwappRow7r8lNL8ohPBl5nBdz1bOBjewFKBVO4YYJX7RVd3SgQbOjWi3VahojOj0re-RAPgd6vSPPcWiWlozYVjncV5pDbNyKfpeohZV-6Al2qA/s1600/flickr_32.png'); }
.foursquare{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFC1OkLlaN5HaHuCNuQ7gsjoU1pJwMuMb7AJYBJfQFuhG8D7nKAIGVwmOcxsmRW9OIKKSN5YOZyFKtXuy-cUryJRp_kHaT2OFb0_Jci0CIDIUpx0Nm4AmQ-X5ajj4eeqzgNUuOtO6vcM/s1600/foursquare_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdBigRAWfMbY6g9D4NluIn0WQvMCK3n9gL_52RLyNs7ypWjbWTC1TPZ9ENUvHXJAH3giakkf0UfmuIvbrYVJVcP5c8bko-RQ8Ej-t_pdohgNi7CodJep9vP8anHAqAEogA4GIFZr2w8k/s1600/linkedin_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQuA6sySxcBR6omZqeH5MJ5cjyuuQR1fWRO24Vtp8NLNOabmZrBjfIb_ooAKlC_JQqnSQNFNYzK4hONUDEVGp0Uzhw5O-ibZb1y8VcLny90PA_rkrvkvxD-HbGdVzvOBY5Ygwk3v8U7E/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcBPKucf6Nr-9WMLSUR2_BqU3wqQowCr-pQ0JbrPtRkuqtCEiklYl5YD78O13LJyZHASoi-jTiF5qCufVpXOKiBOqCuCTOB5-6KtVJAmPnPbltjqmU9ijgRpDl1fxhU5dJpUl74IvZVE/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJV6oBHYSVtiNF6yMp109RsLT_TZF3Te7HzBdPLnK4nNRjBboggZb5PI-7-m8otMnRAm54fkb4jAu1OlStLYvIedm57hoYiI1Jz33N4KDoa2RYB9C79HKw-oj0kIeA0vsHqmHowWPEic/s1600/youtube_32.png'); }

.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

عوض ايضا عبارة   هنا كود html   بهذا الكود وهو كود html

  <div class="spinning_icons">
    <a href="الرابط" class="twitter" title="twitter">Twitter</a>
    <a href="الرابط" class="delicious" title="delicious">Delicious</a>
    <a href="الرابط" class="digg" title="digg">Digg</a>
    <a href="الرابط" class="dribbble" title="dribbble">Dribbble</a>
    <a href="الرابط" class="email" title="email">Email</a>
    <a href="الرابط" class="facebook" title="facebook">Facebook</a>
    <a href="الرابط" class="flickr" title="flickr">Flickr</a>
    <a href="الرابط" class="foursquare" title="foursquare">Foursquare</a>
    <a href="الرابط" class="linkedin" title="linkedin">Linkedin</a>
    <a href="الرابط" class="rss" title="rss">RSS</a>
    <a href="الرابط" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
    <a href="الرابط" class="youtube" title="youtube">YouTube</a>
</div>

الان اضغط زر استعرض  واستمتع

             

بالتعديل على الاضافة كما يحلو لك  دون الحاجة للتعديل على قالبك

اظن الفكرة صارت واضحة الان تستطيع تصميم قوالب,اضافات,تعريب,تجربة اضافات قبل تركيبها على قالبك, وحتى عرض قوالب !والتعديل عليها بسهولة

اي استفسار انا في الخدمة ارجو ان يكون المحرر مفيد


شكرا لجميع متابعي المدونة على دعمهم 
وترقبو المشاريع القادمة ان شاء الله

إشترك لتحصل على جديد المواضيع

يوسف بجاد

مدون عربي مهتم بالتقنية الحديثة وتطوير الويب مهتم بشكل خاص بمنصة بلوجر واجيد الى حد ما التعامل مع css.html.jquery

• http://twitter.com/youcefbijedbijed on twitter
• https://www.facebook.com/pages/%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D9%8A%D9%88%D8%B3%D9%81-%D8%A8%D8%AC%D8%A7%D8%AF/202331699846732bijed on facebook
• https://plus.google.com/101768571125800665500/postsbijed on google plus