iFrame “Auto Height” dengan Jquery

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div style="text-align: justify;"><br />Dalam tag tidak berlaku untuk elemen style=”height:100%” melainkan yang bisa berlaku hanya style=”width:100%”. Untuk membuatnya menjadi auto height 100% bisa menggunakan jQuery Jadi berapapun ukuran iframe akan tetap menyesuaikan secara otomatis, sehingga seolah-seolah tidak memakai iframe. </div><br /><br /><br />Caranya : <br /><br />- masukkan jQuery library, terserah pakai yang versi keberapa<br /><br /><b><script type="text/javascript" src="jquery-1.6.2.js"></script></b><br /><br /><br /><br />- masukkan jQuery buat auto height iframe<br /><br /><b><script type="text/javascript" src="https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.iframe-auto-height.js"></script></b><br /><br /><br /><br />- masukkan script iframe, untuk jQuery ini akan otomatis mendeteksi semua iframe menjadi auto height<br /><br /><b><iframe src="iframe.html" width="100%" scrolling="no" frameborder="0"></iframe> </b><br /><br /><br /><br /><br /><br />- masukkan fungsi javascript iframe autoheight<br /><br /><b><script type="text/javascript"><br /> jQuery('iframe').iframeAutoHeight();<br /></script></b><br /><br /><br /><br />- Simpan dan lihat hasilnya <br /><br /><br /><br /><a href="https://www.dropbox.com/s/f6hkh5p7gvvnqrc/jQuery%20iFrame%20autoheight.rar">Download Script Lengkap</a> <br /><br /><br /><br />Source Script : <a href="https://github.com/house9/jquery-iframe-auto-height">https://github.com/house9/jquery-iframe-auto-height</a><br /><br /><br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=1e59e869-d6dc-4918-9ea6-c0f9350940c2" style="border: none; float: right;" /></div><br /></div><br />

iFrame “Auto Height” dengan Jquery

Dalam tag tidak berlaku untuk elemen style=”height:100%” melainkan yang bisa berlaku hanya style=”width:100%”. Untuk membuatnya menjadi aut...

Read more »

JS Quicktags : alexking.org

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><b>JS Quicktags</b><br /><br /><div class="page-content"><br />I’ve released the JavaScript Quicktags used in <a href="http://alexking.org/projects/tasks-pro">Tasks Pro™</a>, <a href="http://alexking.org/projects/tasks">Tasks</a> and <a href="http://alexking.org/projects/wordpress">WordPress</a> under the LGPL license.<br /><br />This is a set of buttons that allow you to insert HTML tags into a content area. The tags are cursor aware – placed around a selection or at the cursor position. This is also an example of <a href="http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript">how to get the cursor position with JavaScript</a>.<br /><br /><h3 style="text-align: left;"><br /><a href="http://alexking.org/projects/js-quicktags/demo/index.html" target="_blank">Example Page</a></h3><br />A sample insertAtCursor function:<br /><br /><div class="code"><br /><pre>function insertAtCursor(myField, myValue) {<br /> //IE support<br /> if (document.selection) {<br /> myField.focus();<br /> sel = document.selection.createRange();<br /> sel.text = myValue;<br /> }<br /> //MOZILLA/NETSCAPE support<br /> else if (myField.selectionStart || myField.selectionStart == '0') {<br /> var startPos = myField.selectionStart;<br /> var endPos = myField.selectionEnd;<br /> myField.value = myField.value.substring(0, startPos)<br /> + myValue <br /> + myField.value.substring(endPos, myField.value.length);<br /> } else {<br /> myField.value += myValue;<br /> }<br />}<br /><br />// calling the function<br /><br />insertAtCursor(document.formName.fieldName, 'this value');<br /></pre><br /></div><br /></div><br /><br /><br /><br /><br /><br /><br /><a href="http://alexking.org/projects/js-quicktags">JS Quicktags : alexking.org</a>: JS Quicktags<br /><br /><br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=65c741d5-378a-4401-a4b5-c7f80bd592df" style="border: none; float: right;" /></div><br /></div><br />

JS Quicktags : alexking.org

JS Quicktags I’ve released the JavaScript Quicktags used in Tasks Pro™ , Tasks and WordPress under the LGPL license. This is a set of butt...

Read more »

Manually adding a Disqus gadget to Blogg

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div id="support-main"><br /><br /><br /><div class="article-content"><br />If the <a href="http://disqus.com/admin/blogger">Disqus gadget installer</a> isn't working, you have the option of manually installing the gadget on your Blogger site. This will require editing your Blogger template HTML, so it won't work with Dynamic Views templates.<br /><br /><br /><br /><b> Add a new gadget</b><br /><br /><br /><br /><ol><br /><li>Go to your Blogger "Layout" section and click <b>Add a gadget</b> in the sidebar<br /><br /><br /><br /><img alt="" src="http://dl.dropbox.com/u/13552259/Screenshots/2h3r9~oj9gtu.png" /></li><br /><li>In the Add a Gadget popup, scroll down to find the <b>HTML/Javascript</b> gadget and click the + button<br /><br /><br /><br /><img alt="" src="http://dl.dropbox.com/u/13552259/Screenshots/p91e~aniyct_.png" /></li><br /><li>Enter <i>Disqus</i> as the <b>title</b> and the following code for the <b>content</b>:<br /><br /><pre><code><!-- Disqus comments gadget --></code></pre><br /></li><br /><li>Click save and the window will close</li><br /><li>Click <b>Save arrangement</b> in the Layout viewer</li><br /></ol><br /><br /><br /><h2><br />Add the Disqus code to your template</h2><br /><br /><br /><ol><br /><li>Go to your blog's <b>Template</b> section and then click the "Edit template" button<br /><br /><br /><br /><img alt="Edit template button within Blogger template editor" src="http://disqus-cloudfront.s3.amazonaws.com/docs/install-blogger-edittemplate.png" /></li><br /><li>Click inside the text area and search for the widget you just created in your HTML template by pressing Ctrl-F (Command-F on OSX) then typing <i>Disqus</i>. You should find the following line:<br /><br /><pre><code><b:widget id='HTML1' locked='false' title='Disqus' type='HTML'></code></pre><br /></li><br /><li>Change that line to add <b>mobile='yes'</b> to load Disqus on your mobile template. It will look like this when you're done:<br /><br /><pre><code><b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'></code></pre><br /></li><br /><li>Below that locate and <b>DELETE</b> the following code right before the closing tag. The section you're deleting should look like this:<br /><br /><pre><code><b:includable id='main'><br /> <!-- only display title if it's non-empty --><br /> <b:if cond='data:title != &quot;&quot;'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <data:content/><br /> </div><br /> <b:include name='quickedit'/><br /></b:includable></code></pre><br /></li><br /><li>BEFORE the closing <code></b:widget></code> tag, add the following Disqus code (remember to change <b>EXAMPLE</b> to your site's shortname – you should leave both '&#39;' characters on either side of the shortname):<br /><br /><pre><code><b:includable id='main'><br /> <script type='text/javascript'><br /> var disqus_shortname = &#39;EXAMPLE&#39;;<br /> var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;<br /><br /> if (!disqus_blogger_current_url.length) {<br /> disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;<br /> }<br /><br /> var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;<br /> var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;<br /> </script><br /><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <style type='text/css'><br /> #comments {display:none;}<br /> </style><br /><br /> <script type='text/javascript'><br /> (function() {<br /> var bloggerjs = document.createElement(&#39;script&#39;);<br /> bloggerjs.type = &#39;text/javascript&#39;;<br /> bloggerjs.async = true;<br /> bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;<br /> (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);<br /> })();<br /><br /> </script><br /> </b:if><br /> <style type='text/css'><br /> .post-comment-link { visibility: hidden; }<br /> </style><br /><br /> <script type='text/javascript'><br /> (function() {<br /> var bloggerjs = document.createElement(&#39;script&#39;);<br /> bloggerjs.type = &#39;text/javascript&#39;;<br /> bloggerjs.async = true;<br /> bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;<br /> (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);<br /> })();<br /><br /> </script><br /></b:includable></code></pre><br /></li><br /><li>Click <b>Save template</b>. Assuming there are no errors, Disqus should properly show up on your site now.</li><br /><li> (Optional) Verify that the meta tags in your Blogger Template do not force Internet Explorer to load using IE7 standards. For more information see <a href="http://help.disqus.com/customer/portal/articles/666084-troubleshooting-disqus-in-internet-explorer-8-9-10#IE7-standards">Troubleshooting Disqus in Internet Explorer 8/9/10</a><br /><br /></li><br /></ol><br /><br /></div><br /></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=b9b83919-29a1-4dbf-940d-05cbeff21651" style="border: none; float: right;" /></div><br /></div><br />

Manually adding a Disqus gadget to Blogg

If the Disqus gadget installer isn't working, you have the option of manually installing the gadget on your Blogger site. This will req...

Read more »

How To Add Scrolling Sticky Bar To Blogger?

<span style="font-size: 15px;">On-Scroll Sticky Bar. A simple widget which appears in the upper part of your page as you scroll down and disappears again on reaching the top something similar to the Facebook header bar. It contains social sharing options as well as links to Home Page of your blog. Also present are the Slide to Top and Email subscribe options. This can be easily customized to include options according to your needs. Lets get started and see how to add it in your blog !<br /><br />To add to sticky bar I will recommend you to use old blogger user interface because as per widget author it throws an unexpected error,you can switch back to old blogger interface by clicking on the Settings Wheel icon at top right of your new blogger dashboard.<br /><b></b></span><br /><br /><a name='more'></a><span style="font-size: 15px;"><b><br /><span style="font-size: large;">Demo.</span></b><br />You can see the live demo on this very page itself ! Please scrool to  down this page, you can see it.</span><br /><br /><br /><br /><a href="http://www.stylifyyourblog.com/2012/06/scrolling-sticky-bar-for-blogger.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="sticky header bar" class="thumb" height="auto" src="http://1.bp.blogspot.com/-UlXMHg1eEmU/T980RhPkXCI/AAAAAAAAFtM/x88ThCQK9lE/s400/sticky+bar.PNG" width="100%" /></a><span style="font-size: 15px;"><span style="font-size: 15px;"></span><br /> </span><br /><br /><br /><br /><span style="font-size: 15px;"><b>How To Add Scrolling Sticky Bar To Blogger? Please follow the step by step below:<br /><br /><br /><span style="font-size: large;"><span style="font-size: small;">Steps 1 : Adding CSS code The Bar Styles</span></span></b></span><span style="font-size: small;"><b><br /></b></span><br /><br /><ol><br /><li><span style="font-size: 15px;">Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Scrolling Sticky Bar. Now select the Edit HTML option.</span></li><br /><li><span style="font-size: 15px;">find for  ]]></b:skin></span></li><br /><li><span style="font-size: 15px;">add the following CSS code just before ]]></b:skin> tag  </span></li><br /></ol><br /><span style="font-size: 15px;"><br /><br /><br /><textarea style="height: 68px; width: 100%;">#SYB-Bar-Container {<br />background-color:#f6f6f6;<br />background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));<br />background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));<br />}<br /><br /> #SYB-Bar-Container , #SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit {<br /> box-shadow: 0 5px 5px -5px #999;<br /> -webkit-box-shadow: 0 5px 5px -5px #999;<br /> -moz-box-shadow: 0 5px 5px -5px #999;<br /> }<br /><br /> #SYB-Bar-Container{<br />margin: 0px 116px;<br /> top:-100px;<br />-moz-border-radius:0px 0px 10px 10px;<br />-webkit-border-radius:0px 0px 10px 10px;<br />border-radius: 0px 0px 10px 10px;<br /> text-align:center;<br /> border-bottom: 1px solid #aaa;<br /> z-index:999;<br />padding:4px;<br /> height:33px;<br /> position:fixed;<br /> vertical-align: baseline;<br /> }<br /><br />#SYB-Bar-Container *{<br />padding:0;<br />}<br /><br />#SYB-Bar-Container a {<br />text-decoration:none;<br />}<br /><br />#SYB-Bar-Content{<br />width:1024px;<br />margin:0 auto;<br />}<br /><br />#SYB-Bar-Content li{<br />list-style:none;<br />float:left;<br />}<br /><br />#SYB-Bar-Left{<br />float:left;<br />width:45%;<br />}<br /><br />#SYB-Bar-Right{<br />float:right;<br />width55%;<br />}<br /><br />#SYB-Bar-Left li{<br />margin-right:1%;<br />margin-top:-7px;<br />}<br /><br />#SYB-Bar-Right li{<br />margin-top:-7px;<br />}<br /><br />#SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit{<br />font-size:9pt;<br />font-family:cambria;<br />font-weight:Bold;<br />text-transform:uppercase;<br />color:#fff;<br />text-shadow:0 -1px 1px rgba(0,0,0,0.25);<br />letter-spacing: 1px;<br />padding:6px;<br />border-radius:3px;<br />-moz-border-radius:3px;<br />-webkit-border-radius:3px;<br />}<br /><br />#SYB-Bar-Left .Home a:active, #SYB-Bar-Right .btt a:active,.SYB-emailsubmit:active{<br />position: relative;<br />top: 1px;<br />box-shadow:none;<br />}<br /><br />#SYB-Bar-Left .Home a{<br />background:#143eb4;<br />}<br /><br />#SYB-Bar-Left .Home a:hover{<br />background:#1556fa;<br />}<br /><br />#SYB-Bar-Right .Subscribe{<br />margin-top:-14px;<br />}<br /><br /><br /><br />#SYB-Bar-Right .btt a{<br />background:#00810b;<br />margin-left:3px;<br />}<br /><br />#SYB-Bar-Right .btt a:hover{<br />background:#06b421;<br />}<br /><br />.SYB-emailsubmit{<br />background:#ce1527;<br />cursor:pointer;<br />border:none;<br />height:26px;<br />width:90px;<br />}<br />.SYB-emailsubmit:hover{<br />background: #f02a37;<br />}<br />.textarea{<br />border:1px solid #aaaaaa;<br />-moz-border-radius:3px;<br />-webkit-border-radius:3px;<br />border-radius:3px;<br />resize:none;<br />font-size:8pt;<br />font-family:verdana;<br />width:170px;<br />height:25px;<br />color:#000000;<br />}<br /><br />#share-top{<br />background: #f9f9f9;<br />border:1px solid #dddddd;<br />line-height: 1;<br />margin: -4px 0 0 60px;<br />padding: 10px 0 2px 5px;<br />-moz-border-radius:3px;<br />-webkit-border-radius:3px;<br />border-radius:3px;<br />}<br /><br />#share-top li {<br />display: block;<br />margin-right: 0;<br />}<br /><br />#facebook-widget,#google-widget,#twitter-widget {display:none; }<br />@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){<br />#SYB-Bar-Container{<br />display:none;<br />}<br />}<br />



  

Step 2 : Adding CSS code The Bar Styles

1. Now find for  </body> tag


2. add the following script code below just before </body>  tag  

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <br /><script><br />//<![CDATA[<br />var b = $("#SYB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});<br />//]]><br /></script> <br /><script><br />$(document).ready(function(){// fade in .btt<br />$(function () {$(window).scroll(function (){});// scroll body to 0px on click <br />$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});<br /></script> <br /><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script><br /><script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script><br /><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>


Note: In case you have already included the jQuery library in
your blog then remove Line 1 . The same applies for Line 12 ,13 and 14
as well if you have included Facebook , Google+ and Twitter scripts
respectively.




Step 3 : Adding The HTML code

1. Now search for <body tag  and add the following code just below it If you are using default blogger templates then search for <body tag. See Video tutorial below for more details information. 


2. add the following code below just below of code  <body tag 


3. Hit the Save Template button and preview your blog to see how the bar appears.

<div id='SYB-Bar-Container'><br /><div id='SYB-Bar-Container'><br /><div id='SYB-Bar-Content'><br /><ul id='SYB-Bar-Left'><br /><li class='Home'> <a href='http://helpsblogging.blogspot.com/'>Home</a> </li><br /><li class='Share'> <div id='share-top'><br /><ul><br /><li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li><br /><li> <g:plusone size='medium'></g:plusone> </li><br /><li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'><br /></div><br /></li><br /></ul><br /><div style='clear:both;'><br /></div><br /></div><br /></li><br /></ul><br /><ul id='SYB-Bar-Right'><br /><li class='Subscribe'> <div class='SYB-email'><br /><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=helpsblogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'><br /><input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='helpsblogging'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form><br /><a href="href='http://helpsblogging.blogspot.com/" title="helpsblogging.blogspot.com" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div><br /></li><br /><li class='btt'> <a href='#top' title='Back to top'>Slide to Top ↑</a> </li><br /></ul><br /></div><br /></div><br />





Note: before installing the html code, you first have to change the blog url and the url feed first post with a link url and link url fedd blog post from your blog to redirect to your blog.



Line No. 4 :

<li class='Home'> <a href='http://helpsblogging.blogspot.com/'>Home</a> </li>

Replace http://helpsblogging.blogspot.com/ with your blog URL.



Line 15:

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=helpsblogging&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>



Line 16:

<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='stylifyyourblog'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form>



Line 15 and 16 replace instance of stylifyyourblog with your RSS Feed Name.





Video Tutorial :









Credit:

This blogger widget created by Prayag from Stylifyyourblog and I share again on http://helpsblogging.blogspot.com/.

If you have any ideas or questions about this widget then feel free to share with us. :)





Happy Blogging....

• Home


• 
  

  
  
  • Tweet
  
  
  
  
  • 
    
    
    
  
  

  
  

  
  

  
  
  
  

• 
  

  
  

  
  
  
  


• Slide to Top ↑

How To Add Scrolling Sticky Bar To Blogger?

