Cara Membuat Tombol PayPal Donasi/Donate di Blog

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3PXLcbTTZRKeFW6L1oKD0DcjwT0Mp8ro_Pp0PjxzIP7lY4_NdyHpxHZSfyysL6gX0eVPABYEIzxoGMxPseIOyZEDWwbKjxZlPjTLdGzovbEezghJtePIG36BfehcSA-D82ijfkiHr6y0/s1600/as-copy1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Memasang Tombol PayPal Donasi/Donate" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3PXLcbTTZRKeFW6L1oKD0DcjwT0Mp8ro_Pp0PjxzIP7lY4_NdyHpxHZSfyysL6gX0eVPABYEIzxoGMxPseIOyZEDWwbKjxZlPjTLdGzovbEezghJtePIG36BfehcSA-D82ijfkiHr6y0/s400/as-copy1.jpg" title="Cara Memasang Tombol PayPal Donasi/Donate" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Cara Memasang Tombol PayPal Donasi/Donate</td></tr> </tbody></table> Helo kawan kali ini saya ingin berbagi tips bagaimana kita membuat tombol donasi/donate pada blog.<br /> <br /> <div style="text-align: justify;"> Keberadaan tombol donasi pada blog akan memberikan kesempatan bagi pemilik blog untuk mendapatkan sumbangan dana dan memudahkan visitor untuk menyumbang donasi pada pemilik blog.</div> <br /> <div style="text-align: justify;"> Sebelum saya membahas ketahap inti sebaiknya Anda pastikan terlebih dahulu apakah Anda sudah mempunyai akun Paypal apa belum, jika Anda belum memiliki akun paypal silahkan kunjungi artikel terdahulunya <a href="http://zonahentongerz.blogspot.com/2015/11/penjelasan-paypal-dan-cara-daftar.html" target="_blank">disini</a>.</div> <br /> <div style="text-align: justify;"> Membuat / memasang tombol donasi Paypal tidaklah sulit, kita hanya perlu masuk/login ke akun paypal dengan alamat email dan password Anda, kemudian kita bisa mengatur dan mengambil script yang nantinya kita pasang pada blog. Untuk langkah-langkap pembuatan tombol donasi Paypal berikut ini adalah langkahnya:</div> <br /> <span style="font-size: large;"><b><i><u>Tutorial Cara membuat tombol Donasi Paypal:</u></i></b></span><br /> <br /> <br /> <ul> <li>Pertama silahkan kunjungi halaman paypal.com</li> <li>Selanjutnya login dengan alamat email dan password Anda</li> <li>Setelah login klik tab Merchant Service/Layanan pedagang dan pilih Donasi/Donations</li> </ul> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHR2WDGULXBW95PwO0zj2vAtM6AUI-RRBjRRGTJwDatdrctUp6hwwDvjJGfFmTn6DdpiuH5Jwt9_YGcX1Y_2A8EgaoyTh_JxpCFMuMuQjs4ItqyNhPtn2qlbNC9sAqpByFBL4kbbTEQj4/s1600/SnapCrab_NoName_2015-1-8_22-10-49_No-00_zpse706906f.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Merchant Service" border="0" height="584" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHR2WDGULXBW95PwO0zj2vAtM6AUI-RRBjRRGTJwDatdrctUp6hwwDvjJGfFmTn6DdpiuH5Jwt9_YGcX1Y_2A8EgaoyTh_JxpCFMuMuQjs4ItqyNhPtn2qlbNC9sAqpByFBL4kbbTEQj4/s640/SnapCrab_NoName_2015-1-8_22-10-49_No-00_zpse706906f.png" title="Merchant Service" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Merchant Service</td></tr> </tbody></table> <b><i><u>Cara membuat tombol Donasi/Donate di Blogger</u></i></b><br /> <br /> <br /> <ul> <li>Perhatikan pada gambar dibawah ini yang saya beri tada merah:</li> </ul> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVwIifMh4lqU8b2ZTkchHVhriBH66MhwLnFcVRnD95PaaEa9lUl9D3sNf9Xlv8KqkR7JJvI0UOYUWIFHOk0bndONYWW0XLUzSCnD9UHIB-YODP5bAORE4nEmcl61J8r4kjRe0l7nOmJw/s1600/SnapCrab_NoName_2015-1-8_22-16-41_No-00_zpsb5e1bee2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tutorial Button Donate" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVwIifMh4lqU8b2ZTkchHVhriBH66MhwLnFcVRnD95PaaEa9lUl9D3sNf9Xlv8KqkR7JJvI0UOYUWIFHOk0bndONYWW0XLUzSCnD9UHIB-YODP5bAORE4nEmcl61J8r4kjRe0l7nOmJw/s640/SnapCrab_NoName_2015-1-8_22-16-41_No-00_zpsb5e1bee2.png" title="Tutorial Button Donate" width="612" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Tutorial Button Donate</td></tr> </tbody></table> <div> <div> <span style="font-size: large;"><b>Keterangan:</b></span></div> <div> <br /></div> <div> <ul> <li>Pada <b><i>Nama/Layanan Organisasi</i></b> (Silahkan isi dengan nama yang anda inginkan seperti nama blog/website)</li> <li>Pada <b><i>ID Donasi</i></b> biarkan saja kosong</li> <li>Pada gambar yang saya beri tanda nomor 3, silahkan sesuaikan tampilan tombol Donasi paypal Anda atau biarkan tampilan defauknya saja</li> <li>Pada nomor 4 silahkan tentukan jenis mata uang yang ingin Anda gunakan</li> <li>Silahkan tentukan apakah Anda ingin membiarkan donasi menentukan jumah donasi mereka sendiri atau Anda ingin mengatur dengan menentukan jumlah tetap</li> <li>Tahap ini silahkan pilih ID rekening paypal Anda, dalam hal ini pilih saja defaulnya seperti pada gambar diatas</li> <li>Selanjutnya klik tombol <b><i>Buat Tombol</i></b></li> </ul> </div> <div> <br /></div> <blockquote class="tr_bq"> Setelah Anda meng-klik tombol “<b><i>Buat Tombol</i></b>” akan terbuka halaman baru, pada tahap ini Anda akan mendapatkan script tombol donasi yang tadi Anda buat. Copy kode tersebut dan pasang pada blog sobat.</blockquote> </div> <div> <br /></div> <div> <span style="font-size: large;"><b><u>Cara pasang tombol Donasi pada blog:</u></b></span></div> <div> <br /></div> <div> <div> <ol> <li>Login ke akun blogger Anda</li> <li>Pada dasebor blog Anda pilih Tata Letak</li> <li>Klik Tambah Gadget kemudian pilih HTML/JavaScript</li> <li>Paste script yang tadi Anda copy</li> <li>Terakhir Simpan</li> </ol> </div> </div> <div> <br /></div> <div> Setelah mengikuti langkah diatas, itu artinya pembuatan tombol donasi paypal Anda sudah selesai, selanjutnya silahkan cek pada blog Anda. Jika masih ada pertanyaan tentang pembuatan tombol donasi paypal, silahkan isi kotak komentar dibawah ini.</div> <div> <br /></div> <div> <span style="font-size: x-small;"><i>Sumur : http://giribig.com/2015/01/cara-membuat-tombol-donasidonate-di-blogger.html</i></span></div>

Cara Membuat Tombol PayPal Donasi/Donate di Blog

Cara Memasang Tombol PayPal Donasi/Donate Helo kawan kali ini saya ingin berbagi tips bagaimana kita membuat tombol donasi/donate pada b...

Selengkapnya »

