list blog tutorial

Widget CCTV yang cantik

2012-06-02T19:08:00.000+08:00

Kali ini kita berkongsi tentang widget pula.
Lihat gambar atas,widget CCTV yang cantik untuk menghias blog.

Jika ingin memasangnya,hanya salin code di bawah,dan letak pada kotak HTML/javascript

Untuk widgetnya bergerak-gerak,salin code yang ini.

Selamat berjaya.

Cara buat facebook comment dengan mudah

2012-05-27T21:14:00.000+08:00

Cara buat facebook comment di blogspot dengan mudah sekali dan tidak terlalu banyak langkah langkah yang dipraktekkan dalam edit template HTML
kenapa tutorial ini hanya untuk blogger/blogspot?

login blogger masing-masing
menu design-> klik edit HTMl ->tanda kotak kecil expand widget template.

silahkan copy kode dibawah ini

<b:if cond=”data:blog.pageType == "item"”> <div id=’fb-root’/>
<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1′/>
<fb:comments expr:href=’data:post.url’ num_posts=’2′ width=’500′/>
</b:if>

untuk memasang kode diatas ada dua cara yang boleh kita buat

cara yang pertama paste kod di atas tepat dibawah kode <data:post.body/>

cara yang ke dua silahkan cari kod <b:includable id=’status-message’> setelah jumpa ,diatas kod tersebut ada kod sebagai berikut </b:includable> nah silahkan paste kod di atas tepat diatas kod </b:includable>

kerana template blog masing-masing berbeza jadi silahkan sesuaikan dengan template yang di gunakan .kalau cara yang pertama tidak berhasil .silahkan buat cara yang ke dua pasti berhasil.

jangan lupa simpan template anda dan lihat hasilnya

Back to Top atau kembali ke Atas dan ke Bawah

2012-05-07T15:13:00.000+08:00

Membuat Back To Top sudah banyak ditulis oleh para blogger dan banyak cara di gunakan dan salah satunya menggunakan jQuery.

Back to top memudahkan kita atau para pengunjung blog untuk kembali ke halaman atas.

Cara membuatnya
1. Yang pertama buka Blogger >>Design >>Edit HTML
2. Langkah selanjutnya copy kod css dibawah ini dan letak tepat diatasnya kod ]]></b:skin>

#bawah {
background-color:#FFF;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://img89.imageshack.us/img89/4998/arrowdown.png) no-repeat top right;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
right:55px;
white-space:nowrap;
cursor:pointer;
-moz-border-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
padding:7px
}

#atas {
background-color:#FFF;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://img600.imageshack.us/img600/8649/arrowup.png) no-repeat top right;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
right:15px;
white-space:nowrap;
cursor:pointer;
-moz-border-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
padding:7px
}

3.Langkah selanjutnya copy kod javascript dibawah ini dan letak tepat diatasnya kode </body>

<div style="display:none;" class="atas" id="atas"></div>
<div style="display:none;" class="bawah" id="bawah"></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#atas').fadeIn('slow');
$('#bawah').fadeIn('slow');
$('#bawah').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);});
$('#atas').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>

4. Dan langkah terkahir klik simpan dan lihat hasilnya

Refresh blog atau Redirect URL Addres

2012-04-16T15:55:00.000+08:00

Cara refresh blog,mungkin semua bloger sudah tahu cara membuat efek refresh di blogspot.Fungsi refresh ini adalah untuk penyegaran kembali ke halaman utama blog kita.

Login ke akaun blogger>> Design>>Edit Html
Cari kode </head>
Masukan kod berikut tepat di atas kode </head>

<meta http-equiv="refresh" content="30"/>

content="30"=>menunjukan proses refresh akan dilakukan dalam waktu 30 saat/detik angka ini boleh di ubah suai untuk jangka berapa waktu blog kita akan di refresh.

SIMPAN TEMPLATE
Selesai.

Kegunaan lain script/kod ini Selain kegunaan di atas,ia mempunyai fungsi untuk redirect dari URL Addres satu ke URL Addres lainnya.Sebagai contoh,anda ada sebuah blog yang lama sudah terbiar kerana anda mempunyai blog baru,blog lama itu jangan di padam,cuma masukan sahaja kod di bawah ni kedalamnya,
jika ada pengunjung yang memasuki blog lama anda ia akan di bawa secara auto ke blog baru anda.

<meta HTTP-EQUIV='refresh' content='0;URL=http://listblog-tutorial.blogspot.com/'/>

Cara letaknya sama dengan cara di atas,gantikan url blog yang ingin anda tujukan.
Contohnya, letak kod di blog lama urlnya hendaklah blog baru.anda.

Dengan cara ini,apabila seseorang memasuki blog lama anda,apabila keseluruhan blog sudah diloding baru kod ini mula berkerja,mengalihkan url blog lama ke blog baru.

Ada satu lagi kod untuk redirect dari URL Addres satu ke URL Addres lainnya dengan lebih cepat berbanding kod di atas.

<script language="javascript" type="text/javascript">

</script>

Salin kod di atas dengan mengantikan url tujan anda.
Letak kedalam kotak Add a Gadget / HTML Javascript

simpan templat.
selesai

Script untuk menampilkan label

2012-03-16T23:03:00.001+08:00

Pada posting dahulu,Tukar Nama Label Menjadi Nama Categories,kita terpaksa membuat secara manual label-label yang hendak kita tampilkan.

Kali ini kita akan berkongsi,bagai mana hendak menampilkan label,dengan mengunakan Script untuk menampilkan label.

Ada dua jenis kod yang akan kita gunakan.

Kod satu:

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://listblog-tutorial.blogspot.com/feeds/posts/summary/-/news?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://listblog-tutorial.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>

Ganti url blog yang berwarna merah.
Ganti nama label yang ingin kita tampilkan,warna Biru

Kod kedua:

<script type="text/javascript">
var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;
</script>
<script src="/feeds/posts/default/-/News?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript">
</script>
<a href="http://listblog-tutorial.blogspot.com/search/label/News" style="float:right;font:normal 10px Arial;padding:5px 0;">More on this category</a>

Ganti label yang ingin ditampilkan berwarna biru.
Ganti Url dengan nama Url anda merah.

Cara menampilkannya atau cara hendak digunakan pada blog,hanya salin dan letakan
pada >> layout >> add gadget pilih HTML/Javasxript

Semoga anda berjaya membuatnya.dan jika kurang faham,rujuk Ubah Nama Label Menjadi Nama Categories.

Background Homepage dan Posting berbeza

2012-03-11T20:40:00.000+08:00

Kali ini kita akan membuat Background Homepage dan Posting berbeza.
Untuk membuatnya juga amat mudah.

Cara-cara hendak membuat Background Homepage dan Posting berbeza.

Pergi ke Dashboard | >> Design >> Edit Html >> Tanda kotak Expand Widget Templates.

Cari kod </head>

Jika sudah jumpa,tambah kod di bawah ini di atas kod </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGXgB-_ovF3e44Uf9MUVxEbEQgmH39hffTE4WRw2Be4oz5EoHf2BmjX_98cDR0gtB0KBOPtjBlvwVwK-NVgLrotfngc3nzGUqZzSXNeGbKda0CfafgfgX4yypop58_Q_s_INuMScUVRGU/s1600/Lightning.gif);
}
</style>
</b:if>

Jika hanya ingin mengantikan dengan warna sahaja,hapus

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGXgB-_ovF3e44Uf9MUVxEbEQgmH39hffTE4WRw2Be4oz5EoHf2BmjX_98cDR0gtB0KBOPtjBlvwVwK-NVgLrotfngc3nzGUqZzSXNeGbKda0CfafgfgX4yypop58_Q_s_INuMScUVRGU/s1600/Lightning.gif);

Gantikan dengan :

background:#dddddd:

Gantilah Url gambar atau color dengan kesesuaian template anda.
Semoga Bermanfaat untuk anda tentang tutorial cara membuat Background Homepage dan Posting berbeza ini.

Bermacam bentuk button atau spoiler

2012-03-10T20:40:00.000+08:00

Sorok widget di sidebar untuk,agar penampilan blog lebih kemas.

Cara untuk sorokan widget dengan button atau spoiler ini,ada Bermacam bentuk button atau spoiler

Anda hanya tinggal pilih bentuk sebagaimana yang sesuai dengan blog anda.

1.Salin code di bawah ini.

2.Cara yang ini pun boleh juga:

3.Boleh juga cuba yang ini:

copy paste kode ini:

4.Buat spoiler dengan jQuery pula.

Mungkin yang mengunakan jQuery ini agak susah sedikit kerana terpaksa mengantikan width: 200px;height: 100px mengikut kesesuaian apa yang hendak kita masukan.

Semoga beroleh manfaat dengan tutoril Bermacam bentuk button atau spoiler ini.

Background Blog Tidak Bergerak bila di Scroll

2012-03-10T20:34:00.000+08:00

Berikut Tips cara agar background blog tidak bergerak bila di Scroll
Untuk caranya mula mula login ke akun Blogger
Pergi ke Dashboard | >> Design >> Edit Html.

Dan cari kod CSS Body seperti di bawah ini

body {
background:url(http:alamat gambar) ;
color:#333;
font:small Georgia Serif;
text-align:center;
margin:0
}

Tambahkan kod, background-attachment: fixed; Setelah kod Background,contoh macam di bawah ini

body {
background:url(http:alamat gambar) ;
background-attachment: fixed;
color:#333;
font:small Georgia Serif;
text-align:center;
margin:0
}

Simpan Template dan lihat hasilnya,
Semoga Bermanfaat tentang membuat Background Blog Tidak Bergerak bila di Scroll

Background Blog Berubah ubah Warna secara Auto

2012-03-10T12:15:00.002+08:00

Cara membuat Background Blog Berubah ubah Warna secara Auto amat mudah untuk membuatnya.
Ia akan berubah-ubah warna secara auto selagi blog anda masih terbuka.

Ingin membuatnya,Pertama blog mestilah dalam keadaan Login
dan klik butang install di bawah ini.

<br /> <br /> <script type="text/javascript"> var r=0;    var g=0;     var b=0;     var flag=0;  var t=[];   var o=[];    var d=[]; function hex(a,c) {  var hexi = c.toString(16);  t[a] = hexi.charAt(0);   o[a] = hexi.charAt(1);} function ran(a,c) {  if ( (Math.random()>(2/3) || c==0) && c<255) {    c++;    d[a]=2;  } else {     if ( (Math.random()<=(1/2) || c==255) && c>0) {      c--;      d[a]=1;    } else d[a]=0;  }   return c} function do_it(a,c) {  if ( (d[a]==2 && c<255) || c==0) {    c++;     d[a]=2;  } else {    if ( (d[a]==1 && c>0) || c==255) {      c--;      d[a]=1;    }  }   if (a==3) {    if (d[1]==0 && d[2]==0 && d[3]==0) flag=1;  }  return c} function flash() {  if (flag==0) {    r=ran(1, r);    g=ran(2, g);    b=ran(3, b);    hex(1,r);       hex(2,g);       hex(3,b);         flag=50;  } else {    r=do_it(1, r);    g=do_it(2,g);    b=do_it(3,b);     hex(1,r);         hex(2,g);        hex(3,b);      flag--  }   document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3];  setTimeout('flash()',50);} window.onload = function() {  flash();}                                            </script><br /> <br /> <br />

Save Template anda dan lihat hasilnya.
Semoga anda berjaya di dalam membuat Background Blog Berubah ubah Warna secara Auto ini.

Bacground Blog berubah Warna bila Direfresh

2012-03-08T21:03:00.000+08:00

Lanjutan dari posting sebelumnya,Warna Background Blog berubah bila di klik
Sekarang kita akan membuat Membuat Bacground Blog berubah Warna bila Direfresh
Untuk membuatnya tidak memerlukan edit template,hanya copy code di bawah ini dan tambahkan pada element Html/javascript blog anda.

<script type='text/javascript'>
//CDATA[
/* JavaScript Kit (http://listblog-tutorial.blogspot.com/)*/
//Created Ageboy:
var bgcolorlist=new Array("#FFFFFF", "#B30000", "#EEFF00", "#11FF00", "#FF8A14", "#0008FF", "#4AFFF3", "#000")
document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
//]]>
</script>

Tukar URL blog dengan blog anda.(merah)
Setelah siap,simpan template dan lihat blog anda bila di refresh.
Semoga berhasil dalam membuat Bacground Blog berubah Warna bila Direfresh

Ubah Nama Label Menjadi Nama Categories

2012-03-08T16:07:00.000+08:00

Ubah Nama Label Menjadi Nama Categories,ha...Pening kepala memikirkannya.

Ada apa dengan Label dan Categories,Penting sangat ke?

Label sangat penting dalam sesebuah blog,apatahlagi kalau blog kita berbentuk blog berita.(contoh:Berita online,utusan online,sinar online dan banyak lagi.)
Malah label juga sangat Sensitive atau peka terhadap hurup besar atau kecil,contohnya Tutorial,ia amat berbeza dengan tutorial.

Cara untuk Ubah Nama Label Menjadi Nama Categories,anda harus mencari alamat feed untuk nama Categories yang akan kita ubah itu.Kalau nama Label anda ada dua,seperti ini contohnya, Tutorial Blog anda harus menambah %20 diantara dua perkataan tersebut,menjadi seperti ini Tutorial%20Blog .
Format asas alamat feed kita seperti ini:

http://alamat_blog_anda/feeds/posts/default/-/nama_label

Contoh blog ini yang nama alamatnya seperti ini:

http://listblog-tutorial.blogspot.com/

Harus di ubah menjadi seperti ini:

http://listblog-tutorial.blogspot.com/feeds/posts/default/-/Tutorial%20Blog

Jika labelnya satu perkataan,hanya menjadi seperti ini:

http://listblog-tutorial.blogspot.com/feeds/posts/default/-/tutorial

Kalau sudah memahami,kita teruskan untuk meletakan di dalam blog.

Masuk ke blog anda >> Add a Gadget

Tambah Feed yang kita hendak buat

Akan muncul seperti ini,anda ganti judul dan berapa posting yang akan kita tampilkan (hanya 5 post) dan lain sebagainya.

Simpan template dan lihat hasilnya.

Inilah hasil yang kita pelajari dengan cara di atas.
Maka bolehlah anda membuat blog seperti ini Berita Terkini

Warna Background Blog berubah bila di klik

2012-03-06T20:14:00.004+08:00

Warna Background Blog berubah bila di klik,kali ini kita akan membuat warna Background berubah bila kita klik pada kotak warna yang akan kita tampilkan.

Untuk contoh,cuba klik kotak-kotak warna di bawah ini.

Untuk membuatnya sangat mudah,cuma perlu install sahaja codenya.

setelah install,lihat hasilnya.

Tempat Online logo creator and generator

2012-02-26T08:40:00.001+08:00

Online logo creator and generator yang dapat memudahkan kita membuat logo blog. Siapa saja dengan mudah dapat membuat teks logo blog.Sebahagian online logo generator/creator yang mudah untuk digunakan.

1. www.textspace.net

Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.

2. www.flamingtext.com

FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif.. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.

3. cooltext.com

Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.

4. www.simwebsol.com

Ketika membuka halaman web ini, anda akan masuk ke halaman text logo editor yang sederhana. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

5. www.logomatik.net

Design pada web ini lebih menekankan pada koleksi design font yang menawan. warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vectornya sangat kuat dan memukau.

6. www.thelogoshop.info

Cukup sederhana,kerana web ini hanya memiliki satu halaman, designnya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar,web ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.

Sebahagian tempat-tempat untuk mencipta logo,saya pun mendapatkannya dari web sebegini.
Bagi saya yang no 2 dan 5 amat menarik.

Semoga anda berjaya membuatnya.

Membuat navigasi breadcrumb

2012-02-25T12:34:00.001+08:00

----->Widget ini telah di pertingkatkan dari yang lama,mengikut peredaran masa.<-----
Menu breadcrumb ini hanya akan muncul diatas artikel ketika kita membuka halaman suatu posting dan bukan halaman utama blogspot korang.

Cara membuat breadcrumb.

Pada Design, kemudian pilih Edit HTML,klik pada Expand Widget Templates.
dan cari kod berikut.

<b:if cond='data:post.title'>

Setelah jumpa ,letakkan kod dibawah ini dibawah kod tadi.

<b:if cond='data:blog.pageType == "item"'>
<a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</b:if>

Kemudian klik save Templates, dan siap sepenuhnya.

Buat widget recent comments dengan ada gambar

2012-02-24T20:59:00.000+08:00

Salam 1Malaysia.
Berikut adalah bagaimana anda boleh menambah widget recent comments ke blog anda.Anda juga mungkin mahu untuk menambah Recent Posts dengan widget Thumbnails untuk blog anda.
Kali ini memaparkan Recent Posts dengan adanya gambar pengomen.
Jadi kita boleh melihat siapa yang memberi komen di blog kita.

langkah-langkah:
1. Pergi ke Papan Pemuka Blogger anda> Layout> Page Element> Add Gadget> HTML / JavaScript
2. Copy dan paste kod di bawah:

3.Dalam kod, cari baris ini:
... Src = "http://Nama blog Anda.blogspot.com/feeds/comments/default ...
Dan gantikan alamat blog (ditunjukkan dalam warna biru) anda.

4. Tambah tajuk. Simpan.
Selesai.

Bagaimana untuk menukar nombor komen
Widget ini ditetapkan untuk memaparkan 5 recent comments. Jika anda ingin menukarnya, hanya cari nombor 5 dalam kod dan menggantikannya dengan bilangan komen yang anda mahu paparkan. Saya cadangkan menetapkan untuk 5 hingga 8 komen.
numComments = 5,

Bagaimana untuk menukar bilangan aksara / hide petikan
Widget ini ditetapkan untuk memaparkan maksimum 90 aksara petikan komen untuk setiap komen. Jika anda ingin menukar nombor itu, hanya mencari nombor 90 dalam kod dan menggantikannya dengan bilangan aksara yang anda ingin dipaparkan.
characters = 90,
cadangan 50-100.

Jika anda ingin menyembunyikan petikan komen, hanya masukkan 0 (sifar). Ex. ... O_rc var = 0

Begitulah cara Buat widget recent comments dengan ada gambar
Semoga berjaya.

Cara-cara membuat text area dan cara auto install

2012-02-24T19:51:00.001+08:00

--------->Tutorial ini telah ditambah baikan semula <-------

Membuat text area atau kawasan teks didalam blog kadang-kadang amat penting pada sesetengah blog.
Jika kita membuat banner bertukar link pada blog,semestinya text area ini sangat penting untuk kita meletakan script banner untuk dambil oleh pengunjung blog.

Cara-cara membuat text area juga amat mudah.

Cara satu:

<p align="center"><textarea name="code" rows="6" cols="20"> Letak script atau tulisan disini </textarea></p>

Akan menjadi begini.

Ganti tulisan “Letak script atau tulisan disini” dengan apa yang anda ingin sampaikan.
Ganti angka pada rows="6" untuk merubah ukuran tinggi kotak.
Ganti angka pada cols="20" untuk merubah ukuran lebar kotak.
Ganti perkatan "center" jika anda ingin meletakan dikiri atau kanan.

Cara kedua dimana kita memberikan highlight.

<form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Klik Disini"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Letak script atau tulisan disini</textarea></p></div></form>

Contohnya akan menjadi begini:

Ganti tulisan “Letak script atau tulisan disini” dengan apa yang anda inginkan.
Ganti tulisan “klik Disini” untuk menampilkan tulisan pada button di atas kotak text area.
Ganti angka pada WIDTH: 300px untuk ukuran lebar kotak.
Ganti angka pada HEIGHT: 144px untuk ukuran tinggi kotak.
Ganti tulisan center pada div align="center" untuk merubah posisi button yang terletak di atas kotak text area.

Cara ketiga dibuat secara Auto install

<form action="http://beta.blogger.com/add-widget" target="_blank" method="POST"><input value="tajuk widget" name="widget.title" type="hidden" /><textarea rows="3" cols="5" style="display: none;" name="widget.content">

<WIDGET ANDA>

</textarea><input value="click to auto install" class="button" name="go" type="submit" /></form>

Contohnya macam ni.

(Klik untuk bertukar link)
Pada code berwarna biru tetapkan tajuk sidebar.
Pada code berwarna merah letak scrip/code anda.
Pada code berwarna oren tetapkan tajuk pada button.

Save dan lihat hasilnya

selamat mencuba.

Camat mencuba…

Cara sorokatau tampilkan sesuatu widget di blog

2012-02-22T20:18:00.000+08:00

Mungkin ada antara pembaca ada terjumpa blog,apabila sesuatu link di klik ada sesetengah widgetnya menghilang,dan widget lain pula muncul.Jika ingin membuatnya,cuba fahami code-code dibawah ini.

1. Hanya pada Halaman Utama Blog

<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if>

Code ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika anda mengklik Label Post atau membaca postingan secara keseluruhan.

2. Kategori Post dan Single Post

<b:if cond='data:blog.url != data:blog.homepageUrl'> ... </b:if>

Code ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (membaca posting secara keseluruhan).

3. Halama Utama Blog dan Kategori Post

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

Code ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca posting secara keseluruhan.

4. Single Post

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

Code ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.

5. Halama Utama Blog dan Kategori Post

<b:if cond="data:blog.pageType == "index"">... </b:if>

Fungsi code ini sama dengan fungsi code pada no 3 diatas.

6. Menampilan Widget Blog Pada Postingan Tertentu Saja

<b:if cond="data:blog.url == "URL_POST_TERTENTU""> ... </b:if>

Code ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu posting tertentu.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond="data:blog.url != "URL_POST_TERTENTU""> ... </b:if>

Code ini sama fungsinya dengan code no 6 dimana widget blog akan menghilang dari suatu posting tertentu dan muncul pada posting yang lain.

Cara-cara untuk mengunakan code ini,amat mudah,lihat contoh di bawah.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Letak di sini widget yang hendak sembunyikan atau di tampilkan
</b:if>

Cara buat Slideshow ringkas

2012-02-18T23:02:00.000+08:00

Cara buat Slideshow ringkas untuk banyak kegunaan.Slideshow ringkas ini juga kita boleh gunakan untuk meletakan iklan di blog dalam format/bentuk 125x125.

Cara-cara untuk membuatnya juga ringkas.

Login ke akun blog anda

Masukkan script di bawah ini ke dalam GADGET HTML/Javascript.

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73cH3IhbaK1OU864sv1D7wbgtdztmKKLJ0TsP4JlA7JM9iYt-4-YZ57oVxHzTKmCZWeY-fR_psgwZdhpgfNz4ZbQh0b9xBGmMuImU8UCZKCZY5SAp4XLbVPtwcLhd4eedufviO9JeRYrX/', 30, 60 ], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz6_kExt9UmELCSGtGMaMdt1XPY1VbcRiXFs-TiYqxeDiynKhZ041t7laZDCY0jIv2DKbvd8Xv56EMuH8wmt1ZsSVyoKhIfByjqXFkVSsILdiUoLDZ8WAs9Xo21obmcmKx1Tw7gn1KiV8Z/', -55, 60 ]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

Ganti yang berwarna merah mengikut kesesuaian blog Anda.
Dan SAVE GADGET

Cari code ]]></b:skin> dan gunakan Ctrl-F untuk memudahkan pencarian.

Salin code di bawah ini dan letak diatas ]]></b:skin>

.carousel {
float:left;
margin:0;
padding:0
}

.carousel .widget {
width:720px;
background:#888;
margin:0;
padding:0
}

.stepcarousel {
position:relative;
overflow:scroll;
width:765px;
height:160px
}

.stepcarousel .belt {
position:absolute;
left:0;
top:0
}

.stepcarousel .panel {
float:left;
overflow:hidden;
width:140px;
margin:5px 20px 5px 0
}

.stepcarousel .panel img {
float:left;
background:#940f04;
border:1px solid #000;
margin:5px;
padding:5px
}

.stepcarousel .panel img:hover {
background:#fff
}

#under_header {
opacity:100
}

.carousel h2,.quickedit {
display:none
}

Ganti yang berwarna merah mengikut kesesuan blog anda.

Copy code dibawah ini dan letak dibawah code ]]></b:skin> pula.

<script src='https://sites.google.com/site/listblogtutorial/widget/slideshow.js' type='text/javascript'/>

SAVE TEMPLATE, dan lihat hasilnya.

Selamat mencuba.

Judul-judul artikel pada headline news tersebut bergerak

2012-02-18T00:18:00.000+08:00

Masuk ke account Blogger kamu,
pilih Page ElementsKlik
Add a Gadget
HTML/JavaScript

Tidak usah diberi judul, kemudian copy-paste kode di bawah ini:

Cara buat Twitter Widget di blog

2012-02-15T16:23:00.001+08:00

Twitter,salah satu rangkaian sosial yang banyak digunakan selain muka-buku(facebook).
Sekarang banyak blogger meletakan widget twitter di blog agar memudahkan pembaca nak follow kita sebagai rakan twwet atau mengikut blog kita melalui twitter sahaja.

Cara buat Twitter Widget di blog juga amat mudah,kepada yang belum tahu nak membuatnya,ikut langkah mudah di bawah ini.

Pertama anda seharusnya sudah mendaftar dengan twitter,jika belum daftar sekarang.
(saya angap anda sudah mempunyai akaun twitter)

1.Buka twitter anda dahulu,dan pilih Widgets.(https://twitter.com/about/resources/widgets).

2.Klik pada My Website dan pilih Profile Widget.

3.Pada bahagian Setting,dibawah USERNAME tulis nawa Twitter anda.

4.Pada Preferences,Pilih mengikut kesesuaian anda,Number of Tweet terpulang berapa banyak nak letak.

5.Appearance,tukar warna mengikut kesesuaian blog,atau warna kegemaran anda.

6.Bahagian Dimensions ubah size kelebaran mengikut kesesuaian blog anda atau pilih dan tanda pada auto width,dimana ia akan berubah secara auto mengikut kesesuaian template blog kita.

7.Klik Test Settings untuk Lihat preview twitter yang dibuat,jika berpuashati klik Finish & Grab Code,Salin code dan letak di blog mengikut kesesuaian.

Kalau nak senang klik je dan secara auto widget twitter sudah berada di blog kita.

Begitulah Cara buat Twitter Widget di blog.
Salam,dan selamat mencuba.

Buat contact form sendiri dengan Google Docs

2012-02-14T20:43:00.002+08:00

Sudah diketahui bahawa Google ada bermacam-macam tool yang disediakan untuk pengguna blog/internet dan salah satunya ialah Google Docs.Tool ini digunakan untuk berkongsi dokumen-dokumen secara online dan kita juga boleh membuat contact form untuk blog kita.

Saya akan terangkan cara Buat contact form sendiri dengan Google Docs,kepada yang belum lagi memahaminya.

Pertama sekali kita hendaklah mempunyai akaun gmail,dimana nanti segala maklumat akan di hantar terus ke gmail kita.

1.Setelah ada akaun gmai,bukalah akaun gmail tersebut.
maka nanti akan terlihat seperti gambar ini.

2.Klik Documents yang berada berdekatan address bar

3.Klik CREATE dan pilih Form

4..Tulis tajuk form di ruang untitled form dan masukkan kata-kata alaun di dalam ruang di bawah untitled form itu mengikut kesesuaian atau kosongkan sahaja.

5.Isi segala data,sebagai mana anda kehendaki ia muncul di dalam form nanti.Di ruang Question Type pilihlah mengikut kesesuaian yang di ingini.dan klik Done.

6.Untuk menambah soalan,klik gambarajah seberti gambar dibawah.

7.Setelah semua selesai dan untuk mengambil scriptnya,klik more action dan pilih embed.

8.Copy dan pastekan didalam blog anda .mengikut kesesuaian.

9.kalau ingin mempercantikan lagi borang form anda,Klik pada ruang Theme.

Banyak pilihan Theme,untuk contact form sendiri dengan Google Docs ini.

Contoh yang saya gunakan

Salam, selamat mencuba buat contact form sendiri dengan Google Docs

Cara Membuat SiteMap efek jquery

2012-02-08T19:43:00.000+08:00

SiteMap,satu wideget atau efek diblog kita yang menghimpunkan segala artikel kita yang lalu
Dengan adanya SiteMap diblog kita,memberi satu kemudahan kepada pengunjung blog untuk melihat artikel kita yang lalu berdasarkan lebel yang dibuat.

Jika artikel lalu kita Membuat SiteMap mengikut Haribulan,kini kita membuat sitemap dengan efek jquery dimana ia memberi penampilan yang lebih menawan.

Script SiteMap efek jquery ini saya perolehi dari blogger Indonesia Hendriono,seorang pereka cipta berbagai-bagai script jquery untuk template.

Untuk membuatnya,seperti biasa,Masuk Design - Edit HTML

Seterusnya cari code ]]></b:skin> dan letakan code css dibawah ini diatas kode ]]></b:skin>

#dafis-acc {
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
.dafis-label {
background: rgb(125,126,125);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #A1A1A1;
text-transform:uppercase;
font-weight: bold;
line-height: 2em;
margin: 1px 3px;
cursor: pointer;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-align: center;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
line-height: 1.3em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-top:5px;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
color:f2f2f2;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

Cari code </head> dan letakan code dibawah ini diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

PERINGATAN:Jika didalam template sudah ada script seperti ini,jangan diletakkan lagi.
Cukup dengan satu Script seperti ini.

Save template.

Script dibawah ini untuk menampilkan sitemap,boleh diletakkan pada posting, widget atau pada halaman statis.

<script type="text/javascript" src="https://sites.google.com/site/listblogtutorial/sitemap/site-map.js"></script>
<script src="http://listblog-tutorial.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Penting: Ganti url dengan url blog anda.(warna biru)

Cara Membuat SiteMap mengikut Haribulan

2012-02-06T00:14:00.000+08:00

SiteMap adalah untuk mencari artikel-artikel kita yang lalu dengan cepat.
Kali ini kita membuat sitemap mengikut Haribulan.

Cara Membuat SiteMap mengikut Haribulan ini sangat senang.

Salin code dibawah ini,letak didalam New Post.

<div style="background-color: none; border: 2px dashed #CCC; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;">
<div align="center">
<span style="font-size: medium;">SiteMap mengikut Haribulan</span></div>
<script src="https://sites.google.com/site/listblogtutorial/sitemap/SiteMap.js">
</script><script src="http://alamat-blog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

Ganti alamat URL dengan milik Anda dan klik PUBLISH.

Selesai,selamat mencuba.

Cara Membuat Slide Navigation dengan JQuery

2012-02-05T23:32:00.001+08:00

Banyak cara membuat Navigation/Tab,kali ini kita akan membuat Cara Membuat Slide Navigation dengan JQuery pula.

Cara-cara Membuat Slide Navigation dengan JQuery.

Macam biasa mestilah membuka blog dengan ruang edit html.
Cari code berikut ]></b:skin>
Salin code css dibawah ini dan letak diatas ]></b:skin> tadi.

.headerfixed {
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left
}

ul#navixed {
position:fixed;
top:0;
right:10px;
list-style:none;
z-index:999999;
width:721px;
margin:0;
padding:0
}

ul#navixed li {
width:103px;
display:inline;
float:left
}

ul#navixed li a {
display:block;
float:left;
margin-top:-2px;
width:100px;
height:25px;
background-color:#000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0 0 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)
}

ul#navixed li a:hover {
background-color:#000
}

ul#navixed li a span {
letter-spacing:2px;
font-size:11px;
color:#FFF
}

ul#navixed .home a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZ4zfv6VOI0be2Dp5QPQo1wArQLUtws02Z1-fdPHb5yO-k2EtcKqh-LO9B3n1TNQ4hp712G160ZKxsgmgLQJlbb42tndU5UZA1HTwQeTmdoyPCfai_APVCOxsgC0_hWdI9kzsbfRqlKo/s1600/home.png)
}

ul#navixed .about a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaO83xRxdkmCOWbluyqyQafW-IEp5c1hhDsMMate5qbVzdgb5cjwMcZplkoe80LnVIAXch4QUaffdj52l_E-Ji5K2m374T0ZTsFIaswdzx82VgHu4x281XhVHQmYiZBNlkX6qXMbI3v7s/s1600/id_card.png)
}

ul#navixed .search a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_l4HzgTJYjdur0X837sn_B5LEA_O7dv2BDOPdqFwQCQx3qPkYl2QiB4VMrG0CgVb-xfYKzgxdhBBZ10C_VsA9UGFHEZh-Dq9qIqtA42hmR6DPp-qY7AwnfKFdsF0NlUyecvEDr5jnHs/s1600/search.png)
}

ul#navixed .podcasts a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Tlk_ODD8Cm5qnphfBDTEIIEYry1nYawvYYCgRTEDsKd_jQbPt5f9GrbAl_HwZEl3pHamX6H4LbW2xvfp6ko7tCO2N7g9maqBVx0rGrh1Leyo7U9XtNR3dnHA9tKrS49lkdaxghRw2N0/s1600/ipod.png)
}

ul#navixed .rssfeed a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEingxxYyYUrPUjVIOjTR6wFGOEfsAuxIxYWg3y5SyL3WYW12TA8K5VRI4sAEpJrXsnMHMS5dWFnM5pr0y8ZLOruCbuMIRtLTncJyBhANpuHluCGIhlXRGe8RSJnfajaFUYZb4fPF3sgwao/s1600/rss.png)
}

ul#navixed .photos a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogQciYR7vFkxKdD9yYQeMwYlRWQ1JA0vX_EVF3MuSbXp24Ak0Evpq4_f3ta6ctYXunSG9osMtsa2jhEJgCZpBZBK3Pn5yIMjj3PFFV-qYfOiGOeil7K_UDer5hCEfWn0BYqTkdX0MbgU/s1600/camera.png)
}

ul#navixed .contact a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWguVNvXV9CfDxTb7IDf9zi3hqMWKtjyCaJaYqderCL6JArFGfuVYbOslT4nrr2G5jWzFvO3tGavglE2tqnwESQ-_kKNgW4dDxSzx7SwrKK2m1FTn3W2qZBnahDF727xHiMWdZi3V9C-U/s1600/mail.png)
}

Cari code </head> pula
Salin code dibawah ini dan letak diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='https://sites.google.com/site/listblogtutorial/sitemap/jcolor.js'/> <script type='text/javascript'> $(function() { var d=300; $('#navixed a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navixed > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script>

Cari lagi code <body>
Salin dan letak code dibawah ini diatas code <body>

<ul id='navixed'><li class='home'><a href='#'><span>Home</span></a></li> <li class='about'><a href='#'><span>About</span></a></li>
<li class='search'><a href='#'><span>Search</span></a></li>
<li class='photos'><a href='#'><span>Photos</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li> <li class='podcasts'><a href='#'><span>Podcasts</span></a></li> <li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

Klik simpan template.
Buka kembali edit HTML untuk anda edit code no3 mengikut kesesuaian blog anda.

Selamat mencuba

Buat template dengan Blogger Template Generator

2012-01-31T22:54:00.000+08:00

Banyak Orang kata membuat template itu susah,sebenarnya tidak susah mana pun kalau kita membuatnya dengan pertolongan Blogger Template Generator.

Buat template dalam waktu kurang dari 10 minit
Desain template tanpa harus menguasai bahasa HLML/CSS

Saya senaraikan sebahagian Blogger Template Generator

1. Psycho – Psychogenesis
Dengan bantuan layanan ini,Kita dapat merancang sendiri template kita dari Header Sampai Footer

2. Pimp My Profile

3. Page Colomn Layout Generator

4.Firdamatic

5.Trix Blogspot Template Generator

6.2 Colomns Blogger Layout Generator

7.3 Colomns Blogger Layout Generator

8.4 Colomns Blogger Layout Generator

9. 5 Colomns Blogger Layout Generator