SharkzInfo

Template Blogger Bahagian 1

2009-02-15T22:56:00.000-08:00

Penulis ditanya oleh Shay jika ada template disediakan disini dan jawapannya memang blog ini menawarkan template untuk para bloggers. Cuma waktu yang tidak mengizinkan penulis untuk membuat postingan tentang template. Maklumlah, penulis masih lagi di alam persekolahan jadi masa itu amat terhad bagi penulis. Disini penulis ingin menyenaraikan beberapa template yang penulis jumpa melalui Pak Cik Google. Berikut merupakan senarainya :-

Dilectio

Download

Nitelife

Download

DFire

Download

Spiderman 3

Download

Charcoal

Download

Rainbow Garden

Download

Field Of Dreams

Download

Florascent

Download

iBlock

Download

Darkspark

Download

Cara-cara untuk menginstall template baru

1. Copy kesemua kod template baru dari mana-mana template pilihan anda dengan menekan link Download yang telah diberi.

2. Masuk ke Dashboard > Layout > Edit HTML.

3. Tandakan pada 'Expand Widget Template'.

4. Tekan Ctrl+A pada keyboard anda (select all (hightlight) kod-kod lama anda).

5. Tekan Ctrl+V pada keyboard anda untuk menampal kod template yang baru.

6. Preview dahulu dan jika anda sudah berpuas hati barulah anda menekan Save Template.

Selamat Mencuba!

Elak Daripada Widget Hilang

2009-02-15T04:58:00.000-08:00

Biasanya bila penulis mengupload template, akan terpapar amaran yg diberikan iaitu widget-widget hilang. Namun Begitu, setelah berhempas pulas bertanyakan Pak Cik Google, akhirnya penulis berjaya menjumpai satu cara yang diilhamkan dari Teratak Muncet. Berikut merupakan cara-caranya :-

1. Pergi ke Layout > Edit HTML

2. Kemudian searchkan widget-widget anda dibahagian Sidebar <b:section class='sidebar' id='sidebar' preferred='yes'>. Namun begiitu, berlainan bagi setiap template letaknya widget blog teresbut, jadi pembaca haruslah bekerja lebih sedikit untuk mencari widget-widget di dalam kod-kod itu.

3. Copykan kesemuanya (kod-kod widget tersebut) untuk elakkan daripada hilang.

4. Contoh: penulis telah menghighlightkan dan copy semua kod-kod widget kesayangan penulis dan letakkannya didalam notepad buat sementara seperti gambar di bawah :-

5. Kemudian aku pun upload template baru, dan akan terpapar satu amaran seperti gambar di bawah :-

6. Tips. Jangan klik Confirm & Save!

7. Kemudian cari <b:section class='sidebar' id='sidebar' preferred='yes'> sekali lagi dan pastekan semula kod-kod widget yang telah disimpan sebentar tadi (dalam Notepad tadi) dibawahnya.

8. Kemudian Save Template. Bukan Confirm and Save.

9. Jika ada widget-widget yang menggunakan 'id' yang sama, tukarkan saja nombor 'id' tersebut kepada apa-apa nombor yang belum digunakan didalam template baru tersebut. contoh : jika sudah ada widget yang menggunakan ID HTML1, penulis hana perlu tukarkan kepada 'id' tersebut kepada HTML2 atau HTML10. Ini disebabkan widget-widget ini tidak boleh menggunakan pengenalan atau 'id' yang sama pada waktu yg sama.

Kesimpulannye, widget-widget kesayangan pembaca tidak akan hilang dan tidak perlu risau lagi setiap kali pembaca mahu mengupload Template yang baru.

p/s: Sila cuba di blog test (masukkan widget-widget tambahan dan upload template) terdahulu sebelum membuat di blog yang betul.

Tiga Kolum Di Ruangan Bawah

2009-02-15T03:18:00.000-08:00

Kali ini penulis akan memberikan tutorial berkenaan dengan menambah tiga kolum di bahagian footer. Penulis difahamkan dia telah mendapat kod untuk tiga kolum tersebut tetapi kod asas yang diberi tiada warna latarbelakang (background) dan garisan (border) untuk setiap tajuk. Ayuh, masuk kelas tutorial. Pastikan anda membaca berulangkali agar mudah difahami.

Sila Download Full Template sebelum memulakan sebarang pengubahsuaian pada blog.

1. Pindahkan semua widget yang ada di bahagian footer.

2. Login ke Blogspot.

3. Layout - Edit HTML.

4. Cari kod di bawah.

5. Tukarkan kod yang berwarna merah dengan kod di bawah.

Nota : <hr align='center' color='#5d5d54' width='90%'/> adalah satu garisan lurus yang bertujuan membahagikan ruangan footer dengan ruangan paling bawah. Anda boleh mengubah warnanya mengikut warna latarbelakang blog. Jika tidak mahu garisan itu, anda cuma perlu buang kodnya sahaja.

6. Seterusnya cari pula kod </b:skin>.

7. Tambah kod ini sebelum </b:skin>.

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Nota : Kod footer-column-container { di atas ialah kod asas bagi tiga kolum di footer yang diajar oleh Amanda. Penulis telah melakukan pengubahsuaian dengan menambah #footer-column-container h2 { di antara #footer-column-container { dan .footer-column { berdasarkan tutorial empat kolum ruangan atas tulisan Ien.

Inilah contoh kod yang penulis hasilkan. Ia dilengkapi dengan warna latarbelakang dan garisan pada setiap tajuk dan juga kotak utama kolum tersebut.

#footer-column-container {
clear:both;
background: #ffbbbb;
line-height: 1.4em;
margin:auto;
height: 200px;
border: 1px solid #cc0000;
width: 900px;
margin-bottom: 10px;
}

#footer-column-container h2 {
margin: .5em 0 .5em;
padding: 4px 5px;
font-size: 12px;
font-family: verdana;
color: #ffffff;
background: #333333;
padding: 5px;
margin-top: -1px;
}

.footer-column {
padding: 10px;
}

Nota: Anda boleh mengubah setiap kod yang penulis tebalkan mengikut kesesuaian blog anda.

8. Save template.

Kini, anda sudah siap memasukkan tiga kolum di footer. Anda perlu memastikan ianya berfungsi dengan baik agar widget baru dapat dimasukkan.

9. Layout - Page Elements.

Di bahagian bawahnya, anda akan melihat tiga kolum baru sudah tersedia. Tugas anda seterusnya hanyalah memasukkan widget² kegemaran anda. Pastikan anda membaca dengan teliti sebelum mencuba tutorial ini. Semoga sukses.

Hubungi Saya

2009-02-15T02:07:00.000-08:00

Widget 'Back To Top'

2009-02-15T00:31:00.000-08:00

Seorang rakan penulis,Hendrastar, bertanyakan tentang 'Back To Top' di blog ini iaitu widget untuk kembali ke bahagian atas blog tertentu. Penulis berasa hairan jika seseorang blogger itu tidak meletakkan widget ini di dalam blog mereka sedangkan postingan yg dibuat panjang-panjang belaka. Dengan itu penulis dengan sukacitanya untuk mengajar cara-cara untuk membuat widget ini.

1. Log in ke dalam dashboard anda.
2. Pergi ke bahagian 'Layout' anda.
3. Pilih 'Add a Gadget' dan seteerusnya HML/JavaScript.
4. Masukkan kod-kod yg tertera dibawah ini :-

5. Save setting anda.

Senang bukan? Ya, ia memamng senang sekali. Anda tidak perlu bersusah payah untuk mengedit HTML template anda. Namun begitu, pembaca hendaklah menukarkan link gambar yang telah di warnakan pada kod diatas. Pembaca boleh menggunakan apa-apa gambar yg bersesuaian. Disini penulis dengan sukarela memberi sedikit contoh gambar-gambar yang bersesuaian :-

| | | | |

Sekian, Selama Mencuba!

Membuat Baca Selanjutnya

2009-02-14T14:33:00.000-08:00

Seorang pengunjung blog iaitu Neoryzer telah meninggalkan soalan di bahagian komen iaitu tentang penggunaan paparan penuh dan paparan ringkas di dalam blog ini. Dalam erti kata lain, ianya dipanggil sebagai menu baca selanjutnya. Sebagai contoh, menu paparan penuh di dalam blog ini tidak memerlukan pengunjung menunggu untuk membaca cerita penuh kerana ia dibuka di dalam mukasurat yang sama. Ada sesetengah menu tersebut dibuka di dalam muka surat baru.

Berikut ialah cara²nya :-

1.Login.
2.Pilih Layout - Edit HTML (Tanda kotak Expand Widget).
3.Cari <head> dan letakkan kod ini sebelumnya.

5.Cari kod di bawah ini :-

<b:includable id='post' var='post'>

5.Tambahkan kod seperti di bawah. Hanya tambahkan kod yang berwana merah.

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Selanjutnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Ringkasan...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> 
</div>

6.Save template.
7.Sekarang pergi pula ke Settings - Formatting.
8.Masukkan kod di bawah ini ke dalam Post Template.

Type your summary here
<span id="fullpost">
Type your summary here
</span>

9.Save settings.

Untuk mencuba samada ia berfungsi atau tidak, anda mulakan topik baru dan lihat adakah kod yang sama seperti di atas tertera di dalam kotak. Cara untuk memulakan penulisan adalah seperti berikut :-

Type your summary here = Taip di sini untuk bahagian paparan ringkas.
<span id="fullpost">
Type your summary here = Selanjutnya taip di sini untuk paparan penuh.
</span>

Selamat mencuba. Semoga sukses.

Halang Klik Kiri Pada Gambar

2009-02-14T06:49:00.000-08:00

Lazimnya bloggers mahukan kod untuk mematikan fungsi klik kanan atau disable right click tetapi Oshinz yang comel telah bertanyakan tentang kod untuk mematikan klik kiri pada gambar. Justeru, penulis telah mengerah tenaga Pakcik Google dan sekelip mata kod itu telah berjaya penulis perolehi. Penulis andaikan anda telah menggunakan fungsi matikan klik kanan di dalam blog anda sebelum menggunakan kod menghalang klik kiri pada gambar ini.

Anda perlu melakukan cara ini secara manual untuk setiap gambar yang anda ingin matikan klik kiri.

1. Tulis topik seperti biasa.

2. Muatnaik gambar dari komputer atau web lain.

3. Pilih tab Edit HTML untuk mengedit kod gambar.

Contoh kod gambar adalah seperti berikut :-

4. Anda perlu membuang kod yang berwarna merah kerana kod tersebutlah yang memberikan pautan kepada gambar anda.

Contoh kod gambar yang telah diedit :-

5. Preview dan cuba klik pada gambar tersebut. Jika ia tidak dibuka pada halaman lain, bermakna anda telah berjaya melakukan tutorial ini.

6. Publish.

Namun, penulis ingin mengingatkan bahawa cara ini tidak semestinya berkesan untuk melindungi gambar anda. Jika orang yang tidak bertanggungjawab masih mahu mencuri hasil kerja anda, mereka masih boleh menggunakan menu pada browser Firefox untuk tujuan tersebut.