Home > Archives for June 2010
Tutorial Cara Berblogwalking bersama Wawwi.com
1 commentsPosted by
Tutorial Cara Buat Title SEO Friendly
9 commentsPosted by
Hai all...selamat petang...okey petang ini koz nak wat tutorial ringkas berkenaan tajuk di atas...Korang mesti nak blog korang mesra dengan Search Engeine (SEO Friendly) kan...jadi pada yang dah tahu baguslah, dan pada yang tak tahu ikuti cara-caranya...
Langkah 1
Macam biasa backup templet dulu kemudian Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.
Langkah 2
Cari code ini
<title><data:blog.pageTitle/></title>
Dan gantikan code tersebut dengan code di bawah ini
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
save dan hasilnya akan jdi seperti berikut:-
Sebelum
Selepas
Untuk melihat hasilnya sila masuk di mana-mana post entry blog korang...
Camat mencuba...
Tutorial Cara Buat Widget Halaman Posting
17 commentsPosted by
Hai all...hari ini koz nak berkongsi dengan korang cara nak buat halaman posting.Fungsinya adalah untuk memudahkan para pengunjung memasuki halam-halaman berikutnya dan halaman-halaman sebelumnya.contohnya seperti halaman google di bahagian bawah:-
Sudah paham kegunaan widget kali ini?okey kita mulakan tutorialnya...
Langkah 1
Seperti biasa backup templet dulu kemudian Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.
Langkah 2
Cari code ini ]]></b:skin> dan copy code di bawah...
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
Kemudian paste code tersebut sebelum/di atas code ini ]]></b:skin>
Langkah 3
Kemudain cari code </body> dan copy code di bawah...
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';var downPageWord ='Next';
</script>
<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/blogger_navpage.js' type='text/javascript'/>
</b:if>
Kemudian paste code tersebut sebelum/di atas code ini </body>
Langkah 4
Pada code berwarna merah, Korang boleh tetapkan jumlah posting yang berada di salah satu halaman.
Pada code berwarna oren, korang boleh tetapkan jumlah angka/npmbor yang hendak di pamirkan.
Pada code berwarna biru, korang boleh ubah ayat Next atau Previous pada ayat kesukaan korang
Save dan lihat hasilnya...
Camat mencuba...
Tutorial Cara Memasang Ruangan Code Converter Di Blog
3 commentsPosted by
Hai all...bertemu kembali untuk tutorial berikutnya...Hari ini koz nak kongsi dengan korang untuk memasang ruangan untuk convert code HTML yang hendak di pamirkan atau di kongsi di blog korang, Apa kegunaannya?Ok kepada yang tak tahu kegunaannya, kegunaannya adalah untuk convert code supaya ia dapat di kongsi kepada para pengunjung di blog korang...sebagai contoh:-
code asal
<a href="http://kozumiro.blogspot.com/" target="_blank">
<img src="http://img109.imageshack.us/img109/7105/promotblog.png" />
</a>
Code selepas di convertkan
<a href="http://kozumiro.blogspot.com/" target="_blank">
<img src="http://img109.imageshack.us/img109/7105/promotblog.png" />
</a>
Biasanya code yang sudah di convertkanlah biasanya digunakan untuk para blog tutorial untuk berkongsi code-code untuk tutorial yang di pamirkan...
Contoh Ruangan tersebut
Jadi kalau dah paham mari koz ajarkan cara-cara nak pasang ruangan convert tersebut...
Copy code di bawah ini
<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=200&h=200&title=Code+Converter&border=%23ffffff%7C0px%2C1px+solid+%2399BB66%7C0px%2C2px+solid+%23AACC66%7C0px%2C2px+solid+%23BBDD66&output=js"></script>
Dan paste sama ada di ruangan Add a gadget atau pada New Page...
save dan lihat hasilnya...
Jika nak tukar warna bingkai dan saiznya korang boleh pergi ke sini
Camat mencuba...
Tutorial Cara Pasang Widget LinkWithin Di Blog
15 commentsPosted by
Hai all...Hari ini koz akan ajar korang cara nak letak widget LinkWithin di blog korang...LinkWithin ini kegunaannya adalah mempamirkan post-post yang berkaitan yang ada pada blog korang di bahagian setiap bawah post korang...Cara-caranya mudah sahaja...Ikuti langkah-langkah berikut...
Langkah 1
Login blog korang
Langkah 2
Kemudian masuk ke web LinkWithin dan isi maklumat pada ruangan yang di sediakan
seperti gambar di bawah...
Jika sudah, Klik Button "Get Widget"...
Langkah 3
Kemudian ikuti Langkah-langkah yang diberikan...
Install Widget dan Add Widget...
Langkah 4
Widget tersebut letakkan di bawah bahagian posting..
Save dan lihat hasilnya...
Camat mencuba....
Tag...(Budak NAkal Dapat Tag Dari Lensa Buruk)
2 commentsPosted by
Ahak..camat pagi all..Sebelum koz post tutorial berikutnya(dah 3 hari tak bagi korang tutorial,cory sangat-sangat koz tak berapa sehat^^)...koz nak ucapkan ribuan terimas kepada cik Ti Anne Mohd Yassin atau nama panggilan cik Anne iaitu pemilik blog Lensa Buruk kerana tagkan pada koz...Kalau korang nak tau ,segala photo dari lensa buruknya semuanya cantik-cantik belaka...memang segala hasil tangkapan gambarnya memang PRO abis...ahak...ok ok...berbalik pada tag yang di beri, apa lagi...kena jawap la soalan-soalannya...
1. Apa yang bermain di fikiran anda sekarang ini ?
Nak Kena Siapkan Tutorial Untuk Korang^^...
2. Apakah nama samaran anda ?
kozumi_ro
3. Berikan tiga (3) orang yang anda sayang ?
Smua yang koz kenal termasuk rakan-rakan blog^^(lari topik)
4. Panggilan untuk si dia ?
Rahsia gak^^
5. Hadiah yang anda impikan daripada seseorang yang istimewa ?
Erk...Cukuplah Sekadar menyayangi koz^^,
6. Blog manakah yang anda suka lawati ?
Blog Nisa,Anne,Dahlia,Kak YanMie, AizBatuCampur dan Rakan-rakan blog yang lain(banyak sangat2)
7.Tag kan kepada 15 orang rakan blogger anda ?
>DahliaTiga je kot^^,
>Nisa
>Aiz
Iklan Penaja DiGi dan Bola! Bola! Bola! datang kepada anda!
4 commentsPosted by
- 25 June, Malacca: Rally Club (12C, Jalan Bukit Baru)
- 25 June, JB: E&Y Harmonium Bistro (12, Jalna Sagu 2)
- 26 June, JB: Restoran ABMH (28, Jalan Harimau Tarum Century GRC)
- 26 June, Selangor: Kafe Darussalam (SS15 Subang Jaya)
- 29 June, Selangor: Rock Cafe (SS15 Subang Jaya)
- 2 July, Kuantan: Restoran Taj Point (Jalan Sungai Lembing)
- 2 July, Penang: Original Kayu Nasi Kandar (15, Lebuh Nipah 5, Bukit Jambul)
- 3 July, Penang: Pelita Samudra (Sg. Dua)
- 3 July, Alor Setar: Restoran Ahmediah (Lebuh Raya Darul Aman)
Datang jangan tak datang,ajaklah kawan-kawan, family,satu kampung pun boleh. Datanglah seawal pukul 7 malam untuk memenangi hadiah-hadiah seperti HTC phone, original jerseys dan footballs di dalam pertandingan yang akan di langsungkan pada hari tersebut.
Akhir kata, "Ingat Bola Ingat DIGI"
Apa tunggu lagi...serbulah^^...
Budak Nakal Nak Header Baru!!!
11 commentsPosted by
Terkini(dalam proses)
Tutorial Cara Letak Gambar Di Sebelah Tajuk Post
24 commentsPosted by
hai all...hari ini koz akan tunaikan permintaan pengunjung laman budak nakal ini yang memintak koz buat tutorial cara letak gambar/icon di sebelah tajuk entri atau tajuk post...Contohnya seperti dekat blog ini,dekat setiap tajuk post pasti ada gambar di sebelahnya...Cara-cara nak buatnya seperti berikut...
Langkah 1
Seperti biasa backup templet dulu kemudian Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.
Langkah 2
Cari code di bawah
<a expr:href='data:post.url'><data:post.title/></a>
Cara termudah untuk cari code ini tekan CTRL+F pada keyboard dan copy paste code ini ke ruangan find...
Langkah 3
Kemudain copy code di bawah
<img src="LinkGambar"/>
Dan paste di tengah-tengah code antara code ini
<a expr:href='data:post.url'>
dan code ini
<data:post.title/></a>
Contoh akan jdi seperti ini
<a expr:href='data:post.url'><img src="Link Gambar"/><data:post.title/></a>
Langkah 4
Kemudain Ganti/Tukar "LinkGambar" kepada link gambar yang korang nak letak
Save dan lihat hasilnya...
Camat mencuba...
Tutorial Cara Memasang Sosial Bookmark Di Bawah Post
11 commentsPosted by
Hai all..hari ini koz nak ajar korang tutorial cara nak letak sosial bookmark dekat bawah post entry korang seperti contoh yang ada pada bawah post koz ini...
Cara-caranya seperti berikut...
Langkah 1
Apa-apahal backup templet dulu kemudian Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.
Langkah 2
Cari code ini
<data:post.body/>
Langkah 3
Kemudian copy paste code di bawah ini selepas code/bawah code(langkah 2)
<script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/medium.js" language="JavaScript"></script>
Selepas sudah paste,kedudukan code akan jadi macam ini
<data:post.body/><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/medium.js" language="JavaScript"></script>
Kemudian save dan lihat hasilnya...
Code ini juga korang boleh letak pada Layout>Page Elements>Add a Gadget>HTML/Javascript dan copy paste code di bawah
<script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/medium.js" language="JavaScript"></script>
Camat mencuba...
Tutorial Cara Menghilangkan Tajuk Blog Di Header
14 commentsPosted by
Hai all...hari ini koz akan mengajar korang pula cara nak hidden tajuk blog korang yang ada di bahagian header...Kebanyakan blog yang koz kunjungi pasti ada yang tak tahu cara untuk menghilangkan tajuk blog masing-masing ada gak yang terpaksa menggunakan simbol seperti titik dan sebagainya...Jadi hari ini koz akan membantu/mengajar cara termudah untuk menghilangkan tajuk blog tersebut...Cara-caranya seperti berikut...
Langkah 1
Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.
Langkah 2
Korang Cari code yang serupa atau lebih kurang sama seperti code di bawah
#header h1 {
margin:50;
padding:10px 0 0 20px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#0099CC;
visibility:hidden;}
Atau
.blogname h1 {
font-size:40px;
font-weight:normal;
margin:0px 0px 0 40px;
color:#ffffff;
text-decoration: none;
text-align:left;
display:none
Atau
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
visibility:hidden;}
Langkah 3
Bila dh jumpa code di bawah...tambahkan code seperti code warna merah pada bahagian bawah sebelum tanda ( } )...
Code yang boleh di gunakan seperti berikut
display:none
Atau
visibility:hidden;
Kemudian save dan lihat hasilnya...
Camat mencuba...
Tutorial Cara Memasang Pageview di Post
20 commentsPosted by
Hai all...hari ini koz akan mengajar cara nak buat / memasang page view pada setiap post di blog korang...kegunaannya adalah untuk korang megetahui bilangan post korang di lihat oleh pengunjung di blog korang...caranya adalah seperti berikut...
Langkah 1
Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.
Langkah 2
Kemudian cari code ini ,cara termudah untuk mencari code ini korang tekan kekunci Ctrl+F pada keyboard korang dan copy paste diruangan find...
<div class='post-header-line-1'/>
atau
<data:post.body/>
Langkah 3
Copy dan paste code di bawah ini sebelum/di atas code di atas(langkah 2)
<b:if cond='data:blog.pageType == "item"'><div align='left'><img src='LinkGambarKorang' style='width: 26px; height: 16px;' /><b><font size='2'><script src='http://bestwidgets.zxq.net/counter.php' type='text/javascript'/></font></b></div></b:if>
Langkah 4
Tukar/ganti code berwarna merah pada link gambar yang korang nak dan pada code berwarna biru tetapkan saiz gambar tersebut dan pada code berwarna hijau pula tetapkan kedudukan yang korang suka sama ada left,right atau center...
Contoh code yang sudah di edit:-
<b:if cond='data:blog.pageType == "item"'><div align='right'><img src='http://img8.imageshack.us/img8/4186/blogger16.png' style='width: 16px; height: 16px;' /><b><font size='2'><script src='http://bestwidgets.zxq.net/counter.php' type='text/javascript'/></font></b></div></b:if>
save dan lihat hasilnya...
camat mencuba...
Tutorial Memasang Kotak Peringatan Di Bawah Post
10 commentsPosted by
Hai all..hari ini koz akan mengajar tutorial berguna untuk blog korang...
tentu ada yang bertanya apa kegunaan tutorial pada kali ini...tutorial kali ini adalah berkenaan cara nak letak kotak/pegumuman/peringatan atau ucapan di bawah setiap post di blog korang.Contoh seperti yang berada di bawah post blog koz ini...Cara-cara nak buat ikuti langkah-langkah di bawah...
Langkah 1
Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates
Langkah 2
Cari code ini
]]></b:skin>
Nak lagi mudah gunakan kekunci CTRL + F
dan paste code ini diruangan find
Langkah 3
Copy dan paste code di bawah ini sebelum/diatas code(Langkah 2)
.underpost{
padding:10px;
margin:10px 0px;
background:#eee;
border:1px solid #ddd;
line-height:1.6em;}
korang boleh ganti code warna pada code berwarna biru untuk mengganti warna bacground pada tulisan dan code berwaran hijau untuk warna garis
Langkah 4
Kemudaian Cari code ini
<data:post.body/>
Langkah 5
Dan copy paste code di bawah ini selepas/di bawah code(langkah 4)
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
<div class='underpost'>
Ayat/Perkataan/Peringatan/Ucapan</div>
</b:if>
Pada code berwarna merah ubah/ganti ayat yang korang suka...
save dan lihat hasilnya...
Camat mencuba...
Tutorial Cara Buat Title Header Bergerak
45 commentsPosted by
Hai all...bertemu kembali ke tutorial berikutnya...maap la ye sebab hari ini lambat bagi tutorial^^.Koz tengah buzy siapkan web orang(cari duit lebih)...
Okey,kepada yang dah tahu kegunaan tittle header baguslah,dan pada yang tak tahu title header ialah tajuk blog korang yang berada di atas sekali sebelah lambang blogger(seperti gambar di atas)...Cara-cara nak buat mudah sahaja,ade 2 versi yang boleh di ikuti,ikuti langkah-langkahnya:-
Versi 1
Langkah 1
Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates
Langkah 2
Cari code ini
<HEADER>
atau ini
<header>
Langkah 3
Copy dan paste code di bawah ini sebelum code di atas(Langkah 2)
<script type='text/javascript'>
//<![CDATA[
msg = "AyatKorangAtauTajukBlog";
msg = "AyatKorangAtauTajukBlog" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}>
scrollMSG();
//]]>
</script>
Langkah 4
Pada code berwarna merah ubah/ganti pada ayat/tajuk blog kesukaan korang
Save dan lihat hasilnya...
Versi 2
Langkah 1
Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates
Langkah 2
Cari code di bawah
<title><data:blog.pageTitle/></title>
Langkah 3
Dan gantikan code di bawah ini pada code di atas(Langkah 2)
<script language="JavaScript">
var txt=" AyatKorangAtauTajukBlog ";
var espera=100;var refresco=null;function rotulo_title() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}rotulo_title();
</script>
Langkah 4
Pada code berwarna merah ubah/ganti pada ayat/tajuk blog kesukaan korang
Save dan lihat hasilnya...
Camat mencuba...
Tutorial Cara Buat Letak Button Comment Di Blog
20 commentsPosted by
Hai all...hari ini koz akan memenuhi permintaan cik dahlia kita yang inginkan tutorial letak button comment cute pada blog...
Langkah-langkahnya seperti berikut:-
Langkah 1
Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.
Langkah 2
Kemudian cari code ini
<span class='post-comment-link'>
Atau
<b:include data='post' name='postQuickEdit'/>
Atau
<div class='post-body entry-content'>
Atau
<div class='post-footer'>
Pilih ruangan yang korang rasa sesuai...
cara termudah untuk mencari code ini korang tekan kekunci Ctrl+F pada keyboard korang
Langkah 3
Copy dan paste code di bawah selepas code di atas(langkah 2)
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='PesananAnda!'><img class='post-comment-link' src='LinkGambar'/>
</a>
</b:if>
</b:if>
</span>
Langkah 4
Tukar/ganti ayat yang berwarna merah dan pada ayat berwarna biru masukkan url gambar
Contoh code yang sudah di edit:-
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Komen Dekat Sini!!'><img class='post-comment-link' src='http://img192.imageshack.us/img192/7019/komen3.png'/>
</a>
</b:if>
</b:if>
</span>
Save dan lihat hasilnya...
camat mencuba...
Tutorial Cara Buat Alert Message
18 commentsPosted by
Hai all...^^nak tutorial lagi?tentu nakkan...okey hari ini koz nak berkongsi dengan korang cara nak buat Alert Message ,contoh seperti yang tersedia ada di laman budak nakal ini...okey langkah-langkah nak buat bende ini senang sahaja...
Langkah 1
Login blog >Layout> Page Elements>Add a Gadget>HTML/JavaScript
Langkah 2
Copy dan paste code di bawah
<script type="text/javascript">
alert('UcapanKorangKepadaPengunjung!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>
Langkah 3
Pada Tulisan Biru Korang ubah la ucapan yang korang nak dan pada tulisan merah tu, mesej itu akan tertera jika ada pengunjung yang Disable Javascript.
Save dan lihat hasilnya...
Camat mencuba...
Sedihnya!...
14 commentsPosted by
Tutorial Cara Buat Dropdown Menu
11 commentsPosted by
Hai all...camat pagi...ahak...maap ye sebab ada yang menunggu tutorial berikutnya dari koz...hihi...okey hari ini koz akan ajar next tutorial pulak dekat korang...nak belajar??^^okey kalau nak hari ini koz akan berkongsi dengan korang cara buat Dropdown Menu dekat blog korang...contoh seperti yang koz ada buat unutk Rakan Budak Nakal di belah kanan>>>
Kalau nak buat ikuti langkah-langkah berikut...
Langkah 1
Dashboard>Layout>Page element>Add a gadget>HTML/javascript.
Langkah 2
Copy dan paste code di bawah
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>Tajuk</option>
<option value="Link 1">Text 1</option>
<option value="Link 2">Text 2</option>
<option value="Link 3">Text 3</option>
</select>
Langkah 3
Pada Link 1 Masukkan link.
Pada Text 1 Masukkan perkataan/ayat untuk link yang di paparkan.
Langkah 4
JIka ingin menambah ruangan menu,masukkan code ini
<option value="Link ">Text </option>
Diatas/sebelum code ini
</select>
Save dan lihat hasilnya...
camat mencuba...
Tutorial Cara Buat Widget Post Bergerak
32 commentsPosted by
Hai all..selamat pagi...hari ini koz akan berkongsi dengan korang ilmu baru yang koz baru dapat...Tutorial pada hari ini berkenaan membuat widget post entry bergerak...cara nak buat agak mudah...jadi ikuti langkah-langkah di bawah...
Langkah 1
Login blog >Layout> Page Elements>Add a Gadget>HTML/JavaScript
Langkah 2
Copy paste code di bawah
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
margin-bottom:-20px;
padding:0px 0px -20px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:200px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:center;
height:70px;
overflow: hidden;
background:#FFFFFF;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#A32929;
font-size:12px;
height:0px;
overflow:hidden;
margin: 0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:10px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:0px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:0px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:0px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[1] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[2] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[3] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[4] = "http://img15.imageshack.us/img15/5439/noimagex.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = " ";
showPostDate = false;
showcomments = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://NamaBlogKorang.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>
</div>
Langkah 3
Pada code ayat berwarna merah,masukkan nama blog korang
save dan lihat hasilnya...
Camat mencuba:D
Tutorial Cara Buat Hide/Show Shoutbox Versi Simple
39 commentsPosted by
Hai all...petang ini koz akan memenuhi pemintaan "mamaGee"
Maap ye koz lambat tunaikan permintaan mamaGee^^....
Sebenarnya koz dah buat tutorial ini dalam versi comel...tapi memandangkan ada yang nak jenis simple koz akan edit kembali code tersebut kepada yang asal..
jadi jika inginkan yang jenis simple teruskan megikuti langkah-langkah berikut:-
Langkah 1
Login blog >Layout> Page Elements>Add a Gadget>HTML/JavaScript
Langkah 2
Korang copy dan paste code di bawah:-
<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://img411.imageshack.us/img411/6496/hijau.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">
MASUKKAN CODE SHOUTBOX DISINI
<div style="text-align:right">
<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>
Langkah 3
Kemudian korang masukkan code shoutbox korang pada perkataan
" MASUKKAN CODE SHOUTBOX DISINI "
dah masukkan save dan tengoklah hasilnya...
Pada code yang berwarna hijau korang boleh ubah gambar tersebut(saiz 100X30)
contoh:-
Anda juga boleh buat permintaan di sini jika inginkan button macam kat atas ni di tukar dengan warna yang anda hendak...koz akan cuba bantu untuk buatkan...
Button untuk MamaGee
Code
http://img143.imageshack.us/img143/4863/pinki.png
camat mencuba :D
Tutorial Cara Buat Widget Penyambut Tetamu
33 commentsPosted by
Hai all...maap lah hari ini lewat pulak kasi tutorial terbaru...
tadi koz buzy sikit dengan kerja...okey hari ini koz nak penuhi permintaan cik Nisa kita yang hendak tahu cara untuk membina widget ini...Cory sebab lambat tunaikan permintaan ini ^_^ ...Cara-caranya seperti berikut:-
Langkah 1
Layout>Page Elements>Add a Gadget>HTML/Javascript
Langkah 2
Kemudian korang copy paste code di bawah
<script type = "text/javascript">
//
var days = 730; // days until cookie expires = 2 years.
var lastvisit=new Object();
var firstvisitmsg="Terima Kasih Kerana Sudi Berkunjung Ke Laman Ini. Welcome!";
lastvisit.subsequentvisitmsg="Selamat Datang! Anda Kali Terakhir Buat Nakal Di Sini Pada <b>[displaydate]</b>";
lastvisit.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1];
return'';
}
lastvisit.setCookie=function(name, value, days){
var expireDate = new Date();
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days));
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
lastvisit.showmessage = function() {
var wh = new Date();
if (lastvisit.getCookie("visitc") == "") {
lastvisit.setCookie("visitc", wh, days);
document.write(firstvisitmsg);
}
else {
var lv = lastvisit.getCookie("visitc");
var lvp = Date.parse(lv);
var now = new Date();
now.setTime(lvp);
var day = new Array("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat");
var month = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var dd = now.getDate();
var dy = now.getDay();
dy = day[dy];
var mn = now.getMonth();
mn = month[mn];
yy = now.getFullYear();
var hh = now.getHours();
var ampm = "AM";
if (hh >= 12) {ampm = "PM"}
if (hh >12){hh = hh - 12};
if (hh == 0) {hh = 12}
if (hh < 10) {hh = "0" + hh};
var mins = now.getMinutes();
if (mins < 10) {mins = "0"+ mins}
var secs = now.getSeconds();
if (secs < 10) {secs = "0" + secs}
var dispDate = dy + ", " + mn + " " + dd + ", " + yy + " " + hh + ":" + mins + ":" + secs + " " + ampm
document.write(lastvisit.subsequentvisitmsg.replace("\[displaydate\]", dispDate))
}
lastvisit.setCookie("visitc", wh, days);
}
lastvisit.showmessage();
</script>
Langkah 3
Kemudian korang ganti/ubah ayat pada code yang berwarna merah kepada ayat yang korang suka...
Save dan lihat hasilnya...
Tambahan...Disebabkan ada permintaan yang ingin tahu macam mana hendak letak gambar di atas widget ini (seperti gambar di atas)Koz akan tunaikan...
okey cara-caranya senang sahaja
copy code di bawah
<a href=">
<img src="LetakLinkGambarKorang" />
</a>
Kemudain letak link gambar korang dekat code ayat "LetakLinkGambarAnda"
code ini letak diatas code widget tersebut...
camat mencuba :D
Tutorial Cara Letak Auto-Appear Link Box
8 commentsPosted by
Hai all...hari ini koz dari pagi tadi ronda-ronda ke blog orang untuk mencari tips-tips untuk tingkatkan iklan nuffnang ini,tak dapat-dapat huhu sesape yang ada tips-tips tersebut bolehlah tinggalkan komen di sini ok...koz ini pun masih baru dalam bidang iklan nuffnang ini...
Ahak...kita lupakan pasal masalah koz,kita berbalik pada tutorial berikutnya.
tutorial pada kali ini koz nak berkongsi cara nak buat AUTO_Appear Link Box,macam dekat gambar atas ini...
Cara nak buat seperti berikut:-
Langkah 1
Macam biasa backup template dulu...
Langkah 2
Masuk Layout>EDIT HTML
Langkah 3
Cari perkataan
</headdan
<body>
Kemudian copy paste code di bawah ini di tengah antara dua code di atas
<link href='http://sites.google.com/site/defaultjssite/urltooltip.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/defaultjssite/urltooltip.js' type='text/javascript'/>
<script src='http://sites.google.com/site/defaultjssite/sweettiles.js' type='text/javascript'/>
Contoh:-
Kemudian save dan lihat hasilnya...
Camat mencuba :D
Tutorial Cara Buang Link 'Subscribe to: Posts (Atom)'
15 commentsPosted by
Hai all...hari ini koz nak berkongsi dengan korang satu tutorial ini...Jika korang perasan biasanya kebanyakan templet blog mesti ada link 'Subscribe to: Posts (Atom)'...biasanya kedudukannya dibawah sekali selepas post entry korang...bagi koz link ini macam menyemak je kat situkan...kepada sesiapa yang mengalami masalah ini, hari ini koz nk berkongsi dengan korang cara termudah untuk buang link tersebut...
Langkah 1
Masuk DASHBBOARD -> Layout -> Edit HTML...
Langkah 2
Klik kotak 'Expand Widget Template'...
Langkah 3
Cari code seperti di bawah ni menggunakan tool find (tekan keyboard ctrl + F)
<b:include data='feedLinks' name='feedLinksBody'/>
Bila dah jumpa korang delate code tersebut,kemudian save
dan lihat hasilnya...
Camat mencuba :D
Tutorial Membina widget komen terkini
14 commentsPosted by
Hai all..selamat petang...ahak..tentu ada yang tertunggu-tunggu untuk tutorial berikutnya pada petang inikan ^_^...okey...petang ini koz nak berkongsi cara-cara untuk membina widget komen terkini...cara-cara nak buatnya ikuti langkah-langkah di bawah:-
Langkah 1
Layout>Page Elements>Add a Gadget>HTML/Javascript Langkah
Langkah 2
Copy paste code di bawah diruangan HTML
<script src="http://sites.google.com/site/testingsahaja/recentcomments.js">
</script><script>
var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;
</script><script src="http://MasukkanLinkBlogDisini/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
Langkah 3
Kemudain masukkan alamat blog korang di ruangan code yang berwarna merah..
contoh:-
<script src="http://sites.google.com/site/testingsahaja/recentcomments.js">
</script><script>
var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;
</script><script src="http://kozumiro.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
Kemudain save dan lihatlah hasilnya...
camat mencuba :D
Tutorial Cara Buat Float Pada Post
6 commentsPosted by
Hai all...tutorial berikutnya koz akan ajar cara nak buat float pada post korang...Ape itu Float?Float dalam bahasa melayunya berbunyi terapung atau timbul...sebagai contoh seperti di bawah:-
Budak Nakal
akan berkongsi dengan korang tutorial-tutorial yang menarik untuk di guna pakai dalam blog korang...
Float ini di gunakan pada perkataan/ayat permulaan sesuatu post entry korang...
Jika berminat hendak mengunakannya dapatkan pada code di bawah
<div style="width:250px;">
<h1 style="float:left;margin-right:10px;">PermulaanAyat</h1>
<p>SambunganAyat</p>
</div>
Ubah code PermulaanAyat dan SambunganAyat yang tertera pada code di atas pada perkataan/ayat yang korang suka...
Kemudian save dan lihatlah hasilnya...
Camat mencuba...
Tutorial Cara Buat Code Box
26 commentsPosted by
Hai all...yahoo!!gembira rasanya bila dh siapkan banner promot untuk blog koz ini...jadi pada korang kalau sudi promotlah blog koz ini di blog korang ok...
codenya boleh dapat pada ruangan belah kanan >>>>>>
tak pun dekat bawah ini:-
Apalah koz ini...asyik nak promot blog saje...hihi..okey2...berbalik pada tajuk sebenar petang ini koz nak penuhkan permintaan "Cik Qiqi"kita yang nak tahu cara-cara nak buat Box untuk code...jadi ikuti langkah2 di bawah
Langkah 1
Layout>Page Elements>Add a Gadget>HTML/Javascript
Langkah 2
Copy COde di bawah
<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">Code Blog Korang</textarea>
Dan letak code blog korang pada ruangan yang tertulis "Code Blog Korang"
Contoh hasilnya:-
Dan save lihatlah hasilnya...
Kalau untuk Promot web lak ini code dier:-
<textarea cols="20" name="textarea" rows="2" wrap="VIRTUAL">Code Blog Korang</textarea>
Camat mencuba...
Tutorial Cara Buat List Style Image
6 commentsPosted by
Hai all..koz ade ilmu baru nak di kongsi dengan korang...
kebanyakkan korang mesti dah ada Tool List kat blog masing-masingkan...
sebagai contoh:-
- Budak nakal
- Budak comel
- Budak manja
- Budak nakal
- Budak comel
- Budak manja
- Budak nakal
- Budak comel
- Budak manja
Cara-cara nak buat seperti biasa mudah sahaja...korang cuma gunakan code di bawah:-
<ul style="list-style-image:url(http://img99.imageshack.us/img99/7790/bigeyescreature16x16.png);">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>
Pada code tertulis List pertama,kedua dan ketiga tu korang boleh ganti dengan ayat yang korang nak...
Dan cara nak tambah list mudah sahaja korang cuma tambah code ini
<li>List Tambah</li>
sebelum atau di atas code ini
</ul>
Icon pulak korang boleh tukar dengan icon ke sukaan korang...Saiz icon tersebut jangan terlalu besar ,saiz terbaik adalah bawah 25X25...
Di sini koz Kongsikan sekali icon2 comel...lau berkenan ambil lah...
http://img692.imageshack.us/img692/7130/tentaclescreature16x16.png
http://img690.imageshack.us/img690/8579/whitecreature16x16.png
http://img17.imageshack.us/img17/5663/blackcreature16x16.png
http://img340.imageshack.us/img340/755/pinkcreature16x16.png
http://img69.imageshack.us/img69/7790/bigeyescreature16x16.png
http://img413.imageshack.us/img413/8315/greencreature16x16.png
Camat Mencuba...
Tutorial Cara Letak Bingkai / Kotak Pada Post
24 commentsPosted by
Hai all...hari ni tak ada tutorial yang nak di kongsikan...koz sesaje jek nak beri ucapan selamat pagi dekat korang...hahah gurau je...^_^okey...next tutorial hari ini koz akan ajar korang cara nak taruk bingkai/kotak pada perkataan/ayat yang korang post di blog korang...cara-cara nak buat mudah sahaja...Sila lihat contoh dan code yang ada di bawah...
<p style="border:4px solid black;">Tutorial Budak Nakal Kotak'solid'.</p>
<p style="border:4px dotted black;">Tutorial Budak Nakal Kotak'dotted'.</p>
<p style="border:4px dashed black;">Tutorial Budak Nakal Kotak'dashed'.</p>
<p style="border:4px double black;">Tutorial Budak Nakal Kotak'double'.</p>
<p style="border:4px groove black;">Tutorial Budak Nakal Kotak'groove'.</p>
<p style="border:4px ridge black;">Tutorial Budak Nakal Kotak'ridge'.</p>
<p style="border:4px inset black;">Tutorial Budak Nakal Kotak'inset'.</p>
<p style="border:4px outset black;">Tutorial Budak Nakal Kotak'outset'.</p>
<p style="border:4px hidden black;">Tutorial Budak Nakal Kotak'hidden'.</p>
Kemudain korang boleh taruk ayat yang korang nak dan juga boleh ubah warna bingkai kesukaan korang pada code warna merah...
Camat mencuba...
Tutorial Cara Nak Letak Line Pada Perkataan Di Blog
6 commentsPosted by
Hai all..ahak untuk hari ni koz bukan kasi 1 atau 2...tapi tiga tutorial untuk korang hihi...semangat untuk sumbangkan ilmu ini makin berkobar2 lak...hiihi..
okey,next tutorial pada hari ini,koz nak ajar korang cara nak letak line pada ayat/perkataan...senang sahaja tutorial ini...dekat bawah ini koz ade sediakan contoh dan code dier...
1)Line Dekat Atas
Tutorial DariBudak Nakal...
<p style="text-decoration:overline;">Tutorial DariBudak Nakal...</p>
2)Line Dekat Tengah
TTutorial DariBudak Nakal...
<p style="text-decoration:line-through;">TTutorial DariBudak Nakal...</p>
3)Line Dekat Bawah
Tutorial DariBudak Nakal...
<p style="text-decoration:underline;">Tutorial DariBudak Nakal...</p>
Pilih mana yang berkenan...
Camat mencuba...
Tutorial Cara Nak Jarakkan Perkataan (Letter Spacing)
3 commentsPosted by
Hai all...okey tutorial kedua hari ini koz akan kongsi dengan korang cara nak jarakkan ayat/perkataan pada post entry korang...langkah-langkah nya seperti biasa mudah sahaja...jadi ikutlah langkah-langkah seperti di bawah...
Seperti biasa copy dan paste code di bawah
<p style="letter-spacing:5px;">This text has letter spacing applied</p>
Kemudaian Pada code tersebut korang gantikan ayat yang korang nak tulis pada
"Ayat Yang Korang Nak Tulis"
Pada "letter-spacing:5px" korang boleh ubah code jarak dier pada 5px itu kepada jarak yang korang berminat sebagai contoh
Code 5 px
Budak Nakal
Code 10 px
Budak Nakal
Code 15 px
Budak Nakal
Camat Mencuba...
Tutorial Cara Buka Link Pada New Tab
8 commentsPosted by
Hai all...bertemu kembali pada tutorial berikutnya...
hari ini koz akan mengajar cara nak buka new tab sekiranya korang klick pada mana-mana link di blog korang...caranya mudah anda hanya perlu mengikuti langkah-langkah di bawah...
Korang boleh copy code di bawah..ada dua code...nak pakai mana-mana pun boleh
Code 1
<a href="Alamat Link Korang" target="_blank">
NamaKorang</a>
Code 2
<a href="Alamat Link Korang" target="_new">NamaKorang</a>
Kemudian masukkan link yang korang nak pada ayat "Alamat Link Korang"
Contoh:-
Code 1
<a href="http://kozumiro.blogspot.com/" target="_blank">kozumi_ro</a>
Code 2
<a href="http://kozumiro.blogspot.com/" target="_new">kozumi_ro</a>
Save dan lihatlah hasilnya...
Camat mencuba...
Tutorial Cara Buat Widget Post Terkini Di Blog
18 commentsPosted by
Hai all..disini koz akan berkongsi dengan korang cara nak wat widget Post terkini pada blog korang,Widget ini akan mempamirkan setip post terkini yang ada di blog korang dan cara ini akan memudahkan pengunjung untuk megetahui post-post 10 terawal...Cara-cara untuk buat widget ini amat mudah...korang cuma ikut lankah-langkah seperti di bawah...
Langkah 1
Layout>Page Elements>Add a Gadget>HTML/Javascript
Langkah 2
Kemudian copy dan paste code di bawah
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js"></script><script style="text/javascript">var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><script src="http://NamaBlogKorang/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Langkah 3
Pada code yang mempunyai ayat NamaBlogKorang gantikan pada nama blog korang
Save dan lihatlah hasilnya...
Camat mencuba...
Tutorial Cara Pasang Top Commentators
21 commentsPosted by
Hai all...hari ini koz nak ajar pulak cara nak buat widget top commentators...
Top commentators ini akan auto list nama-nama top 10 orang yang memberi comment di blog korang...
Langkah-langkah untuk membuat widget ini amat mudah...Ikut langkah-langkah di bawah...
Langkah 1
Layout>Page Elements>Add a Gadget>HTML/Javascript.
Langkah 2
Korang copy dan paste code di bawah
<script type='text/javascript'>
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=f91b5716f09d1986849eb4072486db48&url=NamaBlog.blogspot.com&num=10&filter=NamaKorang"></script>
<a href='http://www.bloggerplugins.org'><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/2008/06/top-commentators-widget-for-blogger.html'><img style="border: 0" alt="Top Commentators Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
Langkah 3
Korang gantikan/ubah ayat "Nama Blog" di code tersebut dan taruk nama blog korang...
Kemudaian Jangan lupa letak nama korang pada ayat "Namakorang"
ini untuk memastikan nama anda tidak tergolong dalam top commentators tersebut...
Save dan lihatlah hasilnya
Camat mencuba...