Toolbar Iframe (Live Demo - Download)

Lama tidak buat tulisan membuat Kang Fathur kangen akan dunia blogger, ya meskipun banyak kalangan blogger paham tentang pembuatan tips dan trick, tutorial, serta artikl-artikel lainnya. Seperti yang Kang Fathur tulisankan kalin ini adalah pembahasan tentang cara membuat link demo yang hidup, artinya Toolbar Iframe Demo dan Download.

Seperti yang diberikan berbagai penyedia download template baik template blogger, theme wordpress, drupal theme ataupun template-template lainnya dalam dunia internet. Coba anda lihat gambar dibawah, gambar ini menunjukkan link demo yang tidak menghapuskan blog aslinya. Artinya, penggabungan blog kita dengan blogger orang lain.

Ada dua cara untuk menerapkannya dalam blogger kita :

Cara Pertama :

Kita menggunakan template yang disediakan oleh KOD Tutor dalam tulisannya




LIVE DEMO


Penerapannya dalam blog kita seperti ini :

http://NAMABLOGKAMU.blogspot.com/?url=NAMABLOG-DEMO.blogspot.com

Cara Kedua :

Menerapkan java script dan kode CSS beserta pembuatan laman blog




LIVE DEMO


Penerapannya sebagai berikut :

http:// NAMABLOGKAMU/p/demo.html?iframe= NAMABLOG-DEMO.blogspot.com/

Masih bingung ya? Silakan kunjungi blog aslinya di KOD Tutor tentang Cara 1 dan Cara 2.

Semoga bermanfaat ya? salam Blogger Indonesia

Source : Kang Fathur 

Read More

Download Free Able2Extract Professional (Convert PDF)

Pada kesempatan yang panas mencekam ini, Kang Fathur akan membagikan software yang sangat berguna bagi kita semua, terutama bagi anda yang sering merubah file pdf ke berbagi file-file lainnya. Software ringan ini saudah dibuktikan oleh kebanyakan orang, dan hasilnya sangat memuaskan ketimbang convert pdf-pdf yang lainnya. Nama software ini adlah Able2extract

Able2Extract Professional merupakan aplikasi program pendidikan yang berfungsi untuk merubah file pdf ke format word, excel, powerpoint dan publisher. Aplikasi ini bisa sangat membantu kita, terutama bagi para mahasiswa dan guru dalam dunia pendidikan. Hasil convertnya pun sesuai dengan yang aslinya.

Cara penggunaannya pun relatif mudah. Anda cukup menekan tombol klik open lalu pilih pdf mana yang mau di rubah format datanya. Kemudian klik tombol select all dan yang terakhir pilih mau di rubah menjadi pdf sesuai dengan kebutuhan anda.

Bagi anda yang ingin mempunyai Able2Extract Professional, silakan  Download

Source : Kang Fathur

Read More

Membuat Contact Form Dengan Mudah

Sehubungan dengan banyaknya pertanyaan tentang submit ebook yang baru di launching oleh saya tentang bagaimana cara mengirimkan ebook yang mereka buat serta disharekan. Oleh karena itu, saya akn memabagikan cara membuat Contact Us Form (Formulir Kontak Kami) dari Google Docs yang saya manfaatkan untuk submit ebook. Selain itu, dari Google Docs Anda juga dapat membuat polling atau survei, spreadsheet, dll.

LIVE DEMO

Banyak fitur yang bisa dibuat sesuai dengan kebutuhan anda masing-masing, berikut cara membuat Kontak Form (Contact Us form) sederhana dari Google Docs:

• Kunjungi docs.google.com 
• Masuk/login dengan ID Gmail dan password Anda.
• Kunjungi  link ini untuk memilih template form
• Pada "Contact us" website form (paling atas)
• Klik Use this Template. 

- Apabila format sudah cocok, edit judul dan deskripsi (paling atas) dan klik Save.
- Apabila ingin merubah tampilan/tulisan, atau daftar isian/pertanyaan, Anda dapat mengeditnya dengan mengarahkan mouse pada yang akan diedit dan klik tanda pensil.
- Untuk menghapus salah satu kotak isian, arahkan mouse pada kotak dan klik ikon tong sampah.
- Untuk merubah urutan isian/pertanyaan ke atas atau ke bawah, arahkan dan klik kiri mouse pada yang akan dipindah dan naik atau turunkan kotak isian.
- Klik Save/Simpan (kanan atas). Selesai.

