Modifikasi-Kode HTML/Javascript yang Unik di Area Posting

Tips ini sebenarnya sudah dimuat bahkan baru saja dimuat oleh kang Mochal. Bukan bermaksud “latah” atau bagaimana, tetapi saya ingin sekali mempraktekkan apa yang baru saya dapatkan dari kang Mochal tersebut (itung-itung sebagai latihan), yaitu cara membuat Kode HTML/Javascript yang unik di area posting. (Nah kan latah banget tuh).

Mengingat baru pertama kali ini saya memuat artikel tentang tutorial blog, maka sebagian besar tulisan saya comot dari artikel kang Mochal tersebut (artikel asli milik Mohamed Rias), yang tentu saja atas persetujuan dan ijin beliau. Hal ini tidak lebih disebabkan oleh kemampuan saya yang masih sangat “cetek” tentang tutorial blog.

Oke.. langsung saja sepertinya (jadi grogi ne..)

1. Login ke blogger, masuk ke Tata Letak > Edit HTML

Ingat selalu untuk membackup template anda sebelum melaksanakan editing pada HTML

2. Setelah itu masukkan kode di bawah ini di atas kode ]]></b:skin>

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

3. Kemudian klik simpan. Selesai

Anda dapat memodifikasinya dengan mengganti image latar belakang sesuai dengan selera anda. Caranya :

1. Buat sebuat image yang memiliki dengan ukuran resolusi image 125X86 pixel, dan simpan dalam format GIF untuk memperkecil kapasitas file.
2. Simpan di Google Page Maker atau Photo Bucket anda. Catat URL image anda tersebut dan ganti URL yang ada pada script di atas. Sebagai contoh saya menggantinya dengan image saya pada URL: http://riasmaja77.googlepages.com/Alasscript.gif.
3. Buat warna background sesuai dengan kode warna pada image. Misalnya saya buat warna background menjadi transparan karena image saya berlatar belakang transparan.
Maka pada baris tersebut (yang memuat URL image) selengkapnya akan menjadi :

background : url(http://riasmaja77.googlepages.com/Alasscript.gif) no-repeat right bottom;

Kode warna setelah background: saya hilangkan untuk menampilkan background transparan pada text areanya.

Untuk menampilkan code HTML/Javascript di postingan anda harus memakai code di bawah ini:

<div class="codeview">
Ketik kode HTML, css, Javascript code disini
</div>

Kode di atas dapat ditulis di dalam mode Compose ataupun Edit HTML

Selesai sudah keseluruhan langkah cara menampilkan java script, css code, dan html beserta sedikit modifikasi pada latar belakangnya. Hasilnya dapat anda lihat pada tampilan di atas.. (walaupun masih jauh bila dibandingkan dengan aslinya..)

PS: Modifikasi yang saya lakukan dengan image yang saya gunakan sudah mendapat persetujuan dari pemilik artikel asli ini yaitu Mohamed Rias *kebetulan namanya ada mirip-miripnya dengan nama saya*. Dan saya mohon maaf apabila susunan tulisan ini berantakan dan malah membuat anda sulit untuk memahaminya. Semoga ini bisa menjadi langkah awal saya untuk mulai berbagi tentang tutorial blog.

Terima kasih kepada:
1. Mohamed Rias [Blogger Accessories]
2. Guruh Subagya [Mencoba untuk Menjadi Yang Terbaik]
3. Mbak Jovie [Together We Share]

Posting yang Berhubungan Berdasarkan Kategori: