Jumat, 07 Mei 2010

Meletakkan warna background berbeza pada komen

Selalunya komen antara pemilik blog dan pengunjung mempunyai paparan yang sama. Oleh itu agak sukar untuk melihat yang mana satu komen oleh pengunjung dan komen oleh admin sesuatu blog.Disebabkan  itu biasanya pemilik blog meletakkan paparan warna background yang berbeza bagi jawapan untuk pengunjung. Oleh sekiranya anda   ingin meletakkan paparan kotak komen berbeza dan belum tahu caranya, ikutilah langkah dibawah ini.

Pada blog anda pilih Layout
Klik edit html.
Klik pada Expand template widget.
Cari kod yang seakan di bawah ini, kemudian tambahkan kod yang berwarna merah.


/* Comments ----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em; text-transform:uppercase;
letter-spacing:.2em;
color: #999999;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
.admin-comments{
background:#00CC33;(tukarkan kod warna background disini jika ingin mengubah warna)
border:3px solid #FF9966;
padding:5px; 

}
kod  berwarna merah diatas ini adalah yang perlu anda tambahkan.Boleh juga diletakkan diatas kod 
]]></b:skin>
 
Kemudian cari kod dibawah ini  dan tambahkan juga kod yang berwarna merah.
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='admin-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>



 Nota:Kod yang berwarna merah perlu anda tambah
 Kemudian klik preview,jika tiada masaalah ,jangan lupa klik butang save 

Minggu, 02 Mei 2010

memasang read more dengan jump break

Membuat "read more" pada blog telah saya muatkan dalam tutorial sebelum ini.Blogspot telah mengeluarkan satu fungsi bagi membuat read more iaitu dengan menggunakan jump break. .Sebelum dikeluarkannya fungsi baru read more ini, yang dulu kita perlu memasang script pada kod template. Tetapi sekarang akan menjadi lebih mudah dengan terlancarnya  read more versi baru ini.
Berikut adalah cara membuatread more dengan menggunakan jump break.

Pada posisi compose klik  pada artikel yang ingin anda potong menggunakan read more. Kemudian klik pada ikon jump break, seperti pada gambar di bawah )  maka artikel anda akan terpotong dengan sendirinya.

Cara di atas tersebut jika sekiranya anda menggunakannya pada posisi compose. Pada posisi edit HTML maka anda perlu  tambahkan kode <!-- more --> di antara artikel yang ingin dipotong ( lihat gambar di bawah ini ).

Nota:
pada yang menggunakan template bukan dari blogspot anda perlu menambah kod bagi memastikan jump break berfungsi
Untuk membuatnya,masuk ke  Layout | Edit HTML,sebelum itu backup dulu template anda dengan klik pada butang Download Full Template.dengan membuat sedemikian anda akan memuat turun fail XML template anda yang boleh anda upload kembali jika diperlukan.

Selepas membuat backup, Klik pada checkbox Expand Widget Templates , kemudian cari kod dibawah ini:
<data:post.body/>
Selepas jumpa kod tersebut, masukkan kod berikut dibawahnya:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
Selepas memasukkan kod tadi, klik Save

Kamis, 29 April 2010

memasang shoutbox tersembunyi

shoutbox tersembunyi
Shoutbox adalah suatu  widget yang penting ada di  blog kita,Dengan widget seperti ini membolehkan kita   berinteraksi dengan pengunjung blog kita. Dengan wujudnya interaksi ini akan menjalinkan hubungan  antara pemilik blog dan pengunjung blog dan akhirnya widget ini juga akan mendatangkan traffic untuk blog kita. 
Mungkin anda ingin menjimatkan ruang semasa memasang Shoutbox pada blog.Tip ini akan membantu anda untuk menampilkan shoutbox di halaman tanpa  memakan space/tempat, kerana widget ini  disembunyikan di samping Body blog.

Ikuti langkah berikut

1.Klick pada Design dan Pilih Add Gadget
2.kemudian pilih html/javascript dan Copy dan Paste kod di bawah ini


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i219.photobucket.com/albums/cc282/garam63/SHOUT.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Letakkan kod ShoutBox anda disini

<div style="text-align:right">
<a href="http://jendela-id.blogspot.com/2010/04/shoutbox-adalah-suatu-widget-yang.html"><font size="1"">get this </font></a><a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>


3.Tingginya  boleh diubah dengan menukar nilai 50px, sesuaikan dengan kehendak anda, dan gantikan perkataan yang berwarna  merah dengan script/kod shoutbox,bahagian teks hijau boleh ditukarkan dengan imej yg dikehendakki
4.kemudian klik save.

Minggu, 25 April 2010

keyword melalui imej

Memang satu perkara tidak boleh dipisahkan semasa membuat laman web atau  pun blog, kita memasukkan gambar didalamnya.Kebanyakan search engine seperti Google, dan Yahoo, memberi pilihan untuk membolehkan kita mencari hanya gambar sahaja. Dengan adanya gambar sesuatu halaman blog itu akan lebih menarik  dan tidak hanya mengandungi teks sahaja. Tetapi perkara utama yang perlu kita ingat ialah jangan terlalu teruja untuk memasukkan halaman dengan gambar, kerana  ini akan membuatkan  masa  loading menjadi lambat. Perkara utama yang perlu kita ambil kira adalah masalah teknik SEO (search engine optimization), ingatlah  bahawa search engine masih belum mampu mengindeks sebuah gambar kerana ia  hanya mengindeks sebuah halaman blog berdasarkan kepada keyword dari teks dan bukan nya gambar. Oleh itu sesebuah halaman blog yang berisi  dengan teks akan lebih mudah terindeks daripada yang penuh dengan imej.

Bagaimanapun, search engine juga dapat mengenali keyword dari gambar berpandukan nama gambar dan attribut Alt. Sebagai contoh, kita  membuat keyword dari gambar produk jaket kulit. Supaya gambar itu juga menjadi keyword yang menyokong teknik SEO maka berilah nama "Jaket-kulit" atau "Jaket Kulit". Secara umumnya para blogger atau webmaster tidak menyedari  akan hal ini dan meletakkan saja  namanya, seperti image01, gambar01 dan sebagainya. Seeloknya  pakailah tanda '-' atau '_' jangan gunakan spacing(ruang kosong), kerana search engine  akan menganggap karakter itu adalah pengganti spacing.

Setelah pemberian nama yang mengarah kepada keyword, manfaatkan attrtibut Alt, misalnya "Jaket kulit kualiti eksport". Oleh itu secara lengkapnya adalah  Jaket kulit kualiti eksport . Perhatikan bahawa antara nama fail gambar dan attribut Alt masih memiliki persamaan dan jangan berbeza sama sekali. Contoh yang salah . Pemberian nama fail hendaklah ringkas (jangan lebih 5 perkataan), jelas dan menggambarkan imej. Penggunaan attribut Alt maksima adalah 10 perkataan, kerana jika lebih dari 10 perkataan  akan di anggap sebagai spam oleh search engine. Pemberian nama fail dan attribut Alt juga perlu  menggambarkan kandungan halaman dan keyword yang kita hajati.
dibawah ini adalah contoh bagaimana hendak meletakkan attribut alt pada imej.Dalam mode edit html cari kod image yang dimasukkan:
dan ditambah menjadi begini:

Dengan memanfaatkan keyword dari gambar, maka harapan untuk mendatangkan pengunjung lebih banyak akan berhasil.

masaalah komputer lembab

Adakah komputer anda beroperasi dengan lambat? Adakah anda ingin menyelesaikan masaalah "komputer lembab ini"? Bekerja dengan komputer seperti ini memang membosankan.Anda tidak perlu mengeluarkan  wang dengan menghantar ke kedai . Pilihan terbaik untuk anda adalah ,bahawa anda boleh menangani masalah komputer sendiri dengan mudah . Yang perlu anda lakukan hanya mengikuti beberapa tips di bawah.

1.Mungkin anda berfikir bahawa komputer anda sudah outdated? Jadi ia slow? Mungkin  komputer anda mempunyai memori yang rendah. Ada banyak cara yang boleh anda gunakan agar komputer  prestasi dapat ditingkatkan. Komputer memiliki banyak komponen bekerja sama dengan sistem operasi Windows.Tentunya  memerlukan banyak memori virtual untuk menyokong menjalankan operasi sesuatu komputer. Bukan kos-efektif bagi anda untuk membeli RAM tambahan. Tapi, anda boleh mengoptimumkan penggunaan RAM pada komputer anda dengan perisian  Registry yang  dapat meningkatkan prestasi PC anda dan membuatnya berjalan lebih cepat.

2. Adakah anda mendapati bahawa masa yang lama diperlukan komputer anda  untuk melakukan sesuatu? Terdapat beberapa masalah perisian yang boleh menyebabkan komputer anda berjalan lambat. Adware, Virus dan Trojan adalah punca paling umum yang mengurangkan kelajuan PC anda  dan menginfeksi keseluruhan prestasi komputer. Sangatlah penting bagi anda untuk memasang unggul dan Antivirus terkini supaya anda boleh memadam program ancaman ini, yang dapat meningkatkan prestasi PC anda dan komputer anda akan berjalan secepat yang baru.

3. Adakah anda melihat bahawa komputer anda 'hang' dari masa ke masa? CPU anda mungkin terlalu panas. Setiap hari, anda menggunakan komputer anda untuk melakukan banyak kerja. Dan CPU menghasilkan kepanasan selama ia beroperasi. Dalam hal ini, sistem operasi Windows menjadi lambat. Untuk mempercepat komputer anda, anda boleh menyemak kipas PC anda. Dan kemudian anda boleh membersihkan debu yang menghentikan pc anda dari berjalan lancar. Atau anda boleh meng-upgrade kipas anda dan peranti lain yang boleh mendinginkan suhu CPU anda.

4. Adakah anda akan selalu mendapat mesej error pop-up? Adakah komputer berjalan lambat setiap saat selepas anda membersihkan virus di komputer? Registry pada sistem Windows menyimpan semua maklumat program dan tatacara sistem. Mungkin ia rosak jika anda memasang atau membuang aplikasi pada komputer anda. Ada banyak sisa fail  pada registry  PC apabila anda melakukan proses tersebut. Dalam hal ini, komputer anda menjadi berjalan lambat. Hal ini dapat diperbaiki oleh membersihkan registry sekali-sekala. Download salah satu perisian dari internet untuk membolehkan anda untuk membersihkan registry. Dan anda boleh menghentikan komputer anda dari berjalan lambat.

Jika anda tidak mahu menghabiskan banyak masa memasang semula sistem operasi anda, ini adalah penyelesaian terbaik bagi anda untuk selesaikan masaalah  komputer berjalan lambat. Klik di sini.

Sabtu, 24 April 2010

Design blog anda sendiri

Blogspot memberikan kemudahan kepada pengguna bagi mereka bentuk sendiri design bagi blog.Kemudahan ini amat lah berfaedah kepada mereka yang tidak mahir kod CSS.Kalau dulu kita mungkin tercari cari tutorial dalam internet bagaimana untuk mengubah suai blog kita.Kini dengan adanya kemudahan yang disediakan oleh Blogspot ini, kita boleh mengubahnya hanya dengan menekan tetikus sahaja.

Pertama sekali anda perlu masuk ke Blogger
Kemudian pilih Design

Kemudian pilih customise.
Kemudian muncul paparan Template Designer.

 
Dibahagian ini anda akan dapat mengubahsuai blog anda dengan begitu mudah sekali.apa yang perlu anda lakukan ialah menyusun kedudukan nya mengikut kemahuan anda tanpa menghilangkan widget,bloglist dan aplikasi yang ada.Berdasarkan gambar di atas, Blogger Template Designer ini menyediakan empat aplikasi untuk kita merekabentuk blog iaitu Templates, Background, Layout dan Advanced. 

Pada bahagian Templates, kita boleh memilih jenis-jenis Templates yang disediakan. Ada empat pilihan utama dan setiap pilihan utama ada subpilihan lain. Semuanya berjumlah lebih kurang 10-16 Templates untuk dipilih.

Pada bahagian background kita boleh menukar warna latar belakang blog, atau warna tema.Anda boleh mengekalkan template yang ada,anda boleh menukar gambar latar belakang anda disini.
Selepas menukar background anda boleh pergi kebahagian Layout.Disini kita boleh menyusun atur kedudukan sidebar,column kepada 2 atau 3 column.Kita juga boleh mengubah saiz template.
selamat mencuba.
update  13oct 2012

Jumat, 23 April 2010

Masuk gambar pada background blog


Mungkin anda ingin supaya background blog anda lebih menarik dengan memasukkan imej kedalamnya,tetapi belum tahu bagaimana hendak membuatnya.Berikut adalah cara untuk membuatnya:
Login ke blogger, klikDesign, setelah masuk ke halaman template, klik sub menu Edit HTML, kemudian cari kod/tag CSS body { }, biasanya seperti dibawah ini:


body {
font: $bodyFont;
color: $textColor;
background: $bgColor;
}

kemudian  tambahkan kod untuk background dengan gambar seperti ini:


body {
font: $bodyFont;
color: $textColor;
background: $bgColor;
background-image: url(http://www.domain.com/gambar.jpg);
}

Gantikan http://www.domain.com/gambar.jpg dengan url dimana anda upload gambar/imej untuk background . Untuk upload gambar, anda boleh  boleh gunakan imageshack atau di Tinypic

update:

Jika kod diatas tiada atau tidak berfungsi letakkan pada bahagian kod ini:


.main-outer {
  border-top: $(main.border.width) solid $(body.rule.color);
background-image: url(http://www.domain.com/gambar.jpg);
}