Zona Hentongerz: Blogging

pada 12/11/2015 02:12:00 pm

Membuat Loading Bar di Blog Ala Youtube

Membuat Loading Bar di Blog Ala Youtube

Loading Bar seperti Youtube Jika kita jeli ketika kita membuka halaman Youtube, maka kita akan melihat sebuah progress bar di paling ata...

Selengkapnya »

pada 11/27/2015 06:00:00 pm

Membuat Modal Dialog Box dengan Custombox

<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/AVvXsEh_NkR92h47BStW4nCJkrHlDCFcVoYE-axP1Kx49KYqFE6Hbieu8o-LB7KYvn72kbQTCBTD9ohXCAgaLf-ic0ytGSOBvkeB7V_jaCwoGwkLJpc7nIpaccgGVdGntEa3cDVCAlM877uqKsw/s1600/custombox.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Modal Box" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_NkR92h47BStW4nCJkrHlDCFcVoYE-axP1Kx49KYqFE6Hbieu8o-LB7KYvn72kbQTCBTD9ohXCAgaLf-ic0ytGSOBvkeB7V_jaCwoGwkLJpc7nIpaccgGVdGntEa3cDVCAlM877uqKsw/s400/custombox.png" title="Modal Box" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Modal Box</td></tr>
</tbody></table>
<div style="text-align: justify;">
Custombox.js adalah sebuah plugin yang bisa kita gunakan untuk membuat modal window dialog box. Secara default, plugin ini memiliki 20 efek transisi namun bisa kita kembangkan lagi pada beberapa efek transisi dengan memberikan posisi.</div>
<br />
<div style="text-align: justify;">
Dengan begitu kita bisa membuat berbagai dialog box di blog untuk berbagai keperluan. Misalnya untuk dialog box informasi pengunjung, untuk menampilkan widget, dan lain-lain. Dengan memberikan efek transisi yang berbeda pada setiap dialog box yang ditampikan, maka ini akan memberikan warna berbeda pada blog kita.</div>
<br />
<div style="text-align: justify;">
Cara penerapannya pun cukup mudah, kita hanya perlu menghosting js dan css dan memberikan sedikit sentuhan jquery untuk memberi perintah dan sedikit custom css untuk dialog box. Begitu pun dengan warna overlay-nya, kita bisa memberikan warna overlay yang berbeda pada setiap dialog box. Secara default, overlay akan berwarna hitam transparant.</div>
<br />
<div style="text-align: justify;">
Untuk demo berbagai efek transisi modal dialog box dengan custombox.js ini sudah saya coba dan buatkan di JSFiddle untuk memastikan bahwa ini bekerja dengan baik. Silahkan coba pada link demo di bawah ini dari KompiAjaib.</div>
<br />
<div style="text-align: center;">
<a href="http://jsfiddle.net/kompiajaib/ev604ng2/2/embedded/result/" target="_blank">DEMO</a></div>
<br />
Jika Anda tertarik untuk mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.<br />
<br />
Silahkan simpan script js di bawah ini di atas kode </body><br />
<blockquote class="tr_bq">
<script src="http://yourjavascript.com/441114301111/custombox-min.js"></script></blockquote>
<br />
Saran saya sebaiknya js di atas dihosting sendiri pada akun hosting Anda, baik di yourjavascript, google drive, google code, atau lainnya.<br />
<br />
Kemudian silahkan simpan juga script css di bawah ini di atas kode </head><br />
<blockquote class="tr_bq">
<link href='http://dixso.github.io/custombox/dist/custombox.min.css' rel='stylesheet' type='text/css'></blockquote>
<br />
Sama halnya dengan js di atas, sebaiknya css di atas dihosting sendiri pada akun hosting Anda, baik di yourjavascript, google drive, google code, atau lainnya.<br />
<br />
Kemudian di bawah ini adalah kode HTML untuk membuat dialog box-nya.<br />
<blockquote class="tr_bq">
<span class="Apple-tab-span" style="white-space: pre;">  </span><div class="md-modal" id="modal-1"><br /><span class="Apple-tab-span" style="white-space: pre;">   </span><div class="md-content"><br /><span class="Apple-tab-span" style="white-space: pre;">    </span><h3>Title Modal Dialog</h3><br /><span class="Apple-tab-span" style="white-space: pre;">    </span><div><br /><span class="Apple-tab-span" style="white-space: pre;">     </span><p>CONTENT DIALOG BOX IS HERE</p><br /><span class="Apple-tab-span" style="white-space: pre;">     </span><span class="md-close">×</span><br /><span class="Apple-tab-span" style="white-space: pre;">    </span></div><br /><span class="Apple-tab-span" style="white-space: pre;">   </span></div><br /><span class="Apple-tab-span" style="white-space: pre;">  </span></div><br />  <br /><span class="Apple-tab-span" style="white-space: pre;">  </span><div class="md-overlay"></div><br /><button class="md-trigger1">Modal 1</button></blockquote>
<br />
<div style="text-align: justify;">
Jika kita ingin membuat lebih dari satu dialog box, maka <b>id="modal-1"</b> silahkan sesuaikan dengan banyaknya dialog box yang dibuat. Misalnya <b>id="modal-2"</b> untuk dialog box yang kedua dan seterusnya, begitu pun untuk <b>button</b>.</div>
<br />
Namun untuk <b><div class="md-overlay"></div></b> cukup hanya membuat satu saja.<br />
<br />
Dan di bawah ini adalah CSS untuk kustomisasi dialog box dan tombolnya. Silahkan sesuaikan dengan selera Anda.<br />
<br />
<blockquote class="tr_bq">
.md-modal{display:none}<br />.md-content{z-index:10;background:#eee;text-align:left;padding:10px;position:relative;border-radius:5px;border:10px solid #000;}<br />.md-close{position:absolute;top:0;right:5px;background:none;border:none;font:bold 20px Arial;cursor:pointer;padding:0}<br />button.{display:block;margin-bottom:5px;cursor:pointer}</blockquote>
<br />
Kemudian silahkan simpan kode jquery di bawah ini di atas kode </body><br />
<br />
<blockquote class="tr_bq">
<script><br />$(function () {<br />        $('.md-trigger1').on('click', function ( e ) {<br />            Custombox.open({<br />                target: '#modal-1',<br />                effect: 'fadein',<br />                overlayColor: '#ddd',<br />                width: 600<br />            });<br />            e.preventDefault();<br />        });<br />        $('.md-close').on('click', function ( e ) {<br />            Custombox.close();<br />        });<br />   });<br /></script></blockquote>
<br />
<b>.md-trigger1</b> silahkan sesuaikan dengan class pada button pada kode HTML di atas.<br />
<br />
<b>target</b> silahkan sesuaikan <b>#modal-1</b> dengan id dialog box pada kode HTML di atas.<br />
<br />
<div style="text-align: justify;">
<b>effect</b> silahkan sesuaikan dengan efek transisi yang ingin Anda gunakan, ada 20 efek, diantaranya: fadein, slide, newspaper, fall, sidefall, blur, flip, sign, superscaled, slit, rotate, letmein, makeway, slip, corner, slidetogether, scale, door, push, dan contentscale.</div>
<br />
<div style="text-align: justify;">
Jika Anda ingin memberikan warna pada overlay, silahkan sesuaikan pada kode overlayColor dengan mengganti kode #ddd. Secara default overlay akan berwarna hitam transparant. Hapus kode overlayColor: '#ddd', jika Anda ingin overlay berwarna hitam.</div>
<br />
width untuk memberi lebar dialog box. 600 di atas berarti dialog box memiliki lebar 600px. Secara default dialog box memiliki lebar 80% lebar layar.<br />
<br />
Jika dialog boxnya ada 2 buah maka jquery-nya seperti berikut:<br />
<br />
<blockquote class="tr_bq">
<script><br />$(function () {<br />        $('.md-trigger1').on('click', function ( e ) {<br />            Custombox.open({<br />                target: '#modal-1',<br />                effect: 'fadein',<br />                overlayColor: '#ddd',<br />                width: 600<br />            });<br />            e.preventDefault();<br />        });<br />       $('.md-trigger2').on('click', function ( e ) {<br />            Custombox.open({<br />                target: '#modal-2',<br />                effect: 'slide',<br />                width: 400<br />            });<br />            e.preventDefault();<br />        });<br />        $('.md-close').on('click', function ( e ) {<br />            Custombox.close();<br />        });<br />   });<br /></script></blockquote>
<br />
<div style="text-align: justify;">
Untuk dialog box ketiga dan seterusnya silahkan perhatikan penempatan kodenya pada kode jquery di atas. Sedangkan jquery untuk tombol close (<b>.md-close</b>) cukup satu saja seperti di atas. Dan pastikan Anda sudah menyimpan jquery library pada template blog Anda berapa pun versinya.</div>
<br />
Sekian terima kasih.<br />
<br />
<span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2014/11/membuat-modal-dialog-box-dengan.html</i></span>

Membuat Modal Dialog Box dengan Custombox

Modal Box Custombox.js adalah sebuah plugin yang bisa kita gunakan untuk membuat modal window dialog box. Secara default, plugin ini me...

Selengkapnya »

pada 11/27/2015 02:00:00 pm

Cara Membuat Image Lightbox Responsive dengan Colorbox

<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/AVvXsEjzSxSrDZZpQ0E08BoUBM-qBq4NwcE-XA75HudERR9ZtvNp41Ht7tojww9OADae8cmHkZWsKUf85M2IgBr3xMX2RHPZZdSoCK8nb6hIF8GT9wghpyIMe69MhP3YB2brW5a8Vls9FwqyzYI/s1600/lightbox.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Lightbox with Colorbox" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzSxSrDZZpQ0E08BoUBM-qBq4NwcE-XA75HudERR9ZtvNp41Ht7tojww9OADae8cmHkZWsKUf85M2IgBr3xMX2RHPZZdSoCK8nb6hIF8GT9wghpyIMe69MhP3YB2brW5a8Vls9FwqyzYI/s400/lightbox.jpg" title="Lightbox with Colorbox" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Lightbox with Colorbox</td></tr>
</tbody></table>
<div style="text-align: justify;">
Image Lightbox adalah ketika sebuah gambar di postingan di klik, maka akan muncul sebuah overlay yang menampilkan gambar yang lebih besar dan jika di dalam postingan tersebut terdapat lebih dari satu gambar maka overlay akan menampilkan gambar-gambar tersebut dengan tombol next (=>) prev (<=).</div>
<br />
<div style="text-align: justify;">
Blogger sendiri sudah memiliki fitur lightbox dan kita bisa mengaktifkannya pada setting di dashboard Blogger. Namun bagi Anda yang sudah melakukan validasi HTML5 dan menyembunyikan Bundle CSS dan JS Blogger, secara otomatis Anda tidak bisa menggunakan fitur lightbox Blogger tersebut.</div>
<br />
<div style="text-align: justify;">
Namun tidak perlu khawatir, banyak plugin jquery yang bisa kita gunakan untuk menggantikan lightbox Blogger yang tidak bisa kita aktifkan. Salah satunya adalah Colorbox.js karya Jack Moore. Dan saya mencoba salah satu fiturnya saja untuk digunakan sebagai image lightbox. Dengan sedikit modifikasi pada CSS style-nya, maka jadilah lightbox dengan <i><b>colorbox.js</b></i> responsive.</div>
<br />
<div style="text-align: justify;">
Dan berikut adalah demo dari KompiAjaib untuk lightbox tanpa transisi dengan lebar dan tinggi 75% dari layar yang saya buat di JSFiddle sesuai aslinya. Dan itu cukup untuk membuat lightbox yang responsive. Namun pada lightbox ini menyisakan daerah putih di sekitar gambar sehingga menurut saya kurang bagus dilihatnya.</div>
<br />
<div style="text-align: center;">
<a href="http://jsfiddle.net/kompiajaib/vb1kknho/embedded/result/" target="_blank">DEMO</a></div>
<br />
<div style="text-align: justify;">
Untuk itu saya sedikit memodifikasi CSS style colorbox untuk menghilangkan daerah putih di sekitar gambarnya sehingga gambarnya menjadi full. Bisa Anda lihat pada link demo di bawah ini.</div>
<br />
<div style="text-align: center;">
<a href="http://jsfiddle.net/kompiajaib/vb1kknho/1/embedded/result/" target="_blank">DEMO</a></div>
<br />
Tutorialnya, silahkan gunakan kode-kode di bawah ini.<br />
<br />
<span style="font-size: large;"><b><i><u>Kode CSS</u></i></b></span><br />
<br />
<pre>#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}
#cboxWrapper{max-width:none}
#cboxOverlay{position:fixed;width:100%;height:100%}
#cboxMiddleLeft,#cboxBottomLeft{clear:left}
#cboxContent{position:relative}
#cboxLoadedContent{overflow:hidden!important;-webkit-overflow-scrolling:touch}
#cboxTitle{margin:0}
#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}
.cboxPhoto{border:0;width:100%!important;height:auto!important;margin-bottom:-5px;}
.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}
#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
#cboxOverlay{background:#000}
#colorbox{outline:0}
#cboxContent{margin-top:20px;background:#000}
.cboxIframe{background:#fff}
#cboxError{padding:50px;border:1px solid #ccc}
#cboxLoadedContent{border:5px solid #000;background:#fff}
#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc;visibility:hidden}
#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}
#cboxLoadingGraphic{background:url(http://www.jacklmoore.com/colorbox/example3/images/loading.gif) no-repeat center center}
#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0}
#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}
#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}
#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png)no-repeat top left;width:28px;height:65px;text-indent:-9999px}
#cboxPrevious:hover{background-position:bottom left}
#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}
#cboxNext:hover{background-position:bottom right}
#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}
#cboxClose:hover{background-position:bottom center}</pre>
<br />
<span style="font-size: large;"><b><i><u>Kode Javascript
</u></i></b></span><br />
Simpan kode javascript di bawah ini di atas kode </body><br />
<br />
<pre><script src='http://yourjavascript.com/311412413010/jquery-colorbox-min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"auto"});
});
//]]>
</script></pre>
<br />
<span style="font-size: large;"><b><i><u>Kode HTML
</u></i></b></span><br />
Untuk menyimpan gambar di postingan, silahkan gunakan kode HTML seperti di bawah ini.<br />
<br />
<pre><a class="group3" href="URL GAMBAR BESAR" title="Title Gambar Di Sini"><img alt="thumbnail" src="URL GAMBAR KECIL" width="200" height="130" title="Title Gambar Di Sini"/></a></pre>
<br />
<div style="text-align: justify;">
Anda cukup mengupload sebuah gambar yang besar kemudian ganti kode <b>URL GAMBAR BESAR</b> dan <b>URL GAMBAR KECIL</b> dengan <b>URL</b> gambar yang Anda upload tadi. Untuk lebar dan tinggi gambar thumbnail silahkan atur sesuai kehendak Anda pada kode <b>width="200"</b> <b>height="130"</b>.
</div>
<br />
<div style="text-align: justify;">
Jika gambar dengan HTML di atas terdapat lebih dari satu, maka otomatis lightbox akan menampilkan tombol next prev. Namun jika hanya terdapat satu gambar saja maka lightbox tidak akan menampilkan tombol next prev.</div>
<br />
Sekian Terima Kasih<br />
<br />
<span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2014/11/membuat-image-lightbox-responsive.html</i></span>

