Showing posts with label Blog Tutorial. Show all posts
Showing posts with label Blog Tutorial. Show all posts

Monday, July 20, 2009

To hide the Navbar in blogger


Entry ini khas untuk MyLilDreamz dan semua rakan di mombloggersplanet.com.



To hide the Blogger Navbar (black in color):

1- Log in to blogger

2- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

3- paste the CSS definition in the top of the template code:

...
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#333" value="#333333">
...

Remove the code to show it again.





Wednesday, May 27, 2009

Blog Syafiah dibuka semula


Kenapa saya tutup sekejap blog Syafiah si kecil yang hebat itu?

Saya melakukan layout make-over secara besar-besaran selepas terpengaruh dengan salah seorang blogger yang juga kawan baik alam maya saya iaitu Intan! Intan menukar blognya kepada magazine layout yang kemas dan teratur. Tapi sekarang ni dia revert balik layout blog tu kepada layout sebelum ni. Whatelahapen?


Screenshot blog Syafiah


Layout blog ni dinamakan sebagai Reflection dan saya dapat di btemplates.com. Saya sukakan templates di sini sebab ia pelbagai. Nak buat sendiri nanti²lah. Kebanyakan blog menarik ni diadaptasikan dari Wordpress. Saya ada akaun di sana tapi sehingga kini saya masih tak selesa untuk berpindah. Antara ciri² menarik:

1- Featured post/glider content.
2- Fixed width.
3- Right sidebar.
4- Search form.
5- Navigation tab.
6- 3 columns.

Nak tambah gempak lagi, saya mencari kod untuk navigation tab jenis multi level drop down menu (lihat di sebelah kanan sidebar, di atas sekali). Sebenarnya saya nak gantikan navigation tab yang asal tu, tapi saya masih mencari penyelesaiannya. Saya dapat kod untuk drop down menu itu di bloggerstop.net.

Sebenarnya saya berkenan betul dengan slide show tab view menu. Contohnya boleh dilihat di sini. Lihat sebelah kiri, di bahagian bawah Home. Cuma saya belum ada mood nak masukkan ia ke dalam mana² blog yang saya ada ni. Nantilah...

Selain itu saya dapat juga ilmu untuk memainkan Youtube secara autoplay dan loop selepas kita memasukkan kodnya ke dalam mana² tempat terutamanya di dalam blog. Dan tandatangan di bawah ini, saya dapatkan kodnya dari My Live Signature tanpa membuka akaun di sana.

Berminat? Cubalah sendiri dengan memasuki website yang berkenaan... selamat mencuba!



Tuesday, October 21, 2008

Tips : Mengenai Read More........ lagi...


Brader Aboo tanya saya di posting terdahulu:



Berikut cara yang saya buat. Amaran... sila jangan pening... Anggaplah diri anda Spongebob Squarepant yang mempunyai kuasa menyerap air (info) yang tinggi sehingga terkeluar air itu dari mata, telinga & mulut! Kehkehkeh....


> Dashboard > Layout > Edit HTML > Tick 'Expand Widget Templates'



> Cari bahagian yang div class='post-header-line-1'/ > Salin tempek kod² html yang berwarna merah dari Hackosphere > Preview

Saya percaya anda pasti akan temui error di bawah ini selepas anda klik butang Preview:



'We were unable to preview your template'
'More than one widget was found with id: Bloglist1. Widget IDs should be unique.'

Widget di sini bermaksud gadget di Page Elements. Maknanya anda perlu membuang gadget di bahagian Page Elements tersebut. Namun sebelum anda membuangnya, anda perlu back up satu persatu gadget tersebut di dalam notepad/MS word. Nampak macam leceh tetapi percayalah... (macam politik pulak!! Huhu!), ia tidak akan mengambil masa yang lama.


Yang asal... tu diaaa... punya banyak. Awat yang banyak sangat hang punya html/javascript, Aboo oiii? Yang Limited Access kat atas tu boleh dibuat dengan menambah gadget dan drag gadget berkenaan ke bawah 'Links'.


Yang saya buang...

Lepas tu saya ulangi balik langkah Edit HTML > Tick Expand Widget Templates > Copy & paste the code from Hackosphere > Tekan save.

Jika keluar mesej 'View Blog' maknanya percubaan anda telah berjaya. Dan anda perlu meletakkan semula ke semua kod html yang anda buang di bahagian gadget itu tadi.

