Zona Hentongerz: JavaScript

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/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

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 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 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 12:53:00 pm

Mengatasi Render Blocking CSS Font Awesome

Mengatasi Render Blocking CSS Font Awesome

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

Selengkapnya »

pada 11/20/2015 04:43:00 pm

Cara Membuat Ucapan Terima Kasih di Komentar Blog

Cara Membuat Ucapan Terima Kasih di Komentar Blog

Ucapan Terimakasih di komentar blogger Membalas komentar bisa jadi adalah pekerjaan yang membosankan. Tetapi, tentu tidak baik rasanya ...

Selengkapnya »

pada 11/18/2015 07:19:00 pm

Cara Memasukkan / Input Gambar, Youtube, Blockquote dan Kode pada Komentar

<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/AVvXsEiollAlRo6dv601U48jjfpMswlBykSal9_yiePLkbc-JRNTj5jQ7T3w9-reJf8p3DQafLMXoNThdW9MUKVh7wvv8nRQDHyZc_PaFzbLX0WMm4UcVkWJq52FiazXDl7ZOkH5DJOuNF9AJCI/s1600/Hack+Comment.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Menambahkan Gambar, Video, Blockquote, Pre, dan Kode pada Komentar Blogger" border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiollAlRo6dv601U48jjfpMswlBykSal9_yiePLkbc-JRNTj5jQ7T3w9-reJf8p3DQafLMXoNThdW9MUKVh7wvv8nRQDHyZc_PaFzbLX0WMm4UcVkWJq52FiazXDl7ZOkH5DJOuNF9AJCI/s400/Hack+Comment.png" title="Menambahkan Gambar, Video, Blockquote, Pre, dan Kode pada Komentar Blogger" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Menambahkan Gambar, Video, Blockquote, Pre, dan Kode pada Komentar Blogger</td></tr>
</tbody></table>
<div style="text-align: justify;">
Susah banget nyari ini Tutorial, ane nyari di google cuma ada 2, di Blognya KangIsmet sama blog lagi 1 lupa, yang penting saya share disini :D, cara masukin / input / menambahkan gambar, video (khusus Youtube), catatan/blockquote, code/pre di komentar blog.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Biasanya kalo berkomentar maunya pake Screenshot, video, kayak mau lihat tutorial gitu, nah langsung aja ke tutorialnya ya :D</div>
<br />
<h3>
Tutorial</h3>
<br />
<br />
<ul>
<li>Save / Copy kode CSS berikut ini, diatas kode ]]></b:skin></li>
</ul>
<div>
<br /></div>
<pre>#comment-holder .cm-youtube {
  display:block;
  border:none !important;
  background-color:#333;
  width:450px;
  height:240px;
  margin:0 auto 30px;
}
#comment-holder .cm-image {
  display:block;
  margin:0 auto 15px;
  outline:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  padding:5px;
  max-width:96%;
  height:auto;
  width:auto;
}
code, #comment-holder code,
#comment-holder i[rel="code"] {
  font:normal 12px Monaco,"Courier New",Monospace;
  color:blue;
}
pre, #comment-holder pre,
#comment-holder i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",Monospace;
  background-color:#333;
  color:white;
  padding:0.5em 1em;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
blockquote, #comment-holder blockquote,
#comment-holder b[rel="quote"] {
  margin:0 2%;
  background-color:#eee;
  padding:1em 1.2em;
  border-left:4px solid #7498AD;
  display:block;
  font-weight:normal;
  font-style:italic;
}
#comment-holder i[rel="image"],
#comment-holder i[rel="youtube"] {
  display:block;
  overflow:hidden;
  border:2px solid black;
  position:relative;
  width:170px;
  height:100px;
  margin:0 auto 30px;
}
#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to see this image!";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:red;
  color:white;
  font-weight:bold;
  text-align:center;
  padding:15px 0;
}
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to watch this video!";
}</pre>
<br />
<br />
<ul>
<li>Kemudian, simpan kode Javascript berikut ini, tepat diatas kode </body></li>
</ul>
<div>
<br /></div>
<pre><script type='text/javascript'>
//<![CDATA[
function repText(id) {
var a = document.getElementById(id),
 b = a.innerHTML,
 b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
 b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
 b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
 b = b.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
 b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
 b = b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
 document.getElementById(id).innerHTML = b;
 b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
 b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
 b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
 b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");
 b = b.replace(/\/s(640|1600)/g, "/s400");
 } repText('comment-holder');   