Penjelasan PayPal dan Cara Daftar Membuat Akun PayPal

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKTSVlTY9HimBCsDnY7AwcLH4a1r5eRUCQI7mmQ-b8YzHXXVrergf9ahvm00oth7v5ri_vHipQ2IfTAbaafqT5IjViCDh7QHKp7NA65H_INrHZOeqpRr8rhOYcS19XUew2ff1JrAj330/s1600/apa-itu-paypal.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Apa itu PayPal ?" border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKTSVlTY9HimBCsDnY7AwcLH4a1r5eRUCQI7mmQ-b8YzHXXVrergf9ahvm00oth7v5ri_vHipQ2IfTAbaafqT5IjViCDh7QHKp7NA65H_INrHZOeqpRr8rhOYcS19XUew2ff1JrAj330/s640/apa-itu-paypal.jpg" title="Apa itu PayPal ?" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Apa itu PayPal ?</td></tr> </tbody></table> <div style="text-align: justify;"> Di dalam bisnis online ada beberapa macam cara atau sistem pembayaran, mulai dari transfer melalui rekening bank lokal hingga penggunaan uang virtual. Tidak seperti transaksi dengan transfer rekening bank lokal, mekanisme pembayaran secara virtual atau online memiliki sistem yang sangat kompleks dengan berbagai mekanisme dan <a href="http://id.wikipedia.org/wiki/Derivatif" target="_blank">derivatif</a>-nya. Selain itu, proses transaksi virtual ini juga melibatkan pihak ketiga yaitu Secure Payment Gateway dan Credit Card Authorization Service, diantaranya adalah Paypal, Ipayment, Nochex, dan lain-lain.</div> <br /> <span style="font-size: x-large;"><b><i><u>Apa itu Paypal?</u></i></b></span><br /> Kutipan dari <a href="https://id.wikipedia.org/wiki/PayPal" target="_blank">Wikipedia</a>:<br /> <blockquote class="tr_bq"> PayPal Inc. adalah perusahaan dalam jaringan yang menyediakan jasa transfer uang melalui surat elektronik, menggantikan metode lama yang masih menggunakan kertas, seperti cek dan wesel pos.</blockquote> <br /> <div style="text-align: justify;"> Seperti yang sudah disebutkan sebelumnya, Paypal itu adalah salah satu dari sekian banyak alat pembayaran (Payment Processor) virtual. Sampai saat ini, Paypal adalah alat pembayaran virtual yang paling banyak digunakan oleh internet marketer karena memang alat pembayaran ini adalah yang paling aman.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Paypal bisa diibaratkan sebagai rekening virtual, berbeda dengan rekening bank lokal yang diakses via online. Kalau rekening bank lokal biasanya bisa digunakan untuk transaksi di dalam satu negara, berbeda dengan paypal yang bisa digunakan untuk transaksi oleh seluruh pengguna internet dari negara mana saja, tentunya mereka yang sudah punya akun Paypal. Hanya dengan mengetahui email Paypal seseorang, kita bisa mengirimkan uang virtual ke akun Paypal orang tersebut dengan cepat dan aman.</div> <br /> <div style="text-align: justify;"> Para pengguna internet yang ingin melakukan transaksi online baik mengirim atau menerima uang, misalnya untuk membeli barang, membeli lisensi software original, membeli ebook, mengirim donasi, dan lain-lain, biasanya menggunakan Paypal sebagai media transaksi karena lebih cepat dan aman. eBay.com (situs lelang online) dan banyak situs eCommerce menggunakan Paypal sebagai alat pembayaran mereka, ini tentunya mengharuskan para member mereka untuk memiliki akun Paypal agar bisa melakukan transaksi.</div> <br /> <span style="font-size: large;"><b><u>Apa keuntungan bagi pembeli?</u></b></span><br /> <br /> <div style="text-align: justify;"> Pihak pembeli yang menggunakan Paypal sebagai alat pembayaran bisa mengirimkan komplain kepada pihak Paypal dalam waktu 45 hari jika barang yang dibeli belum sampai pada waktu yang ditentukan pihak penjual atau barang yang dikirim ternyata tidak sesuai dengan deskripsi barang yang diberikan oleh si penjual. Jika si pembeli yang tidak puas bisa membuktikan bahwa si penjual melakukan penipuan (fraud) maka si pembeli akan mendapatkan pengembalian uang (charge back) dari perusahaan kartu kreditnya.</div> <div style="text-align: justify;"> <br /></div> <span style="font-size: large;"><b><u>Apa keuntungan bagi penjual?</u></b></span><br /> <br /> <div style="text-align: justify;"> Paypal tentunya tidak hanya melindungi satu pihak saja, tapi semua pihak. Paypal juga melindungi penjual dari permintaan pengembalian uang atau komplain bohong dari si pembeli yang berniat buruk. Kebijakan perlindungan tertulis untuk penjual dirancang untuk melindungi penjual dari klaim atau komplain palsu dari pembeli yang mengaku telah mengirimkan uang yang ternyata tidak ada catatan bukti pembayaran dan catatan transaksi.</div> <br /> <div style="text-align: justify;"> Setiap transaksi yang dilakukan dengan mengunakan Paypal selalu ada catatan bukti pembayaran di masing-masing akun Paypal, baik penjual maupun pembeli. Catatan ini bisa digunakan sebagai bukti bahwa telah terjadi pengiriman uang antara pembeli dan penjual.</div> <div style="text-align: justify;"> <br /></div> <span style="font-size: large;"><b><u>Tutorial Cara Daftar / Membuat Akun Paypal</u></b></span><br /> <br /> Untuk memiliki akun Paypal, Anda harus memenuhi persyaratan, antara lain; memiliki akun email yang aktif dan harus berusia minimal 18 tahun atau lebih. Jika saat ini Anda belum memiliki email, maka sebaiknya Anda membuatnya terlebih dahulu.<br /> <br /> Berikut ini langkah-langkahnya:<br /> <br /> <br /> <ul> <li>Buka halaman website <a href="https://www.paypal.com/webapps/mpp/home" target="_blank">www.Paypal.com</a>. Perhatikan pada bagian atas, tentukan apakah Anda ingin membuat akun Paypal untuk Pribadi atau untuk Bisnis. Dalam contoh ini, saya akan membuat akun Paypal untuk Pribadi. Lalu klik tombol ” Daftar” pada bagian atas kanan, nanti akan diarahkan ke halaman baru. Lihat gambar di bawah:</li> </ul> <br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQbQtrP5eiAs31vGlWh629SI7fbxfFdoRnTsC2bVjvQPtRGcvNngsIJWxuachSWhSCdn3CRnY3P4ZbJj-UipZIIDnEo9TewfJqg5qq7cpqDZdrMpz0SmO4Q4jYVLoTi_P5JWla7nhz33Q/s1600/Cara-membuat-paypal1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Daftar PayPal" border="0" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQbQtrP5eiAs31vGlWh629SI7fbxfFdoRnTsC2bVjvQPtRGcvNngsIJWxuachSWhSCdn3CRnY3P4ZbJj-UipZIIDnEo9TewfJqg5qq7cpqDZdrMpz0SmO4Q4jYVLoTi_P5JWla7nhz33Q/s640/Cara-membuat-paypal1.png" title="Daftar PayPal" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Daftar PayPal</td></tr> </tbody></table> <br /> <ul> <li>Pilih jenis akun yang Anda inginkan, dalam artikel ini Saya akan memilih akun “Primer” karna Saya ingin akun Paypal yang bisa digunakan untuk berbelanja dan menerima uang secara online. Lihat gambar di bawah:</li> </ul> <br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDL6bbMOPJUbtqPJ-8Fo_PGV0amgyMr3Fw0-9TI3pxR7Lbk3A_7YmgSk3xTJ5PybCrVMQ2hyphenhyphenrv0opTdbEXyvYJlyqnhQtDlzABqHune5LSKZnMmA4HrDkgQaVzlSclr4zhbOAq6I0Le1k/s1600/cara-bikin-paypal.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Memulai Primer" border="0" height="478" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDL6bbMOPJUbtqPJ-8Fo_PGV0amgyMr3Fw0-9TI3pxR7Lbk3A_7YmgSk3xTJ5PybCrVMQ2hyphenhyphenrv0opTdbEXyvYJlyqnhQtDlzABqHune5LSKZnMmA4HrDkgQaVzlSclr4zhbOAq6I0Le1k/s640/cara-bikin-paypal.png" title="Memulai Primer" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Memulai Primer</td></tr> </tbody></table> <br /> <ul> <li>Masukkan data pribadi Anda pada kolom yang disediakan, lalu klik tombol “Setuju dan Buat Rekening”. Lihat gambar di bawah:</li> </ul> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAz9C4uBPWiaVPMLpAEH4lLdPbD_C-lpbLsvURm43C8qnEkvpP9E4Jd4ESQXbkWx0Dt71GE7-QYCOlO4GiAWDmuVKrIWOSjr2HY6l-Fs8_f0xGstl1coZypPligo1vxOkGU_vdhjCvhU/s1600/apa-itu-paypal.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Isi Kolom" border="0" height="562" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAz9C4uBPWiaVPMLpAEH4lLdPbD_C-lpbLsvURm43C8qnEkvpP9E4Jd4ESQXbkWx0Dt71GE7-QYCOlO4GiAWDmuVKrIWOSjr2HY6l-Fs8_f0xGstl1coZypPligo1vxOkGU_vdhjCvhU/s640/apa-itu-paypal.png" title="Isi Kolom" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Isi Kolom</td></tr> </tbody></table> <br /> <ul> <li>Nanti akan muncul halaman verifikasi dimana Anda harus memasukkan kode ke dalam kolom yang di sediakan, lalu klik tombol “Lanjutkan”. Lihat gambar di bawah:</li> </ul> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhFgT-V24D-4SOgQCACYIRFIhI5qH0Qh_c0Ic4zZHGwVm2ukkI71axJYZOaVBFCLzCnlSFmU_Vuw1JEXO7jvwBKpfxzGLz7WxchyGZonjv0pD16PUiOAlSsqsmrFNP3YymqYxMOoyh9-Y/s1600/membuat-paypal.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Isi Capcay" border="0" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhFgT-V24D-4SOgQCACYIRFIhI5qH0Qh_c0Ic4zZHGwVm2ukkI71axJYZOaVBFCLzCnlSFmU_Vuw1JEXO7jvwBKpfxzGLz7WxchyGZonjv0pD16PUiOAlSsqsmrFNP3YymqYxMOoyh9-Y/s640/membuat-paypal.png" title="Isi Capcay" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Isi Capcay</td></tr> </tbody></table> <br /> <ul> <li>Langkah selanjutnya adalah klik tombol “Masuk ke Rekening Saya”. Nanti akan muncul halaman akun Paypal Anda. Lihat gambar di bawah:</li> </ul> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4UiEHjaRSgttwWERAJ5Da3rOafb8wlizbtxM3wRv75SIS8d3ZVsTEFG1iZzYwa4FQp-tPZmP5M4qhgbQlJnjKs_QHwyBMI619Bc06yDfyyWg7dYddyx2VbsCsGOojduB8IqF5n5x408/s1600/daftar-paypal.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Masuk ke Rekening" border="0" height="468" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4UiEHjaRSgttwWERAJ5Da3rOafb8wlizbtxM3wRv75SIS8d3ZVsTEFG1iZzYwa4FQp-tPZmP5M4qhgbQlJnjKs_QHwyBMI619Bc06yDfyyWg7dYddyx2VbsCsGOojduB8IqF5n5x408/s640/daftar-paypal.png" title="Masuk ke Rekening" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Masuk ke Rekening</td></tr> </tbody></table> <br /> <ul> <li>Jangan lupa untuk melakukan konfirmasi melalui email. Cek inbox email Anda dan cari email dari Paypal. Klik link untuk konfirmasi yang ada di dalam email tersebut. Lihat gambar di bawah:</li> </ul> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQx-DFAmrEnMasBxBtkF-Zsv2_5r1426Z-VTjfOPleBYzb3MCHh9DTG3d3p_4zAWnNKb2hzL49JEwqhtCbvXrJ5pE7DAFTsrCw-rUyImbjH_GByGJTPz0FZKi3XeQU62gkJz5kSSjwWrA/s1600/konfirmasi-email-paypal.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Konfirmasi Email" border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQx-DFAmrEnMasBxBtkF-Zsv2_5r1426Z-VTjfOPleBYzb3MCHh9DTG3d3p_4zAWnNKb2hzL49JEwqhtCbvXrJ5pE7DAFTsrCw-rUyImbjH_GByGJTPz0FZKi3XeQU62gkJz5kSSjwWrA/s640/konfirmasi-email-paypal.png" title="Konfirmasi Email" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Konfirmasi Email</td></tr> </tbody></table> <br /> <ul> <li>Setelah melakukan klik pada link konfirmasi di email, nanti akan muncul halaman baru dimana Anda harus memasukkan password Paypal Anda. Password ini adalah password yang Anda buat saat mendaftar pada langkah 3.</li> </ul> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKyJF9PEkzFDUKIq0MMEy6rmsPPCl5RHGI_ciu8JUD1kGKCy7lKlBdOGBcfHisIOC4OrfM8HyRAYCe7MqKg-GkLBWiB_Bpov_ByYD2NvpWRGwOqMFmvdDAAfzpsvN0Xpwu0865TICPMok/s1600/konfirmasi-email-paypal2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Confirm Email Login" border="0" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKyJF9PEkzFDUKIq0MMEy6rmsPPCl5RHGI_ciu8JUD1kGKCy7lKlBdOGBcfHisIOC4OrfM8HyRAYCe7MqKg-GkLBWiB_Bpov_ByYD2NvpWRGwOqMFmvdDAAfzpsvN0Xpwu0865TICPMok/s640/konfirmasi-email-paypal2.png" title="Confirm Email Login" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Confirm Email Login</td></tr> </tbody></table> <br /> <ul> <li>Setelah langkah 8, Anda akan diarahkan ke halaman untuk membuat pertanyaan keamanan. Pertanyaan ini akan ditanyakan pada Anda ketika Anda lupa password, jadi pastikan Anda memilih pertanyaan dan jawaban yang mudah diingat. Setelah memilih pertanyaan dan mengisi jawaban pada kolom yang di sediakan, silahkah klik tombol “Kirimkan. Lihat gambar di bawah:</li> </ul> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXkP43WnrTi8O9gFEDtt_jkfjvRUMmUHLNMNHJV7sqoW-anNyBw4P6Qw0YBzRgDkeurNY5LR6vOvDU2mvstzUk08WhxGYPewXsqvqPIa8fRK3fdkdMIYCBmdN3xOApgKWf3QAEm4Wf7Y/s1600/paypal-mendaftar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Security PayPal" border="0" height="432" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXkP43WnrTi8O9gFEDtt_jkfjvRUMmUHLNMNHJV7sqoW-anNyBw4P6Qw0YBzRgDkeurNY5LR6vOvDU2mvstzUk08WhxGYPewXsqvqPIa8fRK3fdkdMIYCBmdN3xOApgKWf3QAEm4Wf7Y/s640/paypal-mendaftar.png" title="Security PayPal" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Security PayPal</td></tr> </tbody></table> <br /> <ul> <li>Sampai di sini sebenarnya Anda sudah berhasil memiliki akun Paypal. Selanjutnya Anda bisa masuk ke halaman rekening Paypal Anda atau memasukkan data kartu kredit Anda. Lihat gambar di bawah:</li> </ul> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQOrNnO7lyY0i8Pi1md_9_xqNnYgNpp-5hkV-oYQQEnsqJvnmHjsH0u2dw8hF3TSNuiDp0BCY1iKVBHkuAOPYweObF1ww3mvYlWU9gO8Dc-21NFQLSHZ8U-6lhUWuDoYS9zc9P4e9FFAc/s1600/paypal-selesai1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Complete Tutorial" border="0" height="454" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQOrNnO7lyY0i8Pi1md_9_xqNnYgNpp-5hkV-oYQQEnsqJvnmHjsH0u2dw8hF3TSNuiDp0BCY1iKVBHkuAOPYweObF1ww3mvYlWU9gO8Dc-21NFQLSHZ8U-6lhUWuDoYS9zc9P4e9FFAc/s640/paypal-selesai1.png" title="Complete Tutorial" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Complete Tutorial</td></tr> </tbody></table> <div style="text-align: justify;"> Perlu Anda perhatikan bahwa Akun yang sudah aktif perlu di verifikasi oleh pihak Paypal Agar akun tersebut bisa digunakan untuk melakukan pembelian dan menerima pembayaran. Agar akun Paypal tersebut mendapat status “Verified”, Anda harus memasukkan data kartu kredit atau VCC (virtual credit card) Anda ke dalam akun Paypal Anda tersebut.</div> <div style="text-align: justify;"> <br /></div> Sekian Terima Kasih<br /> <br /> <br /> <span style="font-size: x-small;"><i>Sumur : https://www.maxmanroe.com/apa-itu-paypal-bagaimana-cara-daftar-membuat-akun-paypal.html</i></span>

