Antara Header Dan Main

Antara Header Dan Main

Blogger-Mu

 
Showing posts with label Hacks. Show all posts
Showing posts with label Hacks. Show all posts

Tuesday, February 26, 2008

Bagaimana Kalau Mahu Upload XML, Tapi Tak Mahu Menyebabkan Terpaksa Men-Delete Gambar Atau HTML? (Tak Mahu Men-Delete Widget)

Bagi mereka yang pernah melaksanakan tutorial saya berkenaan 'menguploadkan xml' akan selalu mendapati arahan/nasihat saya untuk mem-back-up-kan semua kod html dan gambar yang mereka sedia letak di sidebar, atau di header dan sebagainya. Kenapa? Kerana blog anda memang telah ada xmlnya sendiri, dan xml yang bakal anda upload akan menindih-hilangkan semua xml anda sebelum ini.

Antara benda yang ditindih-hilangkan adalah gambar dan kod-kod html yang anda sedia letak di blog anda.

Namun, saya juga mendapati bahawa, ada cara supaya gambar dan kod html ini tidak perlu di-delete dan ditindih-hilang. Terlebih dahulu, anda perlu mengetahui bahawa, setiap gambar dan kod html yang anda letak di blog diwakili oleh 'widget'. Sebagai contoh, dalam blog saya, saya ada meletakkan gambar bertajuk 'niha'. Maka di sidebar wrapper saya, ada widget jenis 'image', dengan id 'Image2' dan dengan title 'niha'. Untuk memahami dengan lebih jelas, rujuk gambar ini.


Tandakan kotak Expand Widget Templates. Setelah Expand Widget Templates ditanda, kod detail keluar, cuba tekan Ctrl F dan saya taip 'niha' untuk mencari kodnya. Maka, sejumlah kod berkaitan gambar niha muncul.


Copy/Salin kod ini selengkapnya, dan simpan di notepad. Oleh kerana setiap widget dimulai dengan b widget dan di akhiri dengan /b widget, jangan ada keciciran dalam meng-copy.


Kemudian, baru lakukan kerja upload xml anda. Ketika upload, anda diminta men-delete widget, tolong jangan tekan 'confirm dan save'. Sebaliknya, scroll html anda, dan cari sidebar wrapper.


Paste-kan semula kod gambar niha - yang anda letak sementara di notepad tadi - selepas preferred yes.

Kemudian, tekan 'save template'. Dengan itu, anda telah berjaya mengelakkan diri dari terpaksa mendelete kod html atau gambar, dan dalam masa yang sama, ada juga telah berjaya meng-upload xml anda.

Wednesday, May 2, 2007

Membuat Variable Sendiri

Mereka yang suka bermain dengan warna perlu membaca entri ini. Di bahagian [template] - [fonts and colours], anda akan dapat melihat sistem yang memudahkan anda menukarkan warna dengan hanya mengklik warna yang anda mahu bagi item-item tertentu.

Tetapi, tak banyak pilihan item yang boleh anda tukar. Masih ada lagi item yang tidak bertukar warnanya. Jadi bagaimana? Di sini kita akan mencuba satu hack mudah.


Pergi ke [edit html]. Mula-mula, anda perlu tahu, bahawa warna diwakili oleh simbol bertanda # iaitu simbol yang berada sekali dengan nombor 3 di keyboard anda.

Langkah pertama, sila scroll demi mencari mana-mana kod html yang membawa simbol # ini. Sebagai contoh, saya menjumpai kod dengan nama background, seperti di bawah. Ia memakai warna #efefef sebagai nilai warnanya.


Langkah seterusnya, saya perlu mencipta satu nama khas dalam hack mudah ini. Saya memilih nama [percubaan]. Taipkan perkataan percubaan selepas kod nilai #efefef tadi, betul-betul seperti contoh di bawah.

Juga jangan lupa, perkataan percubaan itu didahului dengan simbol $ yang berada di key board bersama kekunci 4. Jadi, perkataan yang perlu ditaip adalah $percubaan


Kemudian, saya kerat (cut) dulu kod #efefef. Kod yang mewakili nilai warna ini akan dipakai nanti. Buat masa ini, kerat saja dulu. Hasilnya seperti di bawah.


Scroll semula ke atas, pergi ke bahagian variable. Seperti rajah di bawah, saya telah meng-copy variable yang paling atas, dan mem-paste (menampalkannya) di bawahnya.


Tuakrkan nama variable kepada percubaan. Tukarkan descriptionnya kepada percubaan. Tukarkan default-nya kepada #efefef iaitu nilai warna yang kita ambil tadi. Tukarkan value-nya juga kepada #efefef seperti rajah di bawah.


