Cara letak scroll dan background pada komen

Tutorial ini saya buat sebagai menunaikan permintaan rakan-rakan yang ingin membuat scroll dan meletak warna latar belakang pada komen sebagaimana yang ada diblog ini.Kotak ini juga mempunyai border disekeliling dan dengan adanya scroll tentunya lebih memudahkan jika terdapat banyak komen pada sesuatu posting.Loading rasanya lebih cepat jika komen kita mempunyai avatar kerana paparan tidak keluar secara serentak.

Cara membuatnya:
log in ke blogger--pada dashboard pilih template---pilih edit html

dan cari kod yang berwarna merah seperti dibawah

.post-footer {
margin: 1.5em 0 0;
}

#comments {
height:280px;
overflow:auto;
border:8px ridge #33FF99;
background: #006699;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
}

#comments .comment-author {
padding-top: 1.5em;
background :#009999;
border:1px dotted;
}

Kemudian tambahkan kod dibawahnya seterusnya dengan kedudukan sebagaimana diatas.Ubahkan kod warna jika inginkan warna yang diingini.

Cara letak facebook like pada komen blog

Memasang butang facebook like pada komen blog adalah satu langkah yang baik kerana sebelum meletak komen pengunjung juga boleh klik dan share entri kita dengan rakan facebook yang lain.Butang tersebut juga tampil bersesuaian dengan ruang dibawah post a comment.

Langkah membuatnya:
1.Masuk ke dashboard-pilih template--Edit HTML

2.Cari kod ini:

<data:postCommentMsg/>

kod pada template mungkin ada lebih dari satu contohnya seperti ini:

kebiasaan nya seperti ini: <h4 id='comment-post-message'><data:postCommentMsg/></h4>

3.Kemudian salin kod dibawah dan letakkan selepas kod <data:postCommentMsg/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

4.Akhir sekali klik save template.

cara letak background atau warna pada entri

Tutorial kali ini ialah cara bagi meletakkan warna atau background pada posting.Mungkin kita ingin highlightkan bahagian tertentu atau keseluruhan paparan pada posting dengan warna dan juga berlatarbelakang dengan imej.

Caranya:
Selepas  membuat posting  masukkan kod seperti dibawah:
(dengan meletakkan dipermulaan diakhir teks pada posting yang hendak diletak background)
seperti dibawah

<div style="background:#33CCFF; padding:4px 7px 4px 7px;">
Masukkan kandungan teks artikel disini
</div>

Bahagian teks berwarna merah diletakkan pada permulaan posting
Bahagian warna hijau pula diletakkan pada penghabisan posting
dan dimasukkan pada mode edit HTML
contoh seperti imej dibawah yang bertulisan warna biru








Untuk meletakkan background pada posting:

<div style="background:url(Letakkan url imej disini) no-repeat;">
Masukkan kandungan teks artikel disini
</div>

# gantikan dengan url imej yang telah diupload ke photobucket,tinypic dan sebagainya seperti contoh dibawah.
Jika menggunakan latarbelakang dengan corak/pattern yang kecil gantikan no-repeat kepada repeat.

KOD DAN BENTUK

<div style="background: #99FFCC; padding: 5px 8px;">

Masukkan kandungan teks artikel disini</div>

Background dengan border
#Tukarkan warna kod background dan border mengikut kesesuaian

<div style="background: #99FFCC; border: 2px dashed #FFCC00; padding: 5px 8px;">

Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; border: 2px dotted #FFCC00; padding: 5px 8px;">

Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; border: 5px ridge #FFCC00; padding: 5px 8px;">

Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; border: 3px double; padding: 5px 8px;">

Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; padding: 5px 8px;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;">
Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; padding: 5px 8px;-webkit-border-radius: 36px 12px;

-moz-border-radius: 26px 8px;

border-radius: 26px 8px;">
Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; padding: 5px 8px;-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px;">

Masukkan kandungan teks artikel disini</div>

