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 »

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 »

Membuat Tombol Download dengan Animasi Slide

<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/AVvXsEhcOYBbUyKxEa0SH8_c8KlAhyv-vfV4swf7qSRRPNXn42PWVW3V-NdHDP7YO5oM7Qm_EVgoCAQzk7nZfAM35GZ8YER7wRyHSRlMhjVA_oMiXBO17AgUkIkB_dbJZoKwxM8vSr3Pl6Zxgws/s1600/download-button.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Bikin tombol download dengan animasi" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcOYBbUyKxEa0SH8_c8KlAhyv-vfV4swf7qSRRPNXn42PWVW3V-NdHDP7YO5oM7Qm_EVgoCAQzk7nZfAM35GZ8YER7wRyHSRlMhjVA_oMiXBO17AgUkIkB_dbJZoKwxM8vSr3Pl6Zxgws/s400/download-button.gif" title="Bikin tombol download dengan animasi" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Bikin tombol download dengan animasi</td></tr> </tbody></table> <div style="text-align: justify;"> Kali ini saya akan share cara membuat tombol download dengan animasi slide yang menampilkan size file download ketika di-hover mouse dengan CSS3.</div> <br /> <div style="text-align: justify;"> Tombol download ini saya temukan ketika jalan-jalan pagi tadi. Kemudian saya coba dengan sedikit modifikasi agar bisa slide ke samping atau pun ke bawah dan menambahkan ikon download dengan font awesome.</div> <br /> <div style="text-align: justify;"> Bagi yang menggunakan tombol download pada postingannya, Anda bisa mencoba menggunakan tombol download dengan animasi ini untuk show hide ukuran file download-nya.</div> <br /> <div style="text-align: justify;"> 1. Untuk tombol download dengan slide ke samping / right bisa Anda lihat pada animasi gif di bawah ini dan untuk mendapatkan kode-kode CSS dan HTML silahkan masuk ke link demo JSFiddle di bawahnya.</div> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQQbIdUej4OL_hrpEzzRxRgh6OVq-_jk_Y0JhByEAGArYnlM8LquiR8TOiGj_K-UkC_Rm8rQlCafGLI3Dw78WYciQiKQdAa8vbfOA2npI6ZN_v11rKX3cUz-4gb4CKurMQ0_esEKa9R2k/s1600/download-button1.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Download Button Animate Slide Right" border="0" height="117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQQbIdUej4OL_hrpEzzRxRgh6OVq-_jk_Y0JhByEAGArYnlM8LquiR8TOiGj_K-UkC_Rm8rQlCafGLI3Dw78WYciQiKQdAa8vbfOA2npI6ZN_v11rKX3cUz-4gb4CKurMQ0_esEKa9R2k/s320/download-button1.gif" title="Download Button Animate Slide Right" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Download Button Animate Slide Right</td></tr> </tbody></table> <div style="text-align: center;"> <a href="https://jsfiddle.net/zonahentongerz/j12vd95m/" target="_blank">DEMO JSFIDDLE</a></div> <br /> <div style="text-align: justify;"> 2. Untuk tombol download dengan slide ke bawah / down bisa Anda lihat pada animasi gif di bawah ini dan untuk mendapatkan kode-kode CSS dan HTML silahkan masuk ke link demo JSFiddle di bawahnya.</div> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN3ETMv0WHU6rBEtKmEbWXG8FcXYuhyphenhyphenKi9te1VHWAbZuKIbItV28LYR6H_OndqerDEd-vWp8878YaEJuDN2gsBdij2Br9Jh7buIaxYmBgoJv9HOgy-CRLoRpoPyai1-A8O3_vWr9fYWCs/s1600/download-button2.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Download Button Animate Slide Down" border="0" height="117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN3ETMv0WHU6rBEtKmEbWXG8FcXYuhyphenhyphenKi9te1VHWAbZuKIbItV28LYR6H_OndqerDEd-vWp8878YaEJuDN2gsBdij2Br9Jh7buIaxYmBgoJv9HOgy-CRLoRpoPyai1-A8O3_vWr9fYWCs/s320/download-button2.gif" title="Download Button Animate Slide Down" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Download Button Animate Slide Down</td></tr> </tbody></table> <div style="text-align: center;"> <a href="https://jsfiddle.net/zonahentongerz/z1Lwsnow/" target="_blank"><span id="goog_439764312"></span>DEMO JSFIDDLE</a><span id="goog_439764313"></span></div> <br /> <div style="text-align: justify;"> Dan silahkan tambahkan link CSS style font awesome di bawah ini di atas kode <b><i></head></i></b>. Bagi yang sudah menggunakan font awesome (font awesome versi 4.4.0) silahkan lewati langkah ini.</div> <br /> <blockquote class="tr_bq"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/></blockquote> <br /> Sekian Terima Kasih<br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2014/12/membuat-tombol-download-dengan-animasi.html</i></span>

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 »