Menerapkan pada blogger

1. Klik More Actions 
2. Klik Embed/Tempel
3. Copy/paste kodenya dan masukkan ke artikel atau halaman statis blog Anda.

Semoga bermanfaat bagi anda semua.

Source : Kang Fathur 

Read More

Belajar CSS, HTML Menggunakan Offline HTML Editor

Masalah terbesar yang dihadapi oleh sebagian besar blogger pemula seperti Kang Fathur untuk mengedit template blogger. setelah survey yang telah dilakukan, kurangnya kesadaran dengan bahasa browser seperti CSS, XML, HTML, JavaScript dll. Meskipun ada beberapa situs online yang memiliki tutorial di bidang ini dan salah satu situs tersebut adalah www.w3schools.com Website ini sangat populer karena memungkinkan anda bermain dengan kode.

Ini memiliki Alat Editor online HTML yang memungkinkan anda melihat langsung (live preview) dari kode yang anda gunakan. Banyak pengembang menemukan tool ini sangat berguna namun memiliki seseorang pernah membayangkan bahwa anda benar-benar dapat menyalin alat ini keluar dari W3Schools dan menggunakannya offline untuk berlatih coding saat offline? Nah untungnya setelah beberapa trial and error yang kami dapat berhasil membuat alat serupa yang kami beri nama PIO HTML Editor yang berhasil saya modifikasi dari blogger luar Mohammad Mustafa Ahmedzai. Semua blogger yang memiliki kesempatan untuk bersenang-senang bermain dengan kode penting seperti CSS, HTML dan JavaScript dan belajar coding penting dalam cara yang lebih menarik.

Sekarang Anda benar-benar dapat menguji kode sebelum menambahkannya ke blogger. Intinya, anda bisa melihat terlabih dahulu blog yang dimaksudkan.

1. Alat ini tersedia sebagai perangkat lunak, serta memiliki keunggulan berikut :
2. Ia bekerja Offline di browser yang tersedia
3. Memakan waktu kurang dari sepersekian detik untuk menunjukkan live preview
4. Ukurannya sama dengan kacang yaitu 2,32 Mb
5. Kode otomatis tersimpan di browser jika PC Anda sengaja di shutdowns
6. Anda dapat kembali (undo) beberapa kali menggunakan Ctrl + Z dan maju (Redo) menggunakan Ctrl + Y

Cara Mendownload

• Klik link ini >> PIO HTML Editor
• Jendela PIO HTML Editor akan terhubung
• Sekarang anda dapat mulai menggunakannya Viia Online
• Tetapi untuk bekerja secara Offline anda perlu menyimpannya terlebih dahulu.

Untuk menyimpannya ditunjukkan pada gambar berikut

• Selesai

Petunjuk Untuk Menggunakan PIO HTML EDITOR

Alat ini terdiri dari dua ruang yaitu ruang kiri dan ruang kanan. Seperti yang ada pada gambar berikut,

Ruang kiri adalah area di mana anda dapat menambahkan kode anda dan ruang kanan adalah area dar hasil tampilan dari kode yang dimasukkan pada ruang kiri. Kode CSS ditambahkan hanya antara <style> dan </ style> dan kode HTML ditambahkan tepat di bawah </ style>

Contoh Permainan Kode ala HTML Editor Kang Fathur

Pada contoh kali ini, Kang Fathur akan menggunakan menggunakan Trik Gambar dengan Efek Keburaman (Mouse Hover) artinya, image atau gambar yang sudah diuplod akan tampak buram jika didekati oleh mouse.

img {
filter: alpha (opacity = 100);
-moz-opacity: 1.0;
opacity: 1.0;
border: 0;
}
img: hover {
filter: alpha (opacity = 30);
-moz-opacity: 0,30;
opacity: 0,30;
border: 0;
}

Sekarang untuk menerapkan efek ini untuk gambar kita akan membutuhkan kode HTML seperti di bawah ini,

<img class="kangfathur" src="https://lh5.googleusercontent.com/-t_Xzph8zlKY/TutEpnNfr7I/AAAAAAAAA6I/bxyNsHO-NDk/s400/kang_fathur.png" />

