Assallamuallaikum Wr Wb..


Cara Membuat Generator Preview Css Sendiri

cs.png

Selamat sore sahabat blogponsel !!

Di tengah-tengah kesibukan pekerjaan saya di dunia nyata yang begitu padat ini saya menyempatkan waktu untuk sekedar memposting sebuah artikel yang telah di request oleh teman saya yaitu Denny Xentar Delax, dia meminta saya untuk membuatkan sebuah artikel yang membahas tentang Cara Membuat Generator Preview Css Sendiri. Sebenarnya artikel seperti ini sudah banyak yang bertebaran di google search dan jauh lebih bagus dari buatan saya ini, tapi tidak apalah saya post juga artikel yang sama di blog saya ini..

Baiklah, tidak usah panjang lebar mari kita simak tutorial Cara Membuat Generator Preview Css Sendiri di bawah ini !!

Seperti yang telah kita ketahui bahwa perkembangan dunia teknologi jaman sekarang begitu pesat, begitu juga di dunia desain website, cascading style sheet atau yang sering disebut dengan css menjadi salah satu contoh kemajuan teknologi jaman sekarang. Iya memang, css sudah di kenal sejak era 90'an tapi semakin majunya teknologi jaman sekarang membuat creator atau pembuat css banyak yang bermunculan & mempelajarinya lebih dalam lagi, mereka saling bertukar ilmu dengan sesama creator css maupun dengan orang lain yang ingin mempelajari tentang pembuatan css.

Mereka juga sering membagikan sebuah karya yang menurutku patut kita beri apresiasi, bukan dari tampilannya akan tetapi dari usaha yang telah mereka lakukan dengan memberi warna tersendiri dalam dunia web desain.

Dalam hal membuat sebuah karya di bidang apapun kita juga perlu memberikan tempat untuk orang lain melihat, menikmati, dan memberi saran atau kritikan untuk karya yang telah kita buat khususnya di bidang css, tidak lengkap rasanya jika kita membuat css lalu membagikannya ke orang lain melalui artikel kita tanpa adanya tempat untuk melihat karya kita, rasanya seperti sayur tanpa garam. Kita bisa membuatnya melalui situs buatan orang lain atau buatan kita sendiri..


Baca Juga = Komentar Yang Baik Dan Benar Di Blog

Nah... Di sini saya akan memberitahukan bagaimana cara membuat genarator preview css sendiri itu bagaimana ? Sebenarnya ada dua cara dalam membuat halaman preview css yaitu secara manual atau dengan cara menggunakan generator preview css, tapi kali ini saya akan menggunakan cara kedua untuk membuat generator preview css. Untuk kode pemrogramannya saya hanya memakai kode HTML saja dan sedikit tambahan kode Javascript, kenapa saya memakai HTML saja dan tidak memakai Javascript juga, supaya apa yang saya bagikan ini mudah kalian terapkan & tidak terlalu membingungkan jika kalian mengeditnya, oke mari kita simak caranya di bawah ini !


1. Pertama

Silahkan kalian login terlebih dahulu ke akun xtgem kalian atau klik Login, jika kalian belum mempunyai akun di xtgem silahkan daftar terlebih dahulu.


2. Kedua

Setelah kalian sukses login ke akun xtgem kalian, silahkan pilih site kalian lalu klik "Build" atau buat site baru yang akan kalian gunakan sebagai alat untuk membuat generator previewnya.


3. Ketiga

Jika sudah berada di "Panel" site kalian, lalu klik "File Browser".


4. Ke empat

Jika sudah berada di page "File Browser" silahkan kalian klik "Buat Folder" lalu namai folder tersebut dengan nama "Preview" (tanpa tanda petik, dan ingat ! Abjad awal atau huruf P menggunakan huruf besar).


5. Kelima

Setelah folder berhasil di buat, selanjutnya ikuti langkah-langkah berikut ini !


- Pertama download terlebih dahulu file satu ini Download File.
- Jika sudah di download lalu extrack file'nya menggunakan unzip.apk untuk android & blueftp untuk java, atau menggunakan aplikasi file browser kesukaan kalian.
- Jika filenya sudah di extrack, di dalam file tersebut ada 5 file diantaranya, index.html, result.html, homepage.php, post.php, & about.php.. Lalu upload semua file tersebut ke dalam folder "Preview" yang sudah di buat di site xtgem kalian tadi.
- Lalu, jika semua telah kalian upload, sekarang tugas kalian adalah mengedit file tersebut satu per satu. Caranya seperti ini !

