HTML editorPada setiap box, terdapat tombol submi dan clear. Ketika meng-add kode CSS/HTML di ikuti dengan memencet tombol submit. Kalau tidak dipencet tidak akan terlihat hasilnya seperti apa pada box preview :))
<figure class ="embed">
<img src="http://placekitten.com/g/300/200" alt=""/>
<figcaption>
The caption text goes here...
</figcaption>
</figure>Ada 3 jenis style <figure class=". . ."> yg bisa kalian pakai: embed, embed-top and overlay.| Style: |
| ||||||||
| Theme: |
| ||||||||
| Font Size: |
| ||||||||
| Effect: |
|
Dua aplikasi .html tersebut sudah saya sama-samain dari warna tulisan, background color dll persis kepunyaan blogspot ;) File akan berisikan Blogger Post Editor.htm & Blogger Templpate Editor.htmHappy blogging \m/
<table width="100%" border="0" cellpadding="5" cellspacing="5" bgcolor="#e5eecc">
<form action="http://www.w3schools.com/html /tryit_view.asp " method="post" target="view">
<tr align="right">
<td>
<input name="submit" type="submit" value="Submit Code »">
</td>
</tr>
<tr>
<td width="50%">
<textarea width="100%" height="400px" style="width:100%;height:300px;border:1px solid #999" name="code" wrap="logical" rows="21" cols="42">
------ ADD WTF HTML CODED HERE ------
</textarea>
</td>
<td>
<iframe width="100%" height="400px" style="width: 100%;height: 298px;border: 1px solid #999;background: #fff" name="view" src=""></iframe>
</td>
</tr>
</form>
</table> HTML editorpada blog aku, cobain sikat playit tryit HTML editor playground.
Sikat ger free offline mode apps .html tryit editor like w3schools
Bye :-hHappy tryit editor \m/Apps parser belum mencakup secara keseluruhan markup. Berikut beberapa contoh parseran yg sudah jadi.
"<p><b>Hallo" ◄==► '<p><b>Hallo</b></p>'"<img src=wtf.jpg>" ◄==► '<img src="wtf.jpg"/>'"<b>Hallo <p>Fulan" ◄==► '<b>Hallo </b><p>Fulan</p>'"<p>Hallo<p>World" ◄==► '<p>Hallo</p><p>World</p>'"<input disabled>" ◄==► '<input disabled="disabled"/>'Happy parser \m/
CSS3 animationBermunculannya value baru dari CSS3 property ternyata belum 100% terkuak untuk apa fungsi dari si value tersebut! Lain ceritanya dengan seorang developer yang notabene memang menggunakan properti CSS secara profesional. Berikut beberapa link resource yg bisa kita jadikan tempat untuk mempelajari mengenai CSS animation:
Happy running pause \m/
Lockdown adalah script code snippet dibuat dengan tujuan mengaburkan (obfuscates) tampilan/tulisan kode. Penulisan code akan dirubah ke dalam bentuk canvas
Compatible with IE7+, Firefox, Chrome, and Safari. Konversi kode meliputi normal and base-64 encoded. Terus bagaimana cara mau mengkopi kode! Gue jg enggak tauk, kan di buat dengan tujuan untuk melindungi script/coded ;))
<script src=".../js/jquery-1.7.1.min.js"></script>
<script src=".../js/lockdown-0.0.38-min.js"></script> <script type='text/javascript'>
//<![CDATA[
$(function () {
var $elements = $("pre.code");
var options = {
width : 700
};
Lockdown.init( options );
Lockdown.lock( $elements );
});
//]]>
</script> <pre class="code">
------- CODED AFTER PHRASE HERE -------
</pre><pre class="code endecode ">
------- CODED AFTER ENCODED HERE -------
</pre>Lakukan setting terlebih dahulu, antara lain pemberian nama class, width, dan customize CSS. Pada sumber bagian implementasi lebih komplit. Source by draeton.github.io/lockdown Lihat bagian menu, pd web sumber cari menu dengan judul project, tengoklah link dengan title stitches That is an HTML5 sprite sheet generator, open source ;))jsfiddle.net/bebenkoben/rW8qe/show
Happy lockdown \m/html editor live previewand melihat-lihat kode/script pembangun pasti ada iframe/textarea. Ke dua pilar itu memang banyak manfaatnya kalau ditelaah lebih dalam ;)
<textarea name="BebenKoben" id="bView" placeholder="Add coded here..." style="width:100%;height:100px"></textarea>
<div id="prevBbn"></div>
<script type='text/javascript'>
var txtarP = document.getElementById('bView');
txtarP.onkeyup = txtarP.onkeypress = function(){
document.getElementById('prevBbn').innerHTML = this.value;
}
</script> <textarea name="BebenKoben" id="bView" placeholder="Add comments:" onkeyup="document.getElementById('prevBbn').innerHTML = this.value"></textarea>
<div id="prevBbn"></div> <div id="Bbn1"></div>
<textarea id="Bbn2" onkeyup="viewHTML ()" name="BebenKoben" style="width:100%;height:100px"></textarea>
<script type="text/javascript">
function viewHTML () { viewHtml1 = document.getElementById('Bbn1'); viewHtml1.innerHTML = document.getElementById('Bbn2').value ;}
</script> Happy coding \m/
Seperti itulah tutorial dalam teori, susah untuk mengerti ;)) Back to top button ini by Deep Sinha. Demo & source sobat bisa lihat w2tskill.blogspot.com Karena jQuery script dalam bentuk p,a,c,k,e,d and menyatu dgn script lain. Jangan ambil semua, kalau tidak mau keluar popUp terus-menerus :D Hostingkan gambar btt.png pd host image masing² takut terhapus!
<a href='#' id='atraktifBTT'></a>SAVE.Cara termudah dan tercepat untuk melakukan add widget blogger ke blog kita, save link brkt Import Page Element Blogger Melakukan add to blogger dalam area posting, here syntax.
<form action="https://www.blogger.com/add-widget" method="POST" name="addWidget" target="top">
<textarea name="widget.content" rows="0" cols="0" style="display:none;">
---- PUT CODED/SCRIPT HERE AFTER PHRASE ----
</textarea>
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3aDDGIjp5Ug5_HKtkyL6nWJX-aRKfE-B9TeFY33CwS3lKWvHGknV4PqWBZycxpQJ6_wOxUZUmhT3liErJxaDRLmoMlbpstzX9eKm9WNcDg6KctmYDO9SmDzbX2-J5Nu8xd0K6645m-jc0/s1600/rb-blogger-button.gif">
</form> form actionnyasikat...
<table align="center">
<form action="https://www.blogger.com/add-widget" method="POST" name="addWidget" target="top">
<tr><td>Title: <input type="text" name="widget.title" value=""></td></tr>
<tr><td>Required field must not be blank</tr></td>
<tr><td><textarea name="widget.content" rows="5" cols="40"></textarea></td></tr>
<tr><td><input type="submit" value="Add Widget"></tr></td>
</form>
</table>You're about to add content from another site to your blog. Make sure you trust this site before proceeding. This action will place some code from the content provider into your blog page. You can view the code details below.
google translateSebuah slogan yang mantap pemilik blog thiscouldbebetter.wordpress.com Walau kebanyakan artikel di dominasi dengan tema aliran JavaScript, AA Koben sudah melakukan
selectionketat :D Ada 4 buah apps .html semuanya gue pikir bisa dimanfaatkan dalam kegiatan ngeblog! Bagi yang mengerti bin paham tentang JavaScript, tidak salah source yg ada di sana bisa dijadikan sumber.
Tools generate semua file menjadi karakter base64dan hasil generate otomatis sudah menjadi data URL! Tinggal pilih file, jebret langsung jadi :)
Sebuah aplikasi yang bisa melakukan penglihatan struktur sebuah file .exe Structure yg dihasilkan terdiri dari beberapa path nama yg gue jg sama sekali tidak tauk :))
Ini adalah alternatif pangganti Notepad. Apapun yg berbau text, bisa di load, edit dan save oleh apps ini b-)Sebagai orang yang baik hati di dunia, gue sudah bingkiskan untuk kalian semua tools yg telah disebutkan.
Demikian saja informasi Koben si bloglang anu ganteng kalem tea. Semoga bisa kalian manfaatkan framework tersebut. Lebih dan kurangnya ikhlaskan saja. Akhir kata...Wassalam.
Happy blogging \m/Di pojok kanan terdapat fitur
Beri tahu saya
Itulah layanan berlangganan komentar via email. Setiap ada komentar baru yg masuk pada postingan itu, maka akan diberitahukan lewat email. Mungkin sebagian besar blogger masih jarang menggunakannya! Tetapi bagaimana jika kalian mengomentari sebuah artikel, kemudian ingin menunggu jawaban, dan artikel yg dimaksud sudah jauh entah kemana? Apakah kasak-kusuk untuk mencari! Amit-amit :PAda satu fitur blogger lagi yang mungkin di antara kalian melupakannya. Fitur itu adalah Comment Notification Email.
You can enter up to ten email addresses, separated by commas. We will email these addresses when someone leaves a comment on your blogComment Notification EmailWhat is that bro...
Untuk bonusnya AA Koben akan bagi kalian sebuah generator pre code
Tool ini berguna bagi sobat yang belum memasang make code preview on post area. Saya sudah meminta ijin untuk share source code formatter tools, tetapi belum ada tanggapan. Pada tahun 2012 sudah berhenti operasi mosting blog yg punya :D Link sourcenya:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html> <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Maaf posisi aturan kode bentrok dengan kode bawaan template :D Silahkan di sikatSemoga bermanfaat.Happy blogging \m/<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Koben punya susunan markup sbb<a href="http://beben-koben.blogspot.com/">Secara umum untuk menampilkan preview dari markup tsb pasti memerlukan bantuan pihak ke-2, minimal anda memakai
<img alt="beben-koben" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEpRYtgDFFggJQxcLMcLyUB8aeG5Px5ne781RHqwxepo-RWUCvNAtFzNxQS4m3E8YyAEu7MA6ZkvHofKhpeGmTN1nZwh48gpDLR2H7-a7JBULEIZ1ZPQlvjWJS0hqrk5-z9acLQW4bqdu/s100/beben-koben.png" />
</a>
<br />
Follow me <a href="https://plus.google.com/106979433441667164665">+BebenKoben</a>HTML editor
Notepad jg bisa. Begini result kalau menggunakan editor post blogger
data:text/html;charset=utf-8,<a href%3D"http%3A%2F%2Fbeben-koben.blogspot.com%2F">%0D%0A%09<img alt%3D"beben-koben" src%3D"http%3A%2F%2F3.bp.blogspot.com%2F-HPBPiFva0_M%2FUdQaecPYKiI%2FAAAAAAAAHBs%2Fo3ML2iiIDzY%2Fs100%2Fbeben-koben.png" %2F>%0D%0A<%2Fa>%0D%0A%09<br %2F>%0D%0AFollow me <a href%3D"https%3A%2F%2Fplus.google.com%2F106979433441667164665">%2BBebenKoben<%2Fa> data:text/html;charset=utf-8;base64,PGEgaHJlZj0iaHR0cDovL2JlYmVuLWtvYmVuLmJsb2dzcG90LmNvbS8iPg0KCTxpbWcgYWx0PSJiZWJlbi1rb2JlbiIgc3JjPSJodHRwOi8vMy5icC5ibG9nc3BvdC5jb20vLUhQQlBpRnZhMF9NL1VkUWFlY1BZS2lJL0FBQUFBQUFBSEJzL28zTUwyaWlJRHpZL3MxMDAvYmViZW4ta29iZW4ucG5nIiAvPg0KPC9hPg0KCTxiciAvPg0KRm9sbG93IG1lIDxhIGhyZWY9Imh0dHBzOi8vcGx1cy5nb29nbGUuY29tLzEwNjk3OTQzMzQ0MTY2NzE2NDY2NSI%2BK0JlYmVuS29iZW48L2E%2B URI kitchen dibuat dengan script jenis Perl. Tapi jangan khawatir, untuk memiliki tools ini kita tidak harus bisa script Perl :P From master Simon Willison’s, dia sudah membuatkannya untuk kita ;))
Sikaaattt...
software.hixie.ch
Jika belum percaya saya orang yang baik, bonus generator base64 terkeren b-)HTML Editor:)) Berawal dari melihat halaman github.com/designless/editor Designless editor merupakan live preview HTML editor! Di bangun menggunakan ace.js Karena ace harus online dalam beroperasi, maka AA melakukan snippet coding dengan bentuk editor serupa dengan kepunyaan si design-less! Tidak kalah keren tengoklah dulu www.mrdoob.com/projects/htmleditor (best use with chrome) Kalian akan mendapatkan apps HTML editor offline mode 2 biji dari si bloglang anu ganteng kalem tea sebagai bingkisan tahun baru b-)
Berikut screenshot snippet designless editor.
Kalau karya Koben seperti biasa fitur dari codemirror dan beberapa addon sudah gue pasangkan!
Screenshoot
Silahkan download...Happy editor \m/