Kemudian pergi ke Settings > Formatting > Cari Post Template di bahagian bawah > Taip seperti dalam imej di bawah > Save settings



Jika anda 'Create' posting baru, di skrin anda akan tertera seperti berikut di bahagian Edit HTML:



Di bawah adalah versi asal posting dan cuba bandingkan dengan hasilnya:






Nampak macam susah dan banyak langkah akan tetapi sebenarnya ia tidaklah sesusah mana. Cuma yang nampak leceh tu bab bila kena letak balik gadget tu... Oh! Sila.. sila... jangan pening ok!!

Saya dapati jika kita seringkali menggunakan keyboard selain daripada mouse, penggunaan komputer akan lebih mudah. Contohnya, kod Alt + 0178 (akan jadi ²), salin tempek, dll. Saya belajar menggunakan keyboard dengan banyak sekali ketika saya 'menggodek' Autocad versi yang terdahulu. Kira² 10 tahun yang lalu.. huhu!

Owh.. hasil ujian urin negatif.. saya perlu risaukan perkara lain pula.. hish!

Saturday, October 18, 2008

Tips Membuat [Read more/baca seterusnya...]


Bagi saya, berblog mencabar keinginan dan pengetahuan saya. Saya menukar 'cat' & menggodek rumah ini berulang-kali bukan hanya untuk suka² atau apa yang orang katakan hobi. Tetapi ia lebih kepada ilmu dan cabaran baru yang saya tempuhi. Saya tidak mahu hanya menaip dan menerbitkan entry. Saya mencabar diri saya sendiri lebih dari itu.

Malah dalam apa bidang ilmu sekali pun saya amat gemar mencari maklumat dan mencabar diri sendiri. Contohnya - terma perubatan & kejuruteraan. Bagi saya, sikap menimba ilmu itu penting dalam diri setiap insan tidak kira apa saja latar belakang mahu pun umur. Jangan berhenti menimba ilmu sekali pun anda bergelar Doktor Falsafah dan berasa selesa dengan kedudukan itu. Ilmu yang orang lain ada, mungkin tiada pada anda. Merendah dirilah!

Ingat pada entry saya tempohari? Saya mengatakan bahawa saya mahu mencari tips untuk membuat [Read more...]. Ya.. akhirnya saya berjaya. Saya berjaya mengubah lagi blog ini bermula dari entry Nurul Huda. Saya tidak mengusik entry sebelum itu kerana masuk entry yang ini, keseluruhan entry saya dari tahun lepas adalah sebanyak 201 entry. Lenguhlah tangan saya... tak banyak pun.. kes malas sebenarnya

Bagi yang landing terus pada tajuk, tidak akan nampak perbezaan tapi sekiranya anda tekan pada 'Home' anda akan dapat melihat apa yang saya maksudkan.

Tips membuat [Read more...] atau dikenali sebagai 'Expandable post summaries' ini saya jejaki di 3 tempat. Antaranya di Blogger Buster dan Blogger Tips & Tricks. Dan bagi blog saya, saya gunakan tips dari Hackosphere kerana kod dan arahannya lebih mudah dan ia sesuai untuk pengguna template beta. Perlu diketahui bahawa kod html/Javascript adalah berbeza-beza walau pun untuk satu fungsi yang sama. Di sinilah kemahiran membaca kod yang hampir² sama diperlukan.

Adalah disarankan agar back up template anda terlebih dahulu dengan menekan 'Download Full Template' dan ikuti arahannya.

Di bawah ini saya perturunkan ilmu dari budak baru belajar ni.

1. Dashboard > Layout > Edit HTML > Tick expand widget templates > Ikuti langkah di bawah:



Perkataan Read more..... di dalam imej di atas bersifat boleh diubah. Anda boleh mengubahnya mengikut kesukaan anda.

Jika anda membuat entry baru, perkataan² dari langkah terakhir di atas akan muncul di bahagian Edit HTML bagi memudahkan anda untuk menaip di bahagian 'summary' dan di mana untuk menaip keseluruhan intipati post anda. Selamat mencuba... Kalau ada ilmu lain, sudi²kanlah berkongsi dengan saya.

Wednesday, October 15, 2008

Rumah maya bercat baru...


Kala ini saya begitu resah... Syafiah kini sedang berada di HSB, menjalani ujian imbasan CT. Lintasan² negatif bermain di fikiran. I'm helpless! Dah la dia kena puasa... Saya tak dapat temankan kerana perlu mengawasi dua orang lagi tentera yang lasak...

Cerita semalam. Seperti yang tertera, cat dan membina rumah maya lagi. Terlalu cerewet - main text kena lebar, mesti sebelah kiri, latar perlu putih, tulisan kena besar, perlu ada navigation tab, 2-ruang (column) (kalau banyak sangat, jadi serabut!). Saya suka FunkyZine di Bloggertricks. FunkyZine ni asalnya tema Wordpress tetapi telah diadaptasikan ke versi Blogger. Satu lagi template yang saya suka ialah template Ramadhan al-Mubarak dari Our Blogger Templates. Cuma main text dia berada di sebelah kanan. Saya akan cuba ubah ia ke sebelah kiri.

Cuma....
- main text width - 974px, saya tukar ke 1000px supaya ruang posting lebih lebar.
- navigation tab float - left, saya tukar ke right. Saya tukar cap dari uppercase ke titlecase.
- jenis tulisan asal telah diubah kepada Verdana 14px. Arial segala saya buang.
- saya juga buang RSS.
- header h1. Buang logo FunkyZine ke Tangan Yang Menghayun Buaian. Tukar width dan height ke 500px & 60px respectively.

Hasilnya benar² memuaskan hati. Warna² yang saya gemari ada dalam blog ini - hitam, merah, putih. Ini baru sedikit langkah. Sedikit kemahiran membaca kod html diperlukan. Suatu hari nanti saya pasti akan hasilkan template sendiri. Original. Yang sedap mata saya memandang. Yang ringan, ringkas tapi kreatif dan tersendiri.

Bandingkan versi asal dengan blog ini:


Klik sini untuk demo.

Saya nak buat [read more] pulak lepas ni...

Wednesday, August 13, 2008

Notis : Godek Template



Harap maaf! Saya sedang menggodek template. Template 'Creation' saya tidak keluar sepertimana kebiasaan... yang putih jadi biru... saya rasa annoy!

Akhirnya saya dah dapat balik solution kepada warna putih yang bertukar ke biru tu. Sayangnya lepas weekend yang lepas streamyx benar² menguji kesabaran. I just want it back to normal. I did it! So glad. Menyusun semula blog ini akan dibuat pada esok hari...

Untuk kak Iza:
Nak buat navigation tab kat atas tu kena masuk Layout > Edit HTML > Cari sedikit ruang di bawah < !-- /Title -- >, masukkan kod berikut:


Sebenarnya boleh juga diletakkan http://YOURLINK sahaja tanpa ' target='_blank' akan tetapi saya selalu letak kod tersebut bagi memudahkan pengguna untuk membuka link terus kepada tetingkap yang baru.

Saturday, August 9, 2008

Web Speed Test & The Best Image Format


>


I must thank Rimau for this as I haven't tested my blog speed for such a long time sebab aku loading tak lembap.. hehehe. Before I cut and threw away few pictures and html code, the web size was 375kb. Now, it's 123kb! It may be varies from time to time if there's a new entry, new photos or new html.

What things I threw away? The list:
1. Competurr. Around the globe thing.
2. Webstats.
3. JPEGs at Saiful Bukhari's entry.
4. JPEG at Pak Bakaq's entry.

I found out the JPEG format files 'eat' most of my web size. Thus, I tried and made a comparison between BMP, JPEG and PNG (pronounce as ping) image. I just used the above image:

1. BMP - original size (0.99Mb), compressed to doc (29.1kb), compressed to web (4.92kb).

2. JPEG - original size (59.7kb), compressed to web (26.8kb).

3. PNG - original size (18kb). Since it's the smallest, I didn't compress it anymore.

To explain why the sizes are varies, you can visit here for further details.

And to speed test your blog/web, you can go websiteoptimization.com or Firebug. Credit to Kak Jie for the speed test links tapi saya bukan nak lawan sifu.. hihi!.

Why it's necessary to speed test your blog/web? It's to ensure the size and loading time of your web. The more faster the better.
 

Tangan Yang Menghayun Buaian Copyright © 2008 Green Scrapbook Diary Designed by SimplyWP | Made free by Scrapbooking Software | Bloggerized by Ipiet Notez