tag:blogger.com,1999:blog-31972977456335518922024-03-14T05:20:08.290-07:00Tutorial Bina BlogJombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.comBlogger125125tag:blogger.com,1999:blog-3197297745633551892.post-9467250703305361192012-05-01T01:27:00.000-07:002012-05-01T04:56:57.864-07:00Freebies MuslimahSlm semua..update terbaru dari jombinabelog, freebies muslimah yang tak berapa comel untuk korang, ambik la, free tak kena apa-apa charge pun :) nak buat sebagai header ke, banner ke ikut suka korangla...n kalo dah ambik tu sudi-sudikan la backlink n kreditkan ke blog ni ye.. ^-^ nantikan lagi freebies yang akan datang, rajin-rajin la singgah sini ye..ok chow dulu
<br />
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWESfzfvAv9u4DPFhunFDduDBRG0J0U7fut1TP10hjy1Ylrts1b9I_G-whQUi0iv_KtbD22wFHJTIOA1o_G17udNeGc76AmoYM-qzsg0ahaMTWoMN7TITao4_TvuFL2XOfq7h17ZYT00/s1600/muslimah-kelabu.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUdDkVurCarL1Gn35FvCzTbGoOWdOQL880pmLgLI0ktCils_eieLykjLmKo_LxXuZ4GKf-mgmOC2SJ-3kkKfsUB4L-40Uz5xovGD7DIfdEeLvqeu0DG80kCnNUe1n9j_s4dBpSvm0ZLDs/s200/muslimah-kelabu.png" width="117" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-lirYTqvJT24aGFYZluzNMWX41Mi8jbUY3E7qV12xEzaeWO55aQ2iDSwWKz8X8oVrocgU3OqtRsiSuT8Ur_xeTFw_Nq_yZmyyqJCvr-9LFFRRUD8mXQXXgW4H3mJ13pC9mzCAEvUwrk/s1600/muslimah-biru.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-dSbTxl-0H4VxtOgjSY248AQXjMY91MYLzDIxR9Y3G9AYcjaoXVboijMuINhV-25tIY6uefA3Vdj-68UuHZhm6vWuNK7LaZabetU7O7FmoA_FubA2Y7c3UFv0p3lPYG1TRhGzamHfEXM/s200/muslimah-biru.png" width="118" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnw1SMfioLcBRM6q8WPiYfyfxWVwTW4FVSaUzGo95QiA66rLZaZHfq-Wt1pZwNzN-iGdbovT0j-pd3TBwr4XEoIApYl5dlu_mghhiZhyphenhyphenPWB5HU_QY72rtq4k-TGKI3Wa8cQk7RfSs_AoI/s1600/muslimah-hijau.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPiS-UXqBhKeBBo6YhUmPWuynOFuvr0Z8CsTCI5xeokNEItCrk-Mb3PFFuaDZxSfTrfEpA2fKHa6aSUxZucO7Ocac8yy2fOZOl8RNYFTPEOk3Ege8RB3VIQ-3pLI5e2-4wtglW4EMiDkQ/s200/muslimah-hijau.png" width="116" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8SAAkT_ArSxL3ib4VcSDjziu9-0mjnSRCUZH5BRde4yI5fGravXo9oepeEcUQa50Sdbld_UUizWis9C1PLyUCVevbjs_82q6LgOZwGubNzbsGU16xcGGHszNCMR2lnKceMUBxgtrfoeY/s1600/muslimah-kuning.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCY7d9a-jh8ooT3uzrLFUA4XY31FXYDnFJ9TaoQr-ntxvSfYErG-eBsXJrBheiXeKJbzunVz71_FqCHrFB6mZ9LEwe12yz1zH2vum9zHsho9zQz9SweZNK1wgkUns5dWgJ2eBsjv00asA/s200/muslimah-kuning.png" width="118" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI9tSQStLs8UBY6PPhdoSGY5CzTst3LX0gkmzJHz0u0RfVc-ZLdwRFhAhg_vznzfSn4qdcflcDp-QEZ3YOg6VgdoKX077AORHtZjsQbyAGJK4svARXrXyngi0UkX1FMF6ic2gUPinlYus/s1600/muslimah-kuning2.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUJGtJl5iU3ckqab4cX1MfmzzTO58-oMlTUyt3GTC5tbp8tWurNoGqNOpax-9_DbxJPbj7pVhrWp_7wh7aRsRXtEgEr_axGfWlHRvYNyB_wY-FCs4kd3Mo_foUiT4K3eVWBVZy5VRLGZE/s200/muslimah-kuning2.png" width="118" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXpGHVjIvnTYrICGXFrZ-A_jU7F3mWPMR8ggpSEidtVGuIqpVThqM1ijvBkLodwlMTO8Jsr540H-jY-5jOzg0vII4Jw9jaaUFJFlILY9_ovT42rP-pRmLRLXV2EeNrljANXwPkE4EmAEM/s1600/muslimah-biru2.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNW6MetYJRhBDEejB0MQG0gleFzAVprAKkJeKCQ9COswNXv_tWFaoyQCQpp5ufefLH5b8FrPDY11UApl7G4oQghjSfiQlpiiTqY2MBcM_t8LNzHNyKVhTbE7jRGTajESUUI0kaqMqXxXM/s200/muslimah-biru2.png" width="117" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisECKZ7jFzcL77CDx96Ni-Yd2ePQIl0Xkyaw1V1VJX0zDoOvq-iELYYv9Rj2PrSHjB3gAArSDZVBwa7Oszo_aAKBGm8ENPR0wBqh_F_9fJw7sKK7ma3vFNJcTc6dLYsBaVhsEwdSXeb9A/s1600/muslimah+2.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWkqe_G0l6dSeROZT4DT8vb3aG6mxytfmbQ0cklTAUiNuo1J1fBUBrK7eIjI750xi7PKAWBMEI7bpmXZENFo9Y3fk82qIrSs4GhKQLrH1cx4KVh0NEsDAmEJWdBEpqN9EaaN8EmlYBhXg/s200/muslimah-pink.png" width="116" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeu_OWWRHJwxv340PNGwfyOkoDehe7zdB8CtEFCsMk_sXgF868ObYOH5NDGqzOb0iPbwl-y3DKln7-I22ukXoAohQWzdGdaY2559NTD72-onUNEA2ZS3EpxDhHUf-oyPnh9lahN3BXYxk/s1600/muslimah-purple2.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilXYF5jGDO3V5HgM7Z4gzr1-hHimxr4WtZk7gSv9YFaGLcsbXvwK0IXKx1n4yUIGCV5zLNOAzwV9wq3ctIsGTDZBr9gF-QCHH99SYxL3B29YKiWo_IH5kUdGKzBlRN0IEFgfR79hhqIgA/s200/muslimah-purple2.png" width="117" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6o7SkicCEfRPDMrJ81Wx-CgB4IJRO4kVYBT-sX618XXBLizY2abnF_xzjWd1x3TupK5zGBa3CDYe9OjxRfsQrJhUTJ_hDPqN95amMSk-WK5LhSMgpXblSUh9ac6VwCKD4poVDBrCCVs/s1600/muslimah-merah.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdznofmhMYyc8zc6HnRX2y1-4IDihFXjOiYo-uuulYuPinwPmirxQ5Iniyg3owfGvXhjK14VH0L4sMH2BChyphenhyphenKTMPiJTIy8Rc2spew41dqs7PeV3ymMlCIIj4t4ppmgPuV1Ik1ZrKJMZQk/s200/muslimah-merah.png" width="118" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYFb0TNyAsQeovo11-O5NKClJh_eYLfe6lY-ZulR8AvN0qnXMEGqGlOPvAdylruxwMrd93rFgDs4JMhYdxJAivPE11qqyAnMtxIIshGrYCbLvzJZhth0Za7hg4PICn3n9fYbjluQyNRng/s1600/muslimah-purple.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTfInHtN-0DBzZbUmJVZK8oKASPcJaSp_nvA4FMC-RldJGfsA59vOMqI1-CCmtFLOnzEm4YPKNLrfigjQKXSSGgpJ5uaLmAfApeYp4HScyT5PtuuYX3YvAa29ZnbOSUhRwWDfS0pHOzVI/s200/muslimah-purple.png" width="118" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-2oJufw77R2SLFzQoRM491lJkGdapJw2Uq4m1t0v7rM5IZJ-JuoQeW-zpthU9Tg_kBaVcN3OUK6mK5cFnJJUXFfRSCFK7y3SErXO27z78NaKZwtTpdMXV9fneXtqzYFyTO3mMIISVPs/s1600/muslimah-hijau2.png"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknnmq4sIR2dUcavJRVfI3wsnUbuGYJRr9dnv9oOUZBqmaUFMeaqt-cFivd6Lk_OJjMSaZn_YcK_2RQADhh4DEDT7KfQANhv5IqNKnBfAiHGc30iriV1IsowJRj2zFPutB83b90JgLZ1w/s200/muslimah-hijau2.png" width="118" />
</a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-2oJufw77R2SLFzQoRM491lJkGdapJw2Uq4m1t0v7rM5IZJ-JuoQeW-zpthU9Tg_kBaVcN3OUK6mK5cFnJJUXFfRSCFK7y3SErXO27z78NaKZwtTpdMXV9fneXtqzYFyTO3mMIISVPs/s1600/muslimah-hijau2.png">
</a>Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com40tag:blogger.com,1999:blog-3197297745633551892.post-50476388074891588312012-03-06T18:55:00.000-08:002012-03-06T18:55:57.073-08:00Efek Bintang Angkasa Pada Blog<div style="text-align: center;">Demo:</div><div style="text-align: center;"><embed height="200" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://7799548445132453613-a-1802744773732722657-s-sites.googlegroups.com/site/efeksenget/efek%20bintang%20angkasa.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed></div><br />
Selain efek <a href="http://jombinabelog.blogspot.com/2012/03/efek-link-bergoyang-nudging.html" target="_blank">nudging</a>, korang boleh cuba efek ni untuk tema blog ala-ala star wars ;) Caranya:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript<br />
<br />
3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:<br />
<blockquote class="tr_bq"><script type="text/javascript"><br />
// <![CDATA[<br />
var speed=33; // lower number for faster<br />
var warp=3; // from 1 to 10<br />
var stars=100; // number of stars<br />
var colour="#<b style="color: lime;">66FF66</b>"; // colour of stars<br />
var position=0; // set to '-1' for stars to appear behind text on page<br />
<br />
/****************************<br />
* Star Warp Effect *<br />
* (c) 2005 mf2fm web-design *<br />
* http://www.mf2fm.com/rv *<br />
* Tutorial by Polskahackrew *<br />
****************************/<br />
var i;<br />
var strs=new Array();<br />
var strx=new Array();<br />
var stry=new Array();<br />
var stdx=new Array();<br />
var stdy=new Array();<br />
var swide=800;<br />
var shigh=600;<br />
warp/=100;<br />
window.onload=function() { if (document.getElementById) {<br />
var b, s, temp;<br />
set_width();<br />
b=document.createElement("div");<br />
s=b.style;<br />
s.position="absolute";<br />
s.zIndex=position;<br />
b.setAttribute("id", "bod");<br />
document.body.appendChild(b);<br />
set_scroll();<br />
for (i=0; i<stars; i++) {<br />
strs[i]=document.createElement("div");<br />
strs[i].style.backgroundColor=colour;<br />
strs[i].style.overflow="hidden";<br />
strs[i].style.position="absolute";<br />
stdy[i]=Math.random()*4-2;<br />
stdx[i]=Math.random()*6-3;<br />
temp=Math.random()*100;<br />
strx[i]=swide/2+temp*stdx[i];<br />
stry[i]=shigh/2+temp*stdy[i];<br />
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {<br />
strs[i].style.width="2px";<br />
strs[i].style.height="2px";<br />
}<br />
else {<br />
strs[i].style.width="1px";<br />
strs[i].style.height="1px";<br />
}<br />
b.appendChild(strs[i]);<br />
}<br />
setInterval("warp_drive()", speed);<br />
}}<br />
<br />
function warp_drive() {<br />
for (i=0; i<stars; i++) {<br />
stry[i]+=stdy[i];<br />
strx[i]+=stdx[i];<br />
stdx[i]*=1+warp;<br />
stdy[i]*=1+warp;<br />
if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) {<br />
strs[i].style.left=Math.floor(strx[i])+"px";<br />
strs[i].style.top=Math.floor(stry[i])+"px"<br />
}<br />
else {<br />
strx[i]=swide/2;<br />
stry[i]=shigh/2;<br />
stry[i]+=stdy[i]=Math.random()*4-2;<br />
strx[i]+=stdx[i]=Math.random()*6-3;<br />
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {<br />
strs[i].style.width="2px";<br />
strs[i].style.height="2px";<br />
}<br />
else {<br />
strs[i].style.width="1px";<br />
strs[i].style.height="1px";<br />
}<br />
}<br />
}<br />
}<br />
<br />
window.onresize=set_width;<br />
function set_width() {<br />
if (typeof(self.innerWidth)=="number") {<br />
swide=self.innerWidth-13;<br />
shigh=self.innerHeight-13;<br />
}<br />
else if (document.documentElement && document.documentElement.clientWidth) {<br />
swide=document.documentElement.clientWidth;<br />
shigh=document.documentElement.clientHeight;<br />
}<br />
else if (document.body.clientWidth) {<br />
swide=document.body.clientWidth;<br />
shigh=document.body.clientHeight;<br />
}<br />
else {<br />
swide=800;<br />
shigh=600;<br />
}<br />
swide-=2;<br />
shigh-=2;<br />
}<br />
<br />
window.onscroll=set_scroll;<br />
function set_scroll() {<br />
var sleft, sdown;<br />
if (typeof(self.pageYOffset)=="number") {<br />
sdown=self.pageYOffset;<br />
sleft=self.pageXOffset;<br />
}<br />
else if (document.body.scrollTop || document.body.scrollLeft) {<br />
sdown=document.body.scrollTop;<br />
sleft=document.body.scrollLeft;<br />
}<br />
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br />
sleft=document.documentElement.scrollLeft;<br />
sdown=document.documentElement.scrollTop;<br />
}<br />
else {<br />
sdown=0;<br />
sleft=0;<br />
}<br />
var s=document.getElementById("bod").style;<br />
s.top=sdown+"px";<br />
s.left=sleft+"px";<br />
}<br />
// ]]><br />
</script></blockquote>Nota:<br />
<b style="color: lime;">66FF66</b> - warna bintang. Tukar kepada kod warna yang korang suka. Rujuk kod warna di bawah.<br />
<i>( untuk paparan lebih besar, klik <a href="http://immigration-usa.com/html_colors.html" target="_blank">di sini</a>)</i><br />
<iframe allowtransparency="true" frameborder="0" height="450" hspace="0" marginheight="0" marginwidth="0" name="menampilkan blog/web dalam postingan" readonly="true" scrolling="yes" src="http://www.immigration-usa.com/html_colors.html" vspace="0" width="450"></iframe><br />
<br />
4) Lastly, klik save dan lihat hasilnya.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com15tag:blogger.com,1999:blog-3197297745633551892.post-38889292703671881902012-03-06T18:11:00.001-08:002012-03-06T18:12:04.009-08:00Efek Link Bergoyang / Nudging<div style="text-align: center;">Demo:</div><div style="text-align: center;"><embed height="200" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://7799548445132453613-a-1802744773732722657-s-sites.googlegroups.com/site/efeksenget/link%20bergoyang.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed></div><br />
Cuba korang lalukan cursor pada mana-mana link dalam blog ni, apa jadik? ada goyang tak? :) efek menarik ni korang boleh cuba apply dekat blog masing-masing.. kalau berminat la, kalo tak berminat jangan paksa diri ok,he2..caranya:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript<br />
<br />
3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi: <br />
<blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, <b><span style="color: blue;">400</span></b>); }, function() { $(this).animate({ marginLeft: 0 }, <b><span style="color: blue;">400</span></b>); }); });</script> </blockquote><b><span style="color: blue;">400</span></b> - speed / laju efek nudging. Korang boleh adjust nilai ni untuk kelajuan efek, lagi kecik nilai, lagi laju efek goyang.<br />
<br />
4) Lastly macam biasa, klik save dan lihat hasilnya.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com13tag:blogger.com,1999:blog-3197297745633551892.post-39541800953302759382012-02-19T02:34:00.000-08:002012-02-19T02:34:19.040-08:00Letak Frame Dan Background Pada Shoutbox<div style="text-align: center;">Preview:</div><div style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinFW4cQypmZ4PqeYwXix54rJPghwS05h7oPVY7mcETp7ydBKGMIsroURri3QphpQ8Su-pk3Dmh32eti4N1fzwaZy_zkG6RuK-Ds_19QP1WP3hSfI2QoUTS_Vd3eXumfXOEUIoWmjwNHIY/s1600/prev.png" /></div>Ramai juga yang bertanyakan saya macam mana cara nak combine frame dan background pada shoutbox..tutorial kali ni akan menunjukkan cara-caranya. Jom start:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript<br />
<br />
3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi: <br />
<br />
<blockquote class="tr_bq"><center><div id="edited" style="width:200px; height:360px; background:url(<b><span style="color: blue;">http://img856.imageshack.us/img856/9573/framefibox5.png</span></b>) no-repeat left top; padding-top:90px; padding-left:0px; position:relative" align="center"> <br />
<br />
<center><div id="custombg" style="width:180px; height:255px; background:url(<b><span style="color: red;">http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png</span></b>) repeat; padding-top:0px; padding-left:0px; position:relative" align="center"><br />
<br />
<iframe frameborder="0" title="shoutboxsaya" height="255" src="<b><span style="color: orange;">http://shout.busuk.org/?shoutboxsaya</span></b>" id="r" style="filter:alpha(opacity=60);opacity:0.60;-moz-opacity:0.60; display:block; " scrolling="auto" width="180"></iframe><br />
<br />
</iframe></div></center></div></center></div></blockquote><br />
Nota: <br />
<br />
<b><span style="color: blue;">url warna biru</span></b> - masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di <a href="http://jombinabelog.blogspot.com/2012/01/letak-frame-pada-fibox-shoutbox.html" target="_blank">sini</a>.<br />
<br />
<b style="color: red;">url warna merah</b> - masukkan url background yang korang nak. search kat <a href="http://glitter-graphics.com/" target="_blank"> sini</a> atau pilih jer background yang dah disediakan kat <a href="http://jombinabelog.blogspot.com/2012/01/letak-background-pada-shoutbox.html" target="_blank">sini</a>.<br />
<br />
<b><span style="color: orange;">url warna orange</span></b> - url shoutbox korang. ( pada kod shoutbox korang, ambik dekat src='<b><span style="color: orange;">http://.....</span></b>')<br />
<br />
<br />
4) Lastly, klik save dan lihat hasilnya.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com23tag:blogger.com,1999:blog-3197297745633551892.post-50593796387992166152012-01-25T11:04:00.000-08:002012-01-25T11:31:05.340-08:00Letak Background Pada Shoutbox<div style="text-align: center;">Preview:</div><div style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid0MB_An4TdF9p_oOqkyXTlWvK3e9bwHuoU6dc6WQNqU4kMLJKuL7kEz82RPdk7OGWF2xzdJlmZqQslti330P3NW-BLRfecHfhUQrnhI9Iuh0uEDAUgMBqltuN6mmgnQ_uHp0QZ-RJMXw/s1600/prev.png" /></div>Selain <a href="http://jombinabelog.blogspot.com/2012/01/letak-frame-pada-fibox-shoutbox.html" target="_blank">frame</a>, korang juga boleh letak background pada shoutbox. Baru nampak meriah sikit kan? ^_^ Jom follow tutorial ini step by step:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript<br />
<br />
3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi: <br />
<blockquote class="tr_bq"><center><div id="custombg" style="width:<b><span style="color: purple;">200</span></b>px; height:<b><span style="color: purple;">300</span></b>px; background:url(<b><span style="color: blue;">http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png</span></b>) repeat; padding-top:0px; padding-left:0px; position:relative" align="center"><br />
<br />
<iframe frameborder="0" title="shoutboxsaya" height="<b><span style="color: purple;">300</span></b>" src="<b><span style="color: red;">http://shout.busuk.org/?shoutboxsaya</span></b>" id="r" style="filter:alpha(opacity=<b><span style="color: orange;">60</span></b>);opacity:0.<b><span style="color: orange;">60</span></b>;-moz-opacity:0.<b><span style="color: orange;">60</span></b>; display:block; " scrolling="auto" width="<b><span style="color: purple;">200</span></b>"><br />
<br />
</iframe></center></div></blockquote><span style="background-color: #f4cccc; color: blue;"><span style="color: black;">Nota:</span></span><b><span style="color: purple;"> </span></b><br />
<b><span style="color: purple;">200</span></b> & <b><span style="color: purple;">300</span></b> - saiz width dan height shoutbox korang.<br />
<br />
<b><span style="color: red;">url warna merah</span></b> - url shoutbox korang. ( pada kod shoutbox korang, ambik dekat <span style="color: black;">src='</span><b><span style="color: red;">ht<span style="color: red;">t</span>p://.....</span></b><span style="color: red;"><span style="color: black;">'</span></span>)<br />
<br />
<b><span style="color: orange;">60</span></b> - nilai transperency shoutbox (ikut kesesuaian background yang korang pilih. jangan sampai tak nampak langsung tulisan shoutbox tu nanti ye ^_^)<br />
<br />
<b><span style="color: blue;">url warna biru</span></b> - masukkan url background yang korang nak. search kat <a href="http://glitter-graphics.com/" target="_blank">sini</a> atau pilih jer background yang dah disediakan kat bawah.<br />
<br />
<div style="text-align: center;"><img border="0" src="http://dl7.glitter-graphics.net/pub/676/676657yhxq5o5bjd.gif" /></div><div style="text-align: center;"><blockquote class="tr_bq">http://dl7.glitter-graphics.net/pub/676/676657yhxq5o5bjd.gif</blockquote></div><br />
<br />
<div style="text-align: center;"><img border="0" src="http://dl4.glitter-graphics.net/pub/2080/2080324f7c521qp7z.gif" /></div><div style="text-align: center;"><blockquote class="tr_bq">http://dl4.glitter-graphics.net/pub/2080/2080324f7c521qp7z.gif</blockquote></div><br />
<br />
<br />
<div style="text-align: center;"><img border="0" src="http://dl4.glitter-graphics.net/pub/577/577814mxl3lzplgr.gif" /></div><div style="text-align: center;"><blockquote class="tr_bq">http://dl4.glitter-graphics.net/pub/577/577814mxl3lzplgr.gif</blockquote></div><br />
<br />
<br />
<div style="text-align: center;"><img border="0" src="http://dl9.glitter-graphics.net/pub/1297/1297689x033a3xbsj.jpg" style="height: 100px; width: 100px;" tr_bq"="" /><br />
<blockquote class="tr_bq">http://dl9.glitter-graphics.net/pub/1297/1297689x033a3xbsj.jpg</blockquote><br />
<br />
<div style="text-align: center;"><img border="0" src="http://dl8.glitter-graphics.net/pub/2168/2168288zbnox1h1uo.gif" /></div><blockquote class="tr_bq">http://dl8.glitter-graphics.net/pub/2168/2168288zbnox1h1uo.gif</blockquote><br />
<br />
<br />
<div style="text-align: center;"><img border="0" src="http://dl10.glitter-graphics.net/pub/1877/1877570beu28immp9.jpg" /></div><blockquote class="tr_bq">http://dl10.glitter-graphics.net/pub/1877/1877570beu28immp9.jpg</blockquote><br />
<br />
<div style="text-align: center;"><img border="0" src="http://dl4.glitter-graphics.net/pub/3039/3039724iqnri5mycx.png" style="height: 100px; width: 100px;" tr_bq"="" /><br />
<blockquote class="tr_bq">http://dl4.glitter-graphics.net/pub/3039/3039724iqnri5mycx.png</blockquote><br />
<br />
<div style="text-align: center;"><img border="0" left;"="" src="http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png" style="height: 100px; width: 100px;" text-align:="" /><br />
<blockquote class="tr_bq">http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png</blockquote></div><br />
<div style="text-align: left;">4) Lepas dah masukkan nilai yang sepatutnya pada kod tu, klik save dan lihat hasilnya.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Selamat mencuba! :)</div><br />
</div></div>Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com50tag:blogger.com,1999:blog-3197297745633551892.post-35907871266972681232012-01-21T12:18:00.000-08:002013-09-15T23:01:32.239-07:00Letak Frame Pada Shoutbox<div style="text-align: center;">
Preview:</div>
<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSBr3ne4tSPb93g4KKYYJS7BNBB8L6MpxOUU1tQ-2WXKMXUjXfmsXVSC5lVEw6CY5ZJ0QMwfkDrQGrqsVy5XtmTYz8tH47OnuJ5wB9Xc-_QdhUeGWi91aAsdpjw-M1U8K5C1Oq29DsB8o/s1600/prev.png" /></div>
Tuto kali ni akan menunjukkan cara macam mana nak cantikkan shoutbox korang. Untuk nampak lebih menarik dan comel, pada kotak chat korang boleh tambah frame, macam preview kat atas. Jom follow step by step. Caranya:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript<br />
<br />
3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi. <br />
<blockquote class="tr_bq">
<center><div id="edited" style="width:200px; height:370px; background:url(<b><span style="color: red;">URL IMAGE FRAME</span></b>) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center"><b><span style="color: blue;">KOD SHOUTBOX</span></b></div></center></blockquote>
<br />
Nota:<br />
<b><span style="color: red;">URL IMAGE FRAME </span></b>- masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di bawah.<br />
<b><span style="color: blue;">KOD SHOUTBOX </span></b>- masukkan kod shoutbox korang. <br />
<br />
<br />
Contoh:<br />
<blockquote class="tr_bq">
<center><div id="edited" style="width:200px; height:370px; background:url(<b><span style="color: red;">http://img535.imageshack.us/img535/2325/frame6p.png</span></b>) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center"><b><span style="color: blue;">SHOUT BUSUK : Start !--><iframe src="http://shout.busuk.org/?xxxx" width="180" height="255" frameborder="0" scrolling="auto"><a href="http://shout.busuk.org/?xxxx=viewfull">View shoutbox</a></iframe><br />
<!-- SHOUT BUSUK : End !--></span></b></div></center></blockquote>
<br />
Freebies time.. frame untuk shoutbox. Just copy url yang disediakan:<br />
<i>P/s : kalau korang nak guna image frame ni, ukuran shoutbox korang mestilah 180x255 ( width: 180px, height:255)</i><br />
<br />
<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwajACDo09vD-hZMUnHjGEweyBc9rtUNPTJobDuYvxY5Oi5CRV6Q4y62b1v4774Ddv66O-9sNBNpH-F84HNaAYVwhuv4uY8USmrau7cut_tHcMncpIQEwHp29BCdqNyrlcTEOV-Qgqhz4/s1600/frame+fibox1.png" /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwajACDo09vD-hZMUnHjGEweyBc9rtUNPTJobDuYvxY5Oi5CRV6Q4y62b1v4774Ddv66O-9sNBNpH-F84HNaAYVwhuv4uY8USmrau7cut_tHcMncpIQEwHp29BCdqNyrlcTEOV-Qgqhz4/s1600/frame+fibox1.png</div>
</blockquote>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqCWlxN-g70kQbkmF2jJX4fGXp5uhNKoKyk7cCK8wd2Zv81iUyCfiVguVUt2cHJU0SkIyV2fhufJsSC0mC7LR_wQ-7MTsNvuVW-X0Cz57vpHa4n77pJ_ahrU8CRMlrhYdghxdkS90w9Y/s1600/frame+fibox2.png" /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqCWlxN-g70kQbkmF2jJX4fGXp5uhNKoKyk7cCK8wd2Zv81iUyCfiVguVUt2cHJU0SkIyV2fhufJsSC0mC7LR_wQ-7MTsNvuVW-X0Cz57vpHa4n77pJ_ahrU8CRMlrhYdghxdkS90w9Y/s1600/frame+fibox2.png</div>
</blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAb5om0RVPUNzRomfJWILE9mpgYXy2ww10R5kBpdeJk7_bnWgflqVuvpVgdjrCwQQelROQXzXY-ABpddAQ89NjIp2bDO6jmvuXbACjLhFLgMhUZ7VAcAfzi1eK2Rj919og1DOXRZTC9Fc/s1600/frame+fibox3.png" /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAb5om0RVPUNzRomfJWILE9mpgYXy2ww10R5kBpdeJk7_bnWgflqVuvpVgdjrCwQQelROQXzXY-ABpddAQ89NjIp2bDO6jmvuXbACjLhFLgMhUZ7VAcAfzi1eK2Rj919og1DOXRZTC9Fc/s1600/frame+fibox3.png</div>
</blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAVkJuBJPMMVY9Cmm4QJoov3b_jt3MrRQo0Vomaznh-97ax8HohsAP58nTvL1Elcdgg2mADJjvaPu9bE9_ZBtaxrzN27hG4B2pJ10NRsp4eaDt3GzSs2zoguWXYzFT07HULzzvTvZuZ7g/s1600/frame+fibox4.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAVkJuBJPMMVY9Cmm4QJoov3b_jt3MrRQo0Vomaznh-97ax8HohsAP58nTvL1Elcdgg2mADJjvaPu9bE9_ZBtaxrzN27hG4B2pJ10NRsp4eaDt3GzSs2zoguWXYzFT07HULzzvTvZuZ7g/s1600/frame+fibox4.png" /></a></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAVkJuBJPMMVY9Cmm4QJoov3b_jt3MrRQo0Vomaznh-97ax8HohsAP58nTvL1Elcdgg2mADJjvaPu9bE9_ZBtaxrzN27hG4B2pJ10NRsp4eaDt3GzSs2zoguWXYzFT07HULzzvTvZuZ7g/s1600/frame+fibox4.png</div>
</blockquote>
<br />
<br />
<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6x2CwuXZyFZ5bFB4-51h6nGHEzifKBObfEVZ7kWSGR4kk6x_tMQfMy8XChKLBjqLeuhweJgPC4k75e4_DJ6gOhD7Qhyphenhyphen5dImeMfZJjmVXNbZLhTfxToVj-zmUZTLI7XxvX7BuDdTgmxjk/s1600/frame+fibox5.png" /></div>
<blockquote class="tr_bq">
<div style="text-align: center;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6x2CwuXZyFZ5bFB4-51h6nGHEzifKBObfEVZ7kWSGR4kk6x_tMQfMy8XChKLBjqLeuhweJgPC4k75e4_DJ6gOhD7Qhyphenhyphen5dImeMfZJjmVXNbZLhTfxToVj-zmUZTLI7XxvX7BuDdTgmxjk/s1600/frame+fibox5.png</div>
</blockquote>
<br />
4) Lastly, klik save dan lihat hasilnya.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com31tag:blogger.com,1999:blog-3197297745633551892.post-34074195949207971962012-01-15T12:25:00.000-08:002012-01-15T12:35:16.673-08:00Menu Horizontal Untuk Blog<div class="separator" style="clear: both; text-align: center;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5GT-Hj2zwoW9xcrNQ1uQvP7mgNuzu9vnLxShHOlLv7C6DFTPO58cdP7bOEcoFDKsanM7ZBr23ctdtvW4O8899azcAWGWx6ZQnG1RPYGSV5roJe83W-6r8sPUqjq3azsCmagXzF4-uwzA/s320/prev.jpg" width="278" /></div><br />
Disamping menampakkan kelainan pada rupa blog anda, dengan adanya menu horizontal ini, blog akan lebih mudah di explore oleh pelawat. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript<br />
<br />
3) Copy dan paste <b>kod Menu Horizontal</b> pada ruang Html / Javascript tadi. <br />
<blockquote class="tr_bq"><div style="text-align: left;"><li><a rel="nofollow" href="<b style="color: red;">#</b>"><span><b><span style="color: blue;">Link 1</span></b></span></a></li><br />
<li><a rel="nofollow" href="<b><span style="color: red;">#</span></b>"><span><b><span style="color: blue;">Link </span></b><b><span style="color: blue;"> 2</span></b></span></a></li><br />
<li><a rel="nofollow" href="<b><span style="color: red;">#</span></b>"><span><b><span style="color: blue;">Link </span></b><b><span style="color: blue;"> 3</span></b></span></a></li><br />
<li><a rel="nofollow" href="<b><span style="color: red;">#</span></b>"><span><b><span style="color: blue;">Link </span></b><b><span style="color: blue;"> 4</span></b></span></a></li><br />
<li><a rel="nofollow" href="<b><span style="color: red;">#</span></b>"><span><b><span style="color: blue;">Link </span></b><b><span style="color: blue;"> 5</span></b></span></a></li><br />
<li><a rel="nofollow" href="<b><span style="color: red;">#</span></b>"><span><b><span style="color: blue;">Link </span></b><b><span style="color: blue;">6</span></b></span></a></li><br />
<li><a rel="nofollow" href="<b><span style="color: red;">#</span></b>"><span><b><span style="color: blue;">Link </span></b><b><span style="color: blue;">7</span></b></span></a></li></div></blockquote><b style="color: red;"># </b>- url untuk setiap menu ( cth: http://jombinabelog.blogspot.com/2012/01/menu-horizontal-pada-blog.html)<br />
<b><span style="color: blue;">Link 1 - 7 </span></b>- nama menu yang korang nak letak ( cth home, about me, contact dll)<br />
<br />
<br />
* Terdapat 9 pilihan style menu horizontal untuk anda pilih. Just copy kod yang disediakan:<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqz6m3FbCi8RK1qouS7D_fBwoidNIGmkzp1Ho9DKCv5W_EI6-EvIMs6OLSlo4rpQq_UPRS3NTw8zur9A-ANO4j4MAjhWLvvjcrtkLi6iektlmCrowW2nxs6QjihUwE_0Aiq4Cu6M8JEXg/s1600/1.png" /></div><br />
<center><textarea cols="20" name="code" onclick="this.focus();this.select()" rows="3" style="background: none repeat scroll 0% 0% rgb(251, 239, 255); border-radius: 7px 7px 7px 7px; border: 1px solid rgb(202, 61, 217); color: #ca3dd9; height: 83px; line-height: 1.5em; padding: 5px; width: 181px;"><style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhGGOk3E/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWOFI_3AgE/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div></textarea><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO0YhoQ8UvXebwJ2bWJNLnKYvRTNlzDgv90TOLUuIzxBlMWTz8GYxRRTw2lFi_mm6bZTJwmpcTxyYB-Fmaw7bsuKA7W7tSk67EK_YB0otLe58tsIiNeAxbcrAvQRKSlgbpP_vgp947BvM/s1600/2.png" /></div><center><textarea cols="20" name="code" onclick="this.focus();this.select()" rows="3" style="-moz-border-radius: 7px; background: #FBEFFF; border-left: 20px solid #CA3DD9; border: 1px solid #CA3DD9; color: #ca3dd9; line-height: 1.5em; padding: 5px;"><style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5iiWmCI/AAAAAAAACv0/4lAk0jar62Q/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5jIWoBI/AAAAAAAACv4/1TJsSRUoYes/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div></textarea><br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6H1B_KYtyCB-Q0opv9emdOKgY_5TENyyY3arLefewYxuG0fUYxcmi2MQpwKveb7tLAxM7l_etQXpL3oCyaRY1EYfODHSuvLZ2i4r3bE7VVIqCQyoY6RSbhmRYT5dJ_dODqXeEFyhYuEM/s1600/3.png" /></div><textarea cols="20" name="code" onclick="this.focus();this.select()" rows="3" style="-moz-border-radius: 7px; background: #FBEFFF; border-left: 20px solid #CA3DD9; border: 1px solid #CA3DD9; color: #ca3dd9; line-height: 1.5em; padding: 5px;"><style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-pxMSoZI/AAAAAAAACuU/PFY8xbrx6AQ/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-p0wRo5I/AAAAAAAACuY/T2KFLniEzcM/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div></textarea><br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif16k6It8-PMx8NGLfbR6yh0aNIyKvuoHClT-i0rejasmkJiSOmce5YEpshtmFHCrNwS_Rp_yth8T088-IK2pA5xJIINNPRVi3ovbTcoVQooFL8qSZgUJaBZjiJSpQM2kXuChYc0SA7uE/s1600/4.png" /></div><textarea cols="20" name="code" onclick="this.focus();this.select()" rows="3" style="background: none repeat scroll 0% 0% rgb(251, 239, 255); border-radius: 7px 7px 7px 7px; border: 1px solid rgb(202, 61, 217); color: #ca3dd9; height: 91px; line-height: 1.5em; padding: 5px; width: 179px;"><style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"><ul id="navlist"><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div></textarea><br />
<br />
<br />
<br />
<br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1TW3Bj-nA0rRLctUayR0munlPX1ivzW5IbjwFtqJjrB0TWSlCKitY2D8TDQbrwQZs3tZfVNjJzVSvRcFs9vrWebF-5M8sLc7HZtK8tBk7PKPvLkmrst9ATCwSbHws8v4b1ct_aUEU5g/s1600/5.png" /><br />
<textarea cols="20" name="code" onclick="this.focus();this.select()" rows="3" style="-moz-border-radius: 7px; background: #FBEFFF; border-left: 20px solid #CA3DD9; border: 1px solid #CA3DD9; color: #ca3dd9; line-height: 1.5em; padding: 5px;"><style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBJ_dMfYI/AAAAAAAACwU/ROgYM1pOzzo/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBJ7Gdz_I/AAAAAAAACwY/o6Vlnp00pyk/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div></textarea><br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaS8eZ3baBcsirrvC8a9uZyB08F_jMgGqaI8h2bobhgOGfBFjLSzfcZd6IDqCAAE7jiwvFuFoRzMrOHxxnyVuUATjD0uSq632dSojX2WFvPZPoie1D3WKXfkAKXi8scliQZZceOH6yIEA/s1600/6.png" /></div><textarea cols="20" name="code" onclick="this.focus();this.select()" rows="3" style="-moz-border-radius: 7px; background: #FBEFFF; border-left: 20px solid #CA3DD9; border: 1px solid #CA3DD9; color: #ca3dd9; line-height: 1.5em; padding: 5px;"><style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu-gCY1ZzI/AAAAAAAACuE/IYEaj-Ap9Bk/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-gKkyHOI/AAAAAAAACuI/NpLTAFOd2uQ/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div></textarea><br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilcTlwLwRoosWA_R5EoaygN09ya_6L5KRCzUP57e7ZjfZSML1a6P2mwDbFEOHVzwrkEuVphwRFkuQGZCHjgmeC1ptM7MXXvjT03nj1PF0gNHcHYfGbKoFURJbCBy2pPmbbDTn9lFwXtFk/s1600/7.png" /></div><textarea cols="20" name="code" onclick="this.focus();this.select()" rows="3" style="-moz-border-radius: 7px; background: #FBEFFF; border-left: 20px solid #CA3DD9; border: 1px solid #CA3DD9; color: #ca3dd9; line-height: 1.5em; padding: 5px;"><style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvC_Xa-vHI/AAAAAAAACw0/qVeZI3gdWQM/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"><ul id="nav"><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div></textarea><br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nUEqZRqz1xxV9VFNW9RDfPv_PEk6Xnvl16Oke49jlMYeSYu01jCRc0BpGUgQNY25PnHIq-Q93VXhS0rpXt6ULF5tcxiOve8snlDhJCulwYGgEzFfQfmmV1x3_CZfqcaw8DF2otmFjm0/s1600/8.png" /></div><textarea cols="20" name="code" onclick="this.focus();this.select()" rows="3" style="-moz-border-radius: 7px; background: #FBEFFF; border-left: 20px solid #CA3DD9; border: 1px solid #CA3DD9; color: #ca3dd9; line-height: 1.5em; padding: 5px;">&lt;style&gt; #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } &lt;/style&gt; &lt;div id=&quot;tabsE&quot;&gt;&lt;ul&gt;&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 7&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;</textarea><br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlWVBZ6DheATbs4PCKIxF4PUxmYpep4CIS0gCctLBZ-TxBUXXMpRm-UkG-KGsGIPH4tPx4jzTeoSx6gP0VhuQ6lTIn3k0d5N9umVYoghNJoCSQr1g4bWG3snIMKHgPvP2yTX6TaWOSF4A/s1600/9.png" /></div><textarea cols="20" name="code" onclick="this.focus();this.select()" rows="3" style="-moz-border-radius: 7px; background: #FBEFFF; border-left: 20px solid #CA3DD9; border: 1px solid #CA3DD9; color: #ca3dd9; line-height: 1.5em; padding: 5px;"><style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvAqYEy5NI/AAAAAAAACvk/Upvw2dOoy3c/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvAqaCPITI/AAAAAAAACvo/6J1w2JWIlz0/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div></textarea><br />
<br />
<div style="text-align: left;">4) Dah selesai klik save dan lihat hasilnya.<br />
<br />
Selamat mencuba! :)</div></center></center>Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com15tag:blogger.com,1999:blog-3197297745633551892.post-8258248274443589802012-01-09T09:40:00.000-08:002012-01-10T11:34:18.294-08:00Efek Bubbles Pada Blog<div style="text-align: center;">Preview:</div><div style="text-align: center;"><embed height="200" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://7799548445132453613-a-1802744773732722657-s-sites.googlegroups.com/site/efeksenget/efbubles.swf" type="application/x-shockwave-flash" width="300" wmode="transparent"></embed></div>Untuk trick ini, bubbles akan muncul dari bawah blog seperti yang ditunjukkan dalam preview di atas. Warna bubble boleh ditukar ikut citarasa. Nak cuba? ikuti tutorial di bawah:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript<br />
<br />
3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi<br />
<blockquote class="tr_bq"><script type="text/javascript"><br />
// <![CDATA[<br />
var colours=new Array("#<b><span style="color: blue;">33FF33</span></b>", "#<b><span style="color: blue;">33FF33</span></b>", "#<b><span style="color: blue;">33FF33</span></b>", "#<b><span style="color: blue;">33FF33</span></b>", "#<b style="color: blue;">0000CC</b>"); // colours for top, right, bottom and left borders and background of bubbles<br />
var bubbles=66; // how many bubbles are moving at any given time<br />
<br />
/****************************<br />
* JavaScript Bubble Bath *<br />
* (c) 2010 mf2fm web-design *<br />
* http://www.mf2fm.com/rv *<br />
* Tutorial by polskahackrew *<br />
****************************/<br />
var swide=800;<br />
var shigh=600;<br />
var bubb=new Array();<br />
var bubbx=new Array();<br />
var bubby=new Array();<br />
var bubbs=new Array();<br />
<br />
window.onload=function() { if (document.getElementById) {<br />
var b, i;<br />
b=document.createElement("div");<br />
i=b.style;<br />
i.position="absolute";<br />
b.setAttribute("id", "bod");<br />
document.body.appendChild(b);<br />
set_scroll();<br />
set_width();<br />
<br />
var rats, div;<br />
for (var i=0; i<bubbles; i++) {<br />
rats=createDiv("3px", "3px");<br />
<br />
div=createDiv("auto", "auto");<br />
rats.appendChild(div);<br />
div=div.style;<br />
div.top="1px";<br />
div.left="0px";<br />
div.bottom="1px";<br />
div.right="0px";<br />
div.borderLeft="1px solid "+colours[3];<br />
div.borderRight="1px solid "+colours[1];<br />
<br />
div=createDiv("auto", "auto");<br />
rats.appendChild(div);<br />
div=div.style;<br />
div.top="0px";<br />
div.left="1px";<br />
div.right="1px";<br />
div.bottom="0px"<br />
div.borderTop="1px solid "+colours[0];<br />
div.borderBottom="1px solid "+colours[2];<br />
<br />
div=createDiv("auto", "auto");<br />
rats.appendChild(div);<br />
div=div.style;<br />
div.left="1px";<br />
div.right="1px";<br />
div.bottom="1px";<br />
div.top="1px";<br />
div.backgroundColor=colours[4];<br />
div.opacity=0.5;<br />
if (document.all) div.filter="alpha(opacity=50)";<br />
<br />
b.appendChild(rats);<br />
bubb[i]=rats.style;<br />
}<br />
bubble();<br />
}}<br />
<br />
function bubble() {<br />
var c;<br />
for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {<br />
bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";<br />
bubb[c].top=(bubby[c]=shigh)+"px";<br />
bubb[c].width="3px";<br />
bubb[c].height="3px"<br />
bubb[c].visibility="visible";<br />
bubbs[c]=3;<br />
break;<br />
}<br />
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);<br />
setTimeout("bubble()", 40);<br />
}<br />
<br />
function update_bubb(i) {<br />
if (bubby[i]) {<br />
bubby[i]-=bubbs[i]/2+i%2;<br />
if (bubby[i]>0) {<br />
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {<br />
bubb[i].width=bubbs[i]+"px";<br />
bubb[i].height=bubbs[i]+"px";<br />
}<br />
bubb[i].top=bubby[i]+"px";<br />
bubbx[i]+=(i%5-2)/5;<br />
bubb[i].left=bubbx[i]+"px";<br />
}<br />
else {<br />
bubb[i].visibility="hidden";<br />
bubby[i]=0;<br />
return;<br />
}<br />
}<br />
}<br />
<br />
window.onresize=set_width;<br />
function set_width() {<br />
if (document.documentElement && document.documentElement.clientWidth) {<br />
swide=document.documentElement.clientWidth;<br />
shigh=document.documentElement.clientHeight;<br />
}<br />
else if (typeof(self.innerHeight)=="number") {<br />
swide=self.innerWidth;<br />
shigh=self.innerHeight;<br />
}<br />
else if (document.body.clientWidth) {<br />
swide=document.body.clientWidth;<br />
shigh=document.body.clientHeight;<br />
}<br />
else {<br />
swide=800;<br />
shigh=600;<br />
}<br />
}<br />
<br />
window.onscroll=set_scroll;<br />
function set_scroll() {<br />
var sleft, sdown;<br />
if (typeof(self.pageYOffset)=="number") {<br />
sdown=self.pageYOffset;<br />
sleft=self.pageXOffset;<br />
}<br />
else if (document.body.scrollTop || document.body.scrollLeft) {<br />
sdown=document.body.scrollTop;<br />
sleft=document.body.scrollLeft;<br />
}<br />
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br />
sleft=document.documentElement.scrollLeft;<br />
sdown=document.documentElement.scrollTop;<br />
}<br />
else {<br />
sdown=0;<br />
sleft=0;<br />
}<br />
document.getElementById("bod").style.top=sdown+"px";<br />
document.getElementById("bod").style.left=sleft+"px";<br />
}<br />
<br />
function createDiv(height, width) {<br />
var div=document.createElement("div");<br />
div.style.position="absolute";<br />
div.style.height=height;<br />
div.style.width=width;<br />
div.style.overflow="hidden";<br />
return (div);<br />
}<br />
// ]]></script></blockquote><br />
Nota:<br />
<b><span style="color: blue;">33FF33</span></b> - warna border bubble. Tukar kepada kod warna yang anda suka. Rujuk kod warna di bawah.<br />
<b style="color: blue;">0000CC</b><b><span style="color: blue;"> </span></b>- warna bubble. Tukar kepada kod warna yang anda suka. Rujuk kod warna di bawah.<br />
<br />
<i>( untuk paparan lebih besar, klik <a href="http://immigration-usa.com/html_colors.html" target="_blank">di sini</a>)</i><br />
<iframe allowtransparency="true" frameborder="0" height="450" hspace="0" marginheight="0" marginwidth="0" name="menampilkan blog/web dalam postingan" readonly="true" scrolling="yes" src="http://www.immigration-usa.com/html_colors.html" vspace="0" width="450"></iframe><br />
<br />
<br />
4)Kemudian klik save dan lihat hasilnya.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com5tag:blogger.com,1999:blog-3197297745633551892.post-41316088522972401852012-01-09T04:35:00.000-08:002012-01-09T05:39:58.396-08:00Button Show & Hide SpoilerCuba klik pada button di bawah:<br />
<center><div id="spoiler"><div><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" style="-moz-border-radius: 10px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLIKta7m371Adf7Ev6f2IqYZj8cQ0thECdS84-xhAVoNw5i0MSbf1MrZhJnqVGRvv81EiGWJPSDZ_nib1iqhKw4iw6hQiR6L7Z3dSeTSJvgAleEx1wnmu2o6R2qgkw7wZbhwBb_6eUJIQ/s1600/Pink_background_by_Fairytale_Emily2.jpg); border-radius: 10px; border-style: 2px solid #ff9fcc; font-size: 12px; margin: 13px; padding: 0px; width: 88px;" type="button" value="klik" /><br />
<div id="show" style="background-color: transparent; background-repeat: repeat; border-width: 0px; display: none; margin: 0px; padding: 3px; width: 90%;"><center><center><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk4FRgQUHok5MahKmZLAZGM6YyKgV0nqxZ_KWDuNYB71Dfy2F6Uomq9u4fkLnSVqD418jFd6r6AhbQV3ucj7fHsXCVJPDYuT74pm8yQ4pGTyIdTXcvXM2p51RCaKNg0XqMlSNukXSkUQI/s1600/cz06.gif" imageanchor="1"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk4FRgQUHok5MahKmZLAZGM6YyKgV0nqxZ_KWDuNYB71Dfy2F6Uomq9u4fkLnSVqD418jFd6r6AhbQV3ucj7fHsXCVJPDYuT74pm8yQ4pGTyIdTXcvXM2p51RCaKNg0XqMlSNukXSkUQI/s400/cz06.gif" width="50" /></a></div>Ini adalah contoh button show & hide. Pada ruang ini anda boleh letak apa-apa je yang anda mahu, contoh seperti image, ayat, link, widget shoubox dll </center></center></div></div></div></center><br />
Menarik kan? jom ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript<br />
<br />
3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi<br />
<blockquote class="tr_bq"><center><div id="spoiler"><div><input value="<b><span style="color: purple;">Nama button</span></b>" style="width:88px ;font-size:12px;background-image: url(<b><span style="color: blue;">URL BACKGROUND UNTUK BUTTON</span></b>);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide Spoiler!&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;none&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show Spoiler!&#39;; }" /><br />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%"><br />
<center><center><b><span style="color: red;">Ayat/url/image/kod widget anda di sini</span></b></center></center></div></div></div></center> </blockquote>Nota:<br />
<b><span style="color: red;"> </span></b><b><span style="color: purple;">Nama button - </span></b><span style="color: red;"><span style="color: black;">nama pada button anda</span></span><b><span style="color: red;"><br />
</span></b><br />
<b><span style="color: red;">Merah</span></b> - ayat atau apa-apa je yang anda nak letak<br />
<b><span style="color: blue;">Biru</span></b> - Masukkan url background untuk button. Search di mana-mana image hosting atau anda boleh pilih background yang disediakan di bawah.<br />
<br />
<div style="text-align: center;"><img border="0" src="http://img401.imageshack.us/img401/822/plaid30.jpg" /></div><div style="text-align: center;"><blockquote class="tr_bq">http://img401.imageshack.us/img401/822/plaid30.jpg</blockquote></div><br />
<div style="text-align: center;"><img border="0" src="http://img46.imageshack.us/img46/957/plaid24.jpg" /></div><div style="text-align: center;"><blockquote class="tr_bq">http://img46.imageshack.us/img46/957/plaid24.jpg</blockquote></div><br />
<div style="text-align: center;"><img border="0" src="http://img31.imageshack.us/img31/8480/pinkbackground8.gif" /></div><div style="text-align: center;"><blockquote class="tr_bq">http://img31.imageshack.us/img31/8480/pinkbackground8.gif</blockquote></div><br />
<div style="text-align: center;"><img border="0" src="http://img194.imageshack.us/img194/5608/pinkbackground3.gif" /></div><div style="text-align: center;"><blockquote class="tr_bq">http://img194.imageshack.us/img194/5608/pinkbackground3.gif</blockquote></div><br />
<div style="text-align: center;"><img border="0" src="http://img846.imageshack.us/img846/4885/plaidbackground9.gif" /></div><div style="text-align: center;"><blockquote class="tr_bq">http://img846.imageshack.us/img846/4885/plaidbackground9.gif</blockquote></div><br />
4) Klik save dan lihat hasilnya.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com6tag:blogger.com,1999:blog-3197297745633551892.post-54555446560152412312012-01-08T10:44:00.000-08:002012-01-08T10:46:09.753-08:00Like Facebook Fan Page Sebelum Enter Blog<div class="separator" style="clear: both; text-align: center;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrXcvGNT3EwtjDbIoCB8pzntNO4-WeLqJiMREaUTzu93aJvHey0owLjd3svp1Cknp1_5IUMiYGcp4Lpj5MY-L-d0ubSimPjrCS0SXPzC9BeTyaevDTXqiRksx__kxuW6G7F0k9UgxJYU/s320/prev.png" width="320" /></div>Widget ini disediakan oleh kakinetwork.com. Sebaik sahaja blog anda dibuka, paparan like kotak facebook fan page anda akan muncul terlebih dahulu mengikut masa yang telah ditetapkan, sebelum pelawat dapat masuk ke blog anda. Jom cuba trick ini. Ikuti tutorial di bawah:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"<br />
<br />
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod<br />
<blockquote class="tr_bq"><b><body expr:class='&quot;loading&quot; + data:blog.mobileClass'> </b></blockquote><br />
atau<br />
<blockquote class="tr_bq"><b><body></b></blockquote><br />
4) Kemudian, copy dan paste kod di bawah <span style="color: red;">SELEPAS / DI BAWAH</span> kod yang korang cari di langkah 3 tadi<br />
<blockquote class="tr_bq"><!-- KakiNetwork.Com Likebox Pro FBFan Code Start --><br />
<script type='text/javascript'>KNFBFansPRO=&quot;<b><span style="color: blue;">Jombinabelog</span></b>&quot;</script><br />
<link href='http://kakinetwork.com/sources/fbfans-pro/kakiblogger.css' rel='stylesheet' type='text/css'/><br />
<script src='http://yourjavascript.com/0143115100/jquery.js' type='text/javascript'/><br />
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><br />
<script src='http://yourjavascript.com/5400531110/likeboxfbfan-pro.js' type='text/javascript'/><br />
<script language='javascript'><br />
$(document).ready(function() {<br />
$(&#39;body&#39;).KNFBFansPRO( {<br />
url: &quot;<b><span style="color: red;">http://www.facebook.com/pages/Jombinabelog/159428397409932</span></b>&quot;,<br />
tunggu: 15,<br />
wait: 1440,<br />
tutup: false<br />
} );<br />
});<br />
</script><br />
<div id='fbtpdiv'/><br />
<!-- KakiNetwork.Com Likebox Pro FBFan Code End --></blockquote>Nota:<br />
<b><span style="color: blue;">B</span><span style="color: blue;"></span></b><b><span style="color: blue;">iru</span></b> - nama fan page<br />
<b><span style="color: red;">M</span><span style="color: red;">er</span></b><b><span style="color: red;">ah</span></b> - URL fan page anda<br />
<br />
5) Klik preview, jika tiada error klik save template.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com3tag:blogger.com,1999:blog-3197297745633551892.post-62271495800553064152012-01-08T09:24:00.000-08:002012-01-08T09:25:27.900-08:00Cara Dapatkan Coding Untuk Follower1) Pergi ke <a href="http://www.google.com/friendconnect/">Google Friend Connect</a><br />
<br />
2) Klik setting >> masukkan nama dan url blog >> kemudian klik save your settings<br />
<br />
3) Klik Gadgets >> Pilih <b>Members </b><br />
<b><br />
</b><br />
4) Adjust width, colour dan font ikut citarasa yang anda mahu.<br />
<br />
5) Dah siap adjust semua, klik <b>Generate kod</b> dan copy kod yang tertera.<br />
<br />
<br />
- Selesai -Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com13tag:blogger.com,1999:blog-3197297745633551892.post-58323592250602619052012-01-08T08:53:00.000-08:002012-01-08T09:26:36.417-08:00Sidebar Berstyle<div style="text-align: center;">Preview:</div><div class="separator" style="clear: both; text-align: center;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip41TlRaUabzJZkT9IdkMi4KovJGgY4Y0B7B4643x9MubpXT8tO_3ZXjYs2XzAlsM95OkbNQummWUz7Gd288vmf0J07T-kTeQ47GMfwXM_f_Mj5AIQyvscLTbQhHgC48WpKn7Niy5zQ8A/s400/prev.png" width="204" /></div><br />
Bagi anda yang nak menampakkan kelainan pada sidebar blog, jom cuba trick ini. Sidebar berstyle versi shadow box. Warna kotak sidebar ini boleh ditukar mengikut citarasa anda. Ikuti tutorial di bawah.<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript<br />
<br />
3) Copy paste kod di bawah pada ruang Html / Javascript tadi<br />
<blockquote class="tr_bq"><div style="background: #<b><span style="color: red;">FFC8E3</span></b> repeat; repeat; padding: 5px; border:2px <b><span style="color: red;">dashed</span></b> #<b style="color: orange;">990066</b>; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; -moz-box-shadow: 0 0 18px #<b><span style="color: purple;">FF3399</span></b> ; -webkit-box-shadow: 0 0 18px #<b><span style="color: purple;">FF3399</span></b> ; "><center></center><br />
<br />
<br />
<div style="color: blue;"><b>Masukkan kod html widget / banner/ ayat anda / image apa saja yang anda nak letak di sini</b></div><br />
<br />
</div></blockquote><u>Nota :</u><br />
<b><span style="color: blue;">Tulisan </span><span style="color: blue;">biru </span></b>- masukkan kod html gadget yang anda nak letak pada kotak sidebar ini. Contohnya kod chatbox atau apa-apa sahaja.<span style="color: black;"> Untuk <a href="http://jombinabelog.blogspot.com/2012/01/cara-dapatkan-coding-untuk-follower.html">dapatkan kod widget Follower</a> pula, anda boleh rujuk tutorial <a href="http://jombinabelog.blogspot.com/2012/01/cara-dapatkan-coding-untuk-follower.html">ini</a>. </span><br />
<br />
<span style="color: black;"> </span><b><span style="color: red;">FFC8E3 </span></b>- warna background kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah<br />
<br />
<b><span style="color: red;">dashed</span></b> - jenis garisan kotak. Samaada <b><span style="color: red;">solid</span></b>, <b><span style="color: red;">dashed</span></b> atau <b style="color: red;">dotted</b><br />
<br />
<b><span style="color: red;"><span style="color: orange;">990066</span> </span></b>- warna garisan kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah.<br />
<br />
<b><span style="color: purple;">FF3399 </span></b>- warna bayang-bayang kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah.<br />
<i>( untuk paparan lebih besar, klik <a href="http://immigration-usa.com/html_colors.html" target="_blank">di sini</a>)</i><br />
<iframe allowtransparency="true" frameborder="0" height="450" hspace="0" marginheight="0" marginwidth="0" name="menampilkan blog/web dalam postingan" readonly="true" scrolling="yes" src="http://www.immigration-usa.com/html_colors.html" vspace="0" width="450"></iframe><br />
<br />
<br />
4) Dah selesai, klik save dan lihat hasilnya.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com15tag:blogger.com,1999:blog-3197297745633551892.post-52728353920619954172012-01-07T07:38:00.000-08:002012-01-07T07:40:43.974-08:00Buang "Word Verification" Pada Comment Di Blog AndaTahu tak apa itu "Word Verification For Comment" ? Lihat gambar di bawah :<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SGmSnGgzxDsMQdeIT8YNTE8p16ZqS6AONUHWw32viZZf7JTH6y8jomv7BvG5VAVfFGArMEVY64RiSTpvQDLnhu52OhYJvLHw_uAA0Z-kEmajHzK2Dh-41RgKAQlA4zDP6JxIy6cAKXk/s400/wordverification.png" width="210" /></div>Benda ni la biasanya yang membuatkan orang malas nak komen, macam nak kena buka peti harta karun kan? ha3. Jadi dicadangkan supaya anda disable fungsi "word verification" ini bagi memudahkan orang untuk komen. Takkan la nak komen pun nak kena teka perkataan bagai kan? ngee.. ^_^ ok ikuti tutorial di bawah untuk cara-cara menghapuskannya : <br />
<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> Settings >> Comments<br />
<br />
3) Pada tab Comments, scroll ke bawah dan anda akan jumpa perkataan " <b>Show word verification for comments?</b> " Ok pada soalan itu, tick pada "<b>No</b>"<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC8XHAItUzOpgcGvt0dlN8cN3aQmvxsXwonO8k4z7_RK3RK4LIRqow8eQyGgZYyMNfjWvE-s3etrwtz4X9PRXCiKNdwRVFXfoaOaETs6sINTnIab6lItGL4DAQN72cJ2eYvg5ADUwBP3o/s400/1.png" width="400" /></div><br />
4) Klik Save Setting. <br />
<br />
Done! tiada lagi "soalan teka perkataan untuk buka peti harta karun".. ^_^Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com2tag:blogger.com,1999:blog-3197297745633551892.post-59062734504295406732012-01-07T07:05:00.000-08:002012-01-07T07:07:38.926-08:00Letak Top Comentator Di BlogWidget ini akan menampilkan senarai pengomen terbanyak di blog anda. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog.<br />
<br />
Caranya:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript<br />
<br />
3) Copy paste kod di bawah pada ruang Html / Javascript tadi<br />
<blockquote><!-- Top Commentators Cloud Start<br />
(c) 2010 Blogger Sentral. Original code by http://www.bloggersentral.com/. Please do not remove this credit and the &#8220;Get this commentators widget&#8221; link at the bottom of the code.--><br />
<div style="text-align:justify;line-height:1.2;"><br />
<script type="text/javascript"><br />
function cCloud(feed) {<br />
max = 0;<br />
min = 10000;<br />
//finding highest and lowest count<br />
for (i=0;i<feed.count;i++)<br />
{<br />
ccCount = feed.value.items[i].commentcount * 1;<br />
if (ccCount > max)<br />
{<br />
max = ccCount;<br />
}<br />
if (ccCount < min)<br />
{<br />
min = ccCount;<br />
}<br />
}<br />
ccCountD = "";<br />
display = "";<br />
for (j=0;j<feed.count;j++)<br />
{<br />
ccdiff = feed.value.items[j].commentcount - min;<br />
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";<br />
ccUrl = "'" + feed.value.items[j].authorurl + "'";<br />
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count<br />
ccName = feed.value.items[j].title + ccCountD;<br />
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name<br />
display = display + ccLName + " ";<br />
}<br />
document.write(display);<br />
}<br />
</script><br />
<script src="http://pipes.yahoo.com/pipes/pipe.run?<br />
YourBlogUrl=<b><span style="color: blue;">http://jombinabelog.blogspot.com/</span></b><br />
&Exclusions=<b><span style="color: blue;">Jom Bina Belog</span></b><br />
&ShowHowMany=10<br />
&Order=frequency<br />
&_callback=cCloud<br />
&_id=cfa196644e1d6159c9183548c4b5e2f5<br />
&_render=json"<br />
type="text/javascript"></script><br />
</div><br />
<br />
<!-- Top Commentators Cloud End --> </blockquote><br />
Pada perkataan <b><span style="color: blue;">biru</span></b> - Letak url blog dan nama blog anda<br />
<br />
4) Dah selesai, klik save dan lihat hasilnya.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com0tag:blogger.com,1999:blog-3197297745633551892.post-67854133925558587152012-01-07T05:14:00.000-08:002012-01-07T05:14:49.323-08:00Delete BlogAnda tercari-cari macam mana cara nak delete blog? ok jom belajar cara nak delete blog yang korang dah taknak tu.<br />
<br />
- Sign in akaun blogger >> kemudian ikuti tutorial bergambar di bawah:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcCC07DH0X-_JC512kxvmRp5Tx-hk31FDFyZNd09h3m1zUPSjX7q156Hiv80x0JlGLiCvOy9q5Pg6ZA5mi2-zpAtX8GNt62MD21B6tHbNRWDO9z52rdB7l8jT0RCnsYbxbemSOdssGsw/s400/1.png" width="400" /></div><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilify80-hOYS5G34AtdMG_lgfYEqkZSTpJAhxHU1LYYx08P6kqY7U6yHHiOkF7pkc5cfQMZKEDm20VgaS5CCKOTlMQofC_iecjwEwHEa0nsFduTQRLEtOBRnGAzawNz_EQPD8KbvtajrY/s400/2.png" width="400" /></div><br />
<div style="text-align: center;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO1oBWxkzaMqxS5ItHP7NeDP17n9xoo-S1VMRFL-rMlqrvQQ397pjVk74U4BU9MW9t58Lylb4_ic4G1YMAegrhg_eIELbkdLLb-EkIZMJr-_ofgWX4FFuN_lrlWDCPuYcunqgyExLneFc/s400/3.png" width="341" /></div><br />
- Done! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com0tag:blogger.com,1999:blog-3197297745633551892.post-71402294230737424112012-01-07T04:55:00.000-08:002012-01-07T04:58:05.190-08:00Cara Privatekan BlogAdakalanya kita taknak orang masuk blog pada masa-masa yang tertentu. Contoh ketika anda nak edit blog dan sebagainya. Caranya adalah dengan menjadikan blog anda private untuk sementara waktu. Ikuti tutorial bergambar di bawah:<br />
<br />
1) Sign in akaun blogger >> Dashboard >> Settings<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwLtKm63xuE7q5Rn_KfKaeMrdw5Bk8diP3SHugxVwxX8itpN7WOOy-1c1jTKaiYhNCy4ntaG6l0MwUW_A_JWmaIteiczdOUh7_qFFVSLIkUvz1t1mXirIeTvMNpHVxwN541yiaY0ZWcZQ/s400/1.png" width="400" /></div><br />
2) Under Setting, klik pada tab Permission >> kemudian tick dekat "only blog authors"<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxdkjqAbisfWHJqDdMos2bX-fbiX79GaUAphxOeMvbHkkvYBlFyadYrpVC5ZpPqGFphR-z-U-9FNSM_J_A47qBTlkGox-gmlEJGyN3tGOFiZgHAGtFa5c1Ad5V-7jTlavYN7h083M0P08/s400/2.png" width="400" /> </div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">3) Kemudian, paparan seperti dalam gambar di bawah akan muncul. Seterusnya klik "Allow Authors Only"</div><div style="text-align: center;"><img border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi35p-8VDHtExGcW86N1XEdFY9K5zJtmR6PY-7CAhQaXai4rpV3_tr8DQrOa_NrMOqzf6PG1jVXJKvA7UqQl9-NfwQwM5BoK9lZ2ZQbx8iaj_iO4gfuZVS9UDUmSfjzIMXx8imX-CodFQE/s400/3.png" width="400" /></div>4) Done. Sekarang blog anda telah menjadi <b>private</b>.<br />
<br />
<i>* Bila anda nak open balik blog, tick pada "Anybody" under tab Permission.</i><br />
<br />
-Sekian-Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com1tag:blogger.com,1999:blog-3197297745633551892.post-27832867058730664082012-01-07T00:24:00.000-08:002012-01-07T00:26:24.558-08:00Letak Jumlah Komen Atas Post Title<div class="separator" style="clear: both; text-align: center;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtPgMoqg-TeDuLpTwqRi3X_RCZ_DKKkyUAHnqXSfI8Zqg_8stV8i7jXDO2TXmnTQwuYaBJcdP5HHWpCfwpaQYX6txOANmroPiJ-wcBhMHjIwqPE7Ca9ZVqAyClPMmi90nAqp906Lj_E8/s400/prev.png" width="400" /></div>Ikuti tutorial di bawah:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"<br />
<br />
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod<br />
<blockquote class="tr_bq"><b><h3 class='post-title entry-title'></b></blockquote><br />
4) Kemudian, copy dan paste kod di bawah <span style="color: red;">SEBELUM / DI ATAS</span> kod <b><h3 class='post-title entry-title'> </b>tadi<b><br />
</b><br />
<blockquote class="tr_bq"><b:if cond='data:post.allowComments'><br />
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>Komen</span></a><br />
</b:if></blockquote><br />
Contoh, rupa kod anda akan jadi macam ni:<br />
<blockquote class="tr_bq"><b:if cond='data:post.allowComments'><br />
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>Komen</span></a><br />
</b:if><br />
<b><h3 class='post-title entry-title'></b><br />
<b:if cond='data:post.link'></blockquote>5) Then klik preview dan jika tiada error klik save template.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com2tag:blogger.com,1999:blog-3197297745633551892.post-5551561857092015782012-01-06T23:32:00.000-08:002012-01-11T03:58:46.009-08:00Efek Icon Muncul Apabila Cusor Menyentuh Blockquote<div class="separator" style="clear: both; text-align: center;"><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSuysRm636O5dFJnpY3lPWGN-hjsNgW4eGrbCLpfvCLIJlepDEJoIe7npPRKaE6uyi4HdGErruhjP9U6dQCoCOXaZVx-IaDV2vVRhZJBtRMneznFxVTyEWxy7Agg8iFlJ5DE1yl5hgzKo/s400/prev.png" width="400" /></div>Apabila cursor dilalukan pada petikan <a href="http://jombinabelog.blogspot.com/2011/12/blockquote.html">blockquote</a>, icon akan muncul pada penjuru bawah kanan kotak blockquote. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda.<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Edit HTML <br />
<br />
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini<br />
<blockquote class="tr_bq"><b>.post blockquote {</b></blockquote><br />
4) Kemudian copy dan paste kod ini <span style="color: red;">SELEPAS / DI BAWAH</span> kod <b>.post blockquote { </b>tadi<b><br />
</b><br />
<blockquote class="tr_bq">blockquote:hover {<br />
background-color: #<b><span style="color: purple;">FFC8F2</span></b>;<br />
-webkit-transition-duration: 3.5s;<br />
background-image:url(<b style="color: blue;">http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif</b>);<br />
background-position:bottom right;<br />
background-repeat:no-repeat;<br />
}</blockquote>Nilai yang anda boleh adjust dalam kod di atas:<br />
<b style="color: blue;">http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif</b> - letakkan url icon yang anda mahu. Gambar-gambar mini icon yang comel anda boleh search di <a href="http://glitter-graphics.com/gallery.php?ownerID=266445&categoryID=136&page=1">sini</a>. Cara nak dapatkan url gambar pula, rujuk tutorial <a href="http://jombinabelog.blogspot.com/2011/12/cara-dapatkan-url-gambar.html">ini</a>. <br />
<b><span style="color: purple;">FFC8F2</span></b> - warna background pada kotak blockquote apabila disentuh cursor. Rujuk kod warna di bawah<br />
<i>( untuk paparan lebih besar, klik <a href="http://immigration-usa.com/html_colors.html" target="_blank">di sini</a>)</i><br />
<iframe allowtransparency="true" frameborder="0" height="450" hspace="0" marginheight="0" marginwidth="0" name="menampilkan blog/web dalam postingan" readonly="true" scrolling="yes" src="http://www.immigration-usa.com/html_colors.html" vspace="0" width="450"></iframe><br />
<br />
<br />
5) Klik preview dan jika tiada error, klik save template.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com3tag:blogger.com,1999:blog-3197297745633551892.post-49612485307781964722012-01-06T23:10:00.000-08:002012-01-07T11:05:10.775-08:00Letak Background Bergambar Pada BlockquotePreview:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoO5PrIFKdZISi06RA0MlYyoXKio5l28-vkebfKbZ9xD86Xkf2OJPabiKqZN7f1qQ2SVHEmZKIluv2qxKXm0uqLfAY9Ji7JK6533TVUKt_TbiQtUle5-3N7Gx2iAPO4BplGyv5mVlQIbU/s400/prev.png" width="400" /></div><br />
Sebelum ini ada ditunjukkan cara macam mana nak letak <a href="http://jombinabelog.blogspot.com/2011/12/tukar-warna-background-pada-blockquote.html">kotak berwarna pada petikan blockquote</a>. Tutorial kali ini akan menunjukkan pada anda cara nak letak background bergambar pada petikan blockquote di blog. Ikuti tutorial di bawah step by step.<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Edit HTML <br />
<br />
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini<br />
<blockquote class="tr_bq"><b>.post blockquote {</b></blockquote><br />
4) Kemudian copy dan paste kod ini <span style="color: red;">SELEPAS / DI BAWAH</span> kod <b>.post blockquote { </b>tadi<b><br />
</b><br />
<blockquote class="tr_bq">background-image:url(<b><span style="color: blue;">url gambar background</span></b><span style="color: blue;"><span style="color: black;">)</span></span>; </blockquote><b><span style="color: blue;">url gambar background</span></b> - letakkan url gambar background yang anda mahu. Gambar-gambar background anda boleh search di <a href="http://glitter-graphics.com/gallery.php?tags=background">sini</a> atau <a href="http://www.mycutegraphics.com/backgrounds/backgrounds.html">sini</a>. Cara nak dapatkan url gambar pula, rujuk tutorial <a href="http://jombinabelog.blogspot.com/2011/12/cara-dapatkan-url-gambar.html">ini</a>. <br />
<br />
5) Bila dah selesai masukkan url gambar dalam kod tersebut, klik preview dan jika tiada error, klik save template.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com6tag:blogger.com,1999:blog-3197297745633551892.post-53565253414077148932012-01-06T21:39:00.000-08:002012-01-06T22:00:30.436-08:00Simple Template - Letak Kotak Pada BlockquotePreview:<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2F0dozCeP0BxIrgan3yxNboqwpoCeSJoCL8Iv6gabJikXjjX10YIeflYz8we5iwO6KmSAq-4o7hp4_Sjm-hnP945wh6gmKkIvUnaih3ZdWeR0OWrx1CBhzV4iTSDV8TmkENGziLM2VA/s400/prev.png" width="400" /></div>Bagi yang tak tahu apa itu Blockquote, rujuk <a href="http://jombinabelog.blogspot.com/2011/12/blockquote.html">di sini</a>. Tutorial kali ini akan menunjukkan pada anda cara untuk meletakkan kotak pada petikan blockquote dalam blog anda.<br />
<br />
Caranya:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Edit HTML <br />
<br />
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini<br />
<blockquote><b>/* Headings</b></blockquote><br />
4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod <b>/* Headings</b> tadi<br />
<blockquote>.post blockquote {<br />
background:#<b><span style="color: blue;">FFCCCC</span></b>;<br />
padding: 5px;<br />
Border: <b><span style="color: red;">2</span></b>px <b style="color: red;">dashed</b> #<b><span style="color: red;">FF0099</span></b>;<br />
<div style="color: purple;"><b>moz-border-radius: 25px 10px / 10px 25px;</b></div><div style="color: purple;"><b>border-radius: 25px 10px / 10px 25px;</b></div>colour:#FF0099;<br />
}</blockquote>Nilai yang anda boleh adjust dalam kod di atas<br />
<b><span style="color: blue;">FFCCCC</span></b> - warna background kotak blockquote. Rujuk kod warrna di bawah<br />
<b><span style="color: red;">2</span></b> - ketebalan garisan border kotak<br />
<b style="color: red;">dashed</b> - style garisan border. Sama ada dashed, solid atau dotted<br />
<b><span style="color: red;">FF0099 </span></b>- warna garisan border. Rujuk kod warna di bawah<br />
<b><span style="color: purple;">Kod warna purple</span></b> - bentuk kotak border. Anda boleh pilih di <a href="http://jombinabelog.blogspot.com/2012/01/bentuk-bentuk-border.html">sini</a><br />
<br />
<i>( untuk paparan lebih besar, klik <a href="http://immigration-usa.com/html_colors.html" target="_blank">di sini</a>)</i><br />
<iframe allowtransparency="true" frameborder="0" height="450" hspace="0" marginheight="0" marginwidth="0" name="menampilkan blog/web dalam postingan" readonly="true" scrolling="yes" src="http://www.immigration-usa.com/html_colors.html" vspace="0" width="450"></iframe><br />
<br />
5) Bila dah selesai adjust nila-nilai di atas, klik preview dan jika tiada error, klik save template.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com3tag:blogger.com,1999:blog-3197297745633551892.post-85159408066544946902012-01-06T12:18:00.000-08:002012-01-11T04:00:38.509-08:00Efek kotak shadow apabila cursor menyentuh blockquote<div class="separator" style="clear: both; text-align: center;"><img border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQ9YxG__rzdru_jdBcgTF8Gn0hKY5eVLSznGsokAw7E0eNnu_1CFr6_zbX-zv9DSCiZrBj1rgQi5suW0T5jxf6JxX5t2dRvh1p8LgzbqfuBO9w4OhmJtcRPl-gmnu29DOzS00GXBBNYY/s400/prev.png" width="400" /></div>Efek kotak bayang-bayang akan muncul apabila cursor menyentuh <a href="http://jombinabelog.blogspot.com/2011/12/blockquote.html">Blockquote</a>. Pada bayang-bayang dan garis kotak border, korang boleh tukar warna mengikut citarasa sendiri. Menarik kan? jom cuba. Sebelum itu, kepada sesiapa yang tak tahu cara nak pasang kotak pada petikan <a href="http://jombinabelog.blogspot.com/2011/12/blockquote.html">blockquote</a>, sila rujuk tutorial <a href="http://jombinabelog.blogspot.com/2011/12/tukar-warna-background-pada-blockquote.html">ini</a> atau untuk pengguna simple template, rujuk tutorial<a href="http://jombinabelog.blogspot.com/2012/01/simple-template-letak-kotak-pada.html"> ini</a>. <br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Edit HTML <br />
<br />
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod<br />
<blockquote><b>.post blockquote {</b> </blockquote>atau kod di bawah<br />
<blockquote><b>blockquote:hover { </b></blockquote><br />
4) Copy kod di bawah dan paste <span style="color: red;">SELEPAS / DI BAWAH</span> kod yang korang cari di langkah 3 tadi<br />
<blockquote>border:2px dashed #<b>000000</b>;<br />
-moz-border-radius-topleft: 10px;<br />
-moz-border-radius-bottomright: 10px;<br />
-moz-box-shadow: 0 0 18px #<b><span style="color: blue;">FF3399</span></b> ;<br />
-webkit-box-shadow: 0 0 18px #<b><span style="color: blue;">FF3399</span></b> ;<br />
}</blockquote>Nota:<br />
<b>000000</b> - warna garis border. Tukar kepada warna yang korang suka. Rujuk kod warna di bawah<br />
<b><span style="color: blue;">FF3399</span></b> - warna bayang-bayang pada kotak. Tukar kepada warna yang korang suka. Rujuk kod warna di bawah<br />
<i>( untuk paparan lebih besar, klik <a href="http://immigration-usa.com/html_colors.html" target="_blank">di sini</a>)</i><br />
<iframe allowtransparency="true" frameborder="0" height="450" hspace="0" marginheight="0" marginwidth="0" name="menampilkan blog/web dalam postingan" readonly="true" scrolling="yes" src="http://www.immigration-usa.com/html_colors.html" vspace="0" width="450"></iframe><br />
<br />
5) Klik preview, jika tiada error, klik save template.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com8tag:blogger.com,1999:blog-3197297745633551892.post-84129356699075712722012-01-06T12:00:00.000-08:002012-01-11T04:03:55.096-08:00Efek senget apabila cursor menyentuh blockquotePreview:<br />
<div style="text-align: center;"><embed height="90" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://7799548445132453613-a-1802744773732722657-s-sites.googlegroups.com/site/efeksenget/sengetblock.swf" type="application/x-shockwave-flash" width="400" wmode="transparent"></embed></div><br />
Tutorial kali ini akan menunjukkan cara macam mana nak buat efek senget pada <a href="http://jombinabelog.blogspot.com/2011/12/blockquote.html">Bloquote</a> apabila di sentuh cursor, seperti dalam preview di atas. Ikuti tutorial di bawah step by step. Sebelum itu, kepada sesiapa yang tak tahu cara nak pasang kotak pada petikan <a href="http://jombinabelog.blogspot.com/2011/12/blockquote.html">blockquote</a>, sila rujuk tutorial <a href="http://jombinabelog.blogspot.com/2011/12/tukar-warna-background-pada-blockquote.html">ini</a> atau untuk pengguna simple template, rujuk tutorial<a href="http://jombinabelog.blogspot.com/2012/01/simple-template-letak-kotak-pada.html"> ini</a>. <br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Edit HTML <br />
<br />
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod<br />
<blockquote><b>.post blockquote {</b> </blockquote>atau kod di bawah<br />
<blockquote><b>blockquote:hover { </b></blockquote><br />
4) Copy kod di bawah dan paste <span style="color: red;">SELEPAS / DI BAWAH</span> kod yang korang cari di langkah 3 tadi<br />
<blockquote>blockquote:hover {<br />
-webkit-border-radius: 36px 12px;<br />
-moz-border-radius: 36px 12px;<br />
-webkit-transform: skew(1.deg,1.5deg);<br />
-moz-transform: rotate(3deg);<br />
-webkit-transform: rotate(3deg); }<br />
border:2px dashed #000000;<br />
-moz-border-radius-topleft: 10px;<br />
-moz-border-radius-bottomright: 10px;<br />
} </blockquote><br />
5) Klik preview, jika tiada error, klik save template.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com1tag:blogger.com,1999:blog-3197297745633551892.post-6655456993958554812012-01-05T23:44:00.000-08:002012-01-06T11:08:45.516-08:00Tambah ruang add a gadget atas header<div style="text-align: left;">Sebelum:</div><div class="separator" style="clear: both; text-align: center;"><img border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZAzb41Q4wS6AHEsFab0RoGLXB2COApSU8JZfkbli7c3IVWW4OAL2G6spiBBpek7mEUXrUHbKeG6c7Xi3uc2v3oJNr0qvM3TPDZyXvX59VoQ5PLWL29-1diflRgWaWCx4dN1WxqEn7yU/s900/sebelum.png" width="400" /></div><br />
<br />
Selepas:<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw46g-M6oxz1Jo-EZMJfTg53x7fkyzqFpn99G792mwF745fjSuQpS-jKxuR6asMrfYJrAgzfr57Ul8tW06hPf-BrXk_6eUbR33k1yLwym6FsM1dOw0GlYJsZXjr2Q20wOJz6wlwpXBosM/s900/selepas.png" width="400" /></div>Sesetengah template ada yang mempunyai ruang add a gadget di atas header, dan ada juga sesetengahnya yang tiada. Untuk menambahkan ruang "Add A Gadget" pada bahagian atas header senang je, ikuti tutorial di bawah:<br />
<br />
Caranya:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"<br />
<br />
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod<br />
<blockquote class="tr_bq"><b><b:section class='header'</b></blockquote><br />
4) Kemudian sebaris dengan kod <b><b:section class='header'</b> tu, korang akan nampak kod yang macam ni kan :<br />
<blockquote> <b><b:section class='header'</b> id='header' maxwidgets='1' showaddelement='no'></blockquote><br />
5) Ok, sekarang delete kod di atas, dan gantikan dengan kod di bawah:<br />
<blockquote><b:section class='header' id='header1' preferred='yes'></blockquote><br />
6) Then klik preview dan jika tiada error klik save template.<br />
<br />
Selamat mencuba! :)Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com4tag:blogger.com,1999:blog-3197297745633551892.post-31334100462448626592012-01-05T22:38:00.000-08:002012-01-05T22:53:37.337-08:00Remove follower dari blogAdakalanya korang tak suka pada sesetengah follower yang mungkin mengganggu "ketenteraman" emosi korang ^_^ . Ok, ada cara untuk remove follower tersebut<img border="0" height="70" src="https://7641380641287428105-a-1802744773732722657-s-sites.googlegroups.com/site/mynotemood/089.gif" width="70" />.<br />
<br />
Jom kita mulakan :<br />
<br />
<br />
<br />
Caranya:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard >> kemudian klik pada follower:<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEphBqAuyCuCnMcJCWKIBnHiIXocQsJl_3KnArhg7sa8SCsgwKnt3jdryCjANyWFpNoI3KoIE_VUBtWc1CBWpPMYm0tYOboVfAPOY6Co561zRyHZTzVKYW8U9Z51SplOfPj-e7krM89M/s400/1.png" width="400" /></div><br />
<br />
2) Klik pada gambar follower yang korang nak remove:<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQBwBDRDOO_UeNU5aVsHnh8ZEom2ztHVX1F3AdY_htBUrBuKBgQQZTcvaR2jFfdPjDQEEiK_r4N5dZEzax4pTTAaKDwHsyhMbr-0IhnHfZrlCU7bXmj-fDULMDTU7hNYtwYlVtbKb4-Gk/s400/2.png" width="326" /></div><br />
<br />
3) Klik "Block this user"<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl0TYhH9KzjhyphenhyphenhM_dsFxIl9R7i7X8RUiAIMWkEHFmCIkCgX465ZjsOUn_XXh9syTTywgwtnvac3OFby-JDR260xuIf9J4v9gpth9m9oWSoYyPXmAssONrWXYsqc_f9ibJrkBUdh08cpI8/s400/3.png" width="326" /></div><br />
<br />
4) Klik button Block<br />
<div style="text-align: center;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_mXo6AUuznRAxZ_mYUHOi8iA-12evGguj69EjaoLmSLJGAw5mJBFYa_BnZ6gpGH35mVsTTru-MwgeudSmCwC7KoORKlLb1-Ljt4SvYKd7KyNCqv8DFaGhMOYYib3N2Pphf2F8IJ4ho8/s400/4.png" width="326" /><br />
<br />
<div style="text-align: left;"><br />
</div><div style="text-align: left;"> 5) Selesai! :) </div></div>Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com1tag:blogger.com,1999:blog-3197297745633551892.post-66572417955466575312012-01-05T14:30:00.000-08:002012-01-15T05:23:12.208-08:00Paparan Welcome Image Pada Blog<div style="text-align: center;">Preview:</div><div class="separator" style="clear: both; text-align: center;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNI04_psrFJN2T9D63FEVeLRD2tYpW-djV8NNzhFK9r51Rkc9H2tqka1cMx3_9hSgJDSdW59CszdHrGXuNMBtKfAXIQjrYXouCl7WTls51BQX_fndJm5uRxLaEvq2r9maTWpKoDGLwtdA/s400/welcome+to+my+blog-click+here+to+enter.png" width="400" /></div>Paparan welcome image ini akan muncul pada permulaan, sebelum masuk ke blog korang. Selepas klik pada welcome image ini, blog akan muncul dengan efek "fade in" yang menarik. Ibarat macam buka pintu sebelum masuk rumah ^_^ Ikuti tutorial di bawah.<br />
<br />
<span style="background-color: yellow;">*Sebelum tu, korang dinasihatkan supaya </span><a href="http://jombinabelog.blogspot.com/2011/12/cara-backup-template-blog.html" style="background-color: yellow;">backup template</a><span style="background-color: yellow;"> terlebih dahulu, sebab once korang dah apply benda ni dekat blog, kod dia dah tak boleh delete. So ambik langkah berjaga-jaga, </span><a href="http://jombinabelog.blogspot.com/2011/12/cara-backup-template-blog.html" style="background-color: yellow;">backup template</a><span style="background-color: yellow;"> dulu ye.</span><br />
<br />
<br />
Caranya:<br />
<br />
1) Sign in akaun blogger<br />
<br />
2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"<br />
<br />
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod<br />
<blockquote><b>]]></b:skin></b></blockquote><br />
<br />
4) Kemudian, copy dan paste kod di bawah <span style="color: red;">SEBELUM / DI ATAS</span> kod <b>]]></b:skin></b><br />
<blockquote></style></head><br />
<script language="javascript" type="text/javascript"><br />
/* toggle() checks to see if the images has already been faded<br />
or not and sends the appropriate variables to opacity(); */<br />
function toggle(el,milli) {<br />
// Get the opacity style parameter from the image<br />
var currOpacity = document.getElementById(el).style.opacity;<br />
if(currOpacity != 0) { // if not faded<br />
fade(el, milli, 100, 0);<br />
} else { // else the images is already faded<br />
fade(el, milli, 0, 100);<br />
}<br />
}<br />
/* changeOpacity() uses three different opacity settings to<br />
achieve a cross-browser opacity changing function. This<br />
function can also be used to directly change the opacity<br />
of an element. */<br />
function changeOpacity(el,opacity) {<br />
var image = document.getElementById(el);<br />
// For Mozilla<br />
image.style.MozOpacity = (opacity / 100);<br />
// For IE<br />
image.style.filter = "alpha(opacity=" + opacity + ")";<br />
// For others<br />
image.style.opacity = (opacity / 100);<br />
}<br />
/* fade() will fade the image in or out based on the starting<br />
and ending opacity settings. The speed of the fade is<br />
determined by the variable milli (total time of the fade<br />
in milliseconds)*/<br />
function fade(el,milli,start,end) {<br />
var fadeTime = Math.round(milli/100);<br />
var i = 0; // Fade Timer<br />
// Fade in<br />
if(start < end) {<br />
for(j = start; j <= end; j++) {<br />
// define the expression to be called in setTimeout()<br />
var expr = "changeOpacity('" + el + "'," + j + ")";<br />
var timeout = i * fadeTime;<br />
// setTimeout will call 'expr' after 'timeout' milliseconds<br />
setTimeout(expr,timeout);<br />
i++;<br />
}<br />
}<br />
// Fade out<br />
else if(start > end) {<br />
for(j = start; j >= end; j--) {<br />
var expr = "changeOpacity('" + el + "'," + j + ")";<br />
var timeout = i * fadeTime;<br />
setTimeout(expr,timeout);<br />
i++;<br />
}<br />
}<br />
}<br />
</script><br />
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';<br />
document.getElementById('june').style.display=''"><br />
<center><img src="<b><span style="color: blue;">URL IMAGE WELCOME</span></b>"<br />
style="opacity:0.4;filter:alpha(opacity=40)"<br />
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"<br />
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center><br />
</div><br />
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;"><br />
<div id="june" style="display : none;"><br />
<body></blockquote><br />
Nota:<br />
Pada <b><span style="color: blue;">URL IMAGE WELCOME</span></b><span style="color: blue;"><span style="color: black;">,</span></span><b><span style="color: blue;"> </span></b>korang masukkan url image welcome yang korang suka. Image welcome korang boleh pilih kat bawah, copy url yang disediakan.<br />
<div style="text-align: center;"><br />
</div><div style="text-align: center;"><img border="0" height="200" src="http://img811.imageshack.us/img811/2034/74209346.png" width="400" /></div><div style="text-align: center;"><blockquote>http://img811.imageshack.us/img811/2034/74209346.png</blockquote><br />
<br />
<br />
<br />
<div style="text-align: center;"><img border="0" height="200" src="http://img830.imageshack.us/img830/7516/64141948.png" width="400" /></div><div style="text-align: center;"><blockquote>http://img830.imageshack.us/img830/7516/64141948.png</blockquote><br />
<br />
<div style="text-align: center;"><img border="0" height="200" src="http://img190.imageshack.us/img190/2280/87105761.png" width="400" /></div><div style="text-align: center;"><blockquote>http://img190.imageshack.us/img190/2280/87105761.png</blockquote><br />
<br />
<br />
<br />
<div style="text-align: center;"><img border="0" height="200" src="http://img42.imageshack.us/img42/2760/13929553.gif" width="400" /></div><div style="text-align: center;"><blockquote>http://img42.imageshack.us/img42/2760/13929553.gif</blockquote><br />
<br />
<br />
<br />
<br />
<div style="text-align: center;"><img border="0" height="200" src="http://img831.imageshack.us/img831/7031/46029943.gif" width="400" /></div><div style="text-align: center;"><blockquote>http://img831.imageshack.us/img831/7031/46029943.gif</blockquote><br />
<br />
<br />
<br />
<div style="text-align: center;"><img border="0" height="200" src="http://img137.imageshack.us/img137/6722/78563544.png" width="400" /></div><div style="text-align: center;"><blockquote>http://img137.imageshack.us/img137/6722/78563544.png</blockquote><br />
<br />
<br />
<br />
<div style="text-align: center;"><img border="0" height="200" src="http://img821.imageshack.us/img821/1397/61645383.png" width="400" /></div><blockquote>http://img821.imageshack.us/img821/1397/61645383.png</blockquote><br />
<br />
<div style="text-align: center;"><img border="0" height="200" src="http://img827.imageshack.us/img827/2415/47060660.gif" width="400" /></div><div style="text-align: center;"><blockquote>http://img827.imageshack.us/img827/2415/47060660.gif</blockquote><br />
<br />
<div style="text-align: left;">5) Selepas masukkan url image pada kod, korang klik save template. Kemudian akan keluar "<b>keep widget</b> or <b>delete widget</b>", pilih <b>delete widget </b>ye. </div><div style="text-align: left;"><br />
</div><div style="text-align: left;">6) Lastly klik preview, kalau menjadi, terus klik save template.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Selamat mencuba! :)</div></div></div></div></div></div></div></div>Jombinabeloghttp://www.blogger.com/profile/13258062932144619697noreply@blogger.com66