Cara Menghostingkan CSS Blogger dengan TortoiseSVN

Tweet

Cara Menghostingkan CSS dengan TortoiseSVN 100% Bekerja - D-Copy Blog | Hai sobat blogger, berhubung semakin pesatnya blogger tahun 2013 ini, tak kalah semakin bertambah pesat juga para pelagiator-pelagiator untuk mencuri desaign dari blog ataupun website. Disini kita akan membahas bagaimana menghostingkan CSS blog Blogger.

Langkah Menghostingkan CSS Blogger dengan TortoiseSVN :

1. Download TortoiseSVN » instal seperti biasa » restart komputer Anda karena aplikasi ini akan terintegrasi dengan menu konteks/menu klik kanan (shell command).
2. Setelah itu klik kanan pada desktop Anda » TortoiseSVN » Setting :

     3.  Akan muncul kotak dialog seperti ini. Klik General dan klik tombol Edit:

Pengaturan TortoiseSVN

Setelah file config terbuka, salin kode ini dan letakkan di bawah # Makefile = svn:eol-style=native

[miscellany]
enable-auto-props = yes

[auto-props]
# Scriptish formats
*.bat        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.bsh        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell
*.cgi        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.cmd        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.js         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript
*.php        = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php
*.pl         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable
*.pm         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl
*.py         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable
*.sh         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable

# Image formats
*.bmp        = svn:mime-type=image/bmp
*.gif        = svn:mime-type=image/gif
*.ico        = svn:mime-type=image/ico
*.jpeg       = svn:mime-type=image/jpeg
*.jpg        = svn:mime-type=image/jpeg
*.png        = svn:mime-type=image/png
*.tif        = svn:mime-type=image/tiff
*.tiff       = svn:mime-type=image/tiff

# Data formats
*.pdf        = svn:mime-type=application/pdf
*.avi        = svn:mime-type=video/avi
*.doc        = svn:mime-type=application/msword
*.eps        = svn:mime-type=application/postscript
*.gz         = svn:mime-type=application/gzip
*.mov        = svn:mime-type=video/quicktime
*.mp3        = svn:mime-type=audio/mpeg
*.ppt        = svn:mime-type=application/vnd.ms-powerpoint
*.ps         = svn:mime-type=application/postscript
*.psd        = svn:mime-type=application/photoshop
*.rtf        = svn:mime-type=text/rtf
*.swf        = svn:mime-type=application/x-shockwave-flash
*.tgz        = svn:mime-type=application/gzip
*.wav        = svn:mime-type=audio/wav
*.xls        = svn:mime-type=application/vnd.ms-excel
*.zip        = svn:mime-type=application/zip

# Text formats
.htaccess    = svn:mime-type=text/plain
*.css        = svn:mime-type=text/css
*.dtd        = svn:mime-type=text/xml
*.html       = svn:mime-type=text/html
*.ini        = svn:mime-type=text/plain
*.sql        = svn:mime-type=text/x-sql
*.txt        = svn:mime-type=text/plain
*.xhtml      = svn:mime-type=text/xhtml+xml
*.xml        = svn:mime-type=text/xml
*.xsd        = svn:mime-type=text/xml
*.xsl        = svn:mime-type=text/xml
*.xslt       = svn:mime-type=text/xml
*.xul        = svn:mime-type=text/xul
*.yml        = svn:mime-type=text/plain
CHANGES      = svn:mime-type=text/plain
COPYING      = svn:mime-type=text/plain
INSTALL      = svn:mime-type=text/plain
Makefile*    = svn:mime-type=text/plain
README       = svn:mime-type=text/plain
TODO         = svn:mime-type=text/plain

# Code formats
*.c          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.cpp        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.h          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.java       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.as         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.mxml       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain

# Webfonts
*.eot        = svn:mime-type=application/vnd.ms-fontobject
*.woff       = svn:mime-type=application/x-font-woff
*.ttf        = svn:mime-type=application/x-font-truetype
*.svg        = svn:mime-type=image/svg+xml

Save atau dengan menekan CTRL + S

Membuat Halaman Proyek Baru Pada Google Code

Jika belum punya akun Google, buat terlebih dahulu agar bisa mendapatkan akses ke Google Code. Kunjungi http://code.google.com, lalu klik Create A New Project:

Isi formulirnya, atur pilihan version control system ke Subversion, lalu pilih lisensi yang kamu kehendaki untuk file-file yang diunggah di situ:

Klik Create Project. Kamu akan dibawa menuju halaman dasbor proyek barumu jika sudah berhasil. Klik tab Source lalu klik tautan googlecode.com password untuk membuat password. Ini digunakan untuk menghubungkan aplikasi dengan proyek Google kamu:

Catat password yang tampil:

Mulai Mengunggah

Masukkan seluruh CSS blog blogger Anda ke dalam notepad, lalu save dengan format .css
Contohnya : cssanda.css

Buka aplikasi TortoiseSVN dengan cara mengeklik kanan pada desktop lalu pilih TortoiseSVN » Repo Browser:

Akan muncul kotak dialog untuk memasukkan URL proyek:

Pola URL selalu berbentuk seperti ini:

https://nama_proyek.googlecode.com/svn/trunk/

Yang harus diingat dan yang paling sering membuat gagal dalam pengunggahan file: Saat menuliskan URL proyek di aplikasi, gunakan https, tapi saat ingin melihat hasilnya atau mengakses hasil kerjanya secara online, gunakan http

Klik OK. Tunggu sampai proses memuat selesai.

Buka folder dimana terdapat file yang ingin diunggah. Seret file CSS yang Anda save tadi ke area daftar file unggahan:

Tunggu beberapa saat, maka kamu akan diminta untuk mengautentikasikan akun Google Code kamu seperti ini:

Isi alamat email dan password yang sebelumnya sudah kamu catat. Centang Save authentication agar kita tidak perlu berkali-kali login pada saat pengunggahan file di masa mendatang.

Dengan menggunakan aplikasi subversi, selain bisa mengunggah berbagai file yang tidak biasa, kita juga bisa mengedit file yang sudah kita unggah. Sehingga kita tidak perlu menghapus file lama dan mengunggah file yang baru berulang kali seperti saat menggunakan akun Google Code pada umumnya.

Untuk memeriksa hasil kerja satu per satu secara online, akses pola URL ini: 

http://nama_proyek.googlecode.com/svn/trunk/

Kita juga bisa mengedit (hanya mengedit) file melalui situs Google Code secara langsung (jika kita memberikan izin pada pengaturan pengeditan secara online). Kunjungi pola URL ini:

http://code.google.com/p/nama_proyek/source/browse/trunk/

Lalu hapus seluruh CSS yang Anda copas tadi didalam edit HTML Anda, lalu copy URL file CSS yang Anda upload tadi di SVN, dan paste URLnya dibawah <head> di dalam edit HTML blog sobat, contohnya seperti ini : <link href='http://nama_proyek.googlecode.com/svn/trunk/nama_proyek.css' media='screen' rel='stylesheet' type='text/css'/></link>

Langkah terakhir preview terlebih dahulu dan jika sudah berhasil save template Anda.

Saya juga menggunakan metode ini dan terbukti berhasil pada blog saya.

Semoga bermanfaat, terima kasih.