Penjelasan PayPal dan Cara Daftar Membuat Akun PayPal

Apa itu PayPal ? Di dalam bisnis online ada beberapa macam cara atau sistem pembayaran, mulai dari transfer melalui rekening bank lokal...

Selengkapnya »

Agar Blogspot ketika Diakses Langsung menjadi HTTPS

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewvFk7zP2o5XcXskb5aTGk7pDrxZJEAWUQxtuEVqhsPEYQ6gd9qTf1ZAgKK8AlTeJ5SWe9Q2uHaJKDMG-okVRkphcWMEuayBEePuLYqZE8muXKacJj2n1T10Jz0zVmOiwz17ZOdksKsU/s1600/http-to-https.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara dari http:// menjadi https://" border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewvFk7zP2o5XcXskb5aTGk7pDrxZJEAWUQxtuEVqhsPEYQ6gd9qTf1ZAgKK8AlTeJ5SWe9Q2uHaJKDMG-okVRkphcWMEuayBEePuLYqZE8muXKacJj2n1T10Jz0zVmOiwz17ZOdksKsU/s640/http-to-https.png" title="Cara dari http:// menjadi https://" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Cara dari http:// menjadi https://</td></tr> </tbody></table> <div style="text-align: justify;"> Seperti kita ketahui bahwa kini blogspot sudah support <b><i><u>HTTPS</u></i></b>. Namun setelah <i>setting HTTPS availability</i>, URL blogspot tidak otomatis menjadi HTTPS ketika pertama diakses. Namun ketika ada pengunjung yang berkomentar, maka URL-nya akan berubah menjadi HTTPS.</div> <br /> <div style="text-align: justify;"> Nah, ada cara agar ketika blogspot diakses dari HTTP, langsung memiliki HTTPS, maka kita bisa menggunakan script redirect seperti halnya mengembalikan <i>blogspot.co.id</i> ke <i>blogspot.com</i> seperti yang terjadi beberapa waktu yang lalu.</div> <br /> <br /> <ul> <li>Untuk mengubah secara otomatis URL blogspot menjadi HTTPS, kita bisa menggunakan redirect domain, kita hanya mengganti kode <b><i><u>http</u></i></b> menjadi <b><i><u>https</u></i></b>. Script ini akan merubah <span style="color: red;">http</span> menjadi <span style="color: lime;">https</span> dengan domain blogspot.com. Silahkan simpan script di bawah ini di atas kode <span style="color: cyan;"><b></head></b></span></li> </ul> <br /> <br /> <blockquote class="tr_bq"> <script type='text/javascript'><br />var blog = document.location.hostname;<br />var slug = document.location.pathname;<br />var ctld = blog.substr(blog.lastIndexOf("."));<br />if (ctld != ".com") {<br />  var ncr = "<span style="color: lime;">https://</span>" + blog.substr(0, blog.indexOf("."));<br />ncr += ".blogspot.com/ncr" + slug;<br />window.location.replace(ncr);}<br /></script></blockquote> <br /> <br /> <ul> <li>Hanya mengubah HTTP ke HTTPS tanpa merubah domain blogspot. Silahkan simpan script di bawah di atas kode <span style="color: cyan;"><b></head></b></span></li> </ul> <br /> <div> <br /></div> <div> <blockquote class="tr_bq"> <script type='text/javascript'><br />function check_secure() {<br />var secssl = /^https/i;<br />var blog = document.location.hostname;<br />var slug = document.location.pathname;<br />var subs = window.location.search;<br />if (!window.location.origin.match(secssl)) {<br />window.location = "https://" + blog + slug + subs;<br />}<br />}<br />check_secure();<br /></script></blockquote> </div> <div> <br /></div> <div> Namun ketika sudah di-redirect ke HTTPS ternyata tampilan blogspot Anda ada yang error, silahkan simak postingan berikut:</div> <div> <br /></div> <div> <a href="http://zonahentongerz.blogspot.com/2015/11/mengatasi-error-pada-template-blogspot-https.html">http://zonahentongerz.blogspot.com/2015/11/mengatasi-error-pada-template-blogspot-https.html</a></div> <div> <br /></div> <div> <span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2015/10/agar-blogspot-ketika-diakses-langsung.html</i></span></div>

Agar Blogspot ketika Diakses Langsung menjadi HTTPS

Cara dari http:// menjadi https:// Seperti kita ketahui bahwa kini blogspot sudah support HTTPS . Namun setelah setting HTTPS availabil...

Selengkapnya »