Membuat Welcome Bar dengan Tombol Close 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/AVvXsEjIuz-igZqMD2JGebAQgqh4kmFO1CfOGHYYrpg_eIcX4CqeOl0UOOyZBw1tuMOmC1AhciXxbySrqa5k5Wtqfw2YC6UFWOersIh6ODkSQP6acP7PjSKCiwMOGogQwWkaSYKw8oeiwUq_nOE/s1600/welcome-bar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Welcome bar With Close Button" border="0" height="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIuz-igZqMD2JGebAQgqh4kmFO1CfOGHYYrpg_eIcX4CqeOl0UOOyZBw1tuMOmC1AhciXxbySrqa5k5Wtqfw2YC6UFWOersIh6ODkSQP6acP7PjSKCiwMOGogQwWkaSYKw8oeiwUq_nOE/s640/welcome-bar.png" title="Welcome bar With Close Button" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Welcome bar With Close Button</td></tr> </tbody></table> <div style="text-align: justify;"> Welcome bar ini biasanya disimpan di paling atas dari sebuah blog. Dan biasanya juga welcome bar ini berisi pesan untuk pengunjung blog. Dengan begitu ketika seorang pengunjung masuk maka yang pertama terlihat adalah welcome bar karena biasanya menggunakan warna yang lebih mencolok dan berada paling atas seperti pada gambar di atas.</div> <br /> Pesan-pesan tersebut bisa berupa apa saja, misalnya pengumuan untuk update fitur dari web tersebut atau sesuatu hal yang baru mengenai blog tersebut.<br /> <br /> <div style="text-align: justify;"> Sebenarnya ada cara termudah untuk membuat welcome bar ini yaitu dengan welcome bar dari AddThis. Namun bagi yang alergi dengan script js dari pihak ketiga, kini saya share cara membuat welcome bar sendiri dan dilengkapi dengan tombol close dengan javascript sehingga tidak menggunakan jquery agar tidak membebani blog. Dengan begitu jika ada pengunjung yang merasa terganggu dengan welcome bar tersebut bisa menutupnya.</div> <br /> <span style="font-size: large;"><b><i><u>Kode CSS</u></i></b></span><br /> Simpan kode CSS di bawah ini di atas kode <span style="color: cyan;">]]></b:skin></span> atau <span style="color: cyan;"></style></span><br /> <br /> <pre>#welcome_bar{width:auto;height:auto;display:block;text-align:center;line-height:1.6em;padding:8px 20px;background:#ff847e;color:#fff;position:relative;margin:0 auto;font-weight:normal} #welcome_bar a{background:#3B81DE;color:#fff;padding:0 6px;border:1px solid transparent;border-radius:4px;font-weight:bold;} #close_welcome_bar {display:inline-block;cursor:pointer;padding:0 4px;position:absolute;top:0px;right:5px;font-weight:bold;font-size:18px}</pre> <span style="font-size: large;"><b><i><u>Kode HTML </u></i></b></span><br /> Silahkan simpan kode HTML di bawah ini tepat di bawah kode <span style="color: cyan;"><body></span><br /> <br /> <pre><div id='welcome_bar'> Sekarang Anda bisa unduh update terbaru dari blog ini, silahkan klik <a href='#' title='Unduh Update'>di sini</a> <span data-target='#welcome_bar' id='close_welcome_bar'>&#215;</span> </div></pre> <br /> Silahkan sesuaikan pesannya dengan pesan yang ingin Anda tampilkan.<br /> <br /> <span style="font-size: large;"><b><i><u>Kode Javascript</u></i></b></span><br /> Silahkan simpan kode di bawah ini di atas kode <u><i></body></i></u><br /> <br /> <pre><script type='text/javascript'> //<![CDATA[ var button=document.querySelector("#close_welcome_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"}); //]]> </script></pre> <br /> Demo:<br /> <object allowfullscreen="allowfullscreen" data="//jsfiddle.net/zonahentongerz/opv4ffnj/embedded/result/" height="300" width="100%"></object> <br /> <br /> Sekian terima kasih<br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://www.kompiajaib.com/2015/04/membuat-welcome-bar-dengan-tombol-close.html</i></span>

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 »

Modifikasi Tampilan Cookies Bar bawaan Blogger dengan CSS

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGME5L39OGd9AruJdsxQOawByrRXbwNVWqKU-HsMMhyLkKlNWcp2HVUtbrJHD7cp5EZwi5mEfWglwuWcge10Dsz2Zq3RKObc79EGbHqvYGR_HuQiwhATnVr20KwWenBNHfnRvWWA74wVY/s1600/Blogger-Cookies-Notification-Bar.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Change Cookies Notification bar for Blogger" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGME5L39OGd9AruJdsxQOawByrRXbwNVWqKU-HsMMhyLkKlNWcp2HVUtbrJHD7cp5EZwi5mEfWglwuWcge10Dsz2Zq3RKObc79EGbHqvYGR_HuQiwhATnVr20KwWenBNHfnRvWWA74wVY/s640/Blogger-Cookies-Notification-Bar.jpg" title="Change Cookies Notification bar for Blogger" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Change Cookies Notification bar for Blogger</td></tr> </tbody></table> <div style="text-align: justify;"> Blogger baru-baru ini mengeluarkan fitur baru, namanya Cookies Notification bar, dimana ini akan tampil jika domain yang anda kunjungi berbeda dari negara anda, misalnya zonahentongerz.blogspot.co.id, jika anda mengunjungi zonahentongerz.blogspot.co.uk, maka Cookies notification bar akan muncul dibagian kanan bawah (floating/melayang). Saya Menggunakan tutorial itu di '<a href="http://zonahentongerz.blogspot.com/2015/11/memasang-notifikasi-cookies-bar-di-blog.html" target="_blank">Memasang EU Notifikasi Cookies Bar di Blog</a>'. Akan tetapi, di postingan kali ini berbeda dengan postingan tersebut, karena disini akan merubah tampilan Cookies Bar asli bawaan Blogger, murni dengan CSS.</div> <br /> <div style="text-align: justify;"> Disini ada 2 pilihan Thema, yaitu background Gelap (Dark) dan Terang (Light). Bagi yang ingin mencoba, silahkan ikuti cara / tutorial mengganti / modifikasi tampilan Cookies Bar berikut ini :</div> <br /> 1. Blogger > Template > HTML > Co+Pas kode dibawah ini, tepat diatas kode <span style="color: lime;">]]></b:skin></span> atau <span style="color: lime;"></style></span><br /> <br /> <span style="font-size: large;"><b><i><u>CSS Background Gelap (Dark)</u></i></b></span><br /> <br /> <pre>/* Custom Cookies Info Dark */ .cookie-choices-info{background-color:rgba(56,66,75,.97)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;-webkit-transform:translateZ(0)} .cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#cee6ea!important} .cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear} .cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear} .cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#282f36!important;transition:all .1s linear}</pre> <br /> <span style="font-size: large;"><b><i><u>CSS Background Terang (Light)</u></i></b></span><br /> <br /> <pre>/* Custom Cookies Info Light */ .cookie-choices-info{background-color:rgba(255,255,255,.99)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-transform:translateZ(0)} .cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#222!important} .cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear} .cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear} .cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#999!important;transition:all .1s linear}</pre> <br /> 2. Simpan Template dan silahkan dibuka blog dengan domain khusus (ccTLD) wilayah eropa, seperti NamaBlogKamu.blogspot.uk, blogspot.pt, dll.<br /> <br /> Contoh : <span style="color: red;">zonahentongerz.blogspot.co.uk</span><br /> <br /> Sekian terima kasih<br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://www.arlinadzgn.com/2015/08/modifikasi-tampilan-cookies-bar-dengan-css.html</i></span>

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 »