Cara Membuat Image Lightbox Responsive dengan Colorbox

Lightbox with Colorbox Image Lightbox adalah ketika sebuah gambar di postingan di klik, maka akan muncul sebuah overlay yang menampilka...

Selengkapnya »

pada 11/27/2015 12:40:00 pm

Membuat Teks Berkedip (Blink) di Blog

$(document).ready(function()
{
        $('.blink').blink();

$('.blink').mouseover(function(){
            $(this).stop().unblink();
        });
        $('.blink').mouseout(function(){
            $(this).blink();
        });
    });</pre>
<br />
Contoh: <br />
<div class="blink4">
Silahkan hover teks ini</div>
<br />
<br />
Sekian, terima kasih<br />
<br />
<span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2014/11/membuat-teks-berkedip-dengan-jquery.html</i></span>
<script type="text/javascript">
//<![CDATA[
(function(e){e.fn.blink=function(t){var n={delay:500};var t=e.extend(n,t);return this.each(function(){var n=e(this);setInterval(function(){if(e(n).css("visibility")=="visible"){e(n).css("visibility","hidden")}else{e(n).css("visibility","visible")}},t.delay)})}})(jQuery);$(document).ready(function(){$(".blink2").blink();$('.blink3').blink({delay:200})})
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
(function($)
{
        $.fn.blink = function(options)
        {
                var defaults = { delay:500 };
                var options = $.extend(defaults, options);
               
                return this.each(function()
                {
                        var obj = $(this);
                        if (obj.attr("timerid") > 0) return;
                        var timerid=setInterval(function()
                        {
                                if($(obj).css("visibility") == "visible")
                                {
                                        $(obj).css('visibility','hidden');
                                }
                                else
                                {
                                        $(obj).css('visibility','visible');
                                }
                        }, options.delay);
                        obj.attr("timerid", timerid);
                });
        }
        $.fn.unblink = function(options)
        {
                var defaults = { visible:true };
                var options = $.extend(defaults, options);
               
                return this.each(function()
                {
                        var obj = $(this);
                        if (obj.attr("timerid") > 0)
                        {
                                clearInterval(obj.attr("timerid"));
                                obj.attr("timerid", 0);
                                obj.css('visibility', options.visible?'visible':'hidden');
                        }
                });
        }
}(jQuery))

