Cara Compress CSS Blog Agar Loading Blog Tidak Berat

Beginilah 
Yupps, saya sendiri juga ga’ tau apakah cara ini akan berhasil, satu-satunya alasan kenapa saya melakukan kompress css pada template blog saya adalah karena para ahli, master, dan para guru yang merekomendasikannya. Saya hanya menuruti apa yang pernah saya baca 3 tahun yang lalu.
Sebenarnya, satu hal yang pasti untuk mengatasi loading blog yang berat adalah dengan mengurangi beberapa widget blog yang kurang penting. Saya paham kalo anda pengen blog anda kelihatan keren, ciamik, cantik dan oke punya, tapi siapa yang akan melihat dan menikmatinya kalo pengunjung blog anda keburu ngacir begitu datang karena loading blog anda yang terlalulama/berat. Saya tau ini berat karena saya salah satu orang yang suka menghiasi blog dengan widget yang ga’ ada gunanya sama sekali, contohnya widget kalender, “siapa yang butuh kalender !!?”

Halaaah kebanyakan ngomongnya, langsung aja deh berikut ini cara membuat ringan loading blog dengan mengkompres css template blog secara ‘otomatis  :

1. Sebelum anda kebanyakan melancarkan aksi, lebih baik cek atau ukur dulu berat blog anda sehingga anda tau berapa lama loading blog anda, saya sendiri biasa menggunakan :
     Ariel nanya lagi : “kenapa harus diukur ?”
     Luna menjawab : “untuk jadi patokan ‘sebelum dan sesudah’ css blog kamu dikompres ntar”

2. Setelah mengukur loading blog anda, pikirkan kembali untuk menyingkirkan widget 
di bloganda yang tidak terlalu penting.

3.  Login ke akun 
blogger anda.

4. Masuk ke Rancangan >> Edit HTML
>> Bagi anda pengguna draft blogger yang baru maka bisa mengakses Edit HTML dengan cara :
>> Pada Address Bar ketik : http://draft.blogger.com/html?blogID=3928922873119267812
>> Ganti tulisan yang berwarna MERAH dengan blogID akun blogger anda

5. Klik "Download Template Lengkap" untuk mem-Back Up template anda, simpan juga semuakode css blog anda di notepad untuk jaga-jaga.

PENTING : Setelah dikompres nanti kode css template blog anda akan menjadi hampir tidak memiliki jarak, karena kompres css yang dilakukan disini prinsipnya adalah memadatkan/mengurangi jarak pada css blog, salah satunya adalah menghilangkan spasi pada kode css blog anda. Artinya hal ini akan membuat anda sedikit kurang nyaman atau pusing ketika akan kembali meng-editnya kelak. Karena itulah back-up sangat diperlukan disini.

6. Centang kotak  Expand Template Widget