Background dengan imej

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmapw8BbM6iAh-pkdGH7_cbmIyO-E6bYN2h3piaXMvwDxx9Ve_ktRklPbgSfbn72kC3_8cPkImwH2F8cd0PmhC8iuS0qToIVdoa4Mxjy-1Wa7fGWNnufnmyCzCty99to-KZLFticYWudQ/s1600/1484.png) repeat;">

Masukkan kandungan teks artikel disini

</div>

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0GYBdC20lR0jZgoXvYblXoMVV-_GJzJColSyr2oehvOn33AOHhXu6lTyyx7vQzIn28zsJyMvoYP6ku2qHccPZYmvGhfiA_rMGIz013ZtaDnKVjdox2dgqg6M2q2Kc-j05KcOxxe9HoU/s1600/bunga.JPG) no-repeat;border: 2px solid; padding: 20px;background-position:right bottom">

Masukkan kandungan teks artikel disini

</div>

Untuk meletak imej pada sudut tertentu masukkan kod background-position:right bottom.seperti contoh diatas gambar bunga diletakkan dibahagian hujung bawah
background position yang lain:

• left top

• left center

• left bottom

• right top

• right center

• center top

• center center

• center bottom

selamat mencuba..

cara letak imej disebelah tajuk sidebar

Entri kali ini masih lagi berkaitan dengan sidebar.kalau dalam artikel sebelum ini cara meletak background dan border pada sidebar,kali ini pula cara bagaimana hendak meletak ikon disebelah tajuk pada sidebar. Dengan meletakkan ikon disebelah tajuk boleh menampakkan sedikit kelainan pada sidebar.

Bagi membuatnya:
1:Pada dashboard Klik pada Template dan pilih edit HTML

2 Cari kod ]]></b:skin> ,gunakan Ctrl + F untuk memudahkan pencarian

3.Salin kod dibawah dan letakkan sebelum kod ]]></b:skin>

.sidebar h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2iVEQsjq-WKOOkfU9GfYgTnNhC1iZ0vUqHobaPxF1_VkVCtaonht662adY_At7hLDxRBiKoOicAWKDvjES5ASTLqWukMqN8c_kovQlCooHw32mHmFAVk4j2BmfigTzT9BwX_vM1N4bWg/s1600/flower.png);
background-repeat: no-repeat;
background-position:left center;
padding:10px 50px 20px;
}

#- Gantikan url ikon jika ingin meletakkan imej yang diingini.

Imej boleh didapati dengan menggunakan google images.Boleh tentukan saiz yang dingini pada bahagian sebelah kiri menu.

Untuk membuat pelarasan ikon tukar nilai pada padding seperti contoh diatas:
padding:10px 50px 20px; ada tiga nilai dan membawa maksud seperti dibawah

10px---atas dan bawah
50px--kiri dan kanan
20px-jika ikon terlindung/terputus dihujung

selamat mencuba..

cara letak background dan border pada sidebar

Kebiasaanya warna ruangan posting dan sidebar pada template adalah sama.Mungkin ada yang inginkan kelainan dengan meletakkan border dan background yang berbeza pada sidebar.

Berikut adalah caranya:

Masuk ke dashboard-pilih layout dan klik Edit HTML
cari kod ini:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

background-image: url(letakkan url imej disini);

border:12 px dashed #0000FF;

}

jika tiada kod seperti diatas cari kod ini:
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);

background:url(letakkan url imej disini)repeat;

border:12 px dashed #0000FF;

}
background imej perlu diupload dan dapatkan url utk dimasukkan pada kod diatas
#cuma tambah kod warna merah.Untuk border selain dari dashed boleh juga ditukar dengan solid,dotted,ridge,groove.Begitu juga dengan kod warna bagi border juga boleh ditukar mengikut kesesuaian.

cara pasang widget tukar warna background blog

Paparan warna latarbelakang amat memainkan peranan dalam menyerlahkan lagi tampilan blog kita.Kadang kadang  ada  yang tak berapa selesa dengan warna yang ada jadi dengan widget ini boleh lah ditukar pada warna yang disukai.Bagaimana pun jika telah memasang imej sebagai latar belakang warnanya tidak akan kelihatan .

Untuk membuatnya:

Masuk ke dashboard-pilih Layout
Add a gadget--HTML/javascript
dan masukkan kod ini:

