Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Beberapa hari yang lalu k'ian sempat kerepotan waktu mengatur Code CSS diBlog ini, sampai-sampai k'ian hampir kehilangan seluruh konten dan aplikasi yang telah susah payah k'ian pasang, hanya karena ingin mengkompres code CSS nya. Hal inilah yang pada akhirnya menuntun k'ian untuk mencari dengan bantuan om-google, dan hasilnya adalah mencoba untuk mengkompres CSS codenya dengan menggunakan external (luar) link tanpa merubah susunan dari code itu sendiri.

Sampai disini k'ian tetap bertanya-tanya External linknya mau pakai yang mana..??? tapi k'ian teringat akan sebuah artikel dari sahabat (k'ian lupa namanya) yang memposting sebuah artikel "Cara mendaftar disitus Link External" beberapa bulan yang lalu, dan beliau merekomendasikan untuk menggunakan "Google sites" sebagai hosting untuk file - file yang akan kita buatkan linknya. Jika kamu belum punya situs / hostingan yang menyediakan external link, Untuk cara mendaftar di Google sites bisa kamu lihat disini.

Jika kamu sudah memiliki hostingan yang lain, kamu tetap bisa menggunakannya selama kode yang kita pasang dalam kondisi yang benar. Untuk tahapan awal masuk kedalam account blog kamu-->> Layouts -->> Edit HTML -->> copy / download template kamu terlebih dahulu agar jika terjadi kesalahan kamu tidak perlu khawatir, jangan lupa beri ceklist pada kotak "expand widget template", selanjutnya Cut atau potong kode CSS yang akan kita pindahkan. lihat contoh dibawah :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='B67Ds/beDLpC3GoSzXThaBQpGkEK0RIQJm5Se1ygges=' name='verify-v1'/>
<b:include data='blog' name='all-head-content'/>
<meta content='600' http-equiv='refresh'/>
<meta content='kiancoi' name='author'/>
<title><data:blog.pageTitle/></title>
<SCRIPT src=' http://sites.google.com/site/kianbersama/javascript/date.js' type='text/javascript'/>
<b:skin><![CDATA[/*

-----------------------------------------------
Theme Name: Celebration of Kian
Theme URI: http://www.kianhome.blogspot.com
Description: wonderful slide and simple display.
Author: Kian coi
Author URI:www.kianhome.blogspot.com

Converted to blogger template modified by Kian coi
Author URI: http://www.kianhome.blogspot.com
----------------------------------------------- */
#navbar-iframe{height:0px; visibility:hidden; display:none}
potong kode Css nya Mulai dari sini

]]></b:skin>


Seperti contoh diatas yang harus kamu perhatikan adalah proses pemotongan kode CSS nya dimulai setelah kode #navbar-iframe{height:0px; visibility:hidden; display:none} atau dimulai dari kode .body {...} dan sebelum kode ]]></b:skin>

jika sudah paste kan kode tadi kedalam file notepad dan simpan dengan nama yang kamu inginkan namun akhirannya dengan .css contoh template.css

Selanjutnya Upload file CSS kita tadi kedalam hostingan kamu ( Google sites ), jika sudah Copy link dari kodenya dengan cara klik kanan pada keterangan "download" pilih "copy link location". contohnya
http://sites.google.com/site/kianbersama/javascript/jquery.magnifier.js?attredirects=0
kemudian paste kedalam halaman Edit HTML kamu, sampai disini kita belum selesai karena link tersebut belum dinyatakan valid atau berfungsi, sehingga kita perlu melakukan sedikit penambahan dan perbaikan agar linknya bisa berfungsi dengan baik.Hal yang pertama adalah dengan menghapus kode yang berwarna orange pada contoh diatas sehingga kodenya akan seperti ini:
http://sites.google.com/site/kianbersama/javascript/jquery.magnifier.js
Kemudian tambahkan kode <link href='....' rel='styleSheet' 'type='text/css' />, sehingga kodenya akan seperti ini :
<link href='http://sites.google.com/site/kianbersama/javascript/tempalte.css' rel='styleSheet' 'type='text/css' />
dan letakkan diantara kode]]></b:skin> dan kode </head>. contohnya seperti ini :
]]></b:skin>
<link href='http://sites.google.com/site/kianbersama/javascript/tempalte.css' rel='styleSheet' 'type='text/css' />
</head>

