Senarai Tutorial

Letak Background Pada Shoutbox

Preview:
Selain frame, korang juga boleh letak background pada shoutbox. Baru nampak meriah sikit kan? ^_^ Jom follow tutorial ini step by step:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:
<center><div id="custombg" style="width:200px; height:300px; background:url(http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png) repeat; padding-top:0px; padding-left:0px; position:relative" align="center">

<iframe frameborder="0" title="shoutboxsaya" height="300" src="http://shout.busuk.org/?shoutboxsaya" id="r" style="filter:alpha(opacity=60);opacity:0.60;-moz-opacity:0.60; display:block; " scrolling="auto" width="200">

</iframe></center></div>
Nota: 
200 & 300 - saiz width dan height shoutbox korang.

url warna merah - url shoutbox korang. ( pada kod shoutbox korang, ambik dekat src='http://.....')

60 - nilai transperency shoutbox (ikut kesesuaian background yang korang pilih. jangan sampai tak nampak langsung tulisan shoutbox tu nanti ye ^_^)

url warna biru - masukkan url background yang korang nak. search kat sini atau pilih jer background yang dah disediakan kat bawah.

http://dl7.glitter-graphics.net/pub/676/676657yhxq5o5bjd.gif


http://dl4.glitter-graphics.net/pub/2080/2080324f7c521qp7z.gif



http://dl4.glitter-graphics.net/pub/577/577814mxl3lzplgr.gif




http://dl9.glitter-graphics.net/pub/1297/1297689x033a3xbsj.jpg


http://dl8.glitter-graphics.net/pub/2168/2168288zbnox1h1uo.gif



http://dl10.glitter-graphics.net/pub/1877/1877570beu28immp9.jpg



http://dl4.glitter-graphics.net/pub/3039/3039724iqnri5mycx.png



http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png

4) Lepas dah masukkan nilai yang sepatutnya pada kod tu, klik save dan lihat hasilnya.

Selamat mencuba! :)




Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Letak Frame Pada Shoutbox

Preview:
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:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi.
<center><div id="edited" style="width:200px; height:370px; background:url(URL IMAGE FRAME) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center">KOD SHOUTBOX</div></center>

Nota:
URL IMAGE FRAME - masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di bawah.
KOD SHOUTBOX - masukkan kod shoutbox korang.


Contoh:
<center><div id="edited" style="width:200px; height:370px; background:url(http://img535.imageshack.us/img535/2325/frame6p.png) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center">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>
<!-- SHOUT BUSUK : End !-->
</div></center>

Freebies time.. frame untuk shoutbox. Just copy url yang disediakan:
P/s : kalau korang nak guna image frame ni, ukuran shoutbox korang mestilah 180x255 ( width: 180px, height:255)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwajACDo09vD-hZMUnHjGEweyBc9rtUNPTJobDuYvxY5Oi5CRV6Q4y62b1v4774Ddv66O-9sNBNpH-F84HNaAYVwhuv4uY8USmrau7cut_tHcMncpIQEwHp29BCdqNyrlcTEOV-Qgqhz4/s1600/frame+fibox1.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqCWlxN-g70kQbkmF2jJX4fGXp5uhNKoKyk7cCK8wd2Zv81iUyCfiVguVUt2cHJU0SkIyV2fhufJsSC0mC7LR_wQ-7MTsNvuVW-X0Cz57vpHa4n77pJ_ahrU8CRMlrhYdghxdkS90w9Y/s1600/frame+fibox2.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAb5om0RVPUNzRomfJWILE9mpgYXy2ww10R5kBpdeJk7_bnWgflqVuvpVgdjrCwQQelROQXzXY-ABpddAQ89NjIp2bDO6jmvuXbACjLhFLgMhUZ7VAcAfzi1eK2Rj919og1DOXRZTC9Fc/s1600/frame+fibox3.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAVkJuBJPMMVY9Cmm4QJoov3b_jt3MrRQo0Vomaznh-97ax8HohsAP58nTvL1Elcdgg2mADJjvaPu9bE9_ZBtaxrzN27hG4B2pJ10NRsp4eaDt3GzSs2zoguWXYzFT07HULzzvTvZuZ7g/s1600/frame+fibox4.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6x2CwuXZyFZ5bFB4-51h6nGHEzifKBObfEVZ7kWSGR4kk6x_tMQfMy8XChKLBjqLeuhweJgPC4k75e4_DJ6gOhD7Qhyphenhyphen5dImeMfZJjmVXNbZLhTfxToVj-zmUZTLI7XxvX7BuDdTgmxjk/s1600/frame+fibox5.png