Untuk menghasilkan yang terbaik, tambahkan Kode CSS hanya antara <style> dan </ style> dan Kode HTML di bawah </ style>. Tekan tombol Lihat danlihat hasilnya di ruang kanan.  Screen shot kira-kira seperti ini,

Beberapa Tips Penting: ~

1. Undo, klik Ctrl + Z
2. Redo, klik Ctrl + Y
3. Untuk mendapatkan URL dari gambar yang disimpan dalam hard drive anda misalkan Drive F, membuka kembali Firefox browser dan ketik F: di address bar dan tekan enter. Drive yang akan terbuka dan sekarang hanya browse ke gambar itu dan klik kanan di atasnya dan kemudian klik pada Copy Link Location. Aduh! Anda punya URL. Sekarang gunakan URL ini dimanapun diperlukan selama offline anda mengedit kode.
4. Setelah anda puas dengan kode yang anda siapkan maka cukup paste kode CSS di atas ]]></ b: skin> dalam template blogger Anda dan kode HTML di mana anda ingin efek yang akan dilihat yaitu posting atau sidebar

Harapannya, bagi yang blogger pemula ini, sebaiknya menggunakan tool ini untuk tahap belajar

Semoga ini bermanfaat bagi anda semua, dan jangan lupa klik Google + dipojok kanan atas untuk membagikan artikel ini.

Source : Kang Fathur 

Read More

Mempercepat Loading Blog dengan Compress CSS

Pernah suatu ketika saat berkunjung ke blog Kang Rohman dan seperti biasanya, disana saya chating bersama temen-teman blogger yang dari luar kota (maklum, dikotaku - Situbondo jarang sekali yang minat geblog) serta ada yang bilang kalo loading blog Kang Fathur ini agak sedikit berat.

Saya akui dan sadar kalau template yang saya gunakan mengantung banyak kode CSS yang sangat berpengaruh pada loading blog.

Berbagai macam cara saya lakukan untuk meringankan loading blog, mulai dari ujung barat sampai ujung timur saya lakukan tips-tips mempercepat loading blog.

Alhasil, saya menemukan sebuah web penyedia compress CSS yang optimal. Contoh pada blog Kang Fathur sebelum di kompres, seluruh css sebesar 23 ribu kb lebih, setelah dikompres tinggal kurang dari 20 ribu kb. Kompress css berarti dipadatkan, sehingga berpengaruh ke loading yang lebih ringan dan cepat. Caranya sangat mudah sekali.

1. Cari Kode CSS pada Template