Sebelum disimpan sebaiknya dilihat "preview" nya dulu untuk memastikan tidak terjadi kesalahan yang fatal, dan jika sudah dirasa baik silahkan disimpan. Code CSS kamu sudah berhasil di kompress sehingga Loading Blog kamu semakin cepat.

Nb:
Pada saat mengkompres pastikan bahwa kamu tidak akan melakukan perubahan lagi pada kode CSS di template kamu, sehingga kamu bisa lebih memaksimalkan kodenya.
Langkah ini tidak hanya berguna untuk kode CSS saja namun bisa kita gunakan untuk kode JAVASCRIPT dan lain-lain, mungkin akan k'ian bahas di artikel yang lainnya..!!!

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

14 Response to "External Link, Compres CSS code jadi lebih baik pada Blog"


  1. yah.. Dah keduluan. @atas : cepet bgt.
    Thx mas.. Tapi kok msh g ngeh y ...Replay

     

  2. Kian Coi Said,

    @ alliev : pada dasarnya tutorial ini mengenai format perampingan kode CSS maupun kode2 yg lain..dmn kita hanya perlu memasang link kode yang sudah kita simpan tadi,sehingga link yang akan kita jadikan acuan merupakan link dari kode CSS yg kita simpan..

    @ super.sonic : penjelasannya sama kayak diatas sob...!!!

    4all : thank's da comment...!!! ...Replay

     

  3. Lia_Lovaa Said,

    Wah...bingung aku??, apaan sih itu, untuk apa trus kegunaannya apa??hehe..Akang sih pinter masalah gituan, klo neng sih sama seperti yang diatas gak mudeng..makasih udah mampir akang, kemana aja selama ini gak nongol batang idungnya hehe ...Replay

     

  4. Kian Coi Said,

    @ Lia : mungkin artikelnya terlalu cepat aku jelasin..mungkin lain waktu bakal aku update untuk kelengkapannya...!!!

    makasih ya neng da comment..!!! cee u..!!! ...Replay

     

  5. Rizky2009 Said,

    aq juga pernah menggunakan trik ini sob, ada perubahan si, tp g aq pakai lagi ...Replay

     

  6. Lia_Lovaa Said,

    ok..ditunggu penjelasannya di posting berikutnya.. ...Replay

     

  7. Kian Coi Said,

    @ Lia_Lovaa : tunggu aja ya neng..tq da mampir..!!!! ...Replay

     

  8. Osi Said,

    Terima kasih info bermanfaatnya.... ...Replay

     


  9. Wah,, keren nih artikelnya .. Request bhan2 css kode dan html donk ..
    Keep share with me yah . :) ...Replay

     

  10. bang..aku blogger baru, mau nanya TUTUP dan TAMPILKAN gimana seperti yang di sidebar blog ini, sekalian cara pasang banner You Comment I Follow nya...reply nya ke email djwelthan@gmail.com
    (Saya ucapkan thank udah mau berbagi)
    mlaili from kalteng @ http://mymoveis.blogspot.com ...Replay

     

  11. bang..aku blogger baru, mau nanya gimana cara bikin TUTUP dan TAMPILKAN seperti yang di sidebar blog ini, sekalian cara pasang banner You Comment I Follow nya...reply nya ke email djwelthan@gmail.com
    (Saya ucapkan thank udah mau berbagi)
    mlaili from kalteng @ http://mymoveis.blogspot.com ...Replay

     

  12. Kian Coi Said,

    @ M.Lailie : Sob, pertanyaan lo udah aq jawab dengan seksama..semoga berhasil yach...!!! ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |