Salam semua..
Kali ini aku nak kongsikan cara nak buat sticky entri dalam blogspot. Apa yang dimaksudkan dengan sticky entri ialah post yang sentiasa berada di atas(muka depan) blog korang. Jom godek daaaa.....
Cara dia mudah je.. Masa dah siap tulis entri korang, klik kat Post Options dan tukar tarikh kepada tarikh yang akan datang. Apa-apa hal boleh tengok gambar di bawah(jangan malu-malu klik gambar tuu kalo kecik sangat... hahahaha)
Showing posts with label Godek. Show all posts
Showing posts with label Godek. Show all posts
Buat Sticky Post
Buat Newsletter
Salam semua..
Sory byk2 kalo aku menyepi tanpa entri dalam blog ini. So xpayah nak citer panjang, aku nak share 1 godek yg sempoi iaitu cara-cara membuat newsletter dalam blog. Nak tau apa itu newsletter, klik sini utk maklumat lanjut.
Apa yang korang boleh tengok kat sidebar aku(2nd last), ada ruangan newsletter utk kengkawan. So cara nya camni:-
1) Pergi ke http://google.com/friendconnect dan login.
2) Kemudian klik nama blog korang di sidebar sebelah kanan
3) Kemudian klik pautan 'Send a newsletter'.
4) Klik check box “Ask visitors to subscribe immediately after their first sign-in" dan klik Newsletter Gadget tab.
5) Tukar ayat korang sendiri dan pilih lah kaler yg korang minat
6) Generate code dan copy code tersebut
7) Pergi ke Layout > Page Elements > Add a Gadget > HTML/JavaScript Gadget
8) Paste kod tadi dalam HTML/JavaScript Gadget
Setel. Sekarang korang boleh gunakan newsletter korang.
No Labels
Salam semua...
Berpandukan tajuk kali ini, ada sorang member menanyakan bagaimana nak hilangkan labels pada setiap pos dan inilah jawapannya.
p/s: Save dulu templates asal korang...
Apa yang perlu dilakukan ialah:-
1) Pergi ke Layout > Edit HTML dan klik Expand Widget Templates.
2) Cari kod di bawah
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>
3) Delete dan save.
Siap....
Posted By Below Post Title
Salam..
Tajuk godek kali ini agak mengelirukan, jadi aku senangkan dengan gambar di bawah:-
Berdasarkan gambar, posted by telah berada di bawah tajuk entri korang.
Jom godek..
1) Pergi ke dashboard--> layout- -> Edit HTML dan klik "Expand Widget Templates"
2) Cari kod di bawah
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Cut kod di atas dan save kan dulu dalam notepad.
3) Kemudian cari kod ini pula
<div class='post-body entry-content'>
4) Copy kod yang korang cut tadi betul2 selepas kod <div class='post-body entry-content'>
5) Save dan lihat blog korang...
Tukar Penampilan Links dalam Blog
Salam semua..
Tajuk godek hari ini ialah menukarkan penampilan links dalam blog korang menjadi lebih menarik. Korang boleh tengok kat links dalam blog aku ini.
Let's godek...
1) Pergi ke layout- -> Edit HTML dan klik "Expand Widget Templates"
2) Cari kod di bawah
a:hover {
text-decoration:underline;
}
3) Tukarkan dengan kod ini
a:hover {
position: relative;
bottom: 5px;
left: 1px;
color:#000000;
}
4) Save dan siap
p/s: korang boleh tukarkan warna links(apabila tweak) dengan menukar kod color di atas. Boleh rujuk sini untuk bermacam color
Labels di bawah Tajuk Entri
Salam...
Kali ini aku nak kongsikan 1 godek yang direquest oleh seorang member yang meminta menukar lokasi labels di bawah tajuk entri. Lihat contoh di bawah:-
Ok jom godek...
1) Pergi ke Layout > Edit HTML dan tick Expand Widget Templates
2) Cari kod
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> </div>
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>
</span> </div>
<div class='post-footer-line post-footer-line-3'/>
p/s:Setiap blog mungkin berlainan kod, so korang kena cari kod labels blog korang sendiri.Yang penting kod yang berwarna hitam di atas adalah sama saja, hanya merah mungkin berlainan.
3) Cut kod yang berwarna merah di atas ( dan paste selepas kod di bawah
<div class='post-header-line-1'/>
Preview blog korang, jika menjadi save terus....
p/s: Kalau entri korang takde labels, tak perlulah korang praktikkan godek ini....
Membuat mesej alu-aluan
Salam semua..
Hari ini aku nak kongsikan satu godek yang sempoi iaitu 'membuat mesej alu-aluan'.
Heh... kalau korang masih confuse, cuba try klik blog testing aku ni.
Yaa.. menarikkan. Jom godek
Apa yang korang perlu buat ialah:-
1) Pergi ke Layout > Add a Gadget > HTML/Javascript
2) Copy kod di bawah ini
<script language='JavaScript'>
window.alert(" SELAMAT DATANG! ");
</script>
3) Save dan tengok hasilnya..
p/s:Korang boleh tukarkan kata alu-aluan korang sendiri dengan tukarkan SELAMAT DATANG!
Mudahkan.. Selamat mengodek..
Membuat efek Marquee pada Site Title
Salam semua..
Sory laa kalau dah lama tak post kan godek2 kat sini.
Hari ini atas permintaan seorang member, aku kongsikan 1 godek cara membuat efek bergerak (marquee) pada site title. Contoh korang boleh tengok kat blog ini. (tengok kat browser)
Caranya sangat sempoi iaitu:-
1. Pergi Layout --> Edit HTML.
2. Setelah itu copy kode Javascript kat blog ini selepas kod <head>
3. Tukar Nama Site dengan tajuk blog korang
4. Save dan enjoy...
p/s: Aku xpaham kenapa kod dlm pos ni x function.. tapi kod kat blog ni boleh plak.
Sila pergi ke blog ini utk mendapatkan kod tersebut..
Paparkan Yahoo Messenger Status Dalam Blog
Salam Raya semua..
Aku harap korang semua dalam keadaan sihat dan gembira semuanya. Pada Hari Raya ke-5 ini, aku nak kongsikan 1 godek yang menarik iaitu memaparkan YM status korang dalam blog. 
Apa yang korang perlu buat ialah pergi ke Layout > Add a Gadget > HTML/Javascript
Kemudian masukkan kod di bawah
<a href="ymsgr:sendIM?NAMA YM KORANG"> <img src="http://opi.yahoo.com/online?u=NAMA YM KORANG&m=g&t=2&l=us"/>
</a>
dan tukarkan tulisan merah dengan nama YM korang. Save.. Setel.
Itu saja dan selamat mengodek di Hari Raya
Navigation Tab Sempoi
Request dari salah seorang rakan kita yang meminta untuk membuat navigation tab.
Untuk makluman godek ini telah aku buat dan boleh tengok kat sini.
Tapi mungkin godek yang lepas ini agak sukar, so aku kongsikan 1 cara yang sempoi malam ni.
Korang boleh tengok blog cubaan aku di sini yang menggunakan tab sempoi ini.
Ok jom godek...
Apa yang korang perlu buat ialah
1) Pergi Layout > Add a Gadget dan pilih HTML/Javascript
2) Masukkan kod di bawah ke dalam HTML/Javascript
<a href="http://BLOGKORANG.blogspot.com">|HOME|</a><a href="http://godekblog.blogspot.com">|GODEK|</a><a href="http://google.com">|FAVORITES|</a><a></a>
Dalam kod di atas korang perlu tukar sendiri link/pautan(merah) dan ayat(biru)
3) Save dan drag HTML/Javascript korang tadi ke bawah header blog. Refer gambar di bawah:-
Setel...
Warna-warni blog
Salam semua..
Hari ini aku nak kongsikan 1 cara paling sempoi untuk mengindahkan blog korang dengan warna-warna kegemaran. Mungkin ada diantara korang dah tahu cara ini, tapi takde hal kan..
Jika korang nak mendapatkan warna kegemaran korang dengan menggunakan kod hex agak susah, so disini apa yang sempoi nya ialah korang tidak perlu pening-pening nak dapatkan kod hex itu kerana hanya dengan 1 klik saja masalah korang akan selesai.
Apa yang korang perlu buat ialah install add-ons untuk mozilla.
p/s: ini hanya untuk pengguna mozilla saja.
1) Install add-ons di sini
2) Bila siap install, restart mozilla korang
3) Nanti korang akan nampak gambar ini 
di hujung bawah sebelah kiri browser korang.
4) Kemudian korang klik icon tersebut dan halakan ke mana-mana kaler dalam website yang korang berkenan. Di bawah dalah contoh warna untuk header blog aku.
Gunakan kod hex itu di dalam HTML template blog korang.Ok.. sempoi kan..
Apa lagi, cat baru ler blog korang sbb dah nak raya ni.. heheheh
Arios...
Tukar cursor/pointer dalam blog
Salam semua..
Semalam aku ada dapat request dari seorang member yang menanyakan bagaimana mahu menukarkan cursor di dalam blog kita. Sesudah aku mengodek-godek, akhirnya aku telah ketemu 1 cara yang paling mudah.
Apa lagi jom godek....
Apa yang korang perlu buat ialah
1) Pergi ke Layout>Add a Gadget>pilih HTML/Javascript
2) Masukkan kod di bawah ke dalam HTML/Javascript tadi<style type="text/css">body {cursor:url("http://i680.photobucket.com/albums/vv161/tikitiki_girlgirl/Slorg.gif"),default}</style>
3) Tukarkan kod merah dengan link cursor korang tersendiri (klik sini untuk pelbagai cursor)
p/s: pastikan korang ambil Direct Link utk cursor pilihan korang..okay.
Setel..
Masukkan Image Slide Show dalam Header
Salam semua,
Kali ini aku nak kongsikan 1 godek yang diminta oleh l@n@.
Aku telah berjaya mengodeknya tadi dan korang boleh tengok kat blog ini.
Jom godek...
Sebelum itu, korang kena tukarkan sedikit HTML kod dalam template korang.
1) Pergi ke Layout>Edit HTML
2) Cari kod ini<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML2' locked='yes' title='' type='HTML'/>
</b:section>
</div>
3) Kemudian tukarkan jadi seperti di bawah:<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
4) Save dan Layout blog korang akan jadi seperti di bawah
Kemudian apa yang korang perlu buat ialah pergi ke photobucket.com dan upload gambar-gambar korang. Kepada yg belum register, silalah mendaftarkan diri.. free je.
Apabila korang telah upload gambar korang, klik create slideshow dan masukkan berapa banyak gambar korang.(tapi tak silap aku 3 je boleh..heheheh). Kemudian save dan cari ruangan share dan copy Direct Link
Refer gambar di bawah:-
Sesudah korang mendapatkan kod korang tadi, pergi ke Layout>Add a Gadget(bahagian header tadi) > HTML/JavaScript Add
Masukkan kod dibawah kedalam HTML/JavaScript.<div style="width:660px; text-align: center;">
<embed width="660" src="http://w987.photobucket.com/pbwidget.swf?pbwurl=http://w987
.photobucket.com/albums/ae360/bedot82/437101de.pbw" wmode="transparent"height="210"
type="application/x-shockwave-flash"></embed></div>
Kemudian korang tukarkan width, height dan link(Direct link dari photobucket tadi) korang refer pada kod berwarna merah.
p/s: width size mesti mengikut header korang, jangan belasah je nanti blog jadi merapu..
Siap....
Sesiapa yang kurang paham, jangan segan-segan tinggalkan komen.
Membuat Table Dalam Pos
Salam semua...
Godek kali ini adalah requet dari Faizah yang mahu memasukkan table/kotak seperti jadual di dalam pos entri. Korang boleh tengok sini
Jom godek..
Refer pada blog cobaan aku tadi, apa yang korang perlu buat ialah memasukkan kod seperti di bawah di dalam pos entri korang.<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>TOTAL TEST</TH> </TR>
<tr> <td>NAMA</td> <td>TEST 1</td> <td>TEST 2</td> </tr>
<tr> <td>Dol</td> <td>90%</td> <td>80%</td> </tr>
<tr> <td>Mat</td> <td>70%</td> <td>90%</td> </tr>
<tr> <td>Man</td> <td>60%</td> <td>50%</td> </tr>
</TABLE>
<p>
p/s: Pastikan semasa membuat posting dalam Edit HTML mode.
Korang hanya perlu tukarkan teks-teks tersebut.
Jika korang nak masukkan gambar, upload gambar dan masukkannya mengikut mana-mana kotak yang korang suka.(kod HTML untuk gambar tersebut)
Untuk memudahkan korang, kod di bawah adalah contoh dari blog cobaan aku tadi.
<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>TOTAL TEST</TH> </TR>
<tr> <td>NAMA</td> <td>TEST 1</td> <td>TEST 2</td> </tr>
<tr> <td><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimGwbrHxebLDVNP4zAO2hs-p7g7sK9bBPnxCZtAg_z52kuSAGbY7zrLzpJn5YAEsFXJxkDb05HsQn4K9nop4ko07TUxC_KoBdcyf1dJ96M2cPhhzJbw6Y16nxr_TyfvJJnFpTVEhNjkftM/s1600-h/blog50roberta_jacobson.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 50px; height: 50px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimGwbrHxebLDVNP4zAO2hs-p7g7sK9bBPnxCZtAg_z52kuSAGbY7zrLzpJn5YAEsFXJxkDb05HsQn4K9nop4ko07TUxC_KoBdcyf1dJ96M2cPhhzJbw6Y16nxr_TyfvJJnFpTVEhNjkftM/s200/blog50roberta_jacobson.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5352342035298217634" /></a>Dol</td> <td>90%</td> <td>80%</td> </tr>
<tr> <td>Mat</td> <td>70%</td> <td>90%</td> </tr>
<tr> <td>Man</td> <td>60%</td> <td>50%</td> </tr>
</TABLE>
<p>
Jika kurang paham, tinggalkan komen..
Masukkan Gambar Dalam Scrollbar
Godek ini request dari syamimi yang mahu meletakkan gambar-gambar di dalam scrollbar. Korang boleh refer sini kalau tak puas hati. heheheh...
Jom godek...
Semasa menulis entri pastikan korang menggunakan mode Edit HTML.
Masukkan kod di bawah di dalam entri korang :-<div style="border: 1px solid #aaa;background-colo r:#f9efef; width:350px; height:250px; overflow:auto; color:#FFF;"><p>
LETAK KOD ATAU TEKS DI SINI
</p>
</div>
Jika korang nak masukkan gambar, tukarkan kod image yang korang upload dengan tulisan merah.
Contoh :-
<div style="border: 1px solid #aaa;background-colo r:#f9efef; width:350px; height:250px; overflow:auto; "><p>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MO3PH05C-u3l_o4aFJD75_n09tjMeiDQ5lNwCeGBdx7ORfOgo9r7ryZql8Rm5UxoUYTlZQ0V5oyJUD_VB0mOpTrILCkx57VfNa-wyQdjtaLnfS_-lKXmRsB5_dgZgd4vv9vaPSQD52nr/s1600-h/kawin buntat.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 134px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MO3PH05C-u3l_o4aFJD75_n09tjMeiDQ5lNwCeGBdx7ORfOgo9r7ryZql8Rm5UxoUYTlZQ0V5oyJUD_VB0mOpTrILCkx57VfNa-wyQdjtaLnfS_-lKXmRsB5_dgZgd4vv9vaPSQD52nr/s200/kawin buntat.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5350599480470198386" /></a>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MO3PH05C-u3l_o4aFJD75_n09tjMeiDQ5lNwCeGBdx7ORfOgo9r7ryZql8Rm5UxoUYTlZQ0V5oyJUD_VB0mOpTrILCkx57VfNa-wyQdjtaLnfS_-lKXmRsB5_dgZgd4vv9vaPSQD52nr/s1600-h/kawin buntat.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 134px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MO3PH05C-u3l_o4aFJD75_n09tjMeiDQ5lNwCeGBdx7ORfOgo9r7ryZql8Rm5UxoUYTlZQ0V5oyJUD_VB0mOpTrILCkx57VfNa-wyQdjtaLnfS_-lKXmRsB5_dgZgd4vv9vaPSQD52nr/s200/kawin buntat.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5350599480470198386" /></a>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MO3PH05C-u3l_o4aFJD75_n09tjMeiDQ5lNwCeGBdx7ORfOgo9r7ryZql8Rm5UxoUYTlZQ0V5oyJUD_VB0mOpTrILCkx57VfNa-wyQdjtaLnfS_-lKXmRsB5_dgZgd4vv9vaPSQD52nr/s1600-h/kawin buntat.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 134px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MO3PH05C-u3l_o4aFJD75_n09tjMeiDQ5lNwCeGBdx7ORfOgo9r7ryZql8Rm5UxoUYTlZQ0V5oyJUD_VB0mOpTrILCkx57VfNa-wyQdjtaLnfS_-lKXmRsB5_dgZgd4vv9vaPSQD52nr/s200/kawin buntat.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5350599480470198386" /></a>
</p>
</div>
Ini adalah contoh dari blog cobaan aku.heheheh
p/s: Dalam kod di atas, korang boleh tukarkan width dan height mengikut kesesuaian blog korang.
Setel...
Masukkan Yahoo Smiley Emoticons Dalam Komen
Godek kali ini request dari DakMuo yang ingin meletakkan Yahoo Smiley Emoticons ke dalam ruangan komen. Sebelum itu boleh refer kepada gambar di bawah:-
Jom godek...
1) Pergi Layout > Edit HTML dan tandakan Expand Widget Templates
2) Cari kod </body> dan masukkan kod di bawah sebelum </body><script src='http://kendhin.890m.com/emoticon/smile1.js' type='text/javascript'/>
3) Kemudian cari kod <b:if cond='data:post.embedCommentForm'>
Masukkan kod di bawah betul-betul selepas kod tadi<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
Save template korang. Selesai...
Masukkan Search Box Dalam Header
Alooo semua...
Sorry sebab ter busy pulak minggu lepas, so hari ini aku dapat mengodek 1 lagi benda best iaitu memasukkan Search Box dalam header. Korang boleh tengok gambar di bawah kalau tak puas hati..heheheeh...
Jom godek...
1) Pergi ke Layout > Edit HTML > Expand Widget Templates(tandakan kotak)
2) Cari kod seperti di bawah :-
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Paste kod di bawah betul-betul selepas kod tadi#header .searchbox {
text-align:$endSide; //$endSide = Right & $startSide = Left
margin: 25px; // Distance from right or left side
}
3) Kemudian cari kod
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
Kemudian masukkan kod di bawah selepas kod di atas<div class='searchbox'>
Tukarkan tulisan merah kepada URL blog korang dan tulisan biru pula untuk button search itu nanti.
<form action='http://blog-korang.blogspot.com/search' id='searchthis' method='get' style='display:inline;'>
<input id='b-query' maxlength='255' name='q' size='20' type='text'/>
<input id='b-searchbtn' type='submit' value='Search'/>
</form></div>
Selesai.. Enjoy
Masukkan Adsense Dalam Pos Entri
Godek kali ini adalah request dari Moyumas yang meminta bagaimana memasukkan Adsense ke dalam pos samada di sebelah kiri atau kanan. Tanpa membuang masa, jom godek..
Sebelum itu kepada sesiapa yang blur, boleh refer gambar di bawah:-
Pastikan korang dah monetize atau letakkan adsense di dalam pos korang dengan klik pada Monetize tab 
1) Pergi ke Layout > Edit HTML dan tick Expand Widget Templates.
2) Cari kod <data:post.body>
3) Kemudian masukkan kod di bawah sebelum <data:post.body> tadi.<div style='float:left;'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:if>
</div>
p/s: kalau korang nak adsense itu berada sebelah kanan pula tukarkan left kepada right.
Save template korang dan tengok hasilnya.
Membuat Zoom Efek Pada Gambar
Salam semua...
Sekali lagi godek untuk kali ini berkaitan dengan gambar juga. Aku akan godek gambar supaya boleh dizoom. Kalau korang nak tengok contohnya, klik sini. (klik gambar untuk zoom)
Jom godek..
1) Pergi Layout > Edit HTML dan cari </head>
2) Kemudian masukkan kod di bawah sebelum </head>
<script src='http://www.sigmirror.com/files/21237_kxmzc/ta.js' type='text/javascript'/>
<script src='http://www.sigmirror.com/files/21238_pa3w8/ti.js' type='text/javascript'/>
3) Cari <body> dan gantikan dengan <body onload='setupZoom()'>
Save template korang.
Apabila korang hendak masukkan gambar mesti dapatkan link URL gambar tersebut dahulu.(gambar persendirian upload dulu ke imageshack.us dulu)
Gunakan kod di bawah untuk dapatkan hasilnya. (gantikan link korang dengan kod merah di bawah)
<a href="Gambar Link"><img src="Gambar Link" width="200" border="0" height="200" />
Baca Lagi......
Image Hover Effect
Salam & Selamat Sejahtera semua..
Kali ini aku nak kongsikan 1 godek yang agak sempoi dan bergaya iaitu 'Image Hover Effect'. Jika korang masih blur, cuba korang arahkan mouse korang kat gambar awek aku di bawah.
Ok.. jom godek.
1) Pergi ke Layout > Edit HTML
2) Cari kod </head>
3) Kemudian copy kod di bawah dan paste di atas </head> tadi.<style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
Save template korang.
Jika korang nak menjadikan image di entri korang seperti di atas, korang kena tambahkan sedikit kod di dalam entri korang itu.(Edit HTML mode)
Apabila korang sudah upload gambar, korang akan nampak kod seperti di bawah:-<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwZQkXPscrK0UQ2nY-JD3opLnLWf6Bpass0Xf81moJBglYAKPCi5COhtjK4jmcNL6kP3BW9YMkRy_vKsekllyGveBt-8iLP3FQOh9L6Pdb36O0xmzL_Dm6j76fQNRSpg1eQ2ob5Z-bd9Y/s1600-h/fazura5jpg.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 313px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwZQkXPscrK0UQ2nY-JD3opLnLWf6Bpass0Xf81moJBglYAKPCi5COhtjK4jmcNL6kP3BW9YMkRy_vKsekllyGveBt-8iLP3FQOh9L6Pdb36O0xmzL_Dm6j76fQNRSpg1eQ2ob5Z-bd9Y/s400/fazura5jpg.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5344603650715954722" /></a>
Apa yang korang perlu buat ialah masukkan kod ini class=linkopacity sebelum kod ini href="http://4.bp.blogspot.com/_My4fAPyVeIc/SivYtBIuLiI/AAAAAAAAAe4/7taiqwWENSE......
Dan akan jadi seperti di bawah:-<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" class=linkopacity href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwZQkXPscrK0UQ2nY-JD3opLnLWf6Bpass0Xf81moJBglYAKPCi5COhtjK4jmcNL6kP3BW9YMkRy_vKsekllyGveBt-8iLP3FQOh9L6Pdb36O0xmzL_Dm6j76fQNRSpg1eQ2ob5Z-bd9Y/s1600-h/fazura5jpg.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 313px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwZQkXPscrK0UQ2nY-JD3opLnLWf6Bpass0Xf81moJBglYAKPCi5COhtjK4jmcNL6kP3BW9YMkRy_vKsekllyGveBt-8iLP3FQOh9L6Pdb36O0xmzL_Dm6j76fQNRSpg1eQ2ob5Z-bd9Y/s400/fazura5jpg.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5344603650715954722" /></a>
Selamat mengodek...
p/s: aku minat giler Fazura ni...heheheheh
Subscribe to:
Posts (Atom)