On-Scroll Sticky Bar. A simple widget which appears in the upper part of your page as you scroll down and disappears again on reaching the t...

Read more »

online HTML editor

<script src="http://www.quackit.com/html/online-html-editor/ckeditor/ckeditor.js" type="text/javascript"></script> <br /><script src="http://www.quackit.com/html/online-html-editor/ckeditor/_samples/sample.js" type="text/javascript"></script> <br /><link href="http://www.quackit.com/html/online-html-editor/ckeditor/_samples/sample.css" rel="stylesheet" type="text/css"></link><br />This online HTML editor requires JavaScript to run. Your browser either doesn't support JavaScript, or JavaScript is currently disabled (via preferences or options). Because of this, you will see the raw HTML code instead of the rich text / WYSIWYG editor. To view the rich text / WYSIWYG editor, please enable JavaScript (or use a browser that supports JavaScript).<br />Use this online HTML editor to create HTML snippets or even whole HTML pages for your website, MySpace page, etc.<br />Edit the form as much as you like. When you're ready to see the code, simply click the "Source" button (at the top left of the editor).<br /><br /><br /><div style="width: 100%;"><br /><textarea class="ckeditor" cols="35" id="editor1" name="editor1" rows="10" style="display: none; visibility: hidden;"><html><head><title>HTML Online Editor Sample</title></head><body><br /><h1><br />Online HTML Editor</h1><br /><p><br />This is an online HTML editor. Try editing this text area - go on!</p><br /><p><br />Here is some <b>sample bold text</b>. </p><br /><p><br />Here is a checklist for a good online editor:</p><br /><ul><br /><li>Is it a WYSIWYG editor? (WYSIWYG means "What You See Is What You Get" - just like this editor!)</li><br /><li>Does it generate valid HTML code?</li><br /><li>Is it quick and easy?</li><br /><li>Is it... FREE?</li><br /></ul><br /><p><br />Feel free to use this online HTML editor for generating HTML code for your own website, MySpace page, etc. To view the source code, simply click on the "Source" button above.</p><br /><hr /><br /><p style="font-size:10px;"><br />Online Editor</p><br /></body></html><br /><br />

online HTML editor

<div dir="ltr" style="text-align: left;" trbidi="on"><script src="http://www.quackit.com/html/online-html-editor/ckeditor/ckeditor.js" type="text/javascript"></script> <script src="http://www.quackit.com/html/online-html-editor/ckeditor/_samples/sample.js" type="text/javascript"></script><link href="http://www.quackit.com/html/online-html-editor/ckeditor/_samples/sample.css" rel="stylesheet" type="text/css"></link> <br /><div id="alerts"><noscript> <b>This online HTML editor requires JavaScript to run</b>. Your browser either doesn't support JavaScript, or JavaScript is currently disabled (via preferences or options). Because of this, you will see the raw HTML code instead of the rich text / WYSIWYG editor. <p>To view the rich text / WYSIWYG editor, please enable JavaScript (or use a browser that supports JavaScript).</p></noscript> </div><br />Use this online HTML editor to create HTML snippets or even whole HTML pages for your website, MySpace page, etc.<br />Edit the form as much as you like. When you're ready to see the code, simply click the "Source" button (at the top left of the editor).<br /><div style="width: 100%;"><br /><textarea class="ckeditor" cols="35" id="editor1" name="editor1" rows="10" style="display: none; visibility: hidden;"><title>HTML Online Editor Sample</title><h1>Online HTML Editor</h1>This is an online HTML editor. Try editing this text area - go on!</p>Here is some <b>sample bold text</b>. </p>Here is a checklist for a good online editor:</p><ul><li>Is it a <a class="zem_slink" <a="" href="http://en.wikipedia.org/wiki/HTML_element" title="HTML element" rel="wikipedia nofollow" target="_blank">href</a>="http://en.wikipedia.org/wiki/WYSIWYG" title="WYSIWYG" rel="wikipedia nofollow" target="_blank">WYSIWYG editor? (WYSIWYG means "What You See Is What You Get" - just like this editor!)</li><li>Does it generate valid HTML code?</li><li>Is it quick and easy?</li><li>Is it... FREE?</li></ul><p>Feel free to use this online HTML editor for generating HTML code for your own website, MySpace page, etc. To view the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Source_code" title="Source code" rel="wikipedia nofollow" target="_blank">source code</a>, simply click on the "Source" button above.</p><hr><p style="font-size:10px;"><a href="http://www.quackit.com/html/online-html-editor/">Online Editor</a></p>Rich Text Editor