-->

وضع اداة محرر html فى مدونتك





اليوم اقدم لكم محرر بسيط جدا وجميل ومفيد للغاية لكل مدون ومبرمج ..
كل ما عليك هو نسخ هذا الكود الموجود بالأسفل الى الصفحة التى تريد ان يظهر بها المحرر
مثال على المحرر هنا 


<div class="post hentry">
<a name="8811546607569798962"></a>
<span itemprop="itemreviewed"><span itemprop="description">
<h3 class="post-title entry-title">
HTML Editor
</h3>
</span></span>
<div class="post-header">
<div class="post-header-line-1" style="padding:0 15px;margin-bottom:10px;">
<div class="authordata"><span class="post-author vcard">
</span>, <span class="post-timestamp">
</span>
</div>
<div class="commentsdata"><span class="post-comment-link">
</span>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="post-body entry-content">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br></div>
<table style="width: 330px;">
<tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="border-radius: 3px; border: solid 1px #cccccc; color: #a3a3a3; font-family: arial; font-size: 12px; font-weight: bold; height: 500px; margin: 0px; padding: 5px; scroll: auto; width: 200px;">&lt;style&gt;
Add CSS Code Here
&lt;/style&gt;

Add HTML Code Here</textarea>
</form>
</td><td valign="top"><iframe frameborder="0" name="preview" src="about:blank" style="background: #ffffff; border-radius: 3px; border: solid 1px #cccccc; height: 500px; padding: 5px; width: 315px;">
</iframe>
</td>
</tr>
</tbody></table>
<br>
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
 Preview</button>
<button id="#send" onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Clear </button>
<br>
 
 



<br>
<br>
<br>
<br></div>
<div style="clear: both;"></div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-icons">
<span class="item-control blog-admin pid-527409205">
<a href="https://www.blogger.com/page-edit.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;from=pencil" title="Edit Page" target="_blank">
<img alt="" class="icon-action" height="18" src="http://img2.blogblog.com/img/icon18_edit_allbkg.gif" width="18">
</a>
</span>
</span>
<div class="post-share-buttons">
<a class="goog-inline-block share-button sb-email" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=email" target="_blank" title="Email This">
<span class="share-button-link-text">Email This</span>
</a><a class="goog-inline-block share-button sb-blog" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=blog" onclick="window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); return false;" target="_blank" title="BlogThis!">
<span class="share-button-link-text">BlogThis!</span>
</a><a class="goog-inline-block share-button sb-twitter" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=twitter" target="_blank" title="Share to Twitter">
<span class="share-button-link-text">Share to Twitter</span>
</a><a class="goog-inline-block share-button sb-facebook" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=facebook" onclick="window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;" target="_blank" title="Share to Facebook">
<span class="share-button-link-text">Share to Facebook</span>
</a>
<div class="goog-inline-block dummy-container"><div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 300px; height: 20px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I0_1485616993910" name="I0_1485616993910" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&amp;source=blogger%3Ablog%3Aplusone&amp;size=medium&amp;width=300&amp;annotation=inline&amp;hl=en&amp;origin=http%3A%2F%2Fbbloggertutorials.blogspot.com.eg&amp;url=http%3A%2F%2Fbbloggertutorials.blogspot.com%2Fp%2Fhtml-editor_23.html&amp;gsrc=3p&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.ar.fRV-S-MQ0dQ.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCOoopkHr5NM_cofk4696iiBjgghQw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&amp;id=I0_1485616993910&amp;parent=http%3A%2F%2Fbbloggertutorials.blogspot.com.eg&amp;pfname=&amp;rpctoken=34415339" data-gapiattached="true" title="+1"></iframe></div></div>
</div>
</div>
<div class="post-footer-line post-footer-line-2"><span class="post-labels">
</span>
</div>
<div class="post-footer-line post-footer-line-3"><span class="post-location">
</span>
</div>
</div>
</div>

شارك المقالة عبر:

ليست هناك تعليقات:

إرسال تعليق

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات

ليست هناك تعليقات:

إرسال تعليق

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات

مجلة كن بلوجر مدونة تقنية تم انشائها عام 2016 تحتوي على العديد من الدروس التعليمية في جميع المجالات التقنية مثل الشروحات تعليمية، نشر التطبيقات والبرامج - الربح من الانترنت، انشاء التطبيقات وتطوير قوالب بلوجر. بها العديد من إضافات بلوجر وأكواد هامة لكل مدون ومدونة .