c = document.getElementById('comment-holder');
if (c) {
 b = c.getElementsByTagName("p");
 for (i = 0; i < b.length; i++) {
  if (b.item(i).getAttribute('CLASS') == 'comment-content') {
   ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
   ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
   ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
   ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");          
   b.item(i).innerHTML = ki_comm;
  }
 }
}
//]]>
</script> </pre>
<br />
<br />
<ul>
<li>Save Template</li>
</ul>
<div>
<h4>
Format penulisan Coding di Komentar Blogger</h4>
</div>
<br />
<div>
<span style="font-size: large;"><b>Menulis Tag <code></b></span></div>
<div>
<div>
<span style="color: #cc0000;"><i rel="code"></span>Tulis kode yang sudah diparse di sini<span style="color: #cc0000;"></i></span>, atau</div>
<div>
<span style="color: #cc0000;">[code]</span>Tulis kode yang sudah diparse di sini<span style="color: #cc0000;">[/code]</span></div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><b>Menulis Tag <pre></b></span></div>
<div>
<span style="color: #cc0000;"><i rel="pre"></span>Tulis kode yang sudah diparse di sini</i>, atau</div>
<div>
[pre]Tulis kode yang sudah diparse di sini[/pre]</div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><b>Menulis Catatan (Blockquote)</b></span></div>
<div>
<span style="color: #cc0000;"><b rel="quote"></span>Tulis catatan di sini<span style="color: #cc0000;"></b></span>, atau</div>
<div>
<span style="color: #cc0000;">[quote]</span>Tulis catatan di sini<span style="color: #cc0000;">[/quote]</span>, atau</div>
<div>
<span style="color: #cc0000;">[blockquote]</span>Tulis catatan di sini<span style="color: #cc0000;">[/blockquote]</span></div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><b>Memasukan Gambar</b></span></div>
<div>
<span style="color: #cc0000;"><i rel="image"></span>Tulis URL gambar di sini<span style="color: #cc0000;"></i></span>, atau</div>
<div>
<span style="color: #cc0000;">[img]</span>Tulis URL gambar di sini<span style="color: #cc0000;">[/img]</span></div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><b>Memasukan Video Youtube</b></span></div>
<div>
<span style="color: #cc0000;"><i rel="youtube"></span>Tulis URL Video Youtube di sini<span style="color: #cc0000;"></i></span>, atau</div>
<div>
<span style="color: #cc0000;">[youtube]</span>Tulis URL Video Youtube di sini<span style="color: #cc0000;">[/youtube]</span><br />
<br />
Sekian, Terima Kasih ! :D<br />
<br />
<span style="font-size: x-small;"><i>Sumur : http://blog.kangismet.net/2013/08/memasukan-gambar-youtube-kode-pada-komentar-blogger.html</i></span></div>
</div>

Cara Memasukkan / Input Gambar, Youtube, Blockquote dan Kode pada Komentar

Menambahkan Gambar, Video, Blockquote, Pre, dan Kode pada Komentar Blogger Susah banget nyari ini Tutorial, ane nyari di google cuma ad...

Selengkapnya »

pada 11/12/2015 11:41:00 am

Memasang Spot.IM untuk Sistem Komentar di Blogger

<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/AVvXsEhh_EZ5ro_6QdJpzB0q3OnGkeYUW72PF-u4qBTMWjjmWCwHzQdBixL_9Hp7hhEYf1RuggH51VGucBaac69k8Bp6qoTOVMEAO9Se340XPTfHyiBh5-jl-7aF_WP8AuWa8fwBxpwbXTJf0T0/s1600/spot-im.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Komentar baru Spot IM di blog" border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_EZ5ro_6QdJpzB0q3OnGkeYUW72PF-u4qBTMWjjmWCwHzQdBixL_9Hp7hhEYf1RuggH51VGucBaac69k8Bp6qoTOVMEAO9Se340XPTfHyiBh5-jl-7aF_WP8AuWa8fwBxpwbXTJf0T0/s640/spot-im.jpg" title="Komentar baru Spot IM" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Komentar baru Spot IM</td></tr>
</tbody></table>
<div style="text-align: justify;">
Ada kabar gembira untuk kita semua, kini Spot.IM ada extract... eh malah kepikiran iklan :v. Sebenarnya Spot.IM kini memiliki fitur baru seperti Disqus, eh tapi kalian belum pada tau apa itu Spot.IM kan ? dulunya Spot.IM ini hanya widget komunikasi / chatting biasa, setelah saya baca referensi di blog KompiAjaib, katanya scriptnya cukup ringan karena JavaScriptnya diload secara asinkron sehingga tidak terlalu membebani blog.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berbeda dengan Disqus, Spot.IM belum mendukung smile, code, strong, pre, dan belum ada fitur mengedit komentar, tetapi sudah mendukung upload gambar dan video. Alangkah baiknya kalau langsung saja tutorial pemasangan komentar Spot.IM ini ya, silahkan lihat tutorial berikut :</div>
<br />
<h3>
Tutorial Cara Pemasangan Spot.IM</h3>
<br />
1. Kunjungi dulu <a href="https://www.spot.im/" target="_blank">Spot.IM</a><br />
2. Klik Get Started ( semacam registrasi akun ), isikan data-data yang diperlukan<br />
    Jika sudah registrasi, akan muncul gambar seperti berikut :<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/AVvXsEgat3BqY_PDJ7shMvUel02alQJ_sbJKZcVPLIf4rhEyg-S6L1WIdI1g-tTYzmnHIEDfznXMH1eDHbJk3W2oug9N9GSR-8Jq74jjlS8L3Xuy4vvyj_1Qj34T6L9jJ4Ct_OeTZ84fUv0yszY/s1600/Embed+komentar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Create your first Spot di blog" border="0" height="345" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgat3BqY_PDJ7shMvUel02alQJ_sbJKZcVPLIf4rhEyg-S6L1WIdI1g-tTYzmnHIEDfznXMH1eDHbJk3W2oug9N9GSR-8Jq74jjlS8L3Xuy4vvyj_1Qj34T6L9jJ4Ct_OeTZ84fUv0yszY/s640/Embed+komentar.png" title="Create your first Spot komentar" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Create your first Spot</td></tr>