Pertama kalian klik file homepage.php yang kalian upload tadi, lalu pada halaman penyunting teks silahkan klik "Buka Dalam Alat Pembangun" atau jika kalian sudah berada di halaman "Pembangun" silahkan klik "Pilihan". Setelah berada di halaman pilihan silahkan scroll ke bawah lalu cari opsi ini, include "/_header" file in page header, include "/_footer" file in page footer, include "/global_stylesheet.css" file in page, dan include "/xtgem_template.css" file in page. Jika sudah ketemu silahkan hapus centang yang ada di kotak sebelah kirinya lalu klik "Simpan".

Lalu pada file post.php & about.php langkah mengeditnya sama seperti file homepage.php, jadi saya rasa kalian sudah mengerti caranya ?

Kedua, pada file index.html & result.html tugas kalian adalah mengedit kode pemrogramannya, khususnya pada bagian url site & url css kalian. Di dalam file index.html & result.html yang perlu kalian cari adalah kata "URL_ANDA", "URL_CSS_ANDA", dan "Nama_Anda". Jika sudah ketemu silahkan edit & ganti sesuai peruntukkannya, caranya seperti ini !


1. Kata "Url_Anda" silahkan ganti dengan url site xtgem yang kalian pakai untuk membuat generatornya, ingat, yang di ganti kata url anda saja & untuk kode yang ada setelahnya biarkan saja seperti yang ada.
2. Lalu kata "URL_CSS_ANDA" yang ada di dalam tag <*head> (tanpa tanda *) ganti dengan url css yang akan kalian pakai.
3. Selanjutnya untuk "Nama_Anda" silahkan ganti dengan nama kalian atau nama blog kalian.
4. Lalu cari tag <*title> di dalam tag <*head> (tanpa symbol *), contohnya seperti ini !

<title>Nama Site Kalian</title>

Jika sudah ketemu, silahkan kalian ganti nama site kalian atau seperti bagian yang saya kasih warna merah tersebut dengan nama site generator kalian !


Keterangan :

Untuk kode-kode lainnya biarkan saja jika kalian tidak mengerti fungsinya & cara mengeditnya, kalau bagi kalian yang mengerti tentang fungsinya & cara mengeditnya silahkan edit suka hati kalian.


Baca Juga = Mungkin Ini Sudah Takdirku

Tahap pembuatan Generator Preview Css sudah selesei, sekarang coba akses generator yang telah kalian pada file "index.html" di folder "Preview" apakah sudah berhasil atau belum. Jika sudah berhasil maka lakukan uji coba untuk membuat halaman preview css yang telah kalian buat, jika tampilan halaman sudah sesuai desain css kalian maka bisa di katakan kalian telah berhasil membuat generator preview css sendiri. Namun jika halaman blank putih maka masih ada yang perlu kalian perbaiki untuk kode-kodenya, coba kalian cari tahu di mana letak kesalahannya lalu segera perbaiki.

Sebagai contoh demo dari tutorial di atas silahkan klik tautan berikut ini Tools Generator Preview Css !!

Bagaimana hasilnya ? Sederhana banget kan ? Saya memang sengaja membuat sesederhana mungkin agar mudah di gunakan & tidak berat untuk loading blognya. Silahkan jika kalian ingin mengkreasikan kode-kode di atas dengan kode script lainnya !!


Keterangan :


1. Saya ingin minta maaf jika tutorial di atas sangat panjang dan membingungkan untuk kalian mengerti, tapi insya allah jika kalian sudah paham di situs xtgem pasti kalian akan mengerti cara membuatnya & bagi para pemula yang kesulitan membuatnya silahkan kalian mengirim pesan ke akun saya atau bertanya pada komentar, nanti akan saya bimbing cara pembuatannya sampai selesai.


2. Tutorial di atas akan lebih mudah jika ada screenshootnya, namun karena terkendala alat tempur yang saya pakai tidak bisa buat screenshoot maka dengan terpaksa saya posting apa adanya saja. Sebenarnya saya sudah melakukan modding screenshoot pada browser opmin yang saya pakai tapi tetap gak bisa untuk mengambil screenshoot, apa karena handphone saya tidak saya pasang memory card atau karena masalah lain saya tidak tahu ?

Demikian yang dapat saya sampaikan tentang Cara Membuat Generator Preview Css Sendiri, semoga apa yang saya bagikan ini bisa bermanfaat buat banyak orang & saya minta maaf jika terdapat kata-kata atau tutorial yang berbelit.
Terima Kasih..!!

Wassallamuallaikum Wr Wb..