Berbagi Tutorial Bloggies

Cara Membuat Tombol DEMO DOWNLOAD Valid HTML5

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Cara Membuat Tombol DEMO dan DOWNLOAD yang Valid HTML5 - Sudah banyak tutorial yang menyajikan cara membuat tombol "<span style="background-color: #e06666;">Demo</span>" dan "<span style="background-color: #e06666;">Download</span>" dengan berbagai tampilan yang berbeda. Berhubung blog saya memakai tutorial yang akan saya sampaikan ini, maka saya ingin membagikannya juga kepada Anda yang belum tahu cara membuat tombol ini.<br />
<br />
<div style="text-align: center;">
<span style="font-size: large;">Preview</span></div>
<br /></div>
<div style="text-align: center;">
<ul class="button">
<li><a alt="cara menampilkan postingan menjadi 1 halaman penuh" class="demo" href="http://bertubies.blogspot.com/p/tentang-bertubies.html" target="_blank" title="Contoh Tampilan Postingan Menjadi 1 Halaman Penuh">Demo</a></li>
<li><a alt="cara menampilkan postingan menjadi 1 halaman penuh" class="download" href="http://bertubies.blogspot.com/p/tentang-bertubies.html" target="_blank" title="Contoh Tampilan Postingan Menjadi 1 Halaman Penuh">Download</a></li>
</ul>
</div>
<div style="text-align: justify;">
<br />
<br />
<br />
Ikuti langkah-langkah berikut ini.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
1. Masuk ke akun blog Anda.</div>
<div style="text-align: justify;">
2. Pada Dashboard, klik Template > Edit HTML.</div>
<div style="text-align: justify;">
3. Cari kode <span style="color: red;">]]></b:skin></span><br />
4. Tambahkan kode di bawah ini diatas ]]></b:skin>
<br />
<pre>/*Download Demo Button*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222}
.download:hover { background: #454242; text-shadow: 0 0 1px #222}</pre>
<br />
5. Untuk penggunaannya, copy kode berikut di postingan pada mode <b>HTML</b> bukan Compose.
<br />
<pre><div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="URL yang dituju" target="_blank">Demo</a></li>
<li><a class="download" href="URL yang dituju" target="_blank">Download</a></li>
</ul>
</div></pre>
<br />
6. Simpan. Selesai.<br />
<br />
<br />
<div style="text-align: center;">
===</div>
</div>
</div>

Cara Membuat Tombol DEMO DOWNLOAD Valid HTML5

Cara Membuat Tombol DEMO dan DOWNLOAD yang Valid HTML5 - Sudah banyak tutorial yang menyajikan cara membuat tombol " Demo " dan ...

23:42

Menampilkan Postingan Menjadi 1 Halaman Penuh

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Tutorial ini hanya sebuah trik yang membuat sidebar dan kotak komentar dihilangkan, sehingga tampak seperti 1 halaman penuh. Triknya sangat sederhana, Anda hanya perlu menyisipkan script ke dalam template blog dan halaman posting 1 halaman penuh pun siap diperlihatkan. Silakan klik Demo jika ingin melihat hasilnya.<br />
<br />
<div style="text-align: center;">
<ul class="button">
<li><a alt="caramenampilkan postingan menjadi 1 halaman penuh" class="demo" href="http://bertubies.blogspot.com/p/tentang-bertubies.html" target="_blank" title="Contoh Tampilan Postingan Menjadi 1 Halaman Penuh">Demo</a></li>
</ul>
</div>
<br />
<br /></div>
<div>
<div>
<div style="text-align: justify;">
1. Masuk ke akun Blogger Anda</div>
</div>
<div>
<div style="text-align: justify;">
2. Masuk ke Dashboard > Template > Edit Html </div>
</div>
<div>
<div style="text-align: justify;">
3. Jika diperlukan backup dulu template Anda, klik Download Template Lengkap</div>
</div>
<div>
<div style="text-align: justify;">
4. Tekan Ctrl + F , lalu cari kode <span style="color: red;"></head></span></div>
</div>
<div style="text-align: justify;">
5. Masukkan kode dibawah ini tepat diatas kode </head>
</div>
<pre><div style="font-family: 'Times New Roman'; white-space: normal;">
<b:if cond='data:blog.url == &quot;<span style="color: magenta;">http://bertubies.blogspot.com/p/tentang-bertubies.html</span>&quot;'></div>
<div style="font-family: 'Times New Roman'; white-space: normal;">
    <style></div>
<div style="font-family: 'Times New Roman'; white-space: normal;">
.<span style="color: blue;">sidebar</span>{display: none !important;}<span style="color: blue;">#sidebar-wrapper</span>{display:none !important}.comment-form{display:none !important}.comments{display:none !important}</div>
<div style="font-family: 'Times New Roman'; white-space: normal;">
<span style="color: blue;">#main-wrapper</span>,.post{width:<span style="color: lime;">700</span>px;}</div>
<div style="font-family: 'Times New Roman'; white-space: normal;">
    </style></div>
<div style="font-family: 'Times New Roman'; white-space: normal;">
    </b:if></div>
</pre>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
6. Ganti kode berwarna sesuai kebutuhan.</div>
<div style="text-align: justify;">
</div>
<ul>
<li style="text-align: justify;">Ganti <span style="color: magenta;">http://bertubies.blogspot.com/p/tentang-bertubies.html</span> dengan alamat url halaman posting yang ingin ditampilkan 1 halaman penuh, bisa juga halaman utama Anda.</li>
<li style="text-align: justify;">Ganti tulisan berwarna <span style="color: blue;">biru</span> sidebar,#sidebar-wrapper,#main-wrapper dengan kode CSS sidebar dan tempat utama Anda. Jika sama, tidak perlu diganti.</li>
<div style="text-align: justify;">
Jika masih bingung, coba cari kode ini <b>lsidebar, rsidebar, lsidebar-wrapper, rsidebar-wrapper, sidebar, sidebar-wrapper, main-wrapper, main, mainwrapper</b> . Jika salah satu diantara kode tersebut ada yang cocok, gunakan kode tersebut menggantikan kode yang berwarna <span style="color: blue;">biru.</span> </div>
<li><span style="text-align: justify;">Ganti ukuran lebar </span><span style="color: lime; text-align: justify;">700</span><span style="text-align: justify;"> dengan ukuran lebar blog Anda.</span></li>
</ul>
</div>
<div>
<div style="text-align: justify;">
7. Terakhir, simpan template dan lihat hasilnya</div>
<br />
<br />
<div style="text-align: center;">
===</div>
<div style="text-align: center;">
<br /></div>
</div>
</div>

Menampilkan Postingan Menjadi 1 Halaman Penuh

Tutorial ini hanya sebuah trik yang membuat sidebar dan kotak komentar dihilangkan, sehingga tampak seperti 1 halaman penuh. Triknya sanga...

22:47

HTML Parser Tool

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
HTML Parser adalah tool yang digunakan untuk mengurai kode html/ javascript menjadi susunan text yang dapat terbaca sebagai text yang kita inginkan. Jadi, bagi Anda yang banyak menulis atau posting artikel menggunakan kode html/ javascript maka perlu di parse atau konvert sebelum dipublish agar tidak ada problem error. </div>
<br />
<br />
<span style="font-size: large;">Contoh Parse Kode HTML</span><br />
Secara sederhana contoh parse kode HTML dapat digambarkan sebagai berikut.<br />
<br />
Kode script sebelum di parse.<br />
<pre><span style="font-family: 'Times New Roman'; white-space: normal;"> <b> HTML Parse Tool<b></span></pre>
<br />
Kode script setelah di parse.<br />
<pre><span style="font-family: 'Times New Roman'; white-space: normal;"> &lt;b&gt; HTML Parse Tool&lt;b&gt;</span></pre>
<br />
Dari contoh di atas bisa dilihat kode yang berubah setelah di parse :<br />
<ul style="text-align: left;">
<li><span style="color: red;"> <</span> menjadi <span style="color: red;">&lt</span>; </li>
<li><span style="color: red;"> ></span> menjadi <span style="color: red;">&gt</span>;</li>
</ul>
<br />
<div style="text-align: justify;">
<span style="font-size: large;">Langkah untuk menggunakan HTML Parser</span></div>
<ol style="text-align: justify;">
<li>Silahkan Anda copy kode script Anda (Contoh: kode script Google Adsense, Chitika, BidVertiser, PPC Lokal dan lain-lain).</li>
<li>Lalu Anda paste kode script tersebut di dalam kotak HTML parser tool di bawah ini.</li>
<li>Klik tombol <b>Convert Your AdCode</b>, lalu silahkan copy hasil script kode yang sudah dikonversi dan Paste-kan pada bagian HTML di postingan atau template blog Anda.</li>
<li>Selesai. </li>
</ol>
<div class="parse-html">
<div class="parse-html-responsive">
<div align="center">
<object data="http://www.skyafar.net/wp-content/uploads/freetools/adsensecodeconverter.html" frameborder="0" height="400" id="myfr" marginheight="0" marginwidth="0" scrolling="no" width="500"></object></div>
</div>
</div>
<div style="text-align: center;">
<br />
Jangan lupa <b>Bookmark</b> laman ini, jadi Anda tidak perlu repot mencari-cari tool ini<br />
 jika ingin memparse kode HTML/ Javascript.<br />
<br />
===</div>
<br /></div>

HTML Parser Tool

HTML Parser adalah tool yang digunakan untuk mengurai kode html/ javascript menjadi susunan text yang dapat terbaca sebagai text yang kita...

22:37

Penjelasan Fungsi dan Cara Kerja HTML Parser Tool

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Nama lain dari HTML Parser Tool yaitu HTML Converter, HTML utilities, Adsense parser, Ad Code Converter.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
HTML Parser Tool adalah sebuah tool yang digunakan untuk merubah atau mengkonversi kode Javascript agar kompatibel dan dapat diterima oleh platform Blogger.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tools ini biasanya digunakan para blogger untuk mengkonversi kode javascript dari iklan seperti script iklan AdSense, karena kode asli javascript tidak bekerja jika dipasang langsung di postingan melalui edit html, jadi harus dilakukan proses konversi script yang biasa disebut Parse HTML. </div>
<div style="text-align: justify;">
<br />
Demikianlah penjelasan singkatnya. Untuk memperdalam pemahaman Anda, silakan simak penjelasan di bawah ini.</div>
<div style="text-align: justify;">
<br />
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;">Pengertian Parse</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pengertian arti kata Parse dalam bahasa indonesia adalah <b>Urai</b>, atau didefinisikan dalam pengertian yang lebih dalam berarti mengurai kata. Dalam hal ini memparse kode Javascript/ HTML adalah bertujuan untuk merubah kode tersebut sehingga menjadi hasil yang tanpa merubah kode aslinya, jadi lebih jelasnya ketika kode javascript itu diparse maka fungsinya tidak akan berubah meski kode parse yang dihasilkan berbeda atau berubah dengan kode javascript aslinya.<br />
<br />
Jadi, Parse HTML adalah sebuah cara untuk mengurai kode script html/ javascript dengan menggunakan alat/ tool online (web) maupun off line (aplikasi) .   </div>
<div style="text-align: justify;">
<br /></div>
<div>
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;">Fungsi Parse HTML</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Teknik ini banyak digunakan oleh para desainer web, sebagai contoh pembuat template untuk tampilan sebuah website/ blog. Mereka menggunakan cara tersebut agar kode HTML/ JavaScript dari template yang dibuat tidak dijiplak seutuhnya oleh para pemakai. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Fungsi berikutnya yaitu apabila Anda akan memposting sebuah artikel dimana artikel tersebut terdapat kode script HTML/ JavaScript maka, cara untuk memposting kode script tersebut tidak bisa secara langsung Anda masukkan ke dalam kolom postingan, karena jika Anda memasukan secara langsung kode script tersebut, maka nanti tidak akan muncul kode yang sama dengan kode yang Anda inginkan, sehingga diperlukan kode-kode pengganti untuk memunculkan kode script tersebut agar sesuai dengan kode aslinya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Selain fungsi tersebut yaitu ketika Anda mencoba meletakkan iklan adsense pada template blog. Google adsense tidak memperbolehkan merubah desain hasil kode adsense yang didapat dari akun adsense. Jika hal itu terjadi maka Anda akan dibanned. Dan solusinya adalah dengan menggunakan cara ini yaitu memparse kode javascript iklan adsense sehingga dapat diterima ketika kita tempelkan di HTML blog.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dan terakhir, tool ini berguna untuk memudahkan Anda menulis Tag <pre> pada artikel.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;">Cara kerja dari HTML Parser</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Cara kerja dari HTML Parser Tool ini adalah mengkonversi simbol:</div>
<ul style="text-align: left;">
<li style="text-align: justify;">Konversi <span style="color: red;">& </span>menjadi <span style="color: red;">&amp;</span></li>
<li style="text-align: justify;">Konversi <span style="color: red;">'</span> menjadi <span style="color: red;">&#039;</span></li>
<li style="text-align: justify;">Konversi <span style="color: red;">"</span> menjadi <span style="color: red;">&quot;</span></li>
<li style="text-align: justify;">Konversi <span style="color: red;"><</span> menjadi <span style="color: red;">&lt;</span></li>
<li style="text-align: justify;">Konversi <span style="color: red;">></span> menjadi <span style="color: red;">&gt; </span></li>
</ul>
<br />
<span style="font-size: large; text-align: justify;">Cara Memasang HTML Parser Tool</span><br />
<br />
Saya sudah pernah membagikan tutorial untuk memasang tool ini. Silakan kunjungi <a alt="cara mudah memasang kode tool parse html" href="http://bertubies.blogspot.com/2015/01/kumpulan-kode-script-html-parser-tools.html" target="_blank" title="Kumpulan Kode Script untuk membuat HTML Parser Tools">Kumpulan Kode Script HTML Parser Tools</a> untuk mengetahui caranya.<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: large;">Langkah-langkah menggunakan HTML Parser Tool</span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Untuk mengetahui langkah-langkah menggunakan alat ini silakan kunjungi <a alt="alat untuk memparse html/ javascript" href="http://bertubies.blogspot.com/2015/02/html-parser-tool.html" target="_blank" title="Alat untuk Parse HTML">HTML Parser Tool</a>. Anda dapat langsung mempraktekkan langkah-langkahnya.<br />
<br />
<br /></div>
===</div>
</div>

Penjelasan Fungsi dan Cara Kerja HTML Parser Tool

Nama lain dari HTML Parser Tool yaitu HTML Converter, HTML utilities, Adsense parser, Ad Code Converter. HTML Parser Tool adalah sebua...

22:31

Cara Memasang HTML Color Picker

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
HTML Color Picker adalah sebuah perangkat lunak untuk mencari kode warna HTML. Kode warna HTML sangatlah banyak dan saya rasa untuk menghafal semua kode tersebut merupakan hal yang cukup sulit. Namun, tak perlu khawatir karena blog ini menyediakan aplikasi sederhana untuk menemukan kode warna HTML dengan mudah, yang dinamakan HTML Color Picker. Aplikasi ini cukup keren untuk mendeteksi suatu warna untuk diambil kodenya. Anda dapat bereksperimen mencari kode warna yang diinginkan dengan mengikuti cara penggunaannya. Selain itu, blog ini menyediakan kode script aplikasi HTML color picker untuk memudahkan Anda menyimpan aplikasi ini di blog.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="text-align: justify;">Berikut ini adalah langkah untuk memasang tool </span><b style="text-align: justify;">HTML Color Picker.</b><br />
<span style="text-align: justify;"><br /></span>
<span style="text-align: justify;">1. Login ke akun Blogger Anda.</span><br />
<span style="text-align: justify;">2. Copy kode script di bawah ini. Silakan pilih salah satu.</span><br />
<br />
<div style="text-align: center;">
Kode Aplikasi HTML Color Picker</div>
<div style="text-align: center;">
Kedua versi berikut ini adalah kode tool html color picker yang sudah umum digunakan.<br />
<br />
<span style="font-size: large;">Versi 1</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2QvyIOKEmSn2d9LdiJyGk-GDop2NxnQDZ1l0-U9lICZlj_6YHC-mpMmWSKYpMbHOn8RU63ZsxAxcpNJ2WgoGmw0cVk3eu5yqIwVQa5bBUdLwXt32bqz_B7UYT5hqU8cLzk1S9Nw6ncg/s1600/bertubies.blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Kumpulan tool kode warna HTML Color Picker" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2QvyIOKEmSn2d9LdiJyGk-GDop2NxnQDZ1l0-U9lICZlj_6YHC-mpMmWSKYpMbHOn8RU63ZsxAxcpNJ2WgoGmw0cVk3eu5yqIwVQa5bBUdLwXt32bqz_B7UYT5hqU8cLzk1S9Nw6ncg/s1600/bertubies.blogspot.png" title="Cara Memasang HTML Color Picker versi 1" width="169" /></a></div>
<pre><object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="420" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie"><param value="High" name="quality"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object> <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess"><param value="http://www.2createawebsite.com/build/col.swf" name="movie"><param value="high" name="quality"><param value="#ffffff" name="bgcolor"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>
</pre>
<div style="text-align: center;">
<br />
<div style="text-align: left;">
<div style="text-align: center;">
<span style="font-size: large;">Versi 2</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4jKkuOsNJeknNmw5-yBioVoexp_1QtPkHA4t3kyoOLOGYdLgbVv07EPcyanS_E7fwHx_LblT6l937OM6WOenFqEaaEQ4LybLB_-k0vGpslknNd1l7k4iyZ6M0-ImOXKn2JJUa_DdIpsk/s1600/bertubies.blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="kumpulan kode tool warna HTML Color Picker" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4jKkuOsNJeknNmw5-yBioVoexp_1QtPkHA4t3kyoOLOGYdLgbVv07EPcyanS_E7fwHx_LblT6l937OM6WOenFqEaaEQ4LybLB_-k0vGpslknNd1l7k4iyZ6M0-ImOXKn2JJUa_DdIpsk/s1600/bertubies.blogspot.png" title="Cara Memasang HTML Color Picker Versi 2" width="198" /></a></div>
<pre><div style="text-align: center;">

generator/v1/trixcgv1.swf"><param name="quality" value="high"><param name="bgcolor" value="#cccccc"><embed src="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf"

quality="high" bgcolor="#cccccc"

width="400"

height="400"

name="flash" align="middle" play="true" loop="false" quality="high"   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div></pre>
<br />
3. <span style="text-align: justify;">Anda dapat memasang tool ini di dalam postingan, caranya:</span></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="text-align: justify;">Klik New Post > Klik HTML bukan Compose > Paste kode script tool</span></li>
</ul>
<div style="text-align: left;">
<span style="text-align: justify;">Atau Anda dapat memasang tool ini di dalam laman, caranya:</span></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="text-align: justify;">Klik Laman/ Pages > Klik Laman Baru/ New Pages > Paste kode script tool</span></li>
</ul>
<br />
<div style="text-align: left;">
<span style="text-align: justify;">4. Save dan lihat hasilnya.</span></div>
<div style="text-align: left;">
<span style="text-align: justify;"><br /></span></div>
<div style="text-align: left;">
<span style="text-align: justify;"><br /></span></div>
<span style="color: red;">UPDATE!</span> Jika ingin mendapatkan tool kode warna (HTML Color Picker) seperti di atas tapi yang <b>Valid HTML5</b> dan <b>Responsive</b> silakan coba tutorial cara <a alt="cara membuat tool kode warna responsive" href="http://bertubies.blogspot.com/2015/02/membuat-tool-kode-warna-valid-html5-dan-responsive.html" target="_blank" title="cara membuat tool kode warna valid HTML5 dan responsive">Membuat Tool Kode Warna Valid HTML5 dan Responsive</a> Semoga bermanfaat.<br />
<br />
===</div>
<br /></div>

Cara Memasang HTML Color Picker

HTML Color Picker adalah sebuah perangkat lunak untuk mencari kode warna HTML. Kode warna HTML sangatlah banyak dan saya rasa untuk mengha...