Membuat External Link Icon dengan CSS

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

Membuat External Link Icon dengan CSS

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

Selengkapnya »

Embed Youtube Video with URL Only

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

Embed Youtube Video with URL Only

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

Selengkapnya »

Cara Optimasi Font Awesome dengan Google Drive

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

Cara Optimasi Font Awesome dengan Google Drive

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

Selengkapnya »

Menghapus Widget Bundle CSS untuk Fast Loading di Blog

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

Menghapus Widget Bundle CSS untuk Fast Loading di Blog

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

Selengkapnya »

Cara Membuat Ucapan Terima Kasih di Komentar 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/AVvXsEhxnxVBCeY6WdXJpTIFSZAXPNBGPPiftPldWTORVxUdifFwxoXcCaPUX4zwU-dplJaab6cCADDbi8jgxUKiBrnvgbhohPLCg3RKeANEoQe7n25bKoRKJLpqo5vmxUXltKSZEaxMvSwZtsA/s1600/Cara.Membuat.Ucapan.Terimakasih.Dibawah.Komentar.Blog.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Ucapan Terimakasih di komentar blogger" border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxnxVBCeY6WdXJpTIFSZAXPNBGPPiftPldWTORVxUdifFwxoXcCaPUX4zwU-dplJaab6cCADDbi8jgxUKiBrnvgbhohPLCg3RKeANEoQe7n25bKoRKJLpqo5vmxUXltKSZEaxMvSwZtsA/s400/Cara.Membuat.Ucapan.Terimakasih.Dibawah.Komentar.Blog.gif" title="Ucapan Terimakasih di komentar blogger" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Ucapan Terimakasih di komentar blogger</td></tr> </tbody></table> <div style="text-align: justify;"> Membalas komentar bisa jadi adalah pekerjaan yang membosankan. Tetapi, tentu tidak baik rasanya jika seorang blogger tidak membalas komentar pengunjungnya. Apalagi, jika komentarnya berupa pertanyaan.</div> <br /> <div style="text-align: justify;"> Nah, kali ini saya akan membahas cara membuat balasan komentar otomatis di blog. Balasannya berupa ucapan terima kasih karena si pengunjung telah berkunjung ke blog Anda. Pengunjung / visitor blog yang berkomentar akan mendapat komentar balasan (dibawah komentar yang mereka buat), berupa ucapan terima kasih.</div> <br /> <div style="text-align: justify;"> Komentar balasan ini hanya akan muncul pada komentar terakhir, dan akan hilang dengan sendirinya seiring berjalannya waktu. Dan, satu lagi. Komentar ini hanya muncul apabila sang komentator berkomentar dengan menggunakan akun Google. Bagaimana, tertarik memasang balasan ucapan terima kasih otomatis di blog? Silahkan ikuti langkah – langkah berikut :</div> <br /> <h2> Tutorial :</h2> <br /> <br /> <ul> <li>Login ke Blogger.com, lalu masuk ke <b>Template</b></li> <li>Backup terlebih dahulu template blog  Anda. Lalu, klik <b>Edit HTML</b>.</li> <li>Cari kode <span style="color: lime;"><b>]]></b:skin></b></span> (gunakan CTRL + F). Lalu, pastekan kode berikut tepat <b>diatas / sebelum</b> kode <span style="color: lime;"><b>]]></b:skin></b></span></li> </ul> <br /> <br /> <pre>.comments .thanks-comment{position:relative;margin:10px 0;padding-left:40px;font-style:italic;font-size:12px;quotes:"\201C""\201D""\2018""\2019"} .comments .thanks-comment:before{content:open-quote;position:absolute;top:0;left:0;margin-top:15px;font-size:4em;color:#d80556}</pre> <br /> <div class="bendera"> Keterangan :</div> <br /> <b>12</b> : Menunjukkan ukuran font balasan komentar. Gantilah sesuai dengan keinginan Anda<br /> <b><i>Italic</i></b> : Merupakan style font (cetak miring). Anda dapat menggantinya dengan <u>underline</u> (garis bawah) atau <b>bold</b> (cetak tebal).<br /> <br /> <br /> <ul> <li>Masih pada window yang sama, cari kode <span style="color: cyan;"><b><data:post.commentJso/></b></span>; . Lengkapnya seperti kode dibawah ini :</li> </ul> <br /> <br /> <blockquote class="tr_bq"> <span style="color: cyan;"><b>(function() {   <br /> var items = <data:post.commentJso/>;</b></span></blockquote> <br /> <br /> <ul> <li>Jika sudah ketemu, hapus kedua kode tersebut, lalu ganti dengan kode berikut :</li> </ul> <br /> <br /> <blockquote class="tr_bq"> var items_copy=[];(function() {var items = <data:post.commentJso/>;items_copy=items;</blockquote> <br /> <br /> <ul> <li>Lanjutkan dengan langkah penutup. Cari kode  <span style="color: cyan;"><b><data:post.commentHtml/></b></span> dan pastekan script berikut tepat dibawahnya :</li> </ul> <br /> <br /> <pre><script type='text/javascript'>//<![CDATA[for(i=0;i<items_copy.length;i++){if(i==items_copy.length-1){d=document.getElementById('c'+items_copy[i].id).getElementsByTagName('p').item(0);e=d.innerHTML+'<div class="thanks-comment '+items_copy[i].deleteclass.replace(/ blog-admin/,'')+'">Terimakasih '+items_copy[i].author.name+' untuk komentarnya!</div>';d.innerHTML=e}}//]]></script></pre> <br /> <br /> <ul> <li>Terakhir, klik <b>Simpan template</b> untuk menyimpan perubahan.</li> </ul> <br /> <br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://xxpc123xx.blogspot.co.id/2014/12/buatpasang.ucapan.terimakasih.dibawah.komentar.html</i></span>

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 »

Memasang Rating Bintang Modifikasi CSS Keren

<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/AVvXsEgf0X7kMjTZnXA4dzxEdoI7stzV533f90MVXgHXvKgef5iBQ-hDWODHhe8LhI_eyDUjtWeJWIgC7rMF2rM3V73O8XbSfQM7btffqJTXjl4HzrGazkP473F8w-K2-q4FVfGuKnsQk8EtDpw/s1600/rating-bintang-rich-snipets.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Modifikasi Rating Bintang dengan CSS" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0X7kMjTZnXA4dzxEdoI7stzV533f90MVXgHXvKgef5iBQ-hDWODHhe8LhI_eyDUjtWeJWIgC7rMF2rM3V73O8XbSfQM7btffqJTXjl4HzrGazkP473F8w-K2-q4FVfGuKnsQk8EtDpw/s640/rating-bintang-rich-snipets.png" title="Modifikasi Rating Bintang dengan CSS" width="640" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Modifikasi Rating Bintang dengan CSS</td></tr> </tbody></table> Pembuatan Rating Bintang Modifikasi Css Menarik ini merupakan postingan lanjutan dari artikel sebelumnya yang berjudul "<a href="http://zonahentongerz.blogspot.com/2015/11/cara-membuat-rating-bintang-di-blog.html" target="_blank">Cara Membuat Rating Bintang Di Blog</a>".<br /> <br /> Saya juga ingin mengingatkan bahwa ada 2 tipe rating bintang rich snipets yaitu individual rating dan aggregate rating. Dalam pemasangan kode html microdata untuk blog terdapat 2 cara : pemasangan manual di tiap postingan atau secara otomatis agar bisa tampil di seluruh postingan melalui template blogger.<br /> <br /> Disini saya akan memberikan sentuhan berupa design css agar tampilan review rating pada blog terlihat menarik serta menggunakan propertis rich snipets rating standar dari schema.org contohnya seperti gambar 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/AVvXsEiwirrbZjTlnxWoOhhyngMfMioFrAnujf6m1SyCFXmX8ykjkvIf7qybLMd1anzq6bQ1Y2Z6i0ugzSZYgPfpdy_r8PDzuDSE0SCmDTiZrm1BBGAoIJBPrLigUztbymBqttHYOjFrb9dPBj8/s1600/rating-bintang-rich-snipets.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Rating Bintang" border="0" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwirrbZjTlnxWoOhhyngMfMioFrAnujf6m1SyCFXmX8ykjkvIf7qybLMd1anzq6bQ1Y2Z6i0ugzSZYgPfpdy_r8PDzuDSE0SCmDTiZrm1BBGAoIJBPrLigUztbymBqttHYOjFrb9dPBj8/s400/rating-bintang-rich-snipets.png" title="Rating Bintang" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Rating Bintang</td></tr> </tbody></table> <span style="color: #3d85c6; font-size: large;"><b><u>Rating Bintang Dengan Properties Standar Disertai Css Menarik</u></b></span><br /> <br /> Propertis standar yang saya maksud disini adalah format metadata tidak hanya menggunakan name, author, dan rating saja namun ada beberapa tambahan seperti deskripsi. Kode html-nya bisa Anda salin langsung. Disini saya akan memberitahukan design rating untuk 2 tipe yaitu individual rating dan aggregate rating.<br /> <br /> <div class="bendera"> Individual Rating</div> <br /> <br /> <b>Contoh 1 individual rating tampilan di blog</b><br /> <br /> <div class="bisa-hover"> <table> <tbody> <tr align="justify"> <td width="20%">Judul </td> <td width="60%">Memasang Rating Bintang Modifikasi CSS Keren</td> </tr> <tr align="justify"> <td width="20%">Deskripsi </td> <td width="60%">Isikan deskripsi singkat artikel Anda disini </td> </tr> <tr align="justify"> <td width="20%">Author </td> <td width="60%">Isikan nama Anda disini </td> </tr> <tr align="justify"> <td width="20%">Author Rating </td> <td width="60%">4/ 5 Suara </td> </tr> </tbody></table> </div> <br /> <b>Kode css</b> yang harus Anda pasang di template, pertama silahkan cari kode <b>]]></b:skin></b> kemudian paste kode css berikut di atas <b>]]></b:skin></b><br /> <pre>.content-box-infoindong { border: 4px dashed rgb(204, 204, 204); margin: 5px; padding: 10px; } .content-box-infoindong:hover { background-color: rgb(241, 246, 249); border: 4px dashed rgb(31, 168, 245); margin: 5px; padding: 10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important; }</pre> <br /> <b>Kode html yang bisa Anda pasang manual per artikel</b> (bisa dipasang langsung ke postingan melalui editor html)<br /> <pre><div class='content-box-infoindong'> <div itemscope='' itemtype='http://schema.org/Review'> <table> <div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'> <meta content='Tulis judul artikel Anda disini' itemprop='name'/> </div> <tr align='justify'> <td width='20%'>Judul </td> <td width='60%'><span itemprop='name'>Tulis judul artikel Anda disini</span> </td> </tr> <tr align='justify'> <td width='20%'>Deskripsi </td> <td width='60%'><span itemprop='description'>Isikan deskripsi singkat artikel Anda disini</span> </td> </tr> <tr align='justify'> <td width='20%'>Author </td> <td width='60%'><span itemprop='author'>Isikan nama Anda disini</span> </td> </tr> <tr align='justify'> <td width='20%'>Author Rating </td> <td width='60%'><div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'><meta content='1' itemprop='worstRating'/> <span itemprop='ratingValue'>4</span>/ <span itemprop='bestRating'>5</span> Suara</div> </td> </tr> </table> </div> </div></pre> <br /> <b>Bila Anda menginginkan setiap posting memiliki rating bintang</b>, pertama silahkan menuju ke editor template kemudian cari kode <style>.bisa-hover { border: 4px dashed rgb(204, 204, 204); margin: 5px; padding: 10px; } .bisa-hover:hover { border: 4px dashed rgb(31, 168, 245); margin: 5px; padding: 10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat;background-size:150px 39px !important; }</style><br /> <br /> <b><b:if cond='data:blog.pageType == &quot;item&quot;'></b><br /> <b><data:post.body/></b><br /> <br /> Pencarian kode cepat tekan tombol keyboard <b>CTRL+F</b> .<br /> Silahkan salin kode berikut di bawah kode <b><data:post.body/></b>. (Setiap template mempunyai struktur berbeda-beda)<br /> <br /> <pre><div class='content-box-infoindong'> <div itemscope='' itemtype='http://schema.org/Review'> <table> <div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'> <meta expr:content='data:post.title' itemprop='name'/> </div> <tr align='justify'> <td width='20%'>Judul </td> <td width='60%'><span itemprop='name'><data:post.title/></span> </td> </tr> <tr align='justify'> <td width='20%'>Deskripsi </td> <td width='60%'><span itemprop='description'><data:post.snippet/></span> </td> </tr> <tr align='justify'> <td width='20%'>Author </td> <td width='60%'><span itemprop='author'><data:post.author/></span> </td> </tr> <tr align='justify'> <td width='20%'>Author Rating </td> <td width='60%'><div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'><meta content='1' itemprop='worstRating'/> <span itemprop='ratingValue'>4</span>/ <span itemprop='bestRating'>5</span> Suara</div> </td> </tr> </table> </div> </div></pre> <br /> <b>Contoh 2 individual rating tampilan di blog</b><br /> <div class="tanpa-hover"> <table> <tbody> <tr align="justify"> <td width="20%">Judul </td> <td width="60%">Memasang Rating Bintang Modifikasi CSS Keren</td> </tr> <tr align="justify"> <td width="20%">Deskripsi </td> <td width="60%">Isikan deskripsi singkat artikel Anda disini </td> </tr> <tr align="justify"> <td width="20%">Author </td> <td width="60%">Isikan nama Anda disini </td> </tr> <tr align="justify"> <td width="20%">Author Rating </td> <td width="60%">4/ 5 Suara </td> </tr> </tbody></table> </div> <br /> <b>Kode css</b> yang harus Anda pasang di template, pertama silahkan cari kode <b>]]></b:skin></b> kemudian paste kode css berikut di atas <b>]]></b:skin> </b><style> .tanpa-hover { border: 4px dashed rgb(31, 168, 245); margin: 5px; padding: 10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat;background-size:150px 39px !important; }</style><br /> <br /> <pre>.content-box-infoindong {     background-color: rgb(241, 246, 249);     border: 4px dashed rgb(31, 168, 245);     margin: 5px;     padding: 10px;     background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important; }</pre> <br /> Untuk pemasangan kode html rating bintang sama dengan contoh 1 individual rating di atas, bisa pakai untuk manual per artikel maupun otomatis di semua artikel. Silahkan pilih salah satu. <br /> <br /> <div class="bendera"> Aggregate Rating</div> <br /> <br /> <b>Contoh 1 aggregate rating tampilan di blog</b><br /> <div class="bisa-hover"> <table> <tbody> <tr align="justify"> <td width="20%">Judul </td> <td width="60%">Memasang Rating Bintang Modifikasi CSS Keren</td> </tr> <tr align="justify"> <td width="20%">Deskripsi </td> <td width="60%">Isikan deskripsi singkat artikel Anda disini </td> </tr> <tr align="justify"> <td width="20%">Author </td> <td width="60%">Isikan nama Anda disini </td> </tr> <tr align="justify"> <td width="20%">Author Rating </td> <td width="60%">4/5 Suara dari 1001 ulasan </td> </tr> </tbody></table> </div> <br /> Di bawah ini merupakan <b>kode css</b> yang harus Anda pasang di template blogger, pertama silahkan cari kode <b>]]></b:skin></b> kemudian paste kode css berikut di atas <b>]]></b:skin></b><br /> <pre>.content-box-infoindong {     border: 4px dashed rgb(204, 204, 204);     margin: 5px;     padding: 10px; } .content-box-infoindong:hover {     background-color: rgb(241, 246, 249);     border: 4px dashed rgb(31, 168, 245);     margin: 5px;     padding: 10px;     background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important; }</pre> <br /> <b>Kode html yang bisa Anda pasang manual per postingan</b> (bisa dipasang langsung ke postingan melalui editor html)<br /> <br /> <pre><div class='content-box-infoindong'> <div itemscope='' itemtype='http://schema.org/Review'> <table> <div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'> <meta content='Tulis judul artikel Anda disini' itemprop='name'/> </div> <tr align='justify'> <td width='20%'>Judul </td> <td width='60%'><span itemprop='name'>Tulis judul artikel Anda disini</span> </td> </tr> <tr align='justify'> <td width='20%'>Deskripsi </td> <td width='60%'><span itemprop='description'>Isikan deskripsi singkat artikel Anda disini</span> </td> </tr> <tr align='justify'> <td width='20%'>Author </td> <td width='60%'><span itemprop='author'>Isikan nama Anda disini</span> </td> </tr> <tr align='justify'> <td width='20%'>Author Rating </td> <td width='60%'><div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/AggregateRating'><meta content='1' itemprop='worstRating'/> <span itemprop='ratingValue'>4</span>/ <span itemprop='bestRating'>5</span> Suara Dari <span itemprop="ratingCount">1001</span> Ulasan</div> </td> </tr> </table> </div> </div></pre> <br /> <b>Bila Anda menginginkan setiap posting memiliki rating bintang secara otomatis</b>, pertama silahkan menuju ke editor template kemudian cari kode<br /> <br /> <b><b:if cond='data:blog.pageType == &quot;item&quot;'></b><br /> <b><data:post.body/></b><br /> <br /> Pencarian kode cepat tekan tombol keyboard <b>CTRL+F</b> .<br /> Silahkan salin kode berikut di bawah kode <b><data:post.body/></b>.<br /> <br /> <pre><div class='content-box-infoindong'> <div itemscope='' itemtype='http://schema.org/Review'> <table> <div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'> <meta expr:content='data:post.title' itemprop='name'/> </div> <tr align='justify'> <td width='20%'>Judul </td> <td width='60%'><span itemprop='name'><data:post.title/></span> </td> </tr> <tr align='justify'> <td width='20%'>Deskripsi </td> <td width='60%'><span itemprop='description'><data:post.snippet/></span> </td> </tr> <tr align='justify'> <td width='20%'>Author </td> <td width='60%'><span itemprop='author'><data:post.author/></span> </td> </tr> <tr align='justify'> <td width='20%'>Author Rating </td> <td width='60%'><div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/AggregateRating'><meta content='1' itemprop='worstRating'/> <span itemprop='ratingValue'>4</span>/ <span itemprop='bestRating'>5</span> Suara Dari <span itemprop="ratingCount">1001</span> Ulasan</div> </td> </tr> </table> </div> </div></pre> <br /> <b>Contoh 2 aggregate rating tampilan di blog </b><br /> <div class="tanpa-hover"> <table> <tbody> <tr align="justify"> <td width="20%">Judul </td> <td width="60%">Memasang Rating Bintang Modifikasi CSS Keren</td> </tr> <tr align="justify"> <td width="20%">Deskripsi </td> <td width="60%">Isikan deskripsi singkat artikel Anda disini </td> </tr> <tr align="justify"> <td width="20%">Author </td> <td width="60%">Isikan nama Anda disini </td> </tr> <tr align="justify"> <td width="20%">Author Rating </td> <td width="60%">4/5 Suara dari 1001 ulasan </td> </tr> </tbody></table> </div> <br /> <b>Kode css yang harus Anda pasang di template</b>, pertama silahkan cari kode <b>]]></b:skin></b> kemudian paste kode css berikut di atas <b>]]></b:skin></b><br /> <br /> <pre>.content-box-infoindong {     background-color: rgb(241, 246, 249);     border: 4px dashed rgb(31, 168, 245);     margin: 5px;     padding: 10px;     background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important; }</pre> <br /> Untuk pemasangan kode html rating bintang sama dengan contoh 1 aggregate rating di atas, bisa pakai untuk manual per artikel maupun otomatis di semua artikel.<br /> <div> <br /></div> <div class="bendera"> Catatan</div> <div> <br /></div> <div> <div> <ul> <li>Silahkan memilih salah satu tipe, individual atau aggregate rating.</li> </ul> </div> <div> <br /></div> <div> <ul> <li>Khusus manual rating, beberapa tulisan meliputi "Tulis judul artikel Anda disini, Isikan deskripsi singkat artikel Anda disini, Isikan nama Anda disini" silahkan diganti.</li> </ul> </div> <div> <br /></div> <div> <ul> <li>Angka 4 dalam author rating bisa diganti dengan angka 1 sampai 5</li> </ul> </div> <div> <br /></div> <div> <ul> <li>WorstRating, bestRating, ratingValue bisa diubah ke bentuk persen, misal WorstRating = 1%, besstRating = 100%, ratingValue   =  75%.</li> </ul> <div> Di bawah ini merupakan contoh tampilan rating bintang pada google rich snipets tool dengan value persen :</div> </div> </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/AVvXsEgi24CRX9cC8pInNOPzVtIgkz2oyY9XCdQHDKpCOaVxezu_or7UyEW3DMKI6TjGQ9oYJ1MojtyWM7HHIejj3-nQ8BZufL7-2YZnViYrpIYGr-EwJzaJm9nleXamBX-CCRkck2EGiv5Bdnk/s1600/pembuatan-rating-bintang-persen.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Contoh Rating Persen" border="0" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi24CRX9cC8pInNOPzVtIgkz2oyY9XCdQHDKpCOaVxezu_or7UyEW3DMKI6TjGQ9oYJ1MojtyWM7HHIejj3-nQ8BZufL7-2YZnViYrpIYGr-EwJzaJm9nleXamBX-CCRkck2EGiv5Bdnk/s400/pembuatan-rating-bintang-persen.png" title="Contoh Rating Persen" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Contoh Rating Persen</td></tr> </tbody></table> <div> Sekian Terima Kasih !<br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://www.infoindong.com/2013/02/pembuatan-rating-bintang-disertai-css.html</i></span></div>

Memasang Rating Bintang Modifikasi CSS Keren

Modifikasi Rating Bintang dengan CSS Pembuatan Rating Bintang Modifikasi Css Menarik ini merupakan postingan lanjutan dari artikel sebel...

Selengkapnya »

Cara Membuat Halaman Statis Full Width

<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/AVvXsEghaBY907zrCNFGIUC63pAEnOab0VN25Fb4PXo16AOvy3W_qZ9o5zBGAJO6VnDmCJiJnPhnxv6v4vItIAd3HSr4AClYByD-oBzMeP0muFGLbqHBpws6vivWoF2_HKx6TZA0cqSvgn1xZhA/s1600/Full+Width.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Laman Full Statis di Blog" border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghaBY907zrCNFGIUC63pAEnOab0VN25Fb4PXo16AOvy3W_qZ9o5zBGAJO6VnDmCJiJnPhnxv6v4vItIAd3HSr4AClYByD-oBzMeP0muFGLbqHBpws6vivWoF2_HKx6TZA0cqSvgn1xZhA/s400/Full+Width.png" title="Laman Full Statis di Blog" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Laman Full Statis di Blog</td></tr> </tbody></table> <div style="text-align: justify;"> Yang dimaksud dengan full width disini merupakan halaman statis yang memiliki lebar 100% atau tidak sama sekali memiliki sidebar khusus pada halaman statis atau static page. Dengan memiliki halaman statis atau static page yang memiliki lebar yang full alias tanpa sidebar maka akan terlihat semakin besar dan juga berbeda dengan tampilan seperti biasanya. Agar halaman statis menjadi full width atau lebar penuh, kita bisa menggunakan trik ini dengan kode atau tag conditional yang bisa menempatkan suatu widget dimana yang kita mau.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Dengan menggunakan tag conditional dan ditambahkan sedikit kode CSS yang memerintahkan untuk menjadi full width atau lebar penuh sehingga halaman statis atau static page ini tidak memiliki sidebar. Tidak hanya itu saja, dalam halaman statis juga kita dapat menyembunyikan kotak komentar atau tidak menampilkan kotak komentar khusus pada static page atau halaman statis.</div> <br /> <h3> Langkah-langkahnya sebagai berikut :</h3> <br /> <br /> 1. Masuk ke <b>Blogger.com</b><br /> 2. Klik <b>Template => Edit HTML</b><br /> 3. Cari kode <span style="color: #ea9999;">]]</b:skin></span> atau kode <span style="color: #ea9999;"></style></span><br /> 4. <b>Salin</b> kode css dibawah ini, lalu <b>Paste</b> dibawah kode <span style="color: #ea9999;">]]</b:skin></span> atau kode <span style="color: #ea9999;"></style></span><br /> <br /> <pre><b:if cond='data:blog.pageType == &quot;static_page&quot;'> <style> .sidebar-wrapper,.comments{display:none;} #main-wrapper{width: 100%} </style></pre> <br /> 5. <b>Save Template</b><br /> <br /> <span style="font-size: large;"><b>NB :</b></span><br /> - Jika kode diatas tidak berfungsi alangkah baiknya cek setiap kode css pada bagian sidebar, kotak komentar dan lebar halaman yang terdapat dalam template blog Anda, kurang lebihnya seperti dibawah ini :<br /> <br /> <span style="color: #ea9999;">.sidebar-wrapper</span> : Ganti dengan kode css sidebar template Anda, biasanya kode css sidebar seperti ini (<span style="color: #ea9999;">.sidebar-wrapper</span> atau <span style="color: #ea9999;">.sidebar</span> atau <span style="color: #ea9999;">#sidebar-wrapper</span> atau <span style="color: #ea9999;">#sidebar</span>).<br /> <span style="color: #ea9999;">.comments</span> : Ganti dengan kode css kotak komentar Anda, biasanya kode css kotak komentar seperti ini (<span style="color: #ea9999;">.comments</span> atau <span style="color: #ea9999;">#comments</span> atau <span style="color: #ea9999;">.comment</span> atau <span style="color: #ea9999;">#comment</span>).<br /> <span style="color: #ea9999;">#main-wrapper</span> : Merupakan kode untuk menampilkan halaman agar menjadi full width 100%.<br /> <br /> Dibawah ini adalah kode css agar kotak komentar muncul pada halaman statis atau static page :<br /> <br /> <pre><b:if cond='data:blog.pageType == &quot;static_page&quot;'> <style> .sidebar-wrapper{display:none;} #main-wrapper{width: 100%} </style></pre> <br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://www.ficripebriyana.com/2014/07/cara-membuat-halaman-statis-full-width-di-blog.html</i></span>

Cara Membuat Halaman Statis Full Width

Laman Full Statis di Blog Yang dimaksud dengan full width disini merupakan halaman statis yang memiliki lebar 100% atau tidak sama seka...

Selengkapnya »

Cara Memasang Spoiler di Postingan 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/AVvXsEjpFX198ojogenFxZzAT6wMhb4BuLuGjM-FwlsHgYq7AkS1VP5tkUBDALL8N6eqgBac7c5Wj11wiXAo69LERxs4elAQmHMpyl1_1RGCrf_WtVStE34p-VMik4GDgOqRToYLEBaY2svvOtg/s1600/membuat+Spoiler.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Pasang Spoiler di Blog" border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFX198ojogenFxZzAT6wMhb4BuLuGjM-FwlsHgYq7AkS1VP5tkUBDALL8N6eqgBac7c5Wj11wiXAo69LERxs4elAQmHMpyl1_1RGCrf_WtVStE34p-VMik4GDgOqRToYLEBaY2svvOtg/s320/membuat+Spoiler.PNG" title="Pasang Spoiler di Blog" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Pasang Spoiler di Blog</td></tr> </tbody></table> Ini ada cara memasukkan spoiler di postingan Blog, dengan efek Slide atau dengan efek kebawah seperti ber-animasi.<br /> <br /> <h2> Tutorial</h2> <br /> <br /> <br /> <ul> <li>Simpan kode CSS berikut ini, diatas kode <span style="color: lime;">></b:skin></span></li> </ul> <div> <br /></div> <pre>#flippy { text-align: center; } #flippy button { background: #aa65c7; color: #fff; text-align: center; margin: 0 auto; border: none; border-radius: 3px; padding: 8px 16px; margin: 10px auto; font-size: 14px; font-weight: bold; box-shadow: 0px 3px 0px 0px #883da7; vertical-align: middle; cursor: pointer; text-shadow: 0 1px rgba(0, 0, 0, 0.3); transition: background 0.1s ease-in-out; } #flippy button:hover, #flippy button:focus { background: #9e4fbf; outline: none; } #flippanel { padding: 1px; text-align: left; background: #f5f5f5; border: 0px; } #flippanel { padding: 24px; display: none; }</pre> <br /> <br /> <ul> <li>Selanjutnya, Simpan kode JQuery berikut diatas kode <span style="color: lime;"></body></span></li> </ul> <div> <br /></div> <pre><script> $(document).ready(function() { $("#flippy").click(function() { $("#flippanel").slideToggle("normal"); }); }); </script></pre> <br /> <br /> <ul> <li>Kemudian, Terapkan kode berikut ini di postingan blog mode HTML</li> </ul> <div> <br /></div> <pre><div id="flippy"><button>Cekidot</button></div> <div id="flippanel"> ---ISI KONTEN ANDA TERAPKAN DISINI--- </div></pre> <br /> <div style="text-align: center;"> <span style="font-size: large;"><a href="http://codepen.io/arlinadesign/full/QwXzOR/" target="_blank">DEMO </a></span></div> <br /> <br /> <span style="font-size: x-small;"><i>Sumur : http://www.arlinadzgn.com/2014/11/memasang-spoiler-di-postingan.html</i></span>