Kemudian save. Siap. Pergi bahagian [fonts and colours]. Menu'percubaan' telah ada. Anda sudah boleh menukar warnanya. Sila sila.


Selamat mencuba.

Monday, April 23, 2007

Men-set Supaya Gambar Di Sidebar Boleh Ke Tengah

Ini mungkin satu hack mudah. Tapi demi meraikan yang bertanya, saya tuliskan juga.

Berkenaan gambar di sidebar. Seorang kawan bertanya - dia telah meletakkan gambar di sidebar. Gambar itu berada di posisi kiri [left], dan dia mahu jadikan gambar itu ke posisi tengah [center].

Lalu saya kata, ada satu cara mudah nak set supaya semua ke tengah, tapi bukan hanya gambar, tulisan dan semua yang ada di sidebar semuanya akan ke tengah.

Dia kata, dia tak nak macam itu. Ada yang dia nak set ke tengah, dan ada yang dia nak set di tepi kiri macam biasa. Lalu bagaimana? Lihat contoh gambar CDRK di bawah. Gambar di CDRK ini berada di posisi kiri [left] dan mahu ditengahkan. Dalam hack mudah ini, saya mahu menjadikan gambar CDRK [depan] supaya ketengah.


Mula-mula, sila ke edit html. Cari [expand widget templates] dan tandakan di kotak itu. Paparan HTML akan diulangpapar.


Seterusnya, cari di manakah kod untuk gambar CDRK [depan] berada di mana. Kerana kita akan membuat sedikit ubahsuai supaya gambar tersebut boleh ke tengah. Untuk memudahkan mencari di manakah letaknya kod tersebut, tekan kekunci Ctrl dan kekunci F bersama-sama. Kalau anda melayari internet menggunakan Internet Explorer (IE), maka paparan di bawah akan muncul.


Kalau anda melayari internet menggunakan Mozilla Firefox, di bahagian bawah akan keluar kotak [find].

Tak kiralah mozilla atau pun IE, saya taipkan perkataan CDRK sebab saya nak cari kod bagi gambar tersebut. [anda pula taipkan perkataan yang mewakili gambar yang anda cari.] Mulakan carian. Anda akan menjumpai letak duduknya kod untuk gambar CDRK.


Kodnya adalah seperti gambar di atas. Anda akan mendapati kod itu ada:
b widget
b includable id main
b if cond
h2 data
div class widget contain

Perhatikan div class widget contain.

Selepas div class widget contain, sila masukkan kod center betul-betul selepas tanda '> ' seperti gambar di bawah.


Kemudian, lihat lagi pada kod. Anda akan jumpa
img expr,
expr id,
dan expr witdh.

Selepas kod witdh ditutup dengan tanda /> anda perlu menambah kod baru. Iaitu kod /center, seperti dalam gambar di bawah. Ia sebelum br.


Setelah itu save template. Hasilnya, gambar dengan title CDRK telah ke tengah. Lihat gambar di bawah.


Selamat mencuba. Jangan lupa tanda <>

Friday, April 13, 2007

Meng-hack Template Afifuddin Dan Memakaikannya Sistem Blogger Baru

Saya baru meng-hack satu template milik Afifuddin dan menjadikannya memakai sistem blogger baru yang punya add page element dan edit color and font. Sehingga entri ini ditulis, beliau masih lagi menggunakan sistem blogger lama.

Ssperti biasa, kalau anda mahu mencuba template ini, pastikan kod-kod html di sidebar anda telah anda simpan untuk back-up kelak. Begitu juga gambar-gambar.

Pertama, sila download xml ini dengan mengklik kanan dan memilih save as.

Kedua, pergi ke blog anda, pergi ke edit html - dan upload xml tadi dengan mem-browse dan meng-uploadnya. Mungkin anda diminta mendelete beberapa benda. Itulah tujuan saya meminta anda menyimpan kod dan gambar back-up.

Sepertimana gambar contoh di atas, bahagian header iaitu banner yang digunakan oleh Afifuddin (siap dengan gambar beliau sekali) itu boleh ditukar kepada gambar lain. Saya meletakkannya di add page element. Kerana header saya ada add page element.

Yang asas adalah latarnya, iaitu latar hijau kuning.

Selamat mencuba.

Sunday, April 8, 2007

Memecahkan Kotak Sidebar - Khas Untuk Template Jenis Rounders 3