$(document).ready(function()
{
        $('.blink4').blink();

$('.blink4').mouseover(function(){
            $(this).stop().unblink();
        });
        $('.blink4').mouseout(function(){
            $(this).blink();
        });
    });
//]]>
</script>

Membuat Teks Berkedip (Blink) di Blog

Create Blink Teks Teks berkedip atau blinking adalah text yang bisa kita gunakan agar pengunjung lebih memperhatikan sebuah teks yang k...

Selengkapnya »

pada 11/27/2015 11:31:00 am

Membuat Tombol Download dengan Animasi Slide

Membuat Tombol Download dengan Animasi Slide

Bikin tombol download dengan animasi Kali ini saya akan share cara membuat tombol download dengan animasi slide yang menampilkan size f...

Selengkapnya »

pada 11/26/2015 09:01:00 pm

Menggabungkan JavaScript untuk Kecepatan Loading Blog

Menggabungkan JavaScript untuk Kecepatan Loading Blog

Combine JavaScript for Fast Loading Blog Seperti sudah kita ketahui bahwa jika blog memiliki banyak javascript, maka bisa dipastikan ba...

Selengkapnya »

pada 11/26/2015 04:14:00 pm

Membuat Welcome Bar dengan Tombol Close di Blog

Membuat Welcome Bar dengan Tombol Close di Blog