4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Menu Horizontal Untuk Blog


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:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod Menu Horizontal pada ruang Html / Javascript tadi.
<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>
# - url untuk setiap menu ( cth: http://jombinabelog.blogspot.com/2012/01/menu-horizontal-pada-blog.html)
Link 1 - 7 - nama menu yang korang nak letak ( cth home, about me, contact dll)


* Terdapat 9 pilihan style menu horizontal untuk anda pilih. Just copy kod yang disediakan:







































4) Dah selesai klik save dan lihat hasilnya.

Selamat mencuba! :)



Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Efek Bubbles Pada Blog

Preview:
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:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi
<script type="text/javascript">
// <![CDATA[
var colours=new Array("#33FF33", "#33FF33", "#33FF33", "#33FF33", "#0000CC"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // how many bubbles are moving at any given time

/****************************
* JavaScript Bubble Bath *
* (c) 2010 mf2fm web-design *
* http://www.mf2fm.com/rv *
* Tutorial by polskahackrew *
****************************/
var swide=800;
var shigh=600;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var b, i;
b=document.createElement("div");
i=b.style;
i.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();

var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

b.appendChild(rats);
bubb[i]=rats.style;
}
bubble();
}}

function bubble() {
var c;
for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {
bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";
bubb[c].top=(bubby[c]=shigh)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
if (bubby[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubbx[i]+=(i%5-2)/5;
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
document.getElementById("bod").style.top=sdown+"px";
document.getElementById("bod").style.left=sleft+"px";
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]></script>

Nota:
33FF33 - warna border bubble. Tukar kepada kod warna yang anda suka. Rujuk kod warna di bawah.
0000CC - warna bubble. Tukar kepada kod warna yang anda suka. Rujuk kod warna di bawah.

( untuk paparan lebih besar, klik di sini)



4)Kemudian klik save dan lihat hasilnya.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Button Show & Hide Spoiler

Cuba klik pada button di bawah:


Menarik kan? jom ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi
<center><div id="spoiler"><div><input value="Nama button" style="width:88px ;font-size:12px;background-image: url(URL BACKGROUND UNTUK BUTTON);-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;; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
<center><center>Ayat/url/image/kod widget anda di sini</center></center></div></div></div></center>
Nota:
Nama button - nama pada button anda

Merah - ayat atau apa-apa je yang anda nak letak
Biru - Masukkan url background untuk button. Search di mana-mana image hosting atau anda boleh pilih background yang disediakan di bawah.

http://img401.imageshack.us/img401/822/plaid30.jpg

http://img46.imageshack.us/img46/957/plaid24.jpg

http://img31.imageshack.us/img31/8480/pinkbackground8.gif

http://img194.imageshack.us/img194/5608/pinkbackground3.gif

http://img846.imageshack.us/img846/4885/plaidbackground9.gif

4) Klik save dan lihat hasilnya.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Like Facebook Fan Page Sebelum Enter Blog

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:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

atau
<body>

4) Kemudian, copy dan paste kod di bawah SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi
<!-- KakiNetwork.Com Likebox Pro FBFan Code Start -->
<script type='text/javascript'>KNFBFansPRO=&quot;Jombinabelog&quot;</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakiblogger.css' rel='stylesheet' type='text/css'/>
<script src='http://yourjavascript.com/0143115100/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://yourjavascript.com/5400531110/likeboxfbfan-pro.js' type='text/javascript'/>
<script language='javascript'>
$(document).ready(function() {
$(&#39;body&#39;).KNFBFansPRO( {
url: &quot;http://www.facebook.com/pages/Jombinabelog/159428397409932&quot;,
tunggu: 15,
wait: 1440,
tutup: false
} );
});
</script>
<div id='fbtpdiv'/>
<!-- KakiNetwork.Com Likebox Pro FBFan Code End -->
Nota:
Biru - nama fan page
Merah - URL fan page anda

5) Klik preview, jika tiada error klik save template.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Cara Dapatkan Coding Untuk Follower