• Login Blogger anda;
• Klik tab Edit HTML;
• Backup dulu template anda dengan meng-klik Download Template Lengkap
• Cari senua kode CSS, biasanya kodenya terletak antara <b:skin><![CDATA[/* sampai sebelum kode ]]></b:skin>
• Hightlight kode CSS anda dan Copy;

2. Start Compress CSS

• Buka website penyedia compres CSS di http://cssdrive.com/index.php/main/csscompressor
• Atur Setting sebagai berikut :

1. Compression mode = pilih 'Super Compact'
2. Comments handling = pilih 'Strip ALL comments'

• Paste semua kode CSS yang sudah dicopy;
• Klik Compress-it
• Pilih Hightlight Code dan Copy
• Pastekan pada template anda dimana anda tadi mengambil kode CSS, yakni antara <b:skin><![CDATA[/* sampai sebelum kode ]]></b:skin>
• Simpan Template dan lihat hasilnya.

Selesai sudah pekerjaan mengkompress kode CSS, dan buktikan anda bisa membuat anda nyaman blogging. Semoga berhasil...!!!

Masih berat ya blog Kang Fathur? ya maklum karena kode JavaScript-nya numpuk kayak sampah dalam tong... Tapi mendingan khan?

Source : Kang Fathur 

Read More

Membuat Meta Tag Generator Tool Pada Blog

Salah satu yang dicari para pemilik situs baik yang berbayar ataupun yang free seperti blogger akan mencari yang namanya SEO. Bagaimana tidak? Seo merupakan hal yang utama dalam dunia blogging seperti yang pernah saya bahas diwaktu lalu disini.

Lah, untuk itu biar anda tidak perlu capek-capek mencari Tool Meta Tag sebaiknya anda memasang sendiri di blog anda baik di postingan blog ataupun disidebar blog anda. Carannya seperti ini :

Live Demo

Langkah Pertama :

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Jika ketemu copy paste kode
• Lalu Simpan,

/*---- Meta Tag Generator Tool----*/
textarea {
width:100%;
color:#0080ff;
font:14px sans-serif, verdana;
background:#fff;
border:1px dotted #67A7E3; }
textarea:hover {
border:1px dotted #666;
}
input.pio3 {
color:#000;
font: normal 12px sans-serif, verdana;
border:1px dotted #67A7E3;
background:#C9E4FF;
}
input.pio4 {
color:#3C3C3C;
font: normal 12px sans-serif, arial;
border:1px dotted #67A7E3;
background:#C9E4FF;
margin-bottom:4px;
}
input.pio4:hover {
color:#289728;
border:1px solid #289728;
background:#fff;
}

Langkah Kedua

• Pilih Posting;
• Pilih Edit HTML
• Copy paste kode dibawah kedalam HTML tersebut;
• Lalu TERBITKAN ENTRI

<div align="justify">
<span class="fullpost"></span><span class="fullpost"> </span></div>
<h4 align="center">
<span class="fullpost">Meta Tag Generator Tool</span></h4>
<span class="fullpost">
<center> <table><tbody>
<tr> <td><form>
<div align="center">
<center><table border="0" cellpadding="2"><tbody>
<tr><td><span style="color: #3c3c3c; font-weight: bold;">Description:</span></td> <td><input class="pio3" name="input1" size="40" type="text" /></td></tr>
<tr><td><span style="color: #3c3c3c; font-weight: bold;">Keywords:</span></td> <td><input class="pio3" name="input2" size="40" type="text" /></td></tr>
<tr><td><span style="color: #3c3c3c; font-weight: bold;">Author (Optional):</span></td> <td><input class="pio3" name="input3" size="40" type="text" /></td></tr>
<tr><td><span style="color: #3c3c3c; font-weight: bold;">Robots (Optional):</span></td> <td><select name="input4" size="1"><option selected="selected" value="All">All </option>
<option value="None">None </option>
<option value="Index">Index </option>
<option value="No Index">No Index </option>
<option value="Follow">Follow </option>
<option value="No Follow">No Follow </option></select></td></tr>
</tbody></table>
</center></div>
<input class="pio4" onclick="create(this.form)" type="button" value="Create Metatags" /> <input class="pio4" type="reset" value="Clear All" /> <textarea cols="65" name="story" rows="12" wrap=""></textarea>
</form>
</td></tr>
</tbody></table>
</center></span>

Semoga berhasil dan menjadikan blog anda SEO Friendly.

Source : Kang Fathur 

Read More

Pasang Kode HTML Pada Komentar Blog

Sementara menulis tutorial atau mengajukan pertanyaan, kadang-kadang menjadi sangat diperlukan untuk memposting kode html dan javascript dalam bentuk komentar blog Anda didukung oleh Blogger. Anda telah melihat banyak penulis postingan HTML efektif tetapi ketika beberapa dari Anda mencoba untuk melakukannya, Anda mendapatkan error.

Hal ini karena bentuk Komentar Blogger tidak mendukung posting langsung dari HTML dan JavaScript. Dalam rangka untuk membantu Anda untuk melakukan itu kita perlu mengubah / mengkodekan kode yang sama ke dalam teks dan kemudian posting secara efektif tanpa kesalahan apapun. Perangkat di bawah ini akan membantu Anda untuk mengubah karakter HTML untuk teks sederhana, yang bisa dengan mudah dimasukkan dalam template blogger Anda dan bentuk komentar.

Anda juga dapat menggunakannya untuk mengubah kode adsense anda ke dalam bentuk embeddable. Itu mengkonversi karakter khusus dalam cara ini,

• '<' Menjadi '&lt;'
• '>' Menjadi '&gt;'
• '"' (double quote) Menjadi '&quot;'
• ''' (single quote) Menjadi '&#039;'
• '&' Menjadi '&amp;'

THE ENCODER HTML: Konversi Mulai Sekarang!

© Kang Fathur

Source : Kang Fathur 

Read More