Ada seorang kawan bertanya, kerana dia juga menggunakan template rounders3 macam saya. Katanya, di bahagian sidebar cuma ada dua pecahan saja. Macam mana hendak buat lebih dari dua pecahan. Hm, boleh bayangkan tak dua pecahan yang dimaksudkan?

Dua pecahan itu macam gambar di bawah.


Oleh kerana cuma ada dua pecahan kotak, jadi, kotak yang bawah tu berkongsi antara blog archieve, ucap selamat dan lambang blogger.

Jadi, nak pisahkan setiap satu dalam kotak pecahan masing-masing.

Apa yang perlu dibuat adalah mencari kod itu dulu. Kod di mana setiap item itu berada. Lihat bawah.


Anda lihat, ada blog archieve, ucap selamat dan blogger button. Perhatikan di atas dan di bawah ketiga-tiga item itu. Ada div id sidebar... hinggalah preferred yes, juga di bawahnya pula ada /b section dan /div.
Kod yg saya hitamkan itu, atas dah bawah itu, perlu dicopy 3, satu utk blog arkib, satu utk ucap selamat dan satu untuk blogger button. Ia akan jadi seperti di bawah ini.
Kemudian, anda perlu menukar id sidebar kepada sidebar1, sidebar2 dan sidebar3,seperti di bawah ini.

Maka dah siap. Dah jadi pecahan sidebar asing-asing.


Selamat mencuba

Meng-hack Template Fairuz Supaya Dapat Memakai Sistem Blogger Baru.

Pernah saya bercanda mahu membina sebuah blog yang memakai sistem blog baru - ada add page element, ada font and color setting - tetapi mahu juga dalam masa yang sama memakai wajah template saya sendiri, BUKAN memakai template asal dari blogger.

Ia semacam dua permintaan yang saling bertentangan. Tapi, akhirnya saya berjaya meng-hack juga [kalau boleh dipanggil hack lah].

Pertama, cuba buka blog Fairuz. Dia masih mengekalkan style blogger lama supaya bebas membuat perubahan. Setakat entri ini ditulis, dia masih kekal dengan style lama.

Saya telah meng-hack (kalau boleh dipanggil hack la) blog dia tapi hack budak-budak hingusan je. Kalau mahu cuba, sila klik kanan link ini, dan save as. Save dalam komputer fail xml itu. Kemudian upload ke blog dengan cara [ pergi ke layout + edit html + browse + upload]

Dengan cara ini, anda telah memiliki blog yang sama seperti beliau. Maksud saya, latar template. Tetapi, memakai sistem blogger baru.

Akhirnya berjaya juga saya hack.


O ya. Gambar wafa tu saya masuk dalam add page element, jadi boleh tukar.Yang asas adalah latar merah biru. Itu pun kalau pandai adobe, boleh tukar juga. Cuma saiz jangan tukar.

Selamat mencuba.

Friday, April 6, 2007

Menambah Add Page Element Ke Header - Versi Baru | Lebih Mudah Dari Entri Yang Dulu

Entri saya yang dulu ada menjelaskan macam mana mahu menambah add page element di header. Cara yang saya ajar dulu itu agak panjang. Saya ada hack yang lebih, lebih mudah.

Anda cuma perlu mendelete [maxwidget] dan [showaddelement] di kod header itu, dan gantikan dengan [prefered yes]. Pastikan hasilnya adalah seperti gambar di bawah.

Cara ini bagi saya lebih mudah. Walaupun ada juga cara lain seperti menukarkan setting maxwidget kepada 5, atau lebih, tapi saya lebih suka cara yang ini.

Selamat mencuba.

Monday, March 12, 2007

Menambah Add Page Element Ke Atas [Main]


Main adalah kawasan posting. Soal seorang kawan, boleh tak nak letak [add page element] kat atas main?

Ikuti langkah ini. Cari kod ini.


Tukarkan perkataan no kepada 'yes'


Save sekarang.Lihat hasilnya di page element.

Dah ada kan sekarang?
Selamat Mencuba

Mewujudkan 2 Jenis Sidebar Di Satu Sisi Yang Sama, Satu Besar, Dan Satu Kecil

Menjelaskan maksud tajuk kadang-kala sangat susah. Lihat contoh page element di bawah. Anda akan dapati sidebarnya di sebelah kanan. Tapi, satu besar, berada di atas, dan 2 lagi sidebar kecil, berada di bawahnya.

Seorang kawan bertanya, bagaimana hendak membina sidebar sebegini?


Pertama, cari kod ini.

Header wrapper, tukarkan dari 660px kepada 980px. Supaya headernya jadi besar. Kemudian cari kod ini.