Mengatasi Error pada Template Blogspot ketika Diakses HTTPS

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDQFYu09a51AQGTa74zxh-wl6DyOFcT00Oy9Mc8eWrC0BcW5nrB6FQh9mNjhvUNjfGE88ms3-jYfddYwzrZQVSUyvdvnAMl6xuleAUEFGpWChRxuwwXonLtxIS-336vsLwlnjNFFmZSo/s1600/blogspot-https.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Memperbaiki Error pada template Blog ketika diakses HTTPS" border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDQFYu09a51AQGTa74zxh-wl6DyOFcT00Oy9Mc8eWrC0BcW5nrB6FQh9mNjhvUNjfGE88ms3-jYfddYwzrZQVSUyvdvnAMl6xuleAUEFGpWChRxuwwXonLtxIS-336vsLwlnjNFFmZSo/s400/blogspot-https.png" title="Memperbaiki Error pada template Blog ketika diakses HTTPS" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Memperbaiki Error pada template Blog ketika diakses HTTPS</td></tr> </tbody></table> <div style="text-align: justify;"> Di awal bulan Oktober 2015 ini, Google memberikan hadiah kepada para pengguna blogspot berupa saluran aman SSL. Kini blogspot bisa diakses dengan <a href="https://id.wikipedia.org/wiki/HTTP_Secure" target="_blank">https</a> sehingga menjadikannya lebih aman dari tangan-tangan jahil.</div> <br /> <div style="text-align: justify;"> Untuk mendapatkan HTTPS, silahkan masuk ke akun blogspot > <b><u>Dashboard</u></b> > <b><u>Setting</u></b> > pilih <b><u>Yes</u></b> pada <b><u>HTTPS Setting</u></b>. Setelah itu silahkan coba akses blog Anda dengan <i>https://namablogkamu.blogspot.com</i>. Namun hal ini tidak berlaku bagi blogspot yang sudah menggunakan custom domain seperti blogkamu.com, blogkamu.net, dll.</div> <br /> Namun setelah saya coba, khususnya pada blog yang menggunakan custom template, ternyata ada beberapa bagian yang error. Hal itu disebabkan dari kode dalam source code template yang diblok oleh HTTPS yang berupa <b>url</b> yang menggunakan <b>HTTP</b><br /> <br /> Untuk mengatasinya / memperbaiki, tentunya kita harus merubah semua url dengan HTTP agar bisa diakses oleh kedua jalur yaitu HTTP dan HTTPS.<br /> <br /> Jika ternyata blog ada yang error ketika diakses menggunakan HTTPS baik itu font, komentar blogger, dan lainnya, silahkan ikuti langkah untuk memperbaikinya seperti di bawah ini.<br /> <br /> <br /> <ul> <li>Silahkan masuk ke Edit HTML blog Anda.</li> <li>Klik di bagian dalam kotak Edit HTML.</li> <li>Kemudian lakukan atau tekan pada keyboard <b>SHIFT + CTRL + R</b></li> <li>Masukan <i>http://</i> pada kotak yang muncul di pojok kanan atas kotak edit HTML, lalu tekan enter.</li> <li>Kemudian masukan kode <b>//</b> pada kotak yang muncul selanjutnya.</li> <li>Selesai, silahkan save edit HTML</li> </ul> <br /> <br /> Hal di atas adalah untuk merubah sekaligus semua URL dengan awalan <b><i>http://</i></b> menjadi hanya double slash // agar bisa diakses dengan HTTP atau HTTPS seperti contoh di bawah ini<br /> <br /> URL awal :<br /> <b><span style="color: red;">http:</span>//fonts.googleapis.com/css?family=Roboto:400</b><br /> <br /> Font di atas akan error ketika blog diakses HTTPS, untuk memperbaikinya maka harus dirubah menjadi seperti di bawah ini ,hapus httpnya, jadikan double slash.<br /> <u><i><b>//fonts.googleapis.com/css?family=Roboto:400</b></i></u><br /> <br /> Begitu pun jika ada widget yang error seperti Facebook Like Box atau lainnya. Coba periksa di <b><i>Tata Letak</i></b> barangkali ada <b>URL</b> yang menggunakan <i>http://</i> maka silahkan rubah menjadi hanya // (Double Slash) seperti contoh di atas.<br /> <br /> Sekian terima kasih.<br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2015/10/mengatasi-error-pada-template-blogspot.html</i></span>

Mengatasi Error pada Template Blogspot ketika Diakses HTTPS

Memperbaiki Error pada template Blog ketika diakses HTTPS Di awal bulan Oktober 2015 ini, Google memberikan hadiah kepada para pengguna...

Selengkapnya »

Membuat External Link Icon dengan CSS

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidPIcOXB_7FKSxp23I5xjQ2trarojF7MGheqVsuZzs-O4hAu_R7jAEMM6YEdOfBtzoFybOhqOah2CX34_UZKEA7bjbh77RhWorVJ7UkxZJUu5Lf9Z_B3KaT1o34VQdb0b_fXIk1a2Wq6Q/s1600/external-link-icon.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Menambahkan Icon pada External Link" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidPIcOXB_7FKSxp23I5xjQ2trarojF7MGheqVsuZzs-O4hAu_R7jAEMM6YEdOfBtzoFybOhqOah2CX34_UZKEA7bjbh77RhWorVJ7UkxZJUu5Lf9Z_B3KaT1o34VQdb0b_fXIk1a2Wq6Q/s400/external-link-icon.png" title="Menambahkan Icon pada External Link" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Menambahkan Icon pada External Link</td></tr> </tbody></table> <div style="text-align: justify;"> Nah kali ini saya akan posting cara memasang / membuat ikon eksternal link ini benar-benar hanya untuk link keluar atau external link. Dengan hanya menggunakan CSS kita akan membuat external link icon hanya untuk link keluar saja, sedangkan internal link tidak akan menampilkan ikon link keluar.</div> <br /> Dan untuk ikon eksternal link ini, kita akan menggunakan font awesome, jadi silahkan simpan dulu font awesome library di blog Anda. Jika sudah ada silahkan abaikan langkah ini.<br /> <br /> Setelah blog Anda memiliki font awesome library, silahkan simpan kode di bawah ini di atas kode <b><i><u></head></u></i></b><br /> <br /> <blockquote class="tr_bq"> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style type='text/css'><br />/*<![CDATA[*/<br />.post-body a[href^="http://"],.post-body a[href^="https://"]{padding-right:25px;display:inline-block;color:#e8554e}<br />.post-body a[href^="http://"]:before,.post-body a[href^="https://"]:before{content:'\f08e';font-family:FontAwesome;color:#e8554e;position:absolute;bottom:0;right:0;}<br />.post-body a[href^="<span style="color: cyan;">http://zonahentongerz.blogspot.com/</span>"]:before,.post-body .separator a:before{content:'';}<br />.post-body a[href^="<span style="color: cyan;">http://zonahentongerz.blogspot.com/</span>"],.post-body .separator a{padding-right:0!important}<br />.post-body a{position:relative;font-weight:bold;color:#e8554e}<br />.post-body .separator a{margin:0!important}<br />/*]]>*/<br /></style><br /></b:if></blockquote> <br /> Silahkan ganti <span style="color: cyan;">http://zonahentongerz.blogspot.com/</span> dengan url blog Anda.<br /> <br /> Hasilnya Seperti ini > <a href="https://www.google.com/" target="_blank">Demo</a><br /> <br /> Penjelasan dari kode di atas:<br /> <blockquote class="tr_bq"> .post-body a[href^="http://"],.post-body a[href^="https://"]{padding-right:25px;display:inline-block;color:#e8554e}</blockquote> <br /> Kode CSS di atas untuk mendeteksi semua link di postingan (http dan https) dan memberikan ruang di sebelah kanan link untuk menempatkan ikonnya.<br /> <div> <br /></div> <blockquote class="tr_bq"> .post-body a[href^="http://"]:before,.post-body a[href^="https://"]:before{content:'\f08e';font-family:FontAwesome;color:#e8554e;position:absolute;bottom:0;right:0;}</blockquote> <div> <br /></div> <div> Kode CSS di atas untuk menampilkan ikon eksternal link font awesome di sebelah kanan pada setiap link.</div> <div> <br /></div> <div> <blockquote class="tr_bq"> .post-body a[href^="http://zonahentongerz.blogspot.com/"]:before,.post-body .separator a:before{content:'';}<br />.post-body a[href^="http://zonahentongerz.blogspot.com/"],.post-body .separator a{padding-right:0!important}</blockquote> </div> <div> <br /></div> <div style="text-align: justify;"> Silahkan ganti http://zonahentongerz.blogspot.com/ dengan url blog Anda. Kode di atas untuk menghilangkan ikon dan ruang kosong di sebelah kanan pada link internal dan link pada gambar postingan.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Sekian terima kasih.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2015/10/membuat-external-link-icon-dengan-css.html</i></span></div>

Membuat External Link Icon dengan CSS

Menambahkan Icon pada External Link Nah kali ini saya akan posting cara memasang / membuat ikon eksternal link ini benar-benar hanya un...

Selengkapnya »

Embed Youtube Video with URL Only

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47sSvt7_XyS-Cw0nzuu8y7rXn3-NXXnTMrrjbxRT1TgPDFTH0W0xBuY-6cPXRVcx6jGDLGmZ4_nbPaXMRb17eyIuz5to7K5GHG8WGGRL3CvjxiN_owJGfI759u24K42wDhNzbDGC9AJQ/s1600/youtube-url-only.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Embed Video Youtube hanya dengan URL" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47sSvt7_XyS-Cw0nzuu8y7rXn3-NXXnTMrrjbxRT1TgPDFTH0W0xBuY-6cPXRVcx6jGDLGmZ4_nbPaXMRb17eyIuz5to7K5GHG8WGGRL3CvjxiN_owJGfI759u24K42wDhNzbDGC9AJQ/s400/youtube-url-only.png" title="Embed Video Youtube hanya dengan URL" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Embed Video Youtube hanya dengan URL</td></tr> </tbody></table> <div style="text-align: justify;"> Postingan kali ini merupakan cara embed Youtube video URL only with Jquery / cara posting video youtube hanya dengan alamat urlnya saja, agar penulisannya benar-benar simple hanya cukup dengan menuliskan URL video Youtube saja di dalam postingan baik dalam editor postingan mode HTML maupun Compose.</div> <div style="text-align: justify;"> <br /></div> Dengan cara kali ini, kita bisa benar-benar hanya menuliskan URL video Youtube saja di dalam postingan seperti ini: <i>https://www.youtube.com/watch?v=HgFTKuo8i7I</i><br /> <br /> Dan jquery akan otomatis mendeteksi URL video Youtube tersebut dan akan menggantinya menjadi iframe video Youtube. Sebagai demonya silahkan lihat <a href="http://kompiresponsive.blogspot.co.id/2015/10/youtube-url-only.html" target="_blank">di sini</a>.<br /> <br /> Untuk bukti bahwa yang ditulis hanya URL video Youtube saja, kita bisa lihat di page source halaman tersebut seperti di bawah ini.<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGsl6VZE238Fpkzgbn2ebIhcj2tTLoW4iWoVi67UDwpy9NJznBxL1_-I-Fp4hVHP7SvXczC0KbqMnc-JAF79l38xLTFP4GfmsBtYzFvscsDx4Fy3YMcDnqdrp1a2eoFLrhLBTwsW5daII/s1600/youtube-url.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="View Page Source" border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGsl6VZE238Fpkzgbn2ebIhcj2tTLoW4iWoVi67UDwpy9NJznBxL1_-I-Fp4hVHP7SvXczC0KbqMnc-JAF79l38xLTFP4GfmsBtYzFvscsDx4Fy3YMcDnqdrp1a2eoFLrhLBTwsW5daII/s640/youtube-url.png" title="View Page Source" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">View Page Source</td></tr> </tbody></table> Untuk membuat seperti itu, silahkan gunakan kode di bawah ini.<br /> <br /> Silahkan simpan kode di bawah ini di atas kode <b><i><u></body></u></i></b><br /> <blockquote class="tr_bq"> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><script><br />//<![CDATA[<br /><span style="color: cyan;">if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");};</span><br />var videoEmbed = {<br />    invoke: function(){    <br />        $('.post-body').html(function(i, html) {<br />            return videoEmbed.convertMedia(html);<br />        });   <br />    },<br />    convertMedia: function(html){<br />          var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;     <br />        if(pattern.test(html)){<br />              var replacement = '<div class="videoyoutube"><div class="video-responsive"><iframe height="281" width="500" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe></div></div>';<br />              var html = html.replace(pattern, replacement);<br />        }<br />         return html;<br />    }<br />}<br />setTimeout(function(){<br />    videoEmbed.invoke();<br />},800);<br />//]]><br /></script><br /></b:if></blockquote> <br /> Perhatikan kode yang saya marking, jika di blog sudah terdapat Jquery Library (berapa pun versinya) silahkan hapus kode tersebut.<br /> <br /> Kemudian simpan kode CSS di bawah ini di atas kode <b><i><u></head></u></i></b><br /> <br /> <blockquote class="tr_bq"> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style type='text/css'><br />.videoyoutube{<br />    margin:20px auto;<br />    width:100%;<br />}<br />.video-responsive {<br />  position: relative;<br />  padding-bottom: 56.25%;<br />  height: 0;<br />  overflow: hidden;<br />}<br />.video-responsive iframe {<br />  position: absolute;<br />  top: 0;<br />  left: 0;<br />  width: 100%;<br />  height: 100%;<br />  border:0;<br />}<br /></style><br /></b:if></blockquote> <br /> Kemudian SAVE edit HTML template blog Anda.<br /> <div> <br /></div> <div> <div style="text-align: justify;"> Untuk menampilkan video Youtube di postingan, silahkan paste video URL yang di-copy dari address bar video Youtube di editor postingan baik dalam mode HTML ataupun Compose seperti URL berikut sebagai contoh: <i>https://www.youtube.com/watch?v=HgFTKuo8i7I</i>. Dan embed video Youtube ini sudah responsive.</div> </div> <div> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBKqMmbZ2_4K_IkcH9HslzLxq_kY1pyP9Xz5Vi3jE4ADD39UGTYWGLC8vhx9Ytqxgoj6wh64kVLqjRVS4ytb3R3-zGcJEXw8lVCYhAn2DdGBWKFrfLNPAkWyQ7hJY77r5UjtIF2k-ZyQ/s1600/youtube-url-post.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Post URL Only" border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBKqMmbZ2_4K_IkcH9HslzLxq_kY1pyP9Xz5Vi3jE4ADD39UGTYWGLC8vhx9Ytqxgoj6wh64kVLqjRVS4ytb3R3-zGcJEXw8lVCYhAn2DdGBWKFrfLNPAkWyQ7hJY77r5UjtIF2k-ZyQ/s640/youtube-url-post.png" title="Post URL Only" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Post URL Only</td></tr> </tbody></table> <div> <i><span style="font-size: x-small;">Sumur : http://www.kompiajaib.com/2015/10/update-embed-youtube-video-with-url-only.html</span></i></div>

Embed Youtube Video with URL Only

Embed Video Youtube hanya dengan URL Postingan kali ini merupakan cara embed Youtube video URL only with Jquery / cara posting video yo...

Selengkapnya »

Cara Upload File, HTML, CSS, JavaScript di Google Drive

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4NvJ9Hy2FsmO8ZmeOIailGv8l8jWYL_dfbyCT49wGzdD64iZ-1JFRTEgoUMjCCR5w5xj1f1GEs2jbeiWsCAbufKv8cmdPsjJwy_nYq4KpkUM7XLk7evhVWwjuprMk3ujLZ3xo-v6baEA/s1600/GoogleDrive.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Hosting File HTML, CSS, JavaScript di Google Drive" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4NvJ9Hy2FsmO8ZmeOIailGv8l8jWYL_dfbyCT49wGzdD64iZ-1JFRTEgoUMjCCR5w5xj1f1GEs2jbeiWsCAbufKv8cmdPsjJwy_nYq4KpkUM7XLk7evhVWwjuprMk3ujLZ3xo-v6baEA/s320/GoogleDrive.png" title="Cara Hosting File HTML, CSS, JavaScript di Google Drive" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Cara Hosting File HTML, CSS, JavaScript di GoogleDrive</td></tr> </tbody></table> <div style="text-align: justify;"> <span style="font-size: x-large;"><b>D</b></span>ari informasi beberapa sumber yang saya baca, bahwa Google Code sudah tidak bisa dipakai / digunakan. Nah sebagai penggantinya Google telah menyiapkan tempat baru untuk menghosting file seperti file dokumen, HTML, CSS, maupun JavaScript yaitu Google Drive.</div> <br /> <div style="text-align: justify;"> Untuk itu kini saya mulai mengalihkan file JavaScript dan HTML blog Zona Hentongerz ke Google Drive dan ternyata sangat mudah dan script berjalan sempurna. Sekarang saya akan menguraikan cara upload Hosting file HTML, CSS, atau Javascript di Google Drive.</div> <br /> Bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini:<br /> <br /> 1. Silahkan masuk ke Google Drive dengan link berikut <a href="https://drive.google.com/">https://drive.google.com/</a> dan login dengan akun Google Anda.<br /> <br /> 2. Kemudian klik tanda upload untuk mulai mengupload file dari komputer Anda, seperti pada gambar di bawah ini.<br /> <div> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPdwWr311uNz4Krjd3MNRav07EREg-Sa1tr6qrMn5ffO0CyhzWHO_MAd7Iox_rBQAE8ER9T6WVYrHXt7EaAYKiJbeWNqdXlxrXe5xqAJ5f_jjsor8Op9UrMM250ER27DuWuOPoTT5Nw0/s1600/Google+Drive+1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Upload Files" border="0" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPdwWr311uNz4Krjd3MNRav07EREg-Sa1tr6qrMn5ffO0CyhzWHO_MAd7Iox_rBQAE8ER9T6WVYrHXt7EaAYKiJbeWNqdXlxrXe5xqAJ5f_jjsor8Op9UrMM250ER27DuWuOPoTT5Nw0/s400/Google+Drive+1.jpg" title="Upload Files" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Upload Files</td></tr> </tbody></table> <div> 3. Silahkan pilih file yang ingin Anda upload ber-ekstensi .js (JavaScript), atau .html (HTML), atau .css (CSS), kemudian akan muncul kotak upload, biasanya ada di bawah kanan. Tunggu proses uploadnya sampai selesai. Setelah proses uploadnya selesai silahkan klik tulisan "<b><i><u>share</u></i></b>".</div> <div> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEBclWcp7YjSb_bcfAqQg0HvgwwlN1nhCSFtGxf_X22OhID5b4BCf-t1QWDx5ZG9FO_hY5kjkp00qLeXhJw51yVuCKeP3KDax2VEpymp0nOm2SIiCEG159Q6qYWV2xSsRxfSUBAN-Exk/s1600/Google+Drive+2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Share Uploaded File" border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEBclWcp7YjSb_bcfAqQg0HvgwwlN1nhCSFtGxf_X22OhID5b4BCf-t1QWDx5ZG9FO_hY5kjkp00qLeXhJw51yVuCKeP3KDax2VEpymp0nOm2SIiCEG159Q6qYWV2xSsRxfSUBAN-Exk/s400/Google+Drive+2.jpg" title="Share Uploaded File" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Share Uploaded File</td></tr> </tbody></table> <div> 4. Kemudian akan muncul dialog box baru, silahkan pilih pada option "<b><i>Who has access</i></b>" dengan klik tulisan "<b><i>change" / "ganti</i></b>"</div> <div> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSTJ1V3HzbboL5JDvkfsQv_SR7kvrpgwj78Re0eFZ6USUjJnp73ibudKhwIuhZ8MHR6A154F-bf6ykyX_K6JgoRSnda-ziksQggsMat7qXnFFVgi4MeovT0zzPB6MZxR-IPAD4Oadyq4/s1600/Google+Drive+3.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Change Who Can Access" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSTJ1V3HzbboL5JDvkfsQv_SR7kvrpgwj78Re0eFZ6USUjJnp73ibudKhwIuhZ8MHR6A154F-bf6ykyX_K6JgoRSnda-ziksQggsMat7qXnFFVgi4MeovT0zzPB6MZxR-IPAD4Oadyq4/s400/Google+Drive+3.jpg" title="Change Who Can Access" width="395" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Change Who Can Access</td></tr> </tbody></table> <div> 5. Kemudian pindahkan pilihan dari "<strike><b><i>Private</i></b></strike>" ke "<b><i><u>Public on the web</u></i></b>"</div> <div> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyoL5WBnyN_rKQOh70iY5zXiCGMpr_3mzq7TRSC4oGvRUSy8qxvVJr4Dg09AGifyaTA4fxlTnaIcHj9mro_vjnvbVIQCgQD9z4XhNLGFXnXx-b0Lv67xULogcTPG_6HGMJ8DwwM8NvNIs/s1600/Google+Drive+4.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Private to Public" border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyoL5WBnyN_rKQOh70iY5zXiCGMpr_3mzq7TRSC4oGvRUSy8qxvVJr4Dg09AGifyaTA4fxlTnaIcHj9mro_vjnvbVIQCgQD9z4XhNLGFXnXx-b0Lv67xULogcTPG_6HGMJ8DwwM8NvNIs/s400/Google+Drive+4.jpg" title="Private to Public" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Private to Public</td></tr> </tbody></table> <div> 6. Kemudian akan muncul dilog box lagi, silahkan copy link-nya dan simpan di notepad.</div> <div> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqKkxJD8s_BQmApcigMuk2jJ2KhrF80wI3FPiR2g1q_Sh8Z3qGUARmPrfHdYwn_GgiuZTzhF2AC40Lcn-NZ9_fFGTOk5O81f7MCTVkCdE6pZYAmIdQ1rrY-ph29rIS67MumbQiSubOsU/s1600/Google+Drive+5.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Copy Link" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqKkxJD8s_BQmApcigMuk2jJ2KhrF80wI3FPiR2g1q_Sh8Z3qGUARmPrfHdYwn_GgiuZTzhF2AC40Lcn-NZ9_fFGTOk5O81f7MCTVkCdE6pZYAmIdQ1rrY-ph29rIS67MumbQiSubOsU/s400/Google+Drive+5.jpg" title="Copy Link" width="396" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Copy Link</td></tr> </tbody></table> <div> 7. Nah untuk menyimpan file hostingannya di blog kita agar scriptnya dapat berjalan, ganti linknya seperti di bawah ini.</div> <div> <br /></div> <div> <h3> A. Biasanya linknya akan seperti di bawah ini.</h3> </div> <div> <br /></div> <div> https://docs.google.com/file/d/<span style="color: red;">0Bz4YdwRI3rnCejVJVDNGdDZmRE</span>/edit?usp=sharing</div> <div> <br /></div> <div> Perhatikan kode yang berwarna <span style="color: red;"><b>merah</b></span>, kode itu yang dibutuhkan untuk langkah B</div> <div> <br /></div> <div> <h4> B. Silahkan ganti dengan link berikut ini:</h4> </div> <div> <br /></div> <div> https://googledrive.com/host/<span style="color: red;"><b>KODE UNIK GOOGLE DRIVE</b></span>/</div> <div> <br /></div> <div> Nah silahkan ganti tulisan KODE UNIK GOOGLE DRIVE dengan kode berwarna <span style="color: red;"><b>merah</b></span> pada langkah A. Sehingga penampakannya akan seperti di bawah ini:</div> <div> <br /></div> <div> https://googledrive.com/host/<span style="color: red;">0Bz4YdwRI3rnCejVJVDNGdDZmRE</span>/</div> <div> <br /></div> <div> Sekian, untuk cara hosting file HTML, JavaScript, atau CSS di Google Drive.<br /> <br /> Sumur : http://www.kompiajaib.com/2013/06/cara-upload-file-html-css-javascript-di.html</div>

Cara Upload File, HTML, CSS, JavaScript di Google Drive

Cara Hosting File HTML, CSS, JavaScript di GoogleDrive D ari informasi beberapa sumber yang saya baca, bahwa Google Code sudah tidak bi...

Selengkapnya »

Cara Optimasi Font Awesome dengan Google Drive

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnR196fXx8JG2pCovuEYoCluzUs3eegAqLvb-03ptZd3ag8eQUlz_IdPxmyH-XuE12d77l9OpObQx-OzytuyXLG8mPlS9MwUuWw4_7ls74_m_NWpOsO3cWjcK3j_jm_zO8idMhKwR7BFU/s1600/font-awesome-host.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Optimasi Font Awesome di Google Drive" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnR196fXx8JG2pCovuEYoCluzUs3eegAqLvb-03ptZd3ag8eQUlz_IdPxmyH-XuE12d77l9OpObQx-OzytuyXLG8mPlS9MwUuWw4_7ls74_m_NWpOsO3cWjcK3j_jm_zO8idMhKwR7BFU/s400/font-awesome-host.png" title="Cara Optimasi Font Awesome di Google Drive" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Cara Optimasi Font Awesome di Google Drive</td></tr> </tbody></table> <div style="text-align: justify;"> Dengan font awesome, kita bisa dengan mudah untuk membuat sebuah ikon di dalam blog seperti ikon untuk sosial media, tombol sharing, dan lainnya. Namun jika kita menyimpan link font awesome begitu saja maka akan menyebabkan blocking render css. Untuk itu saya sudah pernah membahas cara mengatasi render blocking CSS dari font awesome pada link di bawah ini.</div> <div style="text-align: justify;"> <br /></div> > <a href="http://zonahentongerz.blogspot.com/2015/11/mengatasi-render-blocking-css-font-awesome.html" target="_blank">Mengatasi Render Blocking CSS Font Awesome</a> <<br /> <br /> <div style="text-align: justify;"> Nah kini kita akan membahas cara lain untuk mengatasi blocking render css font awesome sekaligus mengoptimalkan penggunaannya. Artinya kita hanya menggunakan css font awesome hanya untuk ikon yang digunakan.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Kita tahu, untuk versi terbaru font awesome saat ini (versi 4.4) memiliki 585 ikon, artinya di dalam link css font awesome terdatan 585 style css, silahkan Anda lihat <a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" target="_blank">di sini</a>. Dan kedepannya ini kemungkinan akan bertambah banyak lagi. Padahal misalnya kita hanya menggunakan 10 ikon untuk blog kita. Jadi sebaiknya kita hanya menggunakan style css dari 10 ikon yang kita gunakan saja.</div> <br /> Pertama kita akan memerlukan @font-face dari font awesome seperti di bawah ini<br /> <br /> <blockquote class="tr_bq"> @font-face{<br />    font-family:'FontAwesome';<br />    src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');<br />    src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),<br />    url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),<br />    url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),<br />    url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),<br />    url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');<br />    font-weight:normal;<br />    font-style:normal<br /> }</blockquote> <br /> Untuk mendapatkan file font fontawesome-webfont.eot,fontawesome-webfont.woff,fontawesome-webfont.woff2,fontawesome-webfont.ttf,fontawesome-webfont.svg, silahkan download font face kit font awesome <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">di sini</a>.<br /> <br /> Setelah didownload silahkan ekstrak file downloadnya dan buka folder <b><i><u>fonts</u></i></b> dan silahkan upload file font tersebut di Google Drive kecuali file FontAwesome.otf sampai didapat link host Google Drive untuk masing-masing file font-nya.<br /> <br /> Kemudian silahkan ganti url font pada @font-face di atas dengan url hosting Google Drive untuk masing-masing jenis file font-nya. Kemudian silahkan simpan @font-face di edit HTML blog di atas kode <b><i><u>]]></b:skin></u></i></b>.<br /> <br /> Kemudian simpan juga css style untuk class fa font awesome seperti di bawah ini.<br /> <br /> <blockquote class="tr_bq"> .fa{<br />    display:inline-block;<br />    font:normal normal normal 14px/1 FontAwesome;<br />    font-size:inherit;<br />    text-rendering:auto;<br />    -webkit-font-smoothing:antialiased;<br />    -moz-osx-font-smoothing:grayscale<br /> }</blockquote> <br /> Kemudian silahkan catat ikon apa saja yang kita gunakan di blog. Selanjutnya silahkan cari kode css style untuk masing-masing ikon yang kita gunakan <a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" target="_blank">di sini</a>. Gunakan <b><u>CTRL + F</u></b> untuk memudahkan pencarian. Misalnya untuk ikon <i>facebook</i> dengan tag <b><u><i class="fa fa-facebook"></i></u></b> maka silahkan cari dengan <b><u>CTRL + F</u></b> untuk <b><u>fa-facebook</u></b>. Maka kode css-nya seperti berikut:<br /> <br /> <blockquote class="tr_bq"> .fa-facebook:before{content:"\f09a"}</blockquote> <br /> Begitu seterusnya untuk ikon lainnya sehingga sebagai contoh secara keseluruhan akan menjadi seperti di bawah ini.<br /> <br /> <blockquote class="tr_bq"> @font-face{<br />    font-family:'FontAwesome';<br />    src:url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE EOT?v=4.4.0');<br />    src:url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE EOT?#iefix&v=4.4.0') format('embedded-opentype'),<br />    url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE WOFF2?v=4.4.0') format('woff2'),<br />    url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE WOFF?v=4.4.0') format('woff'),<br />    url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE TTF?v=4.4.0') format('truetype'),<br />    url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE SVG?v=4.4.0#fontawesomeregular') format('svg');<br />    font-weight:normal;<br />    font-style:normal<br /> }<br /> .fa{<br />    display:inline-block;<br />    font:normal normal normal 14px/1 FontAwesome;<br />    font-size:inherit;<br />    text-rendering:auto;<br />    -webkit-font-smoothing:antialiased;<br />    -moz-osx-font-smoothing:grayscale<br /> }<br /> .fa-facebook:before{content:"\f09a"}<br /> .fa-google-plus:before{content:"\f0d5"}<br /> .fa-twitter:before{content:"\f099"}<br /> .fa-plus:before{content:"\f067"}<br /> .fa-linkedin:before{content:"\f0e1"}<br /> .fa-youtube:before{content:"\f167"}<br /> .fa-plus-square:before{content:"\f0fe"}<br /> .fa-bell:before{content:"\f0f3"}<br /> .fa-code:before{content:"\f121"}</blockquote> <br /> Sekian Terima Kasih !<br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2015/11/cara-optimasi-font-awesome-dengan.html</i></span>