</tbody></table>
3. Klik Create your first Spot<br />
4. Masukkan data-data yang diinginkan seperti domain / url blog kamu dan nama blognya, dan lain-lain.<br />
    Setelah itu anda akan dialihkan seperti gambar berikut :<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/AVvXsEj0mUJHCbSEKMniQTAUXd0S2hzNu0LhKT0We1kjiKFD2QUreC4jRmGCt8ijZMagC3PpXjWoQypAMiSjMz1b68di5TLTccMVl2wyv_Cj36yjkjcvuTSNY0mYmYpx3J1ce3L9U2NouqVgxzE/s1600/Copy+code.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Copy Code Javascript ke blog" border="0" height="352" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0mUJHCbSEKMniQTAUXd0S2hzNu0LhKT0We1kjiKFD2QUreC4jRmGCt8ijZMagC3PpXjWoQypAMiSjMz1b68di5TLTccMVl2wyv_Cj36yjkjcvuTSNY0mYmYpx3J1ce3L9U2NouqVgxzE/s640/Copy+code.png" title="Copy Code Javascript yang sudah disediakan" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Copy Code Javascript</td></tr>
</tbody></table>
5. Copy code JavaScript tersebut, diatas kode <span style="color: lime;"></body></span> atau <span style="color: lime;"></head></span> *<span style="color: red;">Disarankan</span> diatas <span style="color: lime;"></body></span><br />
6. Cari kode berikut ini di Template blog anda :<br />
<span style="color: lime;"><b:includable id='comments' var='post'></span><br />
7. Selanjutnya, salin kode berikut ini, dan tempel / paste tepat diatas kode <span style="color: lime;"><b:includable id='comments' var='post'></span><br />
<br />
<b><span style="font-size: large;">- Untuk div embed komentarnya, gunakan kode berikut :</span></b><br />
<blockquote class="tr_bq">
<div id='spot-im-frame-inpage' expr:data-post-id='data:post.id'/></blockquote>
<b><span style="font-size: large;">- Untuk Comment Counter, gunakan kode berikut, maksudnya untuk menampilkan jumlah komentar diatas Spot.IM, pasang kode berikut setelah kode div embed komentar :</span></b><br />
<blockquote class="tr_bq">
<span class="spot-im-replies-count" expr:data-post-id="data:post.id"></span></blockquote>
8. Simpan template, dan lihat hasilnya.<br />
<br />
<script>
function toggleNavPanelspotIM(e){var n=document.getElementById(e),l=document.getElementById("tombol-spotim"),t="block";n.style.display==t?(n.style.display="none",l.innerHTML="Ingin Mencoba Komentar Spot.IM? Klik Di sini"):(n.style.display="block",l.innerHTML="Sembunyikan Komentar Spot.IM")};
!function(t,e,n){
function a(t){var  a=e.createElement("script");a.type="text/javascript" ,a.async=!0,a.src=("https:"===e.location.protocol?"https":"http")+":"+n,(t||e.body||e.head).appendChild(a)}function o(){var  t=e.getElementsByTagName("script"),n=t[t.length-1];return n.parentNode} var  p=o();t.spotId="sp_OCTTUVIp",t.parentElement=p,a(p)}(window.SPOTIM={},document,"//www.spot.im/launcher/bundle.js");</script>
<script type="text/javascript">!function(t,e,n){
function a(t){var  a=e.createElement("script");a.type="text/javascript" ,a.async=!0,a.src=("https:"===e.location.protocol?"https":"http")+":"+n,(t||e.body||e.head).appendChild(a)}function o(){var  t=e.getElementsByTagName("script"),n=t[t.length-1];return n.parentNode} var  p=o();t.spotId="sp_OCTTUVIp",t.parentElement=p,a(p)}(window.SPOTIM={},document,"//www.spot.im/launcher/bundle.js");</script>