Outer wrapper, tukarkan dari 660px kepada 980px. Main wrapper, tukarkan dari 410px kepada 500px.

Kemudian lihat sidebar wrapper.


Copy kod sidebar wrapper itu seperti di bawah, sebanyak 2 kali, supaya ada 3 sidebar. Kekalkan kod sidebar yang asal, cuma ubah witdh-nya, 220px kepada 210px. Sidebar yang di-copy tadi, tukarkan namanya kepada sidebar2 dan sidebar3. Sidebar2 saiznya 210px, dan float-nya left, sebab sidebar asal float-nya right. Adapun sidebar3, saiznya 460px.


Konsepnya mudah, sidebar3 akan 'meliputi' sidebar 1 dan 2.

Oya, jangan lupa besarkan footer juga, dari 660px kepada 980px.


Sekarang, cari [div id sidebar wrapper]. Delete-kan b widgetnya, dan kekalkan yang lain.


Setelah delete, baki kod di [div id sidebar wrapper] akan tinggal seperti di bawah.

Copy baki kod itu sebanyak 2 kali, menyebabkan div id sidebar akan ada 3. Satu yang asal, dan 2 yang baru. Namakan yang baru itu sebagai sidebar2 dan sidebar3.

Lihat sidebar3 yang baru itu. Selain [ div ] yang berada di bawah sekali, semua kod akan dibawa ke atas.

Hasilnya akan jadi seperti di bawah.

Oleh kerana kita mendelete b widget, maka, kalau kita klik save template sekarang, maka paparan ini akan muncul - bertanya mahu delete-kah?


Kalau anda pergi ke page element sekarang, hasilnya sudah kelihatan, iaitu, Mewujudkan 2 Jenis Sidebar Di Satu Sisi Yang Sama, Satu Besar, Dan Satu Kecil


Selamat mencuba

Sunday, March 11, 2007

Bagaimana Menambah [Add Page Element] di antara [Header] dengan [Main]

Header adalah banner atas sesebuah blog. Main yang saya maksudkan adalah kawasan posting. Jadi, menambah di antara 2 kawasan ini.

Teori yang saya gunakan adalah; mengekalkan kawasan main [kawasan posting] dan sidebar asal, dan saya MENAMBAH main2 dan sidebar2.

Ikuti langkah ini. Mula-mula, cari kawasan content. Besarkan witdh untuk content wrapper kepada 980px, witdh untuk wrapper kepada 700px, dan witdh untuk sidebar kepada 250px.


Copy semua kod content ini, dan paste-kan di bawahnya. Namakan content baru ini sebagai content2


Kemudian cari kod ini.
Copy semua dari [div id main wrapper] hinggalah ke [end content]. Paste-kan [div id main wrapper] baru ini SEBELUM kod div id asal ini. Kemudian, tukar namanya kepada main2.

Delete-kan b widget setelah anda menukar main kepada main2. Ada beberapa lagi yang juga kena tukar namanya kepada 2, seperti sidebar2 dll. Tengok rajah. Setelah anda delete b widget, ia akan jd seperti rajah di bawah. Kawasan itu kosong. Tetapi kod yang lain masih kekal.


Kemudian, pergi ke kawasan content2 yang kita tambah tadi. Tukarkan float dari left kepada right, dan right kepada left.

DARI
KEPADA

Kalau anda save sekarang, anda akan melihat sudah ada 2 main, dan 2 sidebar. Main 1 berada di sebelah kiri, dan main 2 di sebelah kanan. Sidebar1 di sebelah kanan, dan sidebar2 di sebelah kiri.

Sekarang, kita akan mendelete main2, kerana tak mahu kawasan posting keluar di blog dua kali, dan kita akan gantikannya dengan sidebar baru yang akan ditambah. Ikuti langkah berikutnya.

Pergi ke [div id main2] dan delete kawasan yang ditanda.

Kemudian copy [div id sidebar2] di bawahnya, paste-kan di tempat main yang kita delete tadi. Namakan sidebar baru ini sebagai sidebar3.

Kemudian cari kod ini.

Copykan dan pastekan di bawahnya. Namakan sebagai sidebar3. Jangan lupa besarkan witdh kepada 460px, dan tukarkan float kepada right dan left. Biar ada right dan left.


Sekarang save. Anda akan ditanya adakah benar mahu delete blog2. Klik confirm dan save. Ini berlaku kerana kita mendelete main2 tadi.


Selesai. Pergi lihat bentuknya di page element anda. Anda dapati, sudah ada add page element di antara header dengan main posting.


Selamat mencuba.