 |
| hosting gratis mudah dan berkualitas googlr drive |
(Edisi Copas dari : http://berbagi-ilmu-terlengkap.blogspot.co.id)
panduan lengkap tentang blogger - Cara Termudah membuat Hosting File HTML, CSS dan Javascript ke Google Drive Siapa yang tidak kenal dengan layanan penyimpanan milik Google yang sangat membantu para master blogger. Pengguna blogspot biasanya menggunakan Google drive untuk menyimpan file CSS, Javascript, HTML dan sejenisnya, hosting yang sangat berkualitas dan gratis ini memang sangat mudah untuk di pelajari, khusus nya bagi kaum yang masih baru di dunia blogger.
baca juga : Mengatasi Tag H1 atau judul blog yang tidak ditemukan
selain keamanan nya yang super ketat, google drive ini juga menyediakan fitur aplikasi seperti Formulir Pemesanan Online Presentasi, Pembuatan Contact Form, Upload File, Pengolah Angka, Pengolah Katadan masih banyak lagi, ini semua diberikan dengan penyimpanan gratis sebesar 15GB. oke langsung saja pada topik pembahasan kita yaitu cara menyimpan file HTML, CSS dan Javascript. Simak baik-baik langkah-langkah nya di bawah ini :
baca juga : Mengatasi Tag H1 atau judul blog yang tidak ditemukan
selain keamanan nya yang super ketat, google drive ini juga menyediakan fitur aplikasi seperti Formulir Pemesanan Online Presentasi, Pembuatan Contact Form, Upload File, Pengolah Angka, Pengolah Katadan masih banyak lagi, ini semua diberikan dengan penyimpanan gratis sebesar 15GB. oke langsung saja pada topik pembahasan kita yaitu cara menyimpan file HTML, CSS dan Javascript. Simak baik-baik langkah-langkah nya di bawah ini :
LANGKAH PERTAMA MEMBUAT KODE CSS DAN JAVASCRIPT BLOG ANDA :
A. Cara membuat kode css untuk di simpan di google drive.
- Hal pertama yang perlu Anda lakukan adalah untuk menyalin semua coding StyleSheet ( CSS ). Anda salin dari template Anda ke notepad kosong. Pergi ke Blogger »Situs Anda» Template»Edit HTML» Lanjutkan dan mencari tag <b:skin><! [CDATA[. Setelah menemukan tag ini, Anda akan melihat potongan besar CSS coding, jadi menyalin semua CSS coding sampai tag ]]> </ b: skin>. Untuk lebih jelasnya lihat lihat gambar di bawah ini, klik gambar untuk memperjelas nya :
 |
| Ambil semua kode yang terletak di antara <b:skin><! [CDATA[ dengan ]]> </ b: skin> lalu pindahkan ke notepat dengan format style.css |
- Jika masih bingung masalah notepad begini jadi anda buka dulu notepat anda dan copykan file yang ada di antara <b:skin><! [CDATA[ dengan ]]> </ b: skin> yang akan di simpan di google drive anda, simpan dengan nama file tersebutstyle.css untuk lebih jelas nya masalah penyimpanan notepad perhatikan baik-baik gambar di bawah ini :
 |
| Klik menu file di notepad lalu pilih save as... |
 |
| yang pertama rubah nama menjadi style.css trus teks dokument nya ubah ke All file yang terahir klik save. |
B. Cara membuat kode javasript untuk di simpan di google drive.
- Cara nya tidak jauh berbeda dengan menyimpan file css. Pergi ke Blogger »Situs Anda» Template»Edit HTML» Lanjutkan dan mencari tag </head>kenapa kode </head> karena file javascript ataujs ini terletak di antara di bawah kode </head>dan di atas kode </body> contoh file javasriptatau js di bawah ini yang terlalu panjang sehinga sangat berpengaruh dengan kecepatan loading blog kita, makan nya harus kita simpan diGOOGLE DRIVE :
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
Dan langkah penyimpanan nya hampir sama dengan menyimpan file CSS. Yaitu buka notepad anda lalu cari file nya yang awal nya <script type='text/javascript'> ....isi kode ...</script> yang ingin anda simpan keGOOGLE DRIVE yang terlalu banyak isi nya seperti contoh DALAM KOLOM DI ATAS yang berbeda hanya format nya saja. Jika CSS dia wajib mengunakan nama STYLY.CSS maka JAVASCRIPT bebas dengan nama apapun tetapi format ahir nya harus JS. contoh saja nama nya bunga, maka cara menyimpan javasript di notepad anda bunga.js
LANGKAH KE-2 MEMBUAT PENYIMPANAN KODE TADI KE GOOGLE DRIVE :
Langkah yang KE-2 ini adalah untuk meng-upload file style.css maupun js yang anda buat di notepad tadi. oke langsung saja :- Petama silahkan masuk ke halaman Google Drive dan log in menggunakan akun google anda.
- Buatlah folder baru dengan cara klik tombol"BUAT" Kemudian pilih "Folder" lalu buat nama folder dan klik "BUAT", Jika bahasa browser anda mengunakan bahasa ingris maka Pilih tombol "Create" lalu pilih "Folder". Sekarang nama folder apa pun yang Anda inginkan seperti Webhosting,hosting, file web dan lain-lain Pada akhirnya pokok nya terserah anda saja jika masalah membuat folder yang penting mudah anda cari nanti nya. lalu pilih "Create" untuk menyetujui. Untuk lebih jelas nya perhatikan gambar di bawah ini :
 |
| jika browser anda mengunakan bahasa indonesia |
 |
| jika browser anda mengunakan bahasa ingris |
- Sekarang buka folder yang telah Anda buat beberapa saat yang lalu (klik kanan pada namafolder dan pilih Open). Pada memilih upload ikonhadir di sisi kiri layar Anda, daftar drop-down akan muncul yang akan memberikan dua pilihan yaitu file dan folder. Cukup pilih "File" dan pindah ke langkah berikutnya. Untuk lebih jelas nya perhatikan gambar di bawah ini :
 |
| klik thumbail di sebelah kanan create lalu pilih files |
- Sekarang akan meminta Anda untuk memilih dokumen sebagai contoh anda ingin menyimpankode css maka cari file yang anda buat di notepad tadi yaitu style.css klik sekali tulisanstyle.css lalu klik open dan tungu lah beberapa detik file anda sedang di unduh. untuk lebih jelas nya perhatikan gambar 1 dan 2 di bawah ini :
 |
| gambar 1. pilih file style.css yang anda buat tadi lalu klik open |
 |
| gambar 2. tungu proses upload selesay biasa nya hanya beberapa detik saja |
- Setelah upload selesai, tekan tombol "Share" di dekat tulisan uploaded. seperti yang terlihat pada gambar 2 di atas. Sekarang Anda harus membuat file ini tersedia untuk publik. Tekan perubahan, dan pilih "publik di web" sehingga siapapun di Internet dapat menemukan dan mengakses. sekarang tekan tombol Save untuk mengubah pengaturan anda. Untuk lebih jelas nya perhatikan gambar di bawah ini :
 |
| ikuti langkah-langkah di gambar dengan benar |
LANGKAH TERAHIR MENDAPATKAN LINK HOSTING DARI GOOGLE DRIVE :
Langkah terakhir adalah untuk mempersiapkan link hosting yang tepat file style.css atau js Anda. Klik kanan pada file yang Anda upload beberapa saat pergi dan pilih "Share". Salin URL hadir seluruh di area teks di bawah "Link untuk berbagi". Untuk lebih jelasnya perhatikan gambar di bawah ini : |
| pilih tulisan share yaitu link untuk berbagi |
 |
| agar lebih mudah salin alamat tersebut ke notepad anda |
Mencari Link File.
Link yang anda copas ke notepad tadi kurang lebih seperti di bawah ini :https://drive.google.com/file/d/0B7Ww-zk2Hdv-UnZJZ0NWcnNONjQ/edit?usp=sharing
Copas kode yang saya warnai diatas, gabungkan dengan URL di bawah ini :https://googledrive.com/host/
Sehingga hasilnya jadi seperti di bawah ini :https://googledrive.com/host/Ww-zk2Hdv-UnZJZ0NWcnNONjQ
Cara Menyimpan File di Template Blog/Web anda :
Jika file berupa CSS, maka simpan di bawah <head>dengan strukturnya seperti di bawah ini :
<link href="https://googledrive.com/host/Ww-zk2Hdv-UnZJZ0NWcnNONjQ" rel="stylesheet" type="text/css"/>
Jika file berupa Javascript, maka simpan di bawah</head> atau di atas </body> dengan strukturnya seperti di bawah ini :
<script src="https://googledrive.com/host/Ww-zk2Hdv-UnZJZ0NWcnNONjQ" type="text/javascript"></script>
SEDIKIT CATATAN...
Data yang ada di dalam template yang anda masukan melalui notepad untuk di simpan ke google drive dihapus dan di ganti dengan langkah terahir tadi.kecuali CSS kita hapus semua nya di antara kode<b:skin><! [CDATA[ dengan ]]> </ b: skin> yang anda masukan semua ke notepad. anda meletakan kodestyle.css di bawah kode <head>.
0 comments:
Post a Comment