Cara Optimasi Font Awesome dengan Google Drive

Cara Optimasi Font Awesome di Google Drive Dengan font awesome, kita bisa dengan mudah untuk membuat sebuah ikon di dalam blog seperti ...

Selengkapnya »

Mengatasi Render Blocking CSS Font Awesome

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1No1Bw-bCgn59-aE1PeGgIOufBnZs9Uo50XRdjXUs0H9U3nZQby2mFwXPguW-wg3b8fq0VotpHPkfj0fwNju-97uWzFUmarFLBDeidY3qqrG1tbHlenF560oEnDTuV49Otclh6P1hWsI/s1600/async-font-awesome.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="cara Mengatasi / Memperbaiki Render Blocking CSS Font Awesome" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1No1Bw-bCgn59-aE1PeGgIOufBnZs9Uo50XRdjXUs0H9U3nZQby2mFwXPguW-wg3b8fq0VotpHPkfj0fwNju-97uWzFUmarFLBDeidY3qqrG1tbHlenF560oEnDTuV49Otclh6P1hWsI/s400/async-font-awesome.jpg" title="cara Mengatasi / Memperbaiki Render Blocking CSS Font Awesome" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Cara Mengatasi / Memperbaiki Render Blocking CSS Font Awesome</td></tr> </tbody></table> <div style="text-align: justify;"> Akhirnya saya menemukan cara mengatasi / memperbaiki render blocking CSS Font Awesome di blog dari Kompiajaib. Cara asynchronus CSS ini menggunakan kode JavaScript, untuk Tutorialnya, langsung saja :</div> <br /> Silahkan gunakan script di bawah ini dan simpan di atas kode <b><i><u></body></u></i></b><br /> <blockquote class="tr_bq"> <script><br /> //<![CDATA[<br /> function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }<br /> loadCSS("<span style="color: cyan;">https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css</span>");<br /> //]]><br /> </script></blockquote> <br /> Silahkan sesuaikan kode yang saya marking di atas dengan link Font Awesome dengan versi yang anda gunakan. Link Font Awesome di atas merupakan link Font Awesome versi terbaru untuk saat ini (4.4.0).<br /> <br /> Sekarang silahkan cek blog Anda di <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">PageSpeed Insights</a>. Apakah render-blocking dari link css Font Awesome di blog Anda sudah teratasi?<br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2014/12/mengatasi-render-blocking-css-font.html</i></span>

