Design, Tutorial and Tips Trik Blogger | Lostsector

- on 07.22

Design, Tutorial and Tips Trik Blogger | Lostsector

Posted: 27 Mar 2013 05:10 AM PDT

Apa itu tag pre ? - Tag Pre (<pre>...</pre>) adalah tag yang biasanya digunakan untuk menentukan format tertentu pada suatu text dengan keunikannya tersendiri. Tag pre umumnya digunakan pada text yang berupa kode seperti HTML, CSS, Javascript, jQuery, Php dan XML denga format dan tema yang berbeda-beda.

Preview Pre Tag Tema Vanilla

LIVE DEMO

Markup HTML

<pre data-codetype="HTML"> ### </pre>
<pre data-codetype="CSS"> ### </pre>
<pre data-codetype="JavaScript"> ### </pre>
<pre data-codetype="JQuery"> ### </pre>
<pre data-codetype="PHP"> ### </pre>
<pre data-codetype="XML"> ### </pre>

Keterangan ! : Ganti ### dengan kode anda

CSS

pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;
position:relative;
padding:0 7px;
margin:10px 0;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
}
pre[data-codetype] {
padding:29px 1em 7px 1em;
}
pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}
pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}
pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;}

Keterangan !

Tempatkan kode CSS diatas kedalam template blogger tepatnya diatas tag ]]></b:skin> dan simpan template

Rekomendasi! : Syntax Highlighter dengan Tombol Source Code, Copy & Print

Selesai, cuma itu saja ! :p

Hosting File Di Google Code Dengan TortoiseSVN

Posted: 26 Mar 2013 09:50 AM PDT

Hosting File HTML, CSS & JavaScript Di Google Code Dengan TortoiseSVN - Google Code seperti yang sudah kita kenal adalah salah satu fitur/aplikasi dari Google yang menyediakan fasilitas untuk menghosting file seperti Javascript, Zip dan gambar. Namun, selain ketiga jenis file diatas misalnya CSS dan HTML ketika mengupload/menyimpannya di code.google.com secara langsung, kadang file tersebut akan gagal bekerja dan hanya akan menampilkan sebagian teks atau gambar saja.

Untuk mengatasi kegagalan dalam hal pembacaan text atau gambar, saya sarankan untuk mengupload file yang akan kita gunakan seperti CSS, HTML, JavaScript dan lain sebagainya dengan menggunakan Aplikasi Subversi (Subversion) yakni TortiseSVN.

Aplikasi subversion TortoiseSVN adalah aplikasi yang memungkinkan untuk mengunggah berbagai jenis file ataupun kode yang berbeda beda. Namun anda jangan salah menilainya, karena TortiseSVN hanya berlaku untuk file seperti HTML, CSS, Javascript, jQuery, gambar yang biasa digunakan untuk keperluan dalam membangun (mendesain) website/blog dan sama sekali tidak berlaku atau tidak ada hubungannya dengan jenis file dengan ekstensi seperti pdf, doc, wap, mp3 dan lain-lain.

Kelebihan Menghosting File di Google Code dengan TortiseSVN adalah anda bisa menggunakannya sebagai media penyimpanan eksternal kode CSS yang katanya dengan menyimpan CSS eksternal blog/web akan mampu Mempercepat Loading Web/Blog dan hal ini juga berlaku untuk kode seperti Javascript dan jQuery.

Untuk menyimpan file/kode di google code melalui TortiseSVN, maka diperlukan 2 langkah untuk melakukannya, yang pertama adalah Menginstall Aplikasinya dan yang kedua Membuat Project Baru.

Langkah Pertama : Menginstall TortoiseSVN

Buka situs ini » http://tortoisesvn.net/downloads.html, kemudian unduh dan install aplikasinya di komputer anda. Setelah proses penginstallan selesai, restart komputer anda karena aplikasi ini akan terintegrasi langsung dengan menu klik kanan pada desktop.
Selanjutnya, klik kanan pada desktop/layar depan komputer. Pilih TortiseSVN » Setting. Lihat gambar dibawah untuk lebih jelasnya.

Akan muncul sebuah box/jendela baru, pilih edit.

Setelah file config terbuka (biasanya terbuka di notepad), masukkan kode di bawah ini tepat di bawah kode # 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

Selanjutnya simpan dengan menekan CTRL + S pada keyboard.

Langkah Kedua : Membuat Project Baru di Google Code

Pertama, buka http://code.google.com kemudian pilih Create A New Project. Namun jika anda belum memilik akun di google kode, lebih baik anda mendaftar terlebih dahulu.

Isi dan lengkapi formulir kemudian klik "Create project". Lihat gambar untuk lebih jelasnya!

Setelah proses pendaftaran selesai, selanjutnya anda akan diarahkan ke dashboard baru anda. Pada menu dashboard, pilih tab "Source", Copy link dan klik googlecode.com password

Keterangan : Copy dan simpan link yang diberi tanda nomor "2" diatas karena nantinya link tersebut yang akan anda gunakan untuk pengaturan tahap selanjutnya dan untuk nomor "3" itu adalah link untuk mendapatkan password. Silahkan diklik dan jangan lupa copy dan simpan.

Menggunggah / Menghosting Berkas

Buka aplikasi TortiseSVN dengan cara mengklik kanan di desktop komputer, pilih TortiseSVN » Repo Browser

Akan muncul sebuah box, kemudian masukkan link project yang sudah anda simpan sebelumnya. Sebenarnya, pola dasar linknya adalah seperti ini "https://judul_project_anda_disini.googlecode.com/svn/trunk/". Klik Ok dan tunggu hingga proses memuatnya selesai.

Selanjutnya, drag file kedalam box sebelah kanan. Lihat gambar untuk lebih jelasnya.

Sekali lagi klik ok dan masukkan email yang anda gunakan mendaftar pada google code serta masukkan password yang telah anda copy sebelumnya.

Tunggu beberapa saat sampai proses penyimpanan file selesai dilakukan. Selesai...!!!

Untuk melihat hasil kerja anda, silahkan ikuti pola link seperti ini » "https://judul_project_anda_disini.googlecode.com/svn/trunk/". Anda juga bisa melakukan pengeditan secara online tanpa harus mengupload ulang berkas yang sudah tersimpan di google code dengan cara mengunjungi URL pola ini : http://code.google.com/p/judul_project_anda_disini/source/browse/trunk/.

Butuh Bantuan ?

Jika anda mengalami masalah atau kendala dalam melakukan proses seperti yang telah saya jelaskan diatas, maka silahkan anda meninggalkan komentar.

Semoga bermanfaat...!!!