Welcome bar With Close Button Welcome bar ini biasanya disimpan di paling atas dari sebuah blog. Dan biasanya juga welcome bar ini beri...

Selengkapnya »

pada 11/26/2015 03:47:00 pm

Modifikasi Tampilan Cookies Bar bawaan Blogger dengan CSS

Modifikasi Tampilan Cookies Bar bawaan Blogger dengan CSS

Change Cookies Notification bar for Blogger Blogger baru-baru ini mengeluarkan fitur baru, namanya Cookies Notification bar, dimana ini...

Selengkapnya »

pada 11/26/2015 03:47:00 pm

Memasang Notifikasi Cookies Bar di Blog

Memasang Notifikasi Cookies Bar di Blog

Custom Cookies Notification Bar Baru-baru ini Google telah mengaktifkan cookies notifikasi bar untuk blogspot. Cookies notifikasi bar i...

Selengkapnya »

pada 11/25/2015 11:18:00 am

Cara Pasang Tombol Donasi BitCoin di Blog

Cara Pasang Tombol Donasi BitCoin di Blog

Cara Membuat Tombol Donate BitCoin Dengan adanya bitcoin sekarang ini, tidak sedikit dari blog yang memasang tombol donasi untuk menggun...

Selengkapnya »

pada 11/24/2015 07:56:00 pm

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 »

pada 11/24/2015 05:55:00 pm

Agar Blogspot ketika Diakses Langsung menjadi HTTPS

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 »

pada 11/24/2015 05:02:00 pm

Mengatasi Error pada Template Blogspot ketika Diakses HTTPS

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 »

pada 11/24/2015 04:36:00 pm

Membuat External Link Icon dengan CSS

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 »

pada 11/24/2015 04:21:00 pm

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 »

pada 11/24/2015 02:58:00 pm

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 »

pada 11/24/2015 01:06:00 pm

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>