7. Cari (Ctrl+F) kode : 
<b:skin><![CDATA[/*
Perhatikan di bawah kode tersebut, jika css blog anda tidak mengandung "tag variable definitions" seperti di bawah ini :



<b:skin><![CDATA[/*

-----------------------------------------------
Blogger Template Style
Name     :  Panduan-Info
Designer :  Justin Bieber
URL        :  http://eko-tipsntrick.blogspot.com/
----------------------------------------------- */

/* Use this with templates.html */

body#layout #subscription,body#layout #topsearch,body#layout #footer,body#layout #footer2 {display:none;}*{margin:0;padding:0}#

/* reset.css */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6 bla-bla-bla



maka 
AMBIL semua kode CSS dari setelah kode <b:skin><![CDATA[/* sampai pada kode sebelum]]></b:skin>

CONTOH :
<b:skin><![CDATA[/*
| AMBIL DARI SINI

.....................

SAMPAI DISINI | 
]]></b:skin>


Namun jika tepat di bawah kode 
<b:skin><![CDATA[/* terdapat "tag variable definitions" seperti di bawah ini : 

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name     :  Panduan-Info

Designer :  Justin Bieber

URL        :  
http://eko-tipsntrick.blogspot.com/
----------------------------------------------- */


/* Variable definitions 

 ====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#000000"/>

bla bla bla bla...




PERHATIKAN tag Variable definitions tersebut dan JANGAN DI IKUT SERTAKAN UNTUK DI KOMPRES !! Jika dilihat dengan seksama maka "anak dari tag Variable Definitions" memiliki bentuk penulisan kode seperti ini :
<Variable name="keycolor"  dst.. . Nah perhatikan saja kode-kode dengan penamaan seperti itu untuk diabaikan lalu ambil kode tepat di bawah setelah tag variable definitions tersebut berakhir.


CONTOH :


<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name     :  Panduan-Info

Designer :  Justin Bieber

URL        :  
http://eko-tipsntrick.blogspot.com/
----------------------------------------------- */


/* Variable definitions 

 ====================
bla-bla-bla..

<
Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>

*/
| AMBIL DARI SINI
/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
SAMPAI DISINI | ]]></b:skin>


8. Buka dan kompres kode-kode tersebut di situs  : [
CSS compressor]

9. Ganti settingan compress css menjadi seperti ini :
  • Compression mode = pilih 'Super Compact'
  • Comments handling = pilih 'Strip ALL comments'
    Kemudian klik "Compress-it!
10. Kemudian tempatkan hasil kompresannya di tempat semula kode itu berasal.
CONTOH :
<b:skin><![CDATA[/* |TARUH DISINI
..................... SAMPAI DISINI |

]]></b:skin>

11. Masih belum selesai, sekarang cari kode <body> atau </head>
kemudian AMBIL semua kode setelah <body> atau </head> hingga sebelum </body>
CONTOH :
<body> |AMBIL DARI SINI
..................... SAMPAI DISINI | </body>

12. Selanjutnya buka dan kompres kode-kode tersebut di : [
HTML Optimizer]

13. Copy paste-kan kode hasil kompresan tersebut ditempat semula yaitu diantara setelah kode <BODY> hingga sebelum kode </BODY>
CONTOH :
<body> |TARUH DISINI ..................... SAMPAI DISINI | </body>

14. Klik >> Simpan

15. Ukur kembali berat loading blog anda, cara menimbang berat loading template anda masih sama seperti cara di atas, buka saja salah satu website pengukur loading blog berikut ini :
   ”horeeeee” Ariel bersorak kegirangan seolah baru bebas dari penjara.
   “ono opo kangmas?” tanya Luna
   “Ini lho, loading blog-ku pasti jadi secepat kilat setelah dikompres.” jawab Ariel
   “ngimpiiiiiii kaleeeee” cibir Luna
    Ariel garuk-garuk kepala : “Emangnya kenapa?”
  Luna menghela napas  : “Kompres kode css yang barusan kangmas laku’in ga’ terlaluberdampak besar terhadap loading blog, coba deh lihat berapa persentase hasil dari kompres tersebut”
    Ariel      :  “Hmmm, cuma 4,2% doank”
    Luna      :  “Nah lho”

Menyimak perrcakapan tidak penting antara Ariel dan Luna di atas, bisa disimpulkan bahwacompress css blog yang baru saja anda terapkan tidak menjamin blog anda akan menjadi secepat kilat dalam seketika. Intinya dalam melakukan kompress css pada blog ini adalah untuk
memaksimalkan/optimasi semua hal yang berhubungan dengan css template di blog anda dengan tujuan sebagai salah satu cara untuk membuat loading blog menjadi ringan. Mungkin hasilnya tidak terlalu signifikan, tapi setidaknya kita sudah berusaha semaksimal mungkin, seperti kata Ariel berikut ini : “Namanya juga usaha….”

Intinya, agar blog tidak berat adalah memperhatikan bagaimana penampilan blog anda, tidak ada langkah yang lebih jitu untuk mempercepat loading blog selain memperhatikan apa yang memang anda tampilkan. Gambariklan (PPC)banner, semuanya dapat membuat loading blog menjadi berat, jadi perlakukan blog anda dengan bijak.Senyum kutu buku

TIPS : Cobalah untuk selalu mem back-up dulu template anda sebelum di utak-atik sekedar untuk berjaga-jaga. Gunakan juga tombol Preview/Pratinjau sebelum menyimpan template yang baru saja anda edit, dengan begitu anda sudah berusaha untuk meminimalisir resiko jika terjadi kesalahan dalam pengeditan.
Kompress css TIDAK MERUBAH CSS TEMPLATE BLOG ANDA ! Melainkan hanya mengatur kembali penulisan css anda ke dalam bentuk yang padat dan ringkas, jadi kalo dalam pengaplikasian tutorial ini anda masih menemukan pesan error berarti bukan kompressnya yang bermasalah melainkan (mungkin) karena anda kurang berhati-hati selama proses pengambilan dan penempatan kembali kode yang di kompres.


Sekian, dan semoga artikel “kompres css blog agar  loading blog tidak berat” ini bisa bermanfaat bagi sobat blogger.

Membuat Email Dengan Domain Sendiri (nama@domainmu.com)

Tentunya kita pingin dong punya email dengan nama domain kita sendiri, misal namamu@domainmu.com. Nha sekarang ini google menyediakan fasilitas untuk membuat email seperti itu dengan cara yang lumayan mudah. Tapi sayangnya saat ini fasilitas tersebut belum bisa digunakan untuk blog yg masih menggunakan domain blabla.blogspot.com. Fasilitas ini hanya untuk yang memiliki domain sendiri, misal domainmu.com , .net. org . dan top level doamin lainnya. Makanya itu bagi yang pengen, cepetan beli domain, aku sarankan beli di dodoldomain.com, murah lho (promosi...he..he..). Trus yang pake domain "co.cc" bisa gak? aku bilang "bisa", tapi sekarang aku pingin bahas yang pake domain .com/.net/.org, dll dulu. bagi yang punya domain "co.cc" sabar dulu ya.
Ok mari kita mulai tutorialnya bagaimana cara membuat email sendiri.

  • Buka alamat ini : Di sini
  • maka kamu akan langsung disuguhi form seperti ini:




  • Isikan nama domain kamu didalam form tersebut lalu klik tombol "Get Started"
  • Kemudian akan muncul fomr lagi untuk mengisikan data-data yang diperlukan, Kalo sudah diisi klik "Continue"
  • Setelah itu akan muncul menu2 seperti ini :



  • Klik pada link "Activate email".
  • Setelah itu akan muncul lagi halaman untuk "Setup Email Delivery" , itu untuk setting MX Record. Caranya yaitu dengan mengisikan MX Record km dengan data2 yang ada disana. Datanya seperti ini :

MX Server address priority
ASPMX.L.GOOGLE.COM. 10
ALT1.ASPMX.L.GOOGLE.COM. 20
ALT2.ASPMX.L.GOOGLE.COM. 20
ASPMX2.GOOGLEMAIL.COM. 30
ASPMX3.GOOGLEMAIL.COM. 30
ASPMX4.GOOGLEMAIL.COM. 30
ASPMX5.GOOGLEMAIL.COM. 30


Bagi yang menggunakan DNS setting dari DNS park caranya yaitu : Klik domain kamu yg berada di "Domain list". Setelah itu pilihan "Type" pilih yg "MX". Pada kolom "Mail Domain" kosongi saja kolom tersebut. Pada kolom "Order" isikan data2 "Priority" diatas. Trus pada kolom "mail server" isikan dengan data "MX Server Address" diatas kemudian klik tombol "Update All". begitu terus sampai data diatas dimasukkan semua.

Bagi yang menggunakan DNS setting dari Dodoldomain.com caranya : masuk ke menu "Domain-->LIst last 10", trus klik link "Managed DNS", kemudian klik tombol Manage DNS Record. Setelah itu klik tombol "MX Records" trus klik tombol "Add MX Record". Untuk kolom "Value" pilih yg bawah (yg "Type In A Fully Qualified Domain Name eg. abc.pqr.com.') . isikan data "MX Server address" di kolom tersebut. kemudian isikan data "Priority" dikolom "MX Priority". begitu terus sampai selesai semua data dimasukkan.


  • kalo sudah selesai klik tombol " I have completed these steps". Maka akan muncul page seperti ini lagi.



  • Sebenarnya sampai disini sudah bisa selesai, tp untuk membuka email km, km harus mengetikkan alamt URL seperti ini "http://mail.google.com/a/domainmu.com" . Nha klao misalnya km pingin menggantinya menjadi seperti : "http://mail.domainmu.com" maka ikuti lagi langkah berikut ini.
  • Klik link "Email" maka akan muncul halaman "Email setting"
  • Trus klik link "Change URL" , kemudian akan muncul halaman untuk "Change URL for email".
  • PIlih yg "custom" trus klik tombol "Continue".
  • Setelah itu km setting dulu DNS km, Tambahkan "CNAME Records" dan isikan "mail" di kolom "Hostname" dan isikan "ghs.google.com" dikolom http://naldoton.blogspot.com"Value"
  • Setelah itu klik tombol "I have complete these step" 

Nha sekarang km sudah bisa memiliki email dengan nama doamin blogmu sendiri. Untuk setting2 lainnya pelajari sendiri ya. Udah capek nih.....

Cara Membuat Website di 000webhost

000webhost merupakan layanan webhosting gratis yang top abis. Dengan memakai layanan webhosting ini kamu bisa membuat web yang support database. Sedangkan untuk keperluan blog km bisa mengupload file2 kamu seperti gambar, animasi, suara dll untuk digunakan di dalam blogmu. Tapi dalam ketentuan mereka, kita tidak boleh hanya menaruh file-file kita di hosting tersebut tanpa membuat webnya, jika tidak maka account kita akan dihapus. Nha pada tutorial kali ini, akan aku coba jelaskan sedikit tentang bagaimana cara membuat web di 000webhost. Mungkin tutorial kali ini akan menjadi pengalaman baru bagi yang belum pernah membuat website, karena website itu sedikit beda dibanding dengan blog.
OK kita mulai aja tutorialnya.



  1. Bagi yang belum punya account di 000webhost silahkan daftar Di sini. Bagi yang sudah punya, silahkan login di account webhost kamu.

Bagi yang baru mendaftar maka akan langsung disuguhi form pendaftaran yang salah satu isinya adalah kita disuruh untuk memasukkan domain yang kita inginkan. Ada 2 pilihan domain yang akan kita pakai, yg pertama yaitu dengan menggunakan domain yang sudah kita beli (biasanya nama domainnya "www.domain.com" / "www.domain.net" dll) , yang kedua yaitu dengan menggunakan sub domain gratisan yang dari webhosting tsb (biasanya nama domainnya "www.domain.net78.net" ato "www.domain.890m.com" dll). Pilihan tersebut ada pada kolom "I want to host my own domain" dan "or, I will choose your free subdomain"

  • Kemudian isikan data2 yang diminta di kolom2 yang lain, trus klik tombol "Create My Account"
  • Kemudian masuk ke "Enter Control Pannel".
  • Pada dasarnya ada dua pilihan dalam pembuatan website ini, yaitu dengan membuat sendiri webnya kemudian kita upload atau dengan menggunakan fasilitas "Website Builder" yang ada. Jika kamu sudah mahir dan pintar bikin web maka "Upload" file adalah pilihan yang tepat. Tapi jika kamu belum bisa membuat web sendiri, maka pilihlah "Website Builder", karena dengan fasilitas ini kita bisa membuat web tanpa harus mendesain terlebih dahulu, kita tinggal memilih template yang disediakan kemudian isi dengan menu2 dan konten yang kita inginkan.



  • Untuk "website builder" disana nanti. sudah ada petunjuknya, silahkan. diikuti.
  • Kalo sudah jadi jadi webnya silahkan dicek dengan mengetikkan alamat domain / URL kamu di browser. Nha seperti itu lah tampilan webmu.

"CARA UPLOAD FILE DI 000WEBHOST"

Berikut ini akan dijelaskan cara menguplaod file di 000webhost.

1. Login di 000webhost.
2. Kemudian klik link "Go to CPanel"



3. Kemudian pilih "File Manager" (lihat gambar no.5 diatas).
4. setelah itu klik link "Public Html"



5. Untuk upload file klik pada tombol "Upload"
6. Kemudian nanti akan muncul tombol2 seperti "Browse", Klik tombol tersebut kemudian cari file yg ingin diupload. Jika sudah lalu klik tombol/icon "Centang/Cek".
7. Klik tombol "Back" (gambar panah ke kiri) untuk kembali ke menu sebelumnya dan melihat apakah file yang km upload tadi sudah ada atau belum.
8. Kamu bisa mengupload file2 gambar, suara, video, html, php, javascript dll.
9. Untuk mendapatkan link gambar atau file yg lain, misal untuk keperluan membuat float image (gambar sonic yg dipojok), banner, atau yg lain caranya yaitu km klik kanan pada link "open" (di deretan file gambar tersebut) kemudian pilih "copy link location" (bagi yg menggunakan Mozilla). Nha link yg km copy itulah URL atau alamat gambar yg bisa kamu gunakan untuk mengganti misal gambar sonic yang ada di "float image".

Lho...tutorialnya kok jadi begini ya :t
Apa gak nyimpang dari judulnya tuh? :D
Ah gak papa deh....

Hal-hal Yang Harus Diperhatikan Dalam Mengganti Template Blogger

Blog adalah ibarat rumah kita, dan tentunya kita ingin blog tersebut tampil menjadil lebih cantik dan indah. Banyak cara yang dilakukan untuk membuat blog menjadi lebih cantik, diantaranya dengan menambah pernak pernik dan juga dengan mengganti tampilan/template blog. Jika kita mengganti template dengan template yang sudah disediakan blogger maka itu adalah cara yang paling mudah, tinggal pilih simpan langsung jadi. Namun template yang disediakan sangat sedikit dan tampilannya juga standar, sehingga kita seringkali mencari template lain yang lebih cantik, karena sekarang banyak sekali situs-situs yang menyediakannya dengan gratis. Namun jika kita menganti template dengan template lain yang disediakan oleh selain blogger, maka itu tidaklah semudah sebagaimana dengan menggunakan template yg disediakan blogger, karena ada beberapa efek sampingnya, diantaranya yaitu kamu akan kehilangan element2 kamu ato malah blog kamu jadi rusak. Nha berikut ini akan aku jelaskan hal-hal apa aja yang harus diperhatikan jika kamu pingin ganti template dengan jasa lain.

Pertama kamu harus membackup dulu tempalte kamu jika template baru kamu tidak berhasil diinstall, caranya masuk ke menu "Layout --> Edit HTML", trus klik link bertuliskan "Download Full Template" terus simpan file yang diberikan.

Kedua yaitu membackup elemen-elemen atau widget-widget yang sudah pernah kamu pasang, caranya gini, Masuk ke menu "Page Element", nha disitu kan banyak tuh element-element yang udah kamu pasang trus dibawahnya kan ada link bertiliskan "edit" klik link-link tersebut satu persatu, copy isi dari elemen itu dan taruh dalam notepad. Kalo kamu nanti dah ganti template dan mau memasang elemen-elemen tersebut tinggal copy dari notepad terus pasang di "add page elements".

Ketiga, jika template dan elemen-elemen sudah kamu backup langkah selanjutnya yaitu mengupload template yang sudah kamu download. Biasanya file template yang di download berextenxi "xml" tapi kadang-kadang ada juga yang berekstensi "zip atau rar", kalo begitu kamu harus mengekstraknya dulu sehingga kamu akan mendapat file berekstensi "xml". Trus gini cara ngaploadnya, Kembali ke menu "Edit HTML", trus disitu kan ada tombol "brows" klik tombol tersebut terus cari file template yg pingin kamu pakai sudah kamu download, trus klik tombol :upload".

Keempat, biasanya kamu akan mendapat konfirmasi seperti gambar dibawah ini, itu artinya elemen-elemen kamu akan dihapus. Klik tombol "Confirm & Save"



Kelima, jika ternyata yang muncul adalah seperti gambar dibawah ini maka itu artinya ada yang tidak beres dengan template kamu dan kamu tidak bisa memakai template tersebut di blog kamu, jadi kamu ganti aja dengan template yang lain.



Keenam, coba preview blog baru kamu, merasa sudah cocok ikuti langkah ketuju. Jika kamu mendapati ada gambar header yang sebelumnya kamu pake buat header masih muncul di template baru kamu dan posisinya sepertinya tidak cocok, maka kamu harus menghilangkannya dulu gambar header tersebut, caranya masuk kembali ke menu "Page Element", dibagian header coba kemu edit dan hapus gambar kamu. Jika di bagian header tidak ada link "edit" coba kamu ganti dulu templatenya dengan template yang disediakan oleh blogger dan kembali ke "Page Element" trus "edit dibagian header dan hapus gambar header kamu kemudian ikuti lagi langkah-langkah ketiga

Ketuju, Kembalikan elemen-elemen yang sudah kamu backup tadi sehingga kini kamu memiliki template baru dan elemen-elemen yang dulu tidak ilang.

Kedelapan, Selamat bermumet-mumet :z

Menghilangkan/Menghapus tulisan Subscribe to / Langganan Posting Atom

Anda bingung ketika ingin menghapus tulisan Subscribe to / Langganan Posting Atom,pada halaman blog anda?
Coba dech! yuk !

Pergi ke Dashboard--->Tata Letak--->Edit Html--->centang Expand Widget Template
Sekarang cari kode berikut :

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
Jika sudah ketemu,Hapus kode tadi lalu Simpan Template.
Selesai !