Muskir News: html

Rabu, 10 Agustus 2011

Tips Modifikasi Template di blogspot

Sekilas tentang template blog, Template website atau blog adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.

Seperti yang anda lihat saat ini, bahwa terlihat tatanan gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.

Di blogger atau blogspot, anda dapat dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan masing-masing. Jika anda telah mahir membuat template sendiri, anda dapat menggunakan template tersebut untuk blog anda. Namun, jika anda masih awam dalam membuat template, blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan keinginan.

Selain itu, anda dapat pula mengunduh atau mendownload template blogger gratis dari penyedia template blogger, salah satu contoh website yang menyediakan template blogger tersebut adalah beralamat di http://blogtemplate4u.com, disana terdapat ratusan template blogger yang bisa anda gunakan secara gratis. namun, jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh menghapus atau menghilangkan credit link dari pembuat template tersebut. Dengan tidak membuang link credit pembuat template, itu adalah sebagai apresiasi atas kerja keras mereka dalam menyediakan template secara gratis. Langsung ke topik utama, Cara mengganti template di blogspot atau blogger ada dua cara, yaitu mengganti template dengan template yang disediakan blogspot, atau mengganti template dengan template yang didapat dari penyedia template.

Berikut cara-cara untuk mengganti template dengan template yang telah disediakan blogger:

Silahkan login ke blogger dengan ID anda.

Klik Rancangan.

Klik menu Perancang Template. Selanjutnya akan muncul jendela perancang template blogger.

Klik pada pilihan template yang tersedia (saat tartikel ini ditulis template yang terdia berjumlah 6 template). Selain itu, anda dapat pula memilih background atau gambar latar belakang dari template tersebut. Jika sudah cocok dengan salah satu template, klik APPLY TO BLOG.

Selesai.

Mengganti Template dengan template dari penyedia template

Berikut cara-cara untuk mengganti template dengan template dari penyedia template :

Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis. Salah satu contoh anda bisa download di blogger templates.

File template yang didownload, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa mengekstraknya secara online di Wobzip.

Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.

Silahkan login ke blogger dengan ID anda.

Klik Rancangan.

Klik menu Edit HTML.

Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.

Klik tombol Browse.., pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml saja ). Kemudian klik tombol Unggah.

Apabila ada muncul peringatan tentang widget, klik pada tombol PERTAHANKAN

Selesai

Cara Menuliskan Script/Kode Dalam Artikel Blog

Untuk menuliskan script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan. Misalnya gini, jika kita menuliskan kode dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML. Jadi untuk menuliskan kode , maka yang seharusnya dituliskan supaya bisa muncul kode tersebut adalah ini <head>. Nah terus bagaimana kalau ada banyak kode yang harus kita posting?

Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog?

Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya yaitu:

Cara Pertama :

Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.

Cara Kedua :

Tuliskan semua kode/script ke dalam notepad
Kemudian ganti/replace kode-kode berikut

Kode	Kode Pengganti
<	<
>	>
"	"

Udah tahu kan caranya mereplace di notepad? itu lho dengan memilih menu edit --> replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada kolom "Find what" trus masukkan kode pengantinya pada kolom "Replace with"trus tekan tombol Replace All.
Nah kalau udah semua baru kamu copy semua kode yang sudah direplace all tadi, terus kamu masukkan kedalam postingan kamu.

Cara Ketiga :

Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu.

Selamat Mencoba Tips Jitu

Oleh :

Kendhin
Muhammad Riyadi
Supriyanto

Kamis, 18 Maret 2010

TinyMCE - Editor WYSIWYG Javascript

TinyMCE adalah sebuah editor WYSIWYG Javascript HTML yang berbasis web dan platform independent, dan dirilis sebagai Open Source di bawah lisensi LGPL oleh Moxiecode Systems AB. TinyMCE memiliki kemampuan untuk mengubah field textarea HTML atau elemen HTML lainnya sebagai instans editor. TinyMCE juga sangat mudah untuk diintegrasikan ke dalam Content Management Systems lainnya.

Fitur TinyMCE

