Bagi anda yang menggunakan layanan Web Hosting Google Drive, bersiap-siap lah untuk migrasi aset web penting anda ke layanan hosting yang lainnya. Kenapa bisa? Google telah mengumumkan hal tersebut lewat email para pengguna layanan Google Drive, bahwa per tanggal 31 Agustus 2016 Google akan menghentikan penayangan konten melalui "googledrive.com/host/[id]" dan halaman Web tidak akan dapat diakses lagi. Berikut kutipan email selengkapnya tentang penutupan layanan Hosting Google Drive.


Dalam isi email disebutkan bahwa layanan Web Hosting Google Drive Resmi ditutup bagi Google Drive user dan developers, layanan tersebut mencakup hosting halaman web dan aset web lainnya. Anda tidak perlu khawatir, pihak Google telah memberikan solusi untuk media penyimpanan aset website. Salah satunya adalah Blogger, untuk media penyimpanan berupa image dan video. Namun bagaimana jika anda memiliki aset website yang lainnya seperti static halaman web, javascript, css, dll. Google menyarankan menggunakan layanan Firebase Hosting untuk media penyimpanan.

Hmm... bagi saya pribadi memiliki sedikit pertanyaan, apakah google hanya menghentikan akses layanan terhadap aset web yang kita miliki atau keseluruhan layanan Google Drive tersebut. So... Kita tunggu saja tanggal 31 Agustus 2016 nanti.

Privacy Policy for Kutubaru
If you require any more information or have any questions about our privacy policy, please feel free to contact us here.
At Kutubaru , the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by Kutubaru and how it is used.

Log Files
Like many other Web sites, makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track users movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.

Cookies & 3rd Party Advertisements
Kutubaru does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser. Some of our advertising partners may use cookies and web beacons on our site.

These third-party ad servers or ad networks use technology to the advertisements and links that appear on Kutubaru send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see.

Kutubaru has no access to or control over these cookies that are used by third-party advertisers.

You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices. Kutubaru's privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites. If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.

Beberapa hari ini kami merasa tidak nyaman dengan layout tamplate yang kami pakai pada blog [ KutuBaru ] jika di buka menggunakan browser Google Chrome, dikarenakan terdapat Error Javascript Tidak Berjalan Pada Google Chrome. Maka kami pun mencoba mencari sumber permasalahan tersebut karena terdapat beberapa widget kami yang tidak berjalan sempurna jika visitor blog menggunakan browser Google Chrome, yaitu diantaranya :

1. Newstiker tidak berfungsi.
2. Social Counter tidak berfungsi.
3. Sticky Widget tidak berfungsi.
4. Highlighter tidak berfungsi.
5. Histat Counter tidak berfungsi.
6. Button smiley dan Converter tidak berfungsi, dan masih banyak lagi.

Pada awalnya kami sempat berpendapat bahwa Error Javascript Tidak Berjalan Pada Google Chrome di timbulkan oleh browser Google Chrome itu sendiri, namun jika visitor mengunjungi blog [ KutuBaru ] menggunakan browser selain Google Chrome maka tidak terlihat adanya error tersebut. Berarti error yang kami alami bersumber dari template yang kami gunakan, maka kamipun mencoba mencari sumber error tersebut. Lagi-lagi kami mengalami kendala saat melakukan fix tersebut, kenapa tidak? Karena apa mungkin kita mesti cek satu persatu Javascript yang ada pada template tersebut.

Lalu timbul idea untuk memanfaatkan fitur Console pada browser Google Chrome.

Langkah1	Buka halaman homepage situs menggunakan browser Google Chrome
Langkah2	Klik tombol Setting, pada pojok kanan atas browser.
Langkah3	Pada bagian drop menu pilih Alat Lainnya > Konsol Javascript atau dengan shortcut Ctrl+Shift+J.

Setelah terbuka Konsol Javascript, maka terlihat sudah sumber permasalahan dari Error Javascript Tidak Berjalan Pada Google Chrome, berikut sedikit Screenshot error tersebut.

Dan berikut pesan yang terdapat pada Screenshot di atas.

Sekarang sudah dapat di pastikan bahwa sumber masalahnya yaitu dari jQuery pada template yang kami gunakan, sekarang kita tinggal melakukan fix pada error tersebut.

FIX Error Javascript Tidak Berjalan Pada Google Chrome

Login pada halaman blogger anda, lalu masuk pada bagian template, pilih Edit HTML, lalu cari bagian jQuery.min.js yang anda terapkan. Untuk mempermudahnya gunakan menu find dengan shortcut Ctrl+F lalu ketikan jQuery.min.js, maka akan terlihat penggalan code seperti dibawah. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Buka alamat dari plugin jQuery tersebut, scroll pada bagian bawah lalu lihat isi dari jQuery tersebut.


Ternyata jQuery yang kami gunakan yaitu jQuery v1.7.2 dari ajax.googleapis.com merupakan jQuery yang tidak sempurna scriptnya. Maka solusi untuk memperbaiki Error Javascript Tidak Berjalan Pada Google Chrome yaitu dengan mengganti plugin jQuery dengan plugin jQuery versi yang lainnya.