Mengatasi Render Blocking CSS Font Awesome

Cara Mengatasi / Memperbaiki Render Blocking CSS Font Awesome Akhirnya saya menemukan cara mengatasi / memperbaiki render blocking CSS ...

Selengkapnya »

Menghapus Widget Bundle CSS untuk Fast Loading di Blog

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHkGGzMMu0Yrp6okiHEdiNo4a_1iB-2lqgN8ZY8VOekTSLMNCTNkk-yq5IpiJ6UBwGQ3qbwrTYyyrKOeFFoZ_21DxY10sQUZ6v07IL58lPTu7eLkbCd0ssMTO-F2wCiSYcbVSMevzwEsY/s1600/load+faster.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Menghapus Widget Bundle Css bawaan Blogger" border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHkGGzMMu0Yrp6okiHEdiNo4a_1iB-2lqgN8ZY8VOekTSLMNCTNkk-yq5IpiJ6UBwGQ3qbwrTYyyrKOeFFoZ_21DxY10sQUZ6v07IL58lPTu7eLkbCd0ssMTO-F2wCiSYcbVSMevzwEsY/s400/load+faster.JPG" title="Cara Menghapus Widget Bundle Css bawaan Blogger" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Cara Menghapus Widget Bundle Css bawaan Blogger</td></tr> </tbody></table> JIKA kita "bedah" daleman template blog SEO Friendly & Fast Loading, maka umumnya menghapus kode bawaan blogger yang disebut  <b>Widget Bundle CSS</b>.<br /> <br /> Diyakini, dan terbukti, dengan menghilangkan kode tersebut, optimasi tampilan blog akan kian kenceng & ringan alias mengurangi waktu tampilan (reduce blog load time).<br /> <br /> Apa tidak berbahaya? Tentu tidak. Buktinya, penghapusan Widget Bundle CSS memang tidak membuat tampilan blog jadi error, malah makin ringan.<br /> <br /> Kode Widget Bundle <a href="http://zonahentongerz.blogspot.com/2015/11/cara-optimasi-css-delivery-di-blog.html" target="_blank">CSS</a> tersebut adalah kode yang berakhiran <b>widget_css_bundle.css</b>.<br /> <br /> Cek saja template Anda dengan cara Template > Edit HTML > Ctrl+F > masukkan kata <b>bundle.css</b>. Jika masih ada, Anda bisa menghapus atau men-disable-nya agar tampilan blog lebih ringan dan cepat.<br /> <br /> <br /> Kode Widget Bundle CSS lengkapnya adalah:<br /> <blockquote class="tr_bq"> <i><link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1738504331-widget_css_bundle.css' /></i></blockquote> <br /> <h4> Cara Menghapus Widget Bundle CSS Blogger</h4> <br /> <br /> 1. Klik "Template" > "Backup Template". Backup dulu template Anda, jaga-jaga kalo error<br /> 2. Klik "Edit HTML"<br /> 3. Hapus kode <i>widget_css_bundle.css</i>!<br /> 4. Temukan kode ini di template Anda: <b><b:skin><![CDATA[</b><br /> 5. Select All alias Copy & Paste SEMUA kode css yang ada di antara kode <b><b:skin><![CDATA[</b><br /> dan <b>]]></b:skin></b> ke notepad<br /> <br /> 6. Setelah dicopypaste, hapus semua kode tersebut, sehingga yang tersisa hanya kode berikut ini:<br /> <blockquote class="tr_bq"> <b:skin><![CDATA[<br /> ]]></b:skin></blockquote> <br /> 7. Hapus kode tersebut dan ganti (replace) dengan kode berikut ini:<br /> <blockquote class="tr_bq"> <style type="text/css"> <!-- /* <b:skin><![CDATA[ */]]></b:skin></blockquote> <br /> atau gunakan kode ini:<br /> <blockquote class="tr_bq"> &lt;style type=&quot;text/css&quot;&gt;<br /> &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin></blockquote> <br /> 8. Copas kode berikut ini di bawahnya atau di bawah kode <b></b:skin></b><br /> <blockquote class="tr_bq"> <style type="text/css"><br /> ... kode CSS di sini...<br /> </style></blockquote> <br /> 8. Copy & Paste kode CSS yang di langkah no. 4 disimpan di Notepad ke dalam kode di atas (di bagian yang ada tulisan ... kode CSS di sini...)<br /> <br /> 9. <b>Simpan Template!</b><br /> <b><br /></b> <span style="font-size: x-small;"><i>Sumur : http://www.contohblog.com/2015/07/menghapus-bundle-css-untuk-percepat-loading-blog.html</i></span>

Menghapus Widget Bundle CSS untuk Fast Loading di Blog

Cara Menghapus Widget Bundle Css bawaan Blogger JIKA kita "bedah" daleman template blog SEO Friendly & Fast Loading, maka ...

Selengkapnya »

Mengatasi Render Blocking JavaScript dari JQuery

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDd2uEMk14-dwYSijwJm8xvx74FlBQvPPyy6OKT8t3nMNaDMAQrxuupUHX7BzDiHkxrZJ49HCfOg5fYCLlN_FBRT4bR5MwpXQEgxYvJgwo0Zpf-rm5E3EimXMdLcckmSdCHPodSvXdKhw/s1600/render.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDd2uEMk14-dwYSijwJm8xvx74FlBQvPPyy6OKT8t3nMNaDMAQrxuupUHX7BzDiHkxrZJ49HCfOg5fYCLlN_FBRT4bR5MwpXQEgxYvJgwo0Zpf-rm5E3EimXMdLcckmSdCHPodSvXdKhw/s1600/render.png" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Cara Mengatasi Render-Blocking Javascript dari JQuery</td></tr> </tbody></table> <div style="text-align: justify;"> <span style="font-size: x-large;">S</span>ebelumnya saya mengacuhkan hal ini ketika tahu bahwa Render-Blocking Javascript Dari Jquery perlu diperbaiki ketika blog dicek di PageSpeed. Karena saya pikir saya sudah memasang Jquery ini dengan benar. Namun kelamaan kepikiran juga bagaimana caranya untuk mengatasi / memperbaiki Render-Blocking Javascript Dari Jquery ini. Mungkin karena saya takut salah dalam mengatasinya sehingga keberanian untuk mencoba mengatasinya menjadi hilang. Saya ketemu tutorial ini di blognya kang <a href="http://www.kompiajaib.com/" target="_blank">Adhy Suryadi</a></div> <br /> <div style="text-align: justify;"> Akhirnya saya mencoba mengatasi ketakutan saya ini dan mencoba menerjemahkan isi halaman dari panduan Google untuk mengatasi Render-Blocking Javascript dengan alamat berikut: <i>https://developers.google.com/speed/docs/insights/BlockingJS</i></div> <br /> <div style="text-align: justify;"> Di situ saya menemukan petunjuk untuk menggunakan atribut HTML async pada Jquery-nya. Sebelumnya Jquery saya simpan di edit HTML sebagai berikut:</div> <br /> <blockquote class="tr_bq"> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/></blockquote> <br /> Kemudian saya mencoba menambahkan atribut HTML async menjadi seperti berikut:<br /> <br /> <blockquote class="tr_bq"> <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/></blockquote> <br /> <div style="text-align: justify;"> Kemudian saya mengujinya pada halaman postingan blog untuk memastikan semua elemen blog berjalan seperti sebelumnya. Dan hasilnya halaman postingan tidak mengalami kendala apa pun, berjalan seperti sebelumnya. Namun ketika saya mencoba pada halaman depan blog, javascript pada post untuk mengatur gambar thumbnailnya agar naik dan turun ketika dihover menjadi tidak berjalan, namun saya biarkan terlebih dahulu. Kemudian saya cek blog di PageSpeed untuk memastikan apakah Render-Blocking Javascript dari Jquery ini sudah teratasi atau belum. Dan hasilnya cukup menakjubkan, seperti pada gambar di bawah ini.</div> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb7tYMFg48ERckZFET5Z6Ak2cSgFH-vU0NNhImhbed8gJRllRQxxunyETB4nBpEC_c9QFlA6MQyNIgkm2cjWmRUNt5cP6voDVD2hf7QVnh2XNZ3sR7fL-7Vz53ReJHEqrjaMtcz0zYMKA/s1600/pagespeed1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Render Blocking sebelum Asynchronus" border="0" height="515" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb7tYMFg48ERckZFET5Z6Ak2cSgFH-vU0NNhImhbed8gJRllRQxxunyETB4nBpEC_c9QFlA6MQyNIgkm2cjWmRUNt5cP6voDVD2hf7QVnh2XNZ3sR7fL-7Vz53ReJHEqrjaMtcz0zYMKA/s640/pagespeed1.png" title="Render Blocking sebelum Asynchronus" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Render Blocking sebelum Asynchronus</td></tr> </tbody></table> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKILpkgBtWtSUZ7lSM4RWkyDJjTuHNzmqyNDUngYrKLG30CdpP1RuYh9Wbgcn5pH-z3c0Nlrp_Ye27dAe0Dk48zHpkln3ajh7I9PEwNEWwRSOp4d0TCGwU3DBnuNNtWbxsfQfxpWM8MCk/s1600/pagespeed2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Sesudah Asynchronus" border="0" height="532" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKILpkgBtWtSUZ7lSM4RWkyDJjTuHNzmqyNDUngYrKLG30CdpP1RuYh9Wbgcn5pH-z3c0Nlrp_Ye27dAe0Dk48zHpkln3ajh7I9PEwNEWwRSOp4d0TCGwU3DBnuNNtWbxsfQfxpWM8MCk/s640/pagespeed2.png" title="Sesudah Asynchronus" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Sesudah Asynchronus</td></tr> </tbody></table> <div style="text-align: justify;"> Dengan mengatasi satu hal tersebut, skor speed blognya naik dengan menakjubkan. Tentunya ini menjadi hal yang cukup bagus untuk blog Kompi Ajaib sendiri. Namun permasalahan masih tersisa di homepage blog, untuk mengatasi javascript yang mengatur thumbnail untuk naik turun ketika dihover, saya akhirnya menggunakan CSS untuk mengatur naik turun thumbnail ketika dihover dan menghapus javascriptnya itung-itung untuk merampingkan size blog juga.</div> <br /> <div style="text-align: justify;"> Bagaimana dengan blog Anda? Jika mengalami hal yang sama seperti Kompi Ajaib yaitu Render-Blocking Javascript dari Jquery, coba saja pengalaman saya ini siapa tahu bisa berhasil juga pada blog Anda.</div> <br /> <div style="text-align: justify;"> Untuk Render-Blocking Javascript itu sendiri jika diartikan itu adalah javascript tersebut menyebabkan loading pada halaman blog ketika diakses baik melalui handphone, ipad, atau desktop. Loading itu sendiri disebabkan karena browser harus mendownload terlebih dahulu javascriptnya sebelum halaman berhasil dimuat.</div> <br /> <div style="text-align: justify;"> Tertunya hal ini akan berakibat kurang baik di mata search engine khususnya Google. Jika kita peduli dengan peringkat blog di serp, tentunya hal ini harus diatasi karena Google akan menyingkirkan blog atau web dari serp yang memiliki loading lambat atau blog yang menyebabkan pengunjungnya harus menunggu waktu yang lama untuk membuka suatu halaman sebagaimana yang ditunjukan di PageSpeed seperti gambar di atas tadi.</div> <br /> <span style="color: cyan; font-size: large;"><b><i><u>NB :</u></i></b></span><br /> <div style="text-align: justify;"> Akan tetapi, asynchronus pada Jquery Library tidak semua efektif, tergantung pada template kamu, belum ada solusi terbaik untuk masalah ini, maka dari itu direkomendasikan jangan menggunakan Asynchronus, karena element pada Template akan terganggu.<br /> <br /> <i><span style="font-size: x-small;">Sumur : http://www.kompiajaib.com/2014/02/mengatasi-render-blocking-javascript.html</span></i></div>