<center><script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>

Tukar warna background

<table border="2" width="200" height="20" bordercolor="black">
<tr bordercolor="#4BFE78"> <td
onclick="bgChange('#72FE95')" bgcolor="#72FE95">
<td
onclick="bgChange('#FE8BF0')" bgcolor="#FE8BF0">

<td
onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
<td
onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
<td
onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">

<td
onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">


</td></td></td></td></td></td></tr>
</table>

<div class='clear'></div></center>

Jika hendak warna yang lain tukarkan kod warna diatas.Kedua dua kod hendaklah sama kiri dan kanan seperti yang saya tandakan dengan warna hijau.Kod warna boleh didapati disini. 
Paparan juga perlu diubah kepada transparent dengan menggunakan template designer.

menghapus broken link dari blog

Mungkin korang ada menghapus artikel dari blog korang.Tetapi halaman itu sebenarnya masih  terindeks pada google.Hal yang sebegini akan menyebabkan terjadinya broken link.Broken link bermaksud pautan  tidak sah,rosak atau link mati Broken link pada laman blog atau web boleh menurunkan page rank dan juga hasil carian pada google.Selain dari itu juga broken link juga wujud pada komen pengunjung yang mana tidak mengkemaskinikan profail masing masing pada blog.

Untuk menghapusnya:

1.Buka laman google webmaster tools.Jika belum ada akaun google,daftarlah terlebih dahulu.
2.Pada dashboard pilih add a site.masukkan alamat blog korang disini hingga proses verifikasi selesai.abaikan jika sudah memasukkan blog sebelumnya.
3.Bila sudah dimasukkan nama blog akan muncul dibahagian bawah.Klik pada nama blog.

4.Kemudian muncul paparan dashboard blog disini.
5,Pada sebelah kiri menudashboard pilih Diagnostics--crawl errors-disini kita boleh lihat error yang ada pada blog

 

6.untuk menghapus nya,klik pada site configuration--crawler access-remove url-new removal request

7.masukkan link yang hendak dihapus--pilih opsyen pertama disini -tandakan pada The page returns a 404/410 ...  dan klik submit request
8.Link akan dihapuskan beberapa hari selepas itu.
#Bagi komen yang mempunyai broken link,terpaksalah di delete.Saya gunakan link checker di http://www.web-site-map.com/broken-links.php bagi mencari broken link .

Cara letak background pada tajuk posting

Menghias blog tentunya menjadi kemestian kerana semua org nak cantikkan blog.Tujuan blog ini pun adalah bagi membolehkan rakan rakan mendapat sumber rujukan bagi membuat berbagai bagai perubahan pada template asal  dari blogger yang kita ketahui cuma dengan paparan yang terhad sahaja.Perubahan yang dibuat tentunya perlu mengambil kira keselesaan pengunjung.Kalau ada komen yang dibuat kita perlu ambil perhatian,kerana apa yang kita suka belum tentu org lain suka.

Untuk meletakkan background pada tajuk posting,tentunya seperti  biasa kita perlu sediakan imej terlebih dahulu.sesudah diupload dan dapat url untuk imej:

masuk ke dashboard-pilih template,Klik edit HTML
dan cari kod ini

.post h3 {

atau sesetengah template kodnya begini

h3.post-title, .comments h4 {

contoh kod asal pada template (sesetengah template berbeza)

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:150%;
  font-weight:normal;
  line-height:1.4em;
  }

tambahkan kod seperti dibawah

.post h3 {
 background: url(letak url imej disini);
 -moz-border-radius: 10px 10px;
 border-radius: 10px 10px;
 height:55px;
 text-align:center;
 margin:.25em 0 0;
 padding:0 0 4px;
 font-size:150%;
 font-weight:normal;
 line-height:1.4em;
 }

#kod warna hijau jika hendak bahagian hujung background melengkung.Jika hendakkan lengkung hanya pada bahagian tertentu ubah saja nilainya disini.
ketinggian imej boleh diubah pada height:55px,tukarkan  kepada nilai yang bersesuaian

kemudian preview dan akhir sekali save template .