1) Pergi ke Google Friend Connect

2) Klik setting >> masukkan nama dan url blog >> kemudian klik save your settings

3) Klik Gadgets >> Pilih Members 


4) Adjust width, colour dan font ikut citarasa yang anda mahu.

5) Dah siap adjust semua, klik Generate kod dan copy kod yang tertera.


- Selesai -


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Sidebar Berstyle

Preview:

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.

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi
<div style="background: #FFC8E3 repeat; repeat; padding: 5px; border:2px dashed #990066; 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 #FF3399 ; -webkit-box-shadow: 0 0 18px #FF3399 ; "><center></center>


Masukkan kod html widget / banner/ ayat anda / image apa saja yang anda nak letak di sini


</div>
Nota :
Tulisan biru - masukkan kod html gadget yang anda nak letak pada kotak sidebar ini. Contohnya kod chatbox atau apa-apa sahaja. Untuk dapatkan kod widget Follower pula, anda boleh rujuk tutorial ini

FFC8E3 - warna background kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah

dashed - jenis garisan kotak. Samaada solid, dashed atau dotted

990066 - warna garisan kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah.

FF3399 - warna bayang-bayang kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah.
( untuk paparan lebih besar, klik di sini)



4) Dah selesai, klik save dan lihat hasilnya.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Buang "Word Verification" Pada Comment Di Blog Anda

Tahu tak apa itu "Word Verification For Comment" ? Lihat gambar di bawah :
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 :


1) Sign in akaun blogger

2) Dashboard >> Settings >> Comments

3) Pada tab Comments, scroll ke bawah dan anda akan jumpa perkataan " Show word verification for comments? " Ok pada soalan itu, tick pada "No"


4) Klik Save Setting.

Done! tiada lagi "soalan teka perkataan untuk buka peti harta karun".. ^_^


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Letak Top Comentator Di Blog

Widget ini akan menampilkan senarai pengomen terbanyak di blog anda. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi
<!-- Top Commentators Cloud Start
(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.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name
display = display + ccLName + " ";
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://jombinabelog.blogspot.com/
&Exclusions=Jom Bina Belog
&ShowHowMany=10
&Order=frequency
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
</div>

<!-- Top Commentators Cloud End -->

Pada perkataan biru - Letak url blog dan nama blog anda

4) Dah selesai, klik save dan lihat hasilnya.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Delete Blog

Anda tercari-cari macam mana cara nak delete blog? ok jom belajar cara nak delete blog yang korang dah taknak tu.

- Sign in akaun blogger >>  kemudian ikuti tutorial bergambar di bawah:





- Done! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Cara Privatekan Blog

Adakalanya 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:

1) Sign in akaun blogger >> Dashboard >> Settings

2) Under Setting, klik pada tab Permission >> kemudian tick dekat "only blog authors"
 

3) Kemudian, paparan seperti dalam gambar di bawah akan muncul. Seterusnya klik "Allow Authors Only"
4) Done. Sekarang blog anda telah menjadi private.

* Bila anda nak open balik blog, tick pada "Anybody" under tab Permission.

-Sekian-


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Letak Jumlah Komen Atas Post Title

Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
<h3 class='post-title entry-title'>

4) Kemudian, copy dan paste kod di bawah SEBELUM / DI ATAS kod <h3 class='post-title entry-title'> tadi

<b:if cond='data:post.allowComments'>
<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>
</b:if>

Contoh, rupa kod anda akan jadi macam ni:
<b:if cond='data:post.allowComments'>
<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>
</b:if>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
5) Then klik preview dan jika tiada error klik save template.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Efek Icon Muncul Apabila Cusor Menyentuh Blockquote