* Mudah untuk diintegrasikan - Hanya beberapa baris kode yang dibutuhkan.
* Customizable - Tema dan plugin, elemen invalid blok dan memaksakan atribut.
* Browserfriendly - Mozilla, MSIE, FireFox, Opera, Safari dan Chrome.
* Ringan - Gzip kompresor PHP / .NET / JSP / ColdFusion, membuat TinyMCE 75% lebih kecil dan lebih cepat di-load.
* AJAX Compatible - Anda dapat dengan mudah menggunakan AJAX untuk menyimpan dan memuat konten!
* Internasional - Multibahasa mendukung penggunaan paket bahasa.
* Open Source - Gratis di bawah lisensi LGPL, jutaan orang membantu menguji dan memperbaiki editor ini setiap hari.

Petunjuk instalasi

Instalasi TinyMCE sangat sederhana, tinggal ikuti saja petunjuk di sini. Ada beberapa contoh tentang bagaimana mengintegrasikan TinyMCE.

Persyaratan

TinyMCE tidak memiliki persyaratan langsung selain kompatibilitas browser, dan tentu saja JavaScript harus diaktifkan.

Dan TIDAK ADA kode back-end yang didistribusikan bersama TinyMCE.

TinyMCE dapat disetup untuk menggunakan textarea HTML sebagai ruang kerjanya. Bila form dikirimkan ke server, anda dapat memiliki sistem yang melakukan sesuatu dengan isi textarea tersebut, seperti menyimpannya ke database atau file. Frontend juga dapat disetup untuk membaca konten dari file, sehingga anda dapat membuat perubahan terhadap file tersebut.

Download

Untuk petunjuk men-download silakan periksa website TinyMCE.

Mengekstrak arsip

Di Windows anda bisa menggunakan WinZip atau yang serupa, dan pada sistem operasi lain seperti Linux anda cukup mengekstrak arsip dengan perintah 'tar'. Anda dapat menemukan contoh tentang cara mengekstrak file di berbagai situs di internet.

Anda harus ekstrak TinyMCE di wwwroot atau folder tertentu di domain situs anda.

Ambil contoh menggunakan shell

$ cd wwwroot
$ gzip-d tinymce_1_44.tar.gz
$ tar xvf tinymce_1_44.tar

Sebuah struktur folder seperti ini akan dibuat

/tinymce/
/tinymce/docs/
/tinymce/docs/zh_cn/
/tinymce/examples/
/tinymce/examples/zh_cn/
/tinymce/jscripts/
/tinymce/jscripts/tiny_mce/
/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/plugins/
/tinymce/jscripts/tiny_mce/plugins/
/tinymce/jscripts/tiny_mce/themes/
/tinymce/jscripts/tiny_mce/themes/advanced/
/tinymce/jscripts/tiny_mce/themes/default/
/tinymce/jscripts/tiny_mce/themes/simple/

Membuat perubahan pada situs web anda

Setelah anda mengekstrak arsip, anda perlu mengedit halaman situs untuk menyertakan konfigurasi dan javascript untuk TinyMCE. Harap dicatat bahwa sebaiknya anda hanya memasang TinyMCE javascript pada halaman yang memerlukannya saja, tidak semua halaman dari situs web anda. Jangan lupa untuk mengubah url ke file '.js' di bawah ini agar sesuai dengan instalasi situs anda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
tinyMCE.init({
 mode : "textareas"
});
</script>
</head>
<body>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<form method="post" action="show.php">
 <p> 
  <textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
  <input type="submit" value="Save" />
 </p>
</form>

</body>
</html>

Tombol Save dalam contoh ini mengirimkan isi dari textarea ke halaman 'show.php' yang hanya akan menampilkannya kepada anda jika anda membuatnya seperti ini (tentu saja dapat disesuaikan dengan kebutuhan anda untuk menulis konten ke file atau database).

<?php
/* post.php : this page shows what insert.php has sent */

echo(stripslashes($_POST['content']));
?>

TinyMCE

Anda dapat mencoba TinyMCE pada aplikasi di bawah.

Sumber:
[1] Website TinyMCE (http://tinymce.moxiecode.com/)
[2] Dokumentasi TinyMCE (http://wiki.moxiecode.com/)