Mengatasi Render Blocking JavaScript dari JQuery

Cara Mengatasi Render-Blocking Javascript dari JQuery S ebelumnya saya mengacuhkan hal ini ketika tahu bahwa Render-Blocking Javascript...

Selengkapnya »

Cara Optimasi CSS Delivery di Blog

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMKpd4aKtdHaR_rzDbKJX2pIKTYjFervMbLOsSOxuYYUxw79jS8rkIrfgVc-4CbPYlqH8h_5ZdqOGkOVrEnwWCH7aJ304TPNVX1La7d6ybRPDii0efnmw_sDVbtKam5wtZ3iNg4zFVjCU/s1600/5-mistakes-of-massive-css-3-728.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Optimize CSS" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMKpd4aKtdHaR_rzDbKJX2pIKTYjFervMbLOsSOxuYYUxw79jS8rkIrfgVc-4CbPYlqH8h_5ZdqOGkOVrEnwWCH7aJ304TPNVX1La7d6ybRPDii0efnmw_sDVbtKam5wtZ3iNg4zFVjCU/s320/5-mistakes-of-massive-css-3-728.jpg" title="Optimize CSS" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Optimize CSS</td></tr> </tbody></table> <div style="text-align: justify;"> Setiap browser yang di gunakan oleh pengunjung blog anda akan memblokir terlebih dahulu setiap CSS (Cascading Style Sheet) eksternal yang berada dalam anda. Hal ini terjadi karena browser akan load terlebih dahulu setiap CSS internal untuk ditampilkan dalam screen baik itu pc atau pun mobile. Lantas apa pengaruhnya terhadap kecepatan loading blog anda ?. Menurut pemahaman saya, akan dibutuhkan waktu tambahan buat browser untuk loading CSS eksternal dalam blog anda dan inilah yang mengakibatkan loading blog akan terasa lama atau berat walau di koneksi internet normal sekalipun.</div> <br /> 1. Inline CSS eksternal berukuran kecil dalam HTML template.<br /> 2. Jangan inline atribut CSS dalam elemen html.<br /> 3. Optimalkan pengiriman CSS di blogger.<br /> <br /> <span style="font-size: large;"><b><u><i>Inline CSS eksternal berukuran kecil dalam HTML template.</i></u></b></span><br /> <br /> <div style="text-align: justify;"> Anda bisa inline CSS eksternal yang berukuran kecil dan menggabungkannya di dalam skin atau style html template anda untuk mempercepat loading blog anda. Sebagai contoh jika terdapat CSS eksternal dari situs lain dalam html template anda dengan susunan (mungkin) seperti di bawah ini:</div> <br /> <blockquote class="tr_bq"> <!DOCTYPE html><br /> <HTML><br /> <head><br /> <link type='text/css' rel='stylesheet' href='http:// www. situs-lain .com / <span style="color: cyan;">css-ukuran-kecil.css</span>'/><br /> <b:skin>...</b:skin><br /> </head><br /> <body><br /> <div class='nama-style'><br /> Halo di antara kode div ini menggunakan CSS eksternal dari situs lain.<br /> </div><br /> </body><br /> </HTML></blockquote> <br /> Dan sumber dari <b><u>css-ukuran-kecil.css</u></b> di atas adalah seperti di bawah ini (anda bisa lihat setiap sumber dari CSS eksternal dengan copy url css eksternal tersebut dan pastekan ke browser anda).<br /> <br /> <blockquote class="tr_bq"> .biru { color : biru }<br /> .kuning { font-size : 16px}<br /> .nama-style { float : left ; width : 30% }<br /> .none { display : none }</blockquote> <br /> Maka anda bisa inline CSS eksternal berukuran kecil tersebut (membuat CSS eksternal tersebut menjadi internal) seperti di bawah ini:<br /> <br /> <blockquote class="tr_bq"> <!DOCTYPE html><br /> <HTML><br /> <head><br /> <b:skin><br /> .nama-style { float : left ; width : 30% }<br /> </b:skin><br /> </head><br /> <body><br /> <div class='nama-style'><br /> Halo di antara kode div ini menggunakan CSS eksternal dari situs lain.<br /> </div><br /> </body><br /> </HTML></blockquote> <br /> Anda bisa melihat di atas bahwa kode CSS eksternal berukuran kecil (<b><u><i><link type='text/css' rel='stylesheet' href='http:// www. situs-lain .com / css-ukuran-kecil.css'/></i></u></b>) bisa di ganti dengan hanya menampilkan source yang hanya di perlukan oleh html template blog anda (dalam contoh ini source nya adalah .nama-style { float : left ; width : 30% }).<br /> <br /> <span style="font-size: large;"><b><i><u>Catatan penting:</u></i></b></span><br /> <div style="text-align: justify;"> 1. Anda bisa inline CSS eksternal situs lain <b>JIKA HANYA</b> source CSS eksternal tersebut mempunyai ukuran kecil. Jangan inline CSS eksternal berukuran besar kedalam skin blog anda karena kemungkinan besar hal ini akan menambah permasalahan baru terkait rules speed insights google (Prioritize visible content atau above the fold).</div> <br /> <div style="text-align: justify;"> 2. Pengguna platform blogger tidak bisa menggunakan cara ini untuk mengoptimalkan pengiriman CSS eksternal. Saya akan bagikan pengalaman bagaimana memaksimalkan pengiriman CSS buat anda yang memakai paltform blogger beserta dampaknya di bawah.</div> <br /> <span style="font-size: large;"><b><i><u>Jangan inline atribut CSS dalam elemen html.</u></i></b></span><br /> <br /> Sebisa mungkin <a href="http://zonahentongerz.blogspot.com/2015/11/jangan-inline-css-attribute-di-element-html.html" target="_blank">jangan inline atribut CSS</a> dalam elemen html template blog anda.<br /> <br /> <span style="font-size: large;"><b><i><u>Optimalkan pengiriman CSS di blogger.</u></i></b></span><br /> <br /> CSS (Cascading Style Sheet) eksternal di blogger biasanya terdapat di antara kode <head> dan </head> dalam html template. Sebagai contoh setiap user yang menggunakan platform blogger setidaknya terdapat 2 CSS eksternal dengan kode yang mirip seperti di bawah ini:<br /> <br /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/> (Kode CSS ekstenal yang terdapat dalam blog ini)<br /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/> (Kode CSS eksternal yang terdapat dalam blog ini)<br /> <br /> dan penempatan CSS eksternal tersebut dalam html template adalah seperti di bawah ini:<br /> <br /> <blockquote class="tr_bq"> <!DOCTYPE html><br /> <HTML><br /> <head><br /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/><br /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/><br /> <b:skin>...</b:skin><br /> </head><br /> <body><br /> Kode elemen html dalam body.<br /> </body><br /> </HTML></blockquote> <br /> Untuk mengoptimalkan pengiriman CSS eksternal blogger anda tidak cukup hanya menghapus:<br /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/><br /> dan<br /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/><br /> dari html template blog anda. Karena menurut pengalaman saya browser akan tetap load 2 CSS eksternal ini walaupun telah di hapus dari html template blog.<br /> <br /> Jika anda ingin mengoptimalkan pengiriman CSS blogger lakukan 2 langkah mudah di bawah ini:<br /> 1. Ganti kode<span style="color: cyan;"> <b><i><u><head></u></i></b></span> menjadi <b><i><u><span style="color: cyan;">&lt;head&gt;</span></u></i></b>.<br /> 2. Ganti kode <b><i><u><span style="color: cyan;"></head></span></u></i></b> menjadi <b><i><u><span style="color: cyan;">&lt;!--< head/ >--&gt;</span></u></i></b> (hilangkan spasi antara <b><i><, > dan head/</i></b>. Klik Save Template.<br /> <br /> <br /> <span style="font-size: large;"><b><i><u>Catatan:</u></i></b></span><br /> <div style="text-align: justify;"> 1. Mengoptimalkan pengiriman CSS blogger hanya bisa dilakukan dengan template non default blogger.</div> <div style="text-align: justify;"> 2. Cara memaksimalkan pengiriman CSS blogger ini kemungkinan akan mengubah tampilan dari blog anda. Hal ini mungkin terjadi karena skin yang terdapat dalam html template blog anda tidak mewakili semua kode elemen (div class yang terdapat dalam elemen html blog anda tersebut).</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <span style="font-size: x-small;"><i>Sumur : https://blog-seo-friendly-2013.blogspot.com/2014/03/optimalkan-pengiriman-css-blog.html</i></span></div>

Cara Optimasi CSS Delivery di Blog

Optimize CSS Setiap browser yang di gunakan oleh pengunjung blog anda akan memblokir terlebih dahulu setiap CSS (Cascading Style Sheet)...

Selengkapnya »