Apabila cursor dilalukan pada petikan blockquote, icon akan muncul pada penjuru bawah kanan kotak blockquote. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda.

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini
.post blockquote {

4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod .post blockquote { tadi

blockquote:hover {
background-color: #FFC8F2;
-webkit-transition-duration: 3.5s;
background-image:url(http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
Nilai yang anda boleh adjust dalam kod di atas:
http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif - letakkan url icon yang anda mahu. Gambar-gambar mini icon yang comel anda boleh search di sini. Cara nak dapatkan url gambar pula, rujuk tutorial ini.
FFC8F2 - warna background pada kotak blockquote apabila disentuh cursor. Rujuk kod warna di bawah
( untuk paparan lebih besar, klik di sini)



5) Klik preview dan jika tiada error, klik save template.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Letak Background Bergambar Pada Blockquote

Preview:


Sebelum ini ada ditunjukkan cara macam mana nak letak kotak berwarna pada petikan blockquote. Tutorial kali ini akan menunjukkan pada anda  cara nak letak background bergambar pada petikan blockquote di blog. Ikuti tutorial di bawah step by step.

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini
.post blockquote {

4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod .post blockquote { tadi

background-image:url(url gambar background);
url gambar background - letakkan url gambar background yang anda mahu. Gambar-gambar background anda boleh search di sini atau sini. Cara nak dapatkan url gambar pula, rujuk tutorial ini.

5) Bila dah selesai masukkan url gambar dalam kod tersebut, klik preview dan jika tiada error, klik save template.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Simple Template - Letak Kotak Pada Blockquote

Preview:
Bagi yang tak tahu apa itu Blockquote, rujuk di sini. Tutorial kali ini akan menunjukkan pada anda cara untuk meletakkan kotak pada petikan blockquote dalam blog anda.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini
/* Headings

4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod /* Headings tadi
.post blockquote {
background:#FFCCCC;
padding: 5px;
Border: 2px dashed #FF0099;
moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
colour:#FF0099;
}
Nilai yang anda boleh adjust dalam kod di atas
FFCCCC - warna background kotak blockquote. Rujuk kod warrna di bawah
2 - ketebalan garisan border kotak
dashed  - style garisan border. Sama ada dashed, solid atau dotted
FF0099 - warna garisan border. Rujuk kod warna di bawah
Kod warna purple - bentuk kotak border. Anda boleh pilih di sini

( untuk paparan lebih besar, klik di sini)


5) Bila dah selesai adjust nila-nilai di atas, klik preview dan jika tiada error, klik save template.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Efek kotak shadow apabila cursor menyentuh blockquote

Efek kotak bayang-bayang akan muncul apabila cursor menyentuh Blockquote. 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 blockquote, sila rujuk tutorial ini atau untuk pengguna simple template, rujuk tutorial ini.

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
.post blockquote {
atau kod di bawah
blockquote:hover {

4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi
border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-box-shadow: 0 0 18px #FF3399 ;
-webkit-box-shadow: 0 0 18px #FF3399 ;
}
Nota:
000000  - warna garis border. Tukar kepada warna yang korang suka. Rujuk kod warna di bawah
FF3399 - warna bayang-bayang pada kotak. Tukar kepada warna yang korang suka. Rujuk kod warna di bawah
( untuk paparan lebih besar, klik di sini)


5) Klik preview, jika tiada error, klik save template.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Efek senget apabila cursor menyentuh blockquote

Preview:

Tutorial kali ini akan menunjukkan cara macam mana nak buat efek senget pada Bloquote 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 blockquote, sila rujuk tutorial ini atau untuk pengguna simple template, rujuk tutorial ini.

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
.post blockquote {
atau kod di bawah
blockquote:hover {

4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi
blockquote:hover {
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
-webkit-transform: skew(1.deg,1.5deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg); }
border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
}

5) Klik preview, jika tiada error, klik save template.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Tambah ruang add a gadget atas header

Sebelum:


Selepas:
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:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
<b:section class='header'

4) Kemudian sebaris dengan kod <b:section class='header' tu, korang akan nampak kod yang macam ni kan :
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

5) Ok, sekarang delete kod di atas, dan gantikan dengan kod di bawah:
<b:section class='header' id='header1' preferred='yes'>

6) Then klik preview dan jika tiada error klik save template.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Remove follower dari blog

Adakalanya korang tak suka pada sesetengah follower yang mungkin mengganggu "ketenteraman" emosi korang ^_^ . Ok, ada cara untuk remove follower tersebut.

Jom kita mulakan :



Caranya:

1) Sign in akaun blogger

2) Dashboard >> kemudian klik pada follower:


2) Klik pada gambar follower yang korang nak remove:


3) Klik "Block this user"


4) Klik button Block



 5) Selesai! :)



Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

Copyright© All Rights Reserved Jombinabelog.blogspot.com