.jpg)
Mengapa aku katakan sebagai tips atau trik buat & ciptakan page peel? Mengapa tidak kita sebut saja "Tutorial Blogger cara membuat page peel di Blogger Template Designer?" atau mungkin "Panduan cara membuat dan memasang page peel?" He... he.. sampeyan tak perlu memikirkannya terlalu dalam. Ini hanyalah sekedar tips dan trick saja agar lebih banyak "teks" yang dapat dibaca mesin pencari. Bukankah lebih banyak diantara sampeyan semua yang menggunakan kata atau kalimat seperti "tutorial", "cara membuat" , "cara pasang" dan "panduan ....." saat melakukan pencarian (browsing)? Diluar itu ...? Ha... ha... tentu saja memang ada trick yang harus dipatuhi untuk membuat page peel. Page peel yang pada dasarnya merupakan sebuah halaman berisi link dan biasa diletakkan pada pojok blog (atas, kanan, bawah, kiri) disertai animasi gerak melalui image dan file flash ini memang tak sekedar desain biasa. Desain page peel yang dibuat dalam bentuk iframe seperti yang akan kita buat ini memang membutuhkan penanganan khusus.
- Harus menggunakan image dengan ukuran yang tepat.
- Semua file flash (.swf) dan image harus diupload di file hosting. Anda bisa gunakan google sites (untuk file flash) dan di halaman posting blogger (file image).
- Javascript yang digunakan harus dalam bentuk link sehingga sampeyan harus mengupload javascriptnya terlebih dahulu di file hosting (dapat dilakukan di google code atau google sites ).
D E M O
Agar lebih jelas bagaimana sebenarnya page peel yang akan kita buat, sampeyan bisa lihat demo-nya. Dalam demo telah disertakan juga javascript beserta link file flash dan image yang diperlukan untuk membangun page peel secara lengkap. Silahkan download file-file teersebut kemudian upload untuk digunakan di blog.
Langkah membuat page peel
- Copy javascript yang disertakan dalam demo.
- Download file flash (swf) dan image yang digunakan.
- Upload file-file tersebut di file hosting. File flash bisa nada upload di google sites dan file image sebaiknya upload di halaman posting blogger.
- Pastekan file hasil upload dalam javascript.
- Upload javascript (di google sites atau google code) dan gunakan linknya, hingga kita dapatkan kode javascript page peel dalam bentuk seperti ini:
Link javascript page peel
<script src="page-peel.js" type="text/javascript">
- Bersamaan dengan mempersiapkan javascript page peel, silahkan lakukan login ke blogger.
- Setelah masuk di Halaman Dasbor (Dasboard), klik Rancangan (Design).
- Beberapa elemen akan terlihat di halaman "Elemen Laman (Page Elements)".
Klik Edit HTML. - Setelah halaman Edit html terlihat, lakukan backup template terlebih dahulu
- Cari kode:
<body> atau
<body expr:class='"loading" + data:blog.mobileClass'> - Letakkan dan simpan javascript di bawah kode tersebut.
- Klik "Simpan Template (SAVE Template)".
- Buka blog dan lihat hasilnya.
Catatan/Keterangan:
- Untuk mengikuti panduan cara backup template dan cara mencari kode html silahkan buka Special Tutorials di deret menu vertical sebelah kiri.
- Anda dapat melakukan percobaan terlebih dahulu dengan semua file yang tersedia di javascript. Setelah selesai dan berhasil menampilkan page peel dengan baik, segera lakukan upload terhadap file flash (di google sites) dan file image (di halaman posting blog). Menggunakan file yang diupload sendiri akan lebih aman dan mempunyai kecepatan loading lebih baik.
- Panduan upload file di google site dapat anda buka di sini.
- Jika ingin menggunakan gambar (image) yang dibuat sendiri, gunakan ukuran yang sesuai dengan file gambar yang telah disertakan.
- Ganti URL :
http://gubhugreyot.blogspot.com yang terdapat dalam javascript dengan URL yang ingin dipasang sebagai link page peel.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Posting » Ngahad PON, February, 19, 2012
» Happy Blogging - gubhugreyot «
Mantep Nih, tapi Bang Aku Pengen tau cara membuat background kayak di bLOG DEMO itu background yang Ada Di Header Atraktif banget tuh, post ya bang
BalasHapusPro: Riski ii
BalasHapusUntuk buat Kateogori/label silahkan buka :
http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/02/trick-dan-cara-membuat-label-kategori.html
Pro: Alvis
Untuk buat show/hide (Spoiler) buka di:
http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com/2012/02/showhide-using-jquery-flag-counter.html
Pro sobat blogger semua yang dah datang berkunjung dan juga yang dah kasih comment " Thank's for all ...and ... happy blogging!!!"
Salam ...
gubhugreyot
mas ajarin saya buat kayak gini..........
BalasHapus