Cara Memasang Spoiler di Postingan Blog

Pasang Spoiler di Blog Ini ada cara memasukkan spoiler di postingan Blog, dengan efek Slide atau dengan efek kebawah seperti ber-animasi...

Selengkapnya »

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 »

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 »

Cara Memasang Persentase Scroll Bar di Blog Valid CSS3 dan HTML5

<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/AVvXsEjfM74NwjGc4tElVTFcEsjlixEL3zF2YnoJKITbgwNmwG-r3HCyhQ8s31XpUZCPkm4CHD41FqENa4dPuirkZ1GUru4iiTMlC6r3XX2HT1D0DVKIvL9oe3tCNi8ZWCR9q1l8j7klFGQg1Ck/s1600/Persentase+Scrollbar+di+Blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Pasang Persentase Scrollbar di Blog" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfM74NwjGc4tElVTFcEsjlixEL3zF2YnoJKITbgwNmwG-r3HCyhQ8s31XpUZCPkm4CHD41FqENa4dPuirkZ1GUru4iiTMlC6r3XX2HT1D0DVKIvL9oe3tCNi8ZWCR9q1l8j7klFGQg1Ck/s400/Persentase+Scrollbar+di+Blog.png" title="Pasang Persentase Scroll di Blog" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Pasang Persentase Scroll di Blog</td></tr> </tbody></table> <div style="text-align: justify;"> Beberapa para Blogger ada yang menggunakan persentase scrollbar di blognya, untuk mengetahui berapa persentase dari tinggi layout dari halaman yang dikunjungi. Widget ini valid HTML5 dan CSS3. Langsung saja lihat cara membuat persentase scroll di blog.</div> <br /> <h4> Tutorial :</h4> <br /> 1. Masuk Blogger anda<br /> 2. Klik Template > edit HTML<br /> 3. Cari kode <span style="color: lime;">]]></b:skin></span> atau <span style="color: lime;"></style></span><br /> 4. Copy code berikut ini, lalu Paste diatas <span style="color: lime;">]]></b:skin></span> atau<span style="color: lime;"> </style></span><br /> <br /> <pre>/* Scroll Persentase */ #scroll{display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#4B4B4B;color:#FFF;border-radius:3px} #scroll:after{position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;border:4px solid transparent;border-left-color:#4B4B4B}</pre> <br /> <span style="color: red;"><b>* Keterangan</b></span> :<br /> <blockquote class="tr_bq"> <br /> <ul> <li>Kode right:5px; > Jarak dari Scrollbar, jika angkanya semakin besar, maka jarak dari scrollbar semakin jauh</li> </ul> <ul> <li>Kode padding:3px 8px; > Tinggi dan lebarnya kotak persentase</li> </ul> <ul> <li>Kode background-color:#4B4B4B; > Warna dari background kotak persentase</li> </ul> <ul> <li>Kode color:#fff; > Warna huruf pada kotak persentase</li> </ul> <ul> <li>Kode border-radius:3px} > Memberikan efek kotak yang sudutnya melengkung</li> </ul> </blockquote> <div> 5. Cari code <span style="color: lime;"><body></span></div> <div> 6. Salin kode HTML dibawah, lalu Tempel dibawah kode <span style="color: lime;"><body></span></div> <div> <br /></div> <pre><div id='scroll'/></pre> <br /> 7. Selanjutnya lagi, cari kode <span style="color: lime;"></body></span><br /> 8. Salin kode JQuery berikut ini, lalu Tempel diatas kode <span style="color: lime;"></body></span><br /> <br /> <pre><script type='text/javascript'> /*<![CDATA[*/ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2; $('#scroll') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(); }, 1500); }); /*]]>*/ </script></pre> <br /> 9. Cari kode <span style="color: lime;"></head></span><br /> 10. Copy kode JavaScript berikut ini, lalu Paste diatas kode <span style="color: lime;"></head></span><br /> <br /> <pre><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/></pre> <br /> <br /> <span style="color: red;">* Peringatan</span> :<br /> Kalau blog anda sudah terdapat kode seperti diatas / jquery.min.js, anda tidak perlu lagi menggunakan kode diatas, atau untuk jaga2, lebih baik pasang saja.<br /> <br /> <i>Sumur : http://www.masyadi.com/2014/10/cara.buat.persentase.scrollbar.blog.html</i>

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 »