cara pasang widget top commentators

Widget top commentators ini akan memaparkan bilangan siapa paling banyak buat komen.Untuk skrip ini adalah berdasarkan berapa jumlah komen yang telah dibuat oleh seseorang.Dengan memasang widget  juga ini boleh menggalakan pengunjung membuat komen di blog kita.




cara memasangnya:

Terus masuk ke Dashboard--Layout---Add Gadget


Pilih HTML/Javascript



dan masukkan kod ini:
<script type='text/javascript'>
function pipeCallback(obj) {
 document.write('<ul style="list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELHWkU4YpYE17y-31Fitrepp-qmfxImLNySm2dVZO6GoHvKNhYE6DiCuumbgTTfaJTaN3zuNeWue5BMk8rJgEbgbOPwoSfmAVGH7_HqHssMC47eAiABUx8n5USc-BCIalHxGxIHglZag/s1600/circle-arrow-blue.png);margin-left: 20px;">');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
 </script>
<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2Fteknikbuatblog.blogspot.com&number=10&Nametobeexcluded=yahaya"></script>
<span style="font-size: 70%; float:right;">Get this <a href="http://teknikbuatblog.blogspot.com/2011/02/cara-pasang-widget-top-commentators.html">widget</a></span>

kemudian klik pada save..

Teks berwarna merah gantikan dengan alamat blog anda .Begitu juga dengan yahaya (nama yg dikecualikan dari terpapar) dengan nama sendiri supaya nama kita tidak termasuk juga dalam senarai.
Tukarkan jumlah bilangan pengomen yang hendak ditampilkan pada teks warna biru

selamat mencuba...:)
kredit untuk  http://www.corpseofattic.com/

update 10/5/2013

Situs Download Tema atau Template Blog Blogspot Gratis

berikut adalah daftar situs tempat download template / tema blog gratis favorite sayazenplatefree templates bloggerzoomtemplateblogtemplate4ubtemplates--Thumbnail Screenshots by Thumbshots--

Cara mengubah Tema atau Template Blog Blogspot

login >> Dashboard >> klik link Design blog yang akan di editPage ElementsHalaman ini adalah halaman yang pertama anda temui pada fasilitas designDi halaman ini anda bisa menambahkan gadget/widget serta mengatur gadget/widget sesuai selera andaFasilitas-fasilitas : Edit : untuk mengedit atau merubah isi gadget Add a gadget : untuk menambah gadget. contoh gadget utama : popular post :

Alamat Situs tempat edit foto online

Mohon maaf bila postingan ini agak keluar dari topik utama blog ini, tapi karena ada beberapa teman yang bertanya tentang alamat situs tempat edit foto atau memberi bingkai pada foto secara online, maka dalam postingan ini saya akan menginformasikan beberapa alamat situsnya, semoga bermanfaat ...Dengan fasilitas yang ada di situs yang saya informasikan di bawah, anda bisa mempercantik foto anda

Menu horizontal dengan fungsi search

Menu yang akan saya terangkan dalam tutorial ini telah pun saya masukkan pada posting dengan tajuk  menu bar tanpa hack template.Tetapi menu ini cuma menggunakan warna sebagai latar belakang.Menu horizontal kali ini lebih menarik sedikit kerana menggunakan imej sebagai background dan juga mempunyai fungsi search .

menu horizontal


Untuk membuatnya:

Masuk ke dashboard---Layout---Add a gadget



-HTML/javascript


masukkan kod ini pada bahagian bawah header blog.

<center><table width="800" height="40" cellspacing="1" cellpadding="1">
<tr>

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzoalZEFAAVgMICWPDI_z9TW6uis_RpjggHQf3MUn7S78d2RKQygp1fvGneDczBdtpX1zTnzcDjHp-E_suS8VIC1JHG_-3ADiJS4WzKKali3EYBgh-FeULYBo190GhHZIvlr1bgNldHo/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/"><font size="2" color="white"><center><b>HOME</b></center></font></a></td>

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzoalZEFAAVgMICWPDI_z9TW6uis_RpjggHQf3MUn7S78d2RKQygp1fvGneDczBdtpX1zTnzcDjHp-E_suS8VIC1JHG_-3ADiJS4WzKKali3EYBgh-FeULYBo190GhHZIvlr1bgNldHo/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/p/site-map.html"><font size="2" color="white"><center><b>SITE MAP</b></center></font></a></td>

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzoalZEFAAVgMICWPDI_z9TW6uis_RpjggHQf3MUn7S78d2RKQygp1fvGneDczBdtpX1zTnzcDjHp-E_suS8VIC1JHG_-3ADiJS4WzKKali3EYBgh-FeULYBo190GhHZIvlr1bgNldHo/s1600/menu.JPG"><div align="center"><span class="style2"><a href="http://teknikbuatblog.blogspot.com/p/link-exchange.html
"target="_blank"><font size="2" color="white"><center><b>LINK EXCHANGE</b></center></font></a></span></div></td>

<td width="249"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzoalZEFAAVgMICWPDI_z9TW6uis_RpjggHQf3MUn7S78d2RKQygp1fvGneDczBdtpX1zTnzcDjHp-E_suS8VIC1JHG_-3ADiJS4WzKKali3EYBgh-FeULYBo190GhHZIvlr1bgNldHo/s1600/menu.JPG"><center>
<form id="searchform" action="http://teknikbuatblog.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Cari Artikel...." /> <input id="searchsubmit" value="GO" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>
</table></center>

Ubahsuai pada kod diatas:

Kelebaran dan ketinggian menu:
<center><table width="800" height="40" cellspacing="1" cellpadding="1">
width: ubah pada saiz mengikut kelebaran template
height:ketinggian menu yang dikehendakki

Masukkan link dan imej pada menu:

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzoalZEFAAVgMICWPDI_z9TW6uis_RpjggHQf3MUn7S78d2RKQygp1fvGneDczBdtpX1zTnzcDjHp-E_suS8VIC1JHG_-3ADiJS4WzKKali3EYBgh-FeULYBo190GhHZIvlr1bgNldHo/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/"><font size="2" color="white"><center><b>HOME</b></center></font></a></td>

teks berwarna merah masukkan link imej bagi menu
warna hijau pula ialah link untuk halaman yang nak dimasukkan.Ubahkan pada link halaman anda
Manakala teks berwarna oren pula masukkan nama menu pada link

diatas saya tunjukkan tiga contoh kod yang dimasukkan untuk membuat menu pada halaman sepert contoh pada gambar diatas..Jika ada lebih cuma tambahkan saja kod lagi dan ubah mengikut kesesuaian seperti yang saya terangkan diatas.

Bahagian search:

<td width="249"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzoalZEFAAVgMICWPDI_z9TW6uis_RpjggHQf3MUn7S78d2RKQygp1fvGneDczBdtpX1zTnzcDjHp-E_suS8VIC1JHG_-3ADiJS4WzKKali3EYBgh-FeULYBo190GhHZIvlr1bgNldHo/s1600/menu.JPG"><center>
<form id="searchform" action="http://teknikbuatblog.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Cari Artikel...." /> <input id="searchsubmit" value="SEARCH" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>

teks merah masukkan link imej sama seperti bahagian menu yang lain.
teks hijau tukar kepada alamat blog anda
dan bahagian teks oren ubah lah warna yang sesuai dengan imej/warna yang dimasukkan pada menu.
teks  biru boleh diubah pada perkataan yang lain.
 ubahkan saiz pada witdh agar dapat ruangan yang bersesuaian jika ruangannya terlalu luas.
dah selesai masukkan jangan lupa save terlebih dahulu..kemudian lihat hasilnya.

update 10/5/2013

Cara upload atau unggah gambar di blogspot

Fasilitas Insert Image adalah fasilitas untuk menambahkan file gambar atau foto kedalam postingan.

ada dua macam fasilitas upload gambar  (upload = unggah)  yaitu pada mode Edit HTML dan Mode Compose. Caranya penggunaannya agak sedikit berbeda tapi sebenarnya sama saja dan sama mudahnya.






pengunggah gambar dalam mode compose
Sedikit kelebihan pada fasilitas upload gambar di mode Compose

menghapus paparan attribution pada template

Attribution adalah widget yang berada dibahagian bawah template kita.Ia memaparkan nama template dan perekanya.Ia tidak membawa kesan apa apa cuma mungkin ada yang ingin paparan ini ditiadakan.Jika ingin menghapuskan paparan ini,Caranya adalah seperti berikut:


Masuk ke Dashboard-Template--edit HTML


dan cari kod ini:


<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>

jika sudah jumpa hapuskan kod tersebut

pada sesetengah template tiada kod tadi,tapi mempunyai kod seperti ini:


<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>

<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Delete semua kod diatas
kemudian klik save tempale
paparan berikut akan muncul


Pilih delete widgets
Kemudian lihat hasilnya.
update 13/5/2013

cara letak border,background dan scroll pada widget

widget borderDalam artikel cara letak border pada widget sebelum ini terdapat masaalah dimana border ini juga mengelilingi  pada tajuk widget.Ia  hanya sesuai digunakan pada widget widget tertentu sahaja(yang tidak memerlukan tajuk widget).Bila terjadi begini nampak janggal terutamanya pada yang telah menghias tajuk widget dengan begitu cantik,tapi border pula berada disampingnya. Selain dari border,background dan scroll juga dimasukkan sekali pada kod ini.Jadi untuk artikel kali ini saya akan tunjukkan cara bagi mengatasinya:

Sebagai contoh untuk tutorial ini saya pilih widget Archives:


Masuk ke dashboard--template--pilih edit html--

kemudian gunakan fungsi carian Ctrl+F (klik didalam template dan tekan butang ctrl+f) dan taipkan perkataan archive


tekan butang enter sehingga jumpa kod seperti ini:


<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

letakkan setelah kod: <div class='widget-content'>
dan sesetengah widget seperti ini

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
kemudian letakkan kod ini dibawahnya:

<div style='width: 190px; background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3awcyIjGzurRQRSHBpJ9QvnOlNMvDQt3n_PlL0dloLA4m5XZiU0IewrxaK_h0M9TNcyUAZJK_ofnfmjQZldj92qDp5THyYuCP_x5niG2hnpMxK633HHISOogc__j5zBVpZR69ukKLn9E/s1600/black.png&quot;) repeat scroll 0% 0% transparent; overflow: auto; height: 100px; border: 1px solid rgb(206, 206, 246); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 20px; margin: 3px 0pt 0pt;'> 

kemudian scroll perlahan lahan lagi kebawah hingga jumpa kod

<b:include name='quickedit'/>
 
dan letakkan kod dibawah ini  selepasnya:

</div>
 

kalau nak letak background gantikan url imej pada teks berwarna merah.Ubahkan lebar dan tinggi yang bersesuaian pada teks berwarna hijau.
kemudian preview dan save template .

Saya juga telah cuba untuk widget bloglist ,categories dan berhasil.Untuk widget yang lain rasanya tiada masaalah.Untuk widget lain cuma kenal pasti tajuk widget dan cari kod pada template seperti contoh yang diatas

Contoh kod yang dibuat untuk widget bloglist:

widget
klik untuk besarkan gambar


Selamat mencuba

update 14/5/2013

cara letak scroll pada posting

Dalam artikel sebelum ini juga ada berkaitan dengan scroll dimana ia diletakkan pada widget disidebar.Scroll ini hanya muncul secara automatik bila ketinggian kandungan melebihi ukuran yang ditetapkan.Scroll juga boleh diletakkan pada keseluruhanposting   atau  sebahagian teks sahaja pada posting yang dikehendakki.
scroll pada posting

Bagi meletakkan pada keseluruhan posting
masuk ke dashboard---template---edit html

search

cari kod  .post {  pada template dan tambahkan kod merah seperti bawah

.post {
height:180px;
overflow:auto;
}

meletak scroll pada teks tertentu sahaja pada posting

masukkan kod berikut pada template

.scrollbox {
height:110px;
width:420px;
overflow:auto;
}

letakkan diatas kod ]]></b:skin>

Semasa membuat posting dan pada mode edit html masukkan kod dibawah
<div class="scrollbox">teks yang ingin dipaparkan dalam bentuk scroll</div>


update 14/5/2013

Tips Merancang Alamat Blog yang Ideal untuk Blog Baru

"Untuk membuka suatu situs atau blog, pengguna internet harus mengetik alamat situs/blog ke dalam kolom address browser (bagian atas), yang kemudian dipertegas dengan menekan tombol enter"

Alamat Blog atau Alamat Situs adalah alamat yang digunakan untuk menuju sebuah Blog / Situs, alamat situs juga disebut sebagai URL.
contoh :

www.google.com
mail.yahoo.com
nama-blog.blogspot.com

Postingan Blog Atau Artikel

Mengisi blog dengan Postingan atau artikel adalah inti dalam kegiatan blogging. tanpa Isi, blog tidaklah lengkap dan bukan blog namanya.

Isi atau Artikel dalam sebuah blog adalah raja, isi dari suatu blog menggambarkan kualitas blog dan pengarangnya, selain itu isi blog merupakan modal serta penentu tercapai tidaknya tujuan suatu blog.

Isi atau artikel sangat berpengaruh terhadap jumlah

Membuat tautan atau link

Hyperlink (link) adalah tautan yang menghubungkan satu halaman ke halaman lain di suatu blog (link internal) maupun menghubungkan halaman suatu blog ke halaman situs dan blog lain (link external)

Contoh Link :

ini namanya link
klik untuk menuju ke halaman utama ...

Cara membuat link :


- Menggunakan fasilitas yang tersedia pada fasilitas pembuat post
Buat atau buka artikel yang akan ditambah

Tips Memberi Judul Postingan

>> Dashboard : klik -> New Post : Title

"bila anda akan memposting sebuah artikel di blog, isilah kolom Title dengan Judul Artikel"

Title atau Judul sangat penting karena judul menggambarkan isi artikel, judul juga berisi topik yang akan dibahas dalam artikel serta mengandung keyword yang akan direkam Search Engine untuk diinformasikan pada pengguna internet yang mungkin membutuhkan artikel

cara tukar smiley pada cbox dan shoutmix

smilies
Mungkin korang inginkan kelainan pada smiley yang ada pada cbox dan shoutmix.Bila blogwalking tgk kawan kawan letak smiley yg bermacam macam bentuk tentunya ada teringin juga nak buat mcm tu.

Cara menukarnya:

Untuk CBOX
Log in ke cbox.ws atau klik saja pada link cbox yang ada pada widget cbox
masukkan log in name dan password
kemudian masuk ke menu options--pilih smilies
cbox

kemudian paparan dibawah akan muncul
tukar smiley

disini kita cuma perlu tukar url smiley yang ada pada paparan.Smiley boleh didapati di freesmileys.org , websmileys.com ,myem0.com dan sebagainya.
masuk keweb tersebut pilih smiley yang dingini ,salin url (code dimasukkan contohnya seperti ini: http://www.websmileys.com/sm/angels/ClergyMan.gif) dan letakkan pada url seperti paparan diatas dan klik save.

# [img] dan [url] yang ada dihadapan dan hujung url hendaklah diabaikan.

Untuk shoutmix

log in ke akaun shoutmix
pada menu display pilih smileys
shoutmix display
Kemudian paparan berikut akan muncul:
tukar shoutmix smiley

pada imej diatas:
a: masukkan url smiley
b.masukkan kod smiley seperti  :) dan optional disebelah :-)
atau boleh juga letak perkataan seperti singgah,singgah sini, atau apa apa yg sesuai dan selalu diguna pada shoutbox
Buang tanda pada ..>>Use the default smileys set shown above  
kemudian klik pada add dan save setting,

Tanya Jawab Seputar Cara Blogging

Karena terbatasnya waktu, tips serta artikel seputar cara membuat blog di blog ini mungkin agak lambat updatenya ... :) sebelumnya saya mohon maaf
Bila teman-teman ada pertanyaan seputar cara blogging maupun tips trick lainnya seperti cara meningkatkan pengunjung, monetize, dsb,

saya persilahkan untuk comment di bawah ...

Saya mungkin tidak bisa membantu semua masalah anda, tapi saya akan

cara letak scroll pada widget

 Penggunaan scroll pada widget  adalah  dengan tujuan supaya senarai yang dipaparkan akan lebih kemas dan tidak menggunakan ruang yang banyak.contohnya widget labels dan archives akan jadi memanjang kebawah bila sudah terdapat banyak posting.bagaimana pun bagi widget Archives pula terdapat pilihan bagi memaparkan secara dropdown menu bagi menjimatkan ruangan.Bagi tutorial ini saya terangkan cara bagaimana untuk meletakkan scroll pada labels.

Untuk meletakkan scroll pada label,terlebih dahulu dapatkan widget id:

Caranya masuk ke dashboard-template--edit html --..gunakan ctrl+f (klik pada mana mana bahagian pada templatedan tekan butang ctrl+f) untuk memudahkan pencarian taipkanLabels (tajuk widget pada sidebar).

kemudian muncul kod seperti dibawah

<b:widget id='Label1' locked='false' title='Labels' type='Label'/> (title disini adalah tajuk widget yg kita letak pada sidebar)

widget id bagi labels ialah Label1

salin kod dibawah
#Label1{
height:180px;
overflow:auto;
}
dan letakkan diatas kod
 ]]></b:template-skin>
Bagi widget lain cuma perlu tukar pada widget id sahaja pada kod diatas.Jika scroll tidak muncul adalah disebabkan senarai tersebut adalah pendek dan kod diatas diletakkan height1 80px jadi akan muncul hanya setelah mencapai ketinggian 180px atau ubah sahaja ketinggian tersebut.

kemudian save template

update 14/5/2013