<br />
<div id="tombol-spotim" onclick="toggleNavPanelspotIM('spot-im-frame-inpage')" style="background: #efefef; border-radius: 3px; border: 1px solid transparent; color: black; cursor: pointer; display: block; font-weight: 500; padding: 8px;">
Mau Coba Komentar Spot.IM? Klik Di sini</div>
<div expr:data-post-id="data:post.id" id="spot-im-frame-inpage" style="display: none; height: 4793px;">
<span class="spot-im-replies-count" expr:data-post-id="data:post.id"></span></div>
<br />
<span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2015/08/kini-spotim-bisa-untuk-sistem-komentar.html</i></span>

Memasang Spot.IM untuk Sistem Komentar di Blogger

Komentar baru Spot IM Ada kabar gembira untuk kita semua, kini Spot.IM ada extract... eh malah kepikiran iklan :v. Sebenarnya Spot.IM k...

Selengkapnya »

pada 11/11/2015 03:56:00 pm

Cara Pasang Pesan Komentar dengan Parse Kode

<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/AVvXsEiqHWzInuH5XJ_aKbYZ1DFJ5NjBFESn_SxYEQm7TNlAAY0JFWoj1mHkeDw9k7W1bvoRUanZocqF3d6jO3zJqgyRUANkL5iIe4elkFkJ1pEAOqi-2TZbTVMv1G3PntvV1ld7mdBjB6-5xAI/s1600/Pesan+Komentar+dengan+Parse.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara membuat pesan komentar dengan parse kode" border="0" height="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqHWzInuH5XJ_aKbYZ1DFJ5NjBFESn_SxYEQm7TNlAAY0JFWoj1mHkeDw9k7W1bvoRUanZocqF3d6jO3zJqgyRUANkL5iIe4elkFkJ1pEAOqi-2TZbTVMv1G3PntvV1ld7mdBjB6-5xAI/s400/Pesan+Komentar+dengan+Parse.jpg" title="Cara membuat pesan komentar dengan parse" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Pesan Komentar bonus Parse Kode</td></tr>
</tbody></table>
<div style="text-align: justify;">
Komentar adalah fitur Blogger yang sangat penting, karena berpengaruh dengan search engine. Tapi, banyak komentator yang menyalahgunakan fitur ini untuk menyebarkan produk, beriklan dengan berlebihan / SPAM. Maka dari itu, ada baiknya para blogger memasang Pesan Komentar agar komentator tidak sembarangan saat berkomentar, dan juga terdapat Parse kode untuk memudahkan para komentator saat ingin berkomentar dalam bentuk HTML, misalnya berkomentar dengan style huruf yang beragam seperti Bold, Italic, Underline, Strikethrought, atau memasukkan kode HTML kedalam komentar. Jika berminat, silahkan lihat tutorial dibawah ini :</div>
<br />
<h2>
Tutorial :</h2>
<br />
<br />
1. Masuk Blogger > Template > HTML<br />
2. Copy salin code CSS berikut ini, tepat diatas kode <span style="color: lime;">]]></b:skin></span> atau <span style="color: lime;"></style></span><br />
<br />
<pre>.pesan-komentar{background:#efefef;padding:5px 10px 10px;width:auto;margin:15 auto 0;line-height:1.3em;position:relative;font-weight:400;border:1px solid #ddd;font-size:14px;color:#444}
.parser{background:#888;padding:3px 6px;margin:0;cursor:pointer;display:inline-block;float:left;text-align:center;color:#fff;}
#parser{padding:0;margin:10px 0 0;display:none}
#parser table,#parser2 table{margin:0 auto;width:100%}
#parser textarea#somewhere,#parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:100px;width:100%;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#parser textarea#somewhere:active,#parser textarea#somewhere:focus,#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #e8554e;outline:0}
input.button-parse{padding: 5px;}
.pesan-komentar .strike{text-decoration: line-through;}
.pesan-komentar:before{content:"";width:0;height:0;position:absolute;bottom:-22px;left:14px;border:11px solid transparent;border-color:#ddd transparent transparent}
.pesan-komentar:after{content:"";width:0;height:0;position:absolute;bottom:-20px;left:15px;border:10px solid transparent;border-color:#efefef transparent transparent}
code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#000}
.clear{clear:both;}</pre>
<br />
3. Copy kode JavaScript berikut ini, tepat diatas kode <span style="color: lime;"></body></span><br />
<br />
<pre><script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".parser").click(function(){$("#parser").slideToggle("slow")})});
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;};
//]]>
</script></pre>
<br />
4. Salin kode HTML berikut ini, tepat diatas kode <span style="color: lime;"></article></span><span style="background-color: lime;"></b:includable></span><br />
<br />
<pre><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='pesan-komentar'>
  <b>Cara style text di komentar Disqus:</b><br/>
<ul>
   <li>Untuk menulis huruf <b>bold</b> silahkan gunakan <code>&amp;lt;strong&amp;gt;&amp;lt;/strong&amp;gt;</code> atau <code>&amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;</code>.</li>
   <li>Untuk menulis huruf <i>italic</i> silahkan gunakan <code>&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;</code> atau <code>&amp;lt;i&amp;gt;&amp;lt;/i&amp;gt;</code>.</li>
   <li>Untuk menulis huruf <u>underline</u> silahkan gunakan <code>&amp;lt;u&amp;gt;&amp;lt;/u&amp;gt;</code>.</li>
   <li>Untuk menulis huruf <span class='strike'>strikethrought</span> silahkan gunakan <code>&amp;lt;strike&amp;gt;&amp;lt;/strike&amp;gt;</code>.</li>
   <li>Untuk menulis kode HTML silahkan gunakan <code>&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;</code> atau <code>&amp;lt;pre&amp;gt;&amp;lt;/pre&amp;gt;</code> atau <code>&amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;</code>, dan silahkan <b>parse</b> dulu kodenya pada kotak parser di bawah ini.</li>
  </ul>
<div class='parser'><i class='fa fa-code'/></div>
<div class='clear'/>
<div id='parser'>
<table><tbody>
<tr> <td><textarea id='somewhere'/><br/>
<input class='button-parse' contenteditable='true' onclick='convert();' type='button' value='Parse Script'/></td> </tr>
</tbody></table>
</div>
</div>
</b:if></pre>
<br />
5. Save Template, silahkan dilihat hasilnya !<br />
<br />
Sekian, terima kasih !<br />
Jika ada kendala, silahkan komentar, dan harap terdapat JQuery dan Font Awesome di Template blog !<br />
<br />
<i><span style="font-size: x-small;">Sumur : http://www.kompiajaib.com/2015/05/pesan-komentar-dan-code-parser-untuk.html</span></i>

Cara Pasang Pesan Komentar dengan Parse Kode

Pesan Komentar bonus Parse Kode Komentar adalah fitur Blogger yang sangat penting, karena berpengaruh dengan search engine. Tapi, banya...

Selengkapnya »

pada 11/09/2015 07:43:00 pm

Cara Memasang Persentase Scroll Bar di Blog Valid CSS3 dan HTML5

Cara Memasang Persentase Scroll Bar di Blog Valid CSS3 dan HTML5

Pasang Persentase Scroll di Blog Beberapa para Blogger ada yang menggunakan persentase scrollbar di blognya, untuk mengetahui berapa pe...

Selengkapnya »

pada 9/15/2015 06:04:00 pm

Memasang Prism Syntax Highlighter dengan Nomor

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}</pre>
<li><b>Selanjutnya, simpan 3 kode berikut, tepat sebelum / diatas kode <span style="color: lime;"></body></span> atau <span style="color: lime;"></head></span></b></li>
<pre><script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/></pre>
<pre><script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script></pre>
<pre><script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script></pre>
<li><b>Finally, Simpan Template.</b></li>
</ol>
<div>
<br /></div>
<div>
<b>Selanjutnya, saat agan mau buat Post baru, Copy + Paste kode dibawah ini di tab HTML (Disamping Compose)</b></div>
<div>
<pre><pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre></pre>
</div>
<br />
<div style="text-align: center;">
<b><span style="font-size: large;">> <i><a href="http://codepen.io/arlinadesign/full/XJvrJR/" target="_blank">HASIL / DEMO</a></i> <</span></b></div>
<br />
<i>Sumur : http://www.arlinadzgn.com/2014/11/memasang-prism-syntax-highlighter-di-blogger.html</i>