Dalam melakukan templating pastinya anda memerlukan sebuah icon untuk menghasilkan layout yang diinginkan. Karena pada template yang kami gunakan telah terpasang Font Awesome v.3.1.1 maka kami membuat List Icon Font Awesome 3.1.1 Lengkap Dengan CSS Value Content sebagai bahan catatan kami dalam melakukan templating. Untuk Dapat menggunakan List Icon Font Awesome 3.1.1 pastinya template anda harus terpasang font-awesome.min.cssterlebih dahulu. Jika belum terpasang, silahkan ikuti langkah-langkah berikut.

1. Tambahkan <link href='/font-awesome.min.css' rel='stylesheet' type='text/css'/> pada template anda.
2. Basic untuk penulisannya menggunakan tag <i class='nama-icon'/>

Berikut List Icon Font Awesome 3.1.1 Lengkap Dengan CSS Value Content

Kustomisasi Font Awesome 3.1.1

Ukuran Icon Font Awesome 3.1.1
Untuk merubah font size dari Icon Font Awesome 3.1.1 anda bisa menggunakan class icon-large, icon-2x, icon-3x, icon-4x, icon-5x.
Contoh :

icon-large	icon-2x	icon-3x	icon-4x	icon-5x

Animasi Icon Font Awesome 3.1.1
Anda bisa menambahkan class icon-spin untuk animasi icon font awesome.
Contoh :

Rotasi Icon Font Awesome 3.1.1
Untuk dapat merotasi icon pada font awesome, tambahkan class icon-rotate-* atau icon-flip-*
Contoh :

icon-rotate-90	icon-rotate-180	icon-rotate-270	icon-flip-horizontal	icon-flip-vertical

Sampai disini jika masih ada yang dipertanyakan, silahkan diskusikan pada kolom komentar.

Untuk mengabadikan momen-momen penting atau bahkan untuk mempersentasikan sebuah product yang anda jual, mungkin anda memerlukan sebuah galeri photo. Untuk membuat Responsive Photo Galeri Menggunakan Bootstrap Framework bukanlah hal yang sulit, dengan catatan anda telebih dahulu memahami skema dari Photo Galeri tersebut.

Karena di sini kami akan membuat Responsive Photo Galeri Menggunakan Bootstrap Framework, tentunya anda harus memahami terlebih dahulu tentang sistem Kolom Pada Bootstrap Framework sebelum anda memulai pada langkah selanjutnya, karena kita akan mengacu pada sistem Kolom Pada Bootstrap Framework tersebut.

Ok... untuk mempersingkatnya, saya asumsikan anda telah memahami tentang bootstrap grid serta telah menerapkan bootstrap.min.css dan bootstrap.min.js pada template yang anda gunakan.

Skema Responsive Photo Galeri Menggunakan Bootstrap Framework

Secara sederhana, responsive photo galeri dapat kita buat dengan skema sebagai berikut.

<div class="container">
<ul>
<li><img src="photo1.jpg"/></li>
... photo 2 ...
... photo 3 ...
</ul>
</div>
Simpan project photo galeri anda lalu coba lihat lewat browser, maka hasilnya akan tampak seperti dibawah.


Hasilnya masih terlihat tanpa style layout photo galerinya. Sekarang kita tambahkan class pada bootstrap untuk mendapatkan layout photo galeri yang kita inginkan. Pertama kita tambahkan class "row" pada tag ul, untuk list itemnya kita tambahkan class "col-lg-2″, "col-md-2″, "col-sm-3″ dan "col-xs-4″.

<div class="container">
<ul class="row">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="photo1.jpg"/></li>
... photo 2 ...
... photo 3 ...
</ul>
</div>

Save project anda, lalu lihat hasilnya kembali lewat browser, maka akan terlihat layout seperti dibawah.
Sampai pada tahap ini, sudah terlihat layout yang kita inginkan dan tentunya responsive ( silahkan resize browser anda ). Sekarang kita tinggal menambahkan css style.

ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
ul li {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
Langkah selanjutnya kita membuat lightbox untuk menampilkan image dengan ukuran yang sebenarnya, ketika kita mengklik thumbnail pada Responsive Photo Galeri. Skema lightbox yang kami gunakan disini memanfaatkan modal pada bootstrap framework yang dapat anda buat seperti contoh dibawah.

<div class="modal fade" id="KutubaruModal" tabindex="-1" role="dialog" aria-labelledby="KutubaruModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
Lalu tambahkan javascript untuk dapat menjalankan lightbox atau modal tersebut.

$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';

//Show
var index = $(this).parent('li').index();

var html = '';
html += img;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+2) + '">next &raquo;</a>';
html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>';
html += '</div>';

$('#KutubaruModal').modal();
$('#KutubaruModal').on('shown.bs.modal', function(){
$('#KutubaruModal .modal-body').html(html);
//new code
$('a.controls').trigger('click');
})
$('#KutubaruModal').on('hidden.bs.modal', function(){
$('#KutubaruModal .modal-body').html('');
});
});
})
//button controls
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');
$('.modal-body img').attr('src', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('ul.row li').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});
Sekarang Responsive Photo Galeri Menggunakan Bootstrap Framework telah siap untuk dipergunakan. Untuk lebih jelasnya silahkan perhatikan pada demo dibawah.

DEMO Responsive Photo Galeri Menggunakan Bootstrap Framework

Demo By [ KutuBaru ]
Silahkan diskusikan pada kolom komentar jika masih ada yang di pertanyakan.