Followers

29 Disember 2011

14 Disember 2011

10 Disember 2011

Disember 10, 2011 - No comments

Buat Biodata Penulis Untuk Blog Multi Author


Selalunya kalau kat wordpress,dekat bawah pos ada tentang info penulis kan.Sebelum ni aku ada pos tentang cara nak buat About Author bagi setiap pos.Tapi itu lebih sesuai untuk blog perseorangan

Ok,kali ini adalah cara yang bagus bagi blog berbentuk multi author.Iaitu seperti mana dapat dilihat diblog ini,setiap pos oleh author yang berlainan akan automatik mempunyai biodata penulis yang berlainan.Sila lihat pada menu author yang terdapat di blog ini,klik dan lihat biodata yang terdapat dibawah pos mereka.

Ok,sebelum menjadikan about author untuk pos automatik,kita kenalah buat sikit kerja.

Cara pemasangan

1.Pergi ke Design->Edit HTML dan tandakan Expand Widget Templates kemudian remove kan kod ini

*Kalau tak nak remove kan pun boleh


<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>


2.Seterusnya cari baris ni:

<div class='post-footer'>

3.Dan pastekan kod ini dibawah kod merah tadi


<div class='acercadelautor'><b:if cond='data:post.author == &quot;Autor 1&quot;'><img border='0' src='URL avatar 1' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>BIODATA</span> <strong><data:post.author/></strong>
<p>Biodata penulis pertama.</p>
</b:if>



<b:if cond='data:post.author == &quot;Autor 2&quot;'><img border='0' src='URL avatar 2' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>BIODATA</span> <strong><data:post.author/></strong><p>Biodata penulis kedua</p>
</b:if>
</div>


*Tukarkan url Avatar dengan gambar yang korang suka
*Tukar Autor 1 dan Autor 2 kepaada nama autor yang terdapat di blog korang(harus sama,kalau semua huruf besar mesti ikut)
*Tukarkan biodata penulis dan BIODATA kepada perkataan yang korang suka.

4.Cari kod ]]></b:skin>

Pastekan kod dibawah diatas/sebelum kod ]]></b:skin>(ini untuk mencorakkan kotak biodata)


.acercadelautor {
background:#EFFBFB;
border:1px solid #ccc;
letter-spacing:normal;
color:#424242;
text-transform:none;
font-size:12px;
padding:5px;
margin:10px 0 10px 0;
}
.acercadelautor strong {
color:#1C1C1C;
font-weight:bold;
font-size:13px;
padding-left:5px;
}


5.Save dan lihat hasilnya.Pos oleh author yang berlainan akan automatik ada info yang berlainan yang telah ditetapkan di bawah pos.

*Dan kalau nak tambah lagi author 3,4,5 cuma perlu tambah kod seperti ini sebelum kod </div> di langkah 3


<b:if cond='data:post.author == &quot;Autor 3&quot;'><img border='0' src='URL avatar 3' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>BIODATA</span> <strong><data:post.author/></strong><p>Biodata penulis ketiga</p>
</b:if>

Disember 10, 2011 - 1 comment

Cara Buat Pos Yang Dilindungi Password


Password untuk demo:Aidea;

Cara membuatnya:

Pergi ke Blogger > Design > Edit HTML
*Sila Backup template

Cari kod ]]></b:skin>

Dan dibawah kod ]]></b:skin>,pastekan kod ini:


<!--PASSWORD PROTECT CODE --> <script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>


Save template.

Cara membuat pos dengan password

1.Semasa di Edit HTML mode,copy keseluruhan kod(Iaitu pos yang sedang korang tulis/draft,jgn publish,ini hanya sekadar untuk draft)

2.Pergi ke Encryption Page

3.Masukkan password dekat key box


4.Seterusnya pastekan kod yang di copy dari Blogger Editor(Iaitu Pos yang sedang korang tulis) ke dalam Plain Text Box

5.Tekan Butang Encrypt dibawah Plain Text box

4.Copy kod dari HTML CODE box


5.Sekarang pergi semula ke Blogger Editor.Buat pos baru.Beri pos korang tajuk dan paste HTML code semasa langkah 4 didalam blogger Editor di Edit HTML Mode.Korang boleh tulis perkataan lain berbanding-> Show Encrypted text tapi buat semua perubahan di Edit HTML mode sahaja.Tekan publish pos,sekiranya korang ada buat draft tadi bolehla didelete.

Disember 10, 2011 - No comments

Efek Hantu Pada Blog




Pergi ke layout page atau design-->Add a gadget-->Html Javascript.Pastekan kod


<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

//Configuracion

var numberOfGhosts = 5; /* Numero de fantasmas */
var ghostSpeed = 0.9; /* Velocidad */
var inTheFace = 5;
var setTimeOutSpeed = 50; /* Velocidad a la que desaparecen */

//Fin de la configuracion

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";

for (i = 0; i < numberOfGhosts; i++){
document.write('<div id="ghosts'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/TLUwy8cYCsI/AAAAAAAAAZ0/kWv1B3tlak4/s1600/ghost.gif" class="ghost" width="70"/></div>');
}

if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}

function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);

oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);

iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);

field = (h > w)?h:w;
}

function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = ghostSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}

function animate(){
for (i = 0; i < numberOfGhosts; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}

function init(){
win();
for (i = 0; i < numberOfGhosts; i++){
strs[i] = document.getElementById("ghosts"+(idx+i)).style;
rst(i);
}
animate();
}

if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.

</script>

<style>
.ghost {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
-khtml-opacity: 0.3;
}
html {
overflow-x:hidden;
}
</style>

09 Disember 2011

Disember 09, 2011 - No comments

Buat Gambar Header Bertukar Berdasarkan Label

CTH HEADER BERDASAR LABEL


Cara Membuatnya:

1.Log masuk ke blogger dashboard anda

2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html

Cari kod yang kelihatan seperti ini:


<b:widget id='Header1' locked='false' title='Tajuk Blog Anda (Pengatas)' type='Header'/>


3.Dibawah kod tersebut tambah kod yang sama,bezanya adalah pada id header iaitu Header2

<b:widget id='Header2' locked='false' title='Tajuk Blog Anda (Pengatas)' type='Header'/>

4.Save dan pergi ke page element.Semasa di page element,korang akan dapati header korang akan ada dua,letakkan gambar kat header yang baru korang tambah disitu.

5.Save dan pergi semula ke Edit HTML dan cari kod </head>

6.*Kod dibawah ini adalah untuk menetapkan header utama blog disembunyikan dalam tag Pastekan kod dibawah sebelum/diatas kod </head>


<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
#Header1 {
display: none;
}
</style>
</b:if>
</b:if>
</b:if>
</b:if>


7.Akhir sekali,dibawah kod yang ditambah tadi,pastekan kod ini


<b:if cond='data:blog.url != &quot;URL label blog&quot;'>
<style type='text/css'>
#Header2 {
display: none;
}
</style>
</b:if>


*Url label blog adalah untuk korang letak url label yang korang nak.

8.Save dan lihat hasilnya.

9.Dan kalau nak buat header3 atau 4,semasa di langkah 3,ikut cara yang sama dan tambah header3 atau 4.

10.Dan seterusnya ikut langkah 7,seperti contoh ini:


<b:if cond='data:blog.url != &quot;URL label blog&quot;'>
<style type='text/css'>
#Header2 {
display: none;
}
</style>
</b:if>

<b:if cond='data:blog.url != &quot;URL label blog&quot;'>
<style type='text/css'>
#Header3 {
display: none;
}
</style>
</b:if>

<b:if cond='data:blog.url != &quot;URL label blog&quot;'>
<style type='text/css'>
#Header4 {
display: none;
}
</style>
</b:if>


Ok,itu sahaja,harap korang suka dan faham dengan tutorial ni.

08 Disember 2011

Disember 08, 2011 - No comments

Sliding Menu Panel


Penerangan:Apabila klik pada buka menu,sebuah menu akan dibuka.Ia membuatkan blog kelihatan lebih kemas dan menjimatkan ruang sekirannya korang ada banyak benda nak letak.

Menu ini adalah dibuat menggunakan slider jQuery.

Cara Pemasangan

1.Log masuk ke blogger dashboard anda

2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html

Cari kod
<head>

3.Pastekan kod dibawah selepas kod <head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Abrir menú&quot; to &quot;Cerrar menú&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>



3.Cari kod
]]></b:skin>

Pastekan kod dibawah sebelum/diatas kod ]]></b:skin> tersebut


/* Top Sliding Menu
----------------------------------------------- */

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjUtg1alI/AAAAAAAAAr4/irK6KNxvCHg/s1600/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(http://1.bp.blogspot.com/_dsEG33PDaHw/TUYjU8z7FWI/AAAAAAAAAr8/di0CWuFKxfo/s1600/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjVrN4yNI/AAAAAAAAAsE/4YOHQURWUHM/s1600/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TUYjVVpFpYI/AAAAAAAAAsA/EKlKa2rlic0/s1600/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-repeat left -19px;}

#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px; /* Alto del slide */
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #FFFFFF;
text-align: center;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjTGOeO8I/AAAAAAAAArs/XQSFRPBtS3s/s1600/bt_register.png) no-repeat 0 0;
}

#slide-menu {
width: 160px;
float: left;
}
#slide-menu2 {
width: 160px;
float: right;
}
#slide-menu ul, #slide-menu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#slide-menu ul li a, #slide-menu2 ul li a {
background:url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjTjBCpAI/AAAAAAAAArw/rJgbMGEyjMU/s1600/bullet_blue.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#slide-menu li, #slide-menu2 li {display: inline;}
#slide-menu a, #slide-menu2 a{
color: #FFFFFF;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {
color: #999;
text-decoration: none;
}
#slide-menu a:hover, #slide-menu2 a:hover {
color: #FFFFFF;
}


4.Cari kod
<body>

Pastekan kod dibawah selepas kod <body>


<!-- Inicio top sliding menu -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>

<!-- Primera sección -->
<div class='left' style='width:240px !important'>

<h4>Hai Selamat Datang!</h4>
<p>Follow melalui social network atau subsribe melalui feed</p>

<div align='center'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='http://4.bp.blogspot.com/_dsEG33PDaHw/TUYmsIuunqI/AAAAAAAAAsc/KUuPv94Lwso/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='http://3.bp.blogspot.com/_dsEG33PDaHw/TUYmrpIzmHI/AAAAAAAAAsY/sG1ZCEfxvNY/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='http://2.bp.blogspot.com/_dsEG33PDaHw/TUYmseCsXMI/AAAAAAAAAsg/RN_5cSwxE8M/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a>
</div>

</div>

<!-- Segunda sección -->
<div class='left' style='width:320px !important'>
<h4>Kategori</h4>

<div id='slide-menu'>
<ul>
<li><a href='URL link'>Menu item 1</a></li>
<li><a href='URL link'>Menu item 2</a></li>
<li><a href='URL link'>Menu item 3</a></li>
<li><a href='URL link'>Menu item 4</a></li>
<li><a href='URL link'>Menu item 5</a></li>
<li><a href='URL link'>Menu item 6</a></li>
<li><a href='URL link'>Menu item 7</a></li>
<li><a href='URL link'>Menu item 8</a></li>
</ul>
</div>

<div id='slide-menu2'>
<ul>
<li><a href='URL link'>Menu item 1</a></li>
<li><a href='URL link'>Menu item 2</a></li>
<li><a href='URL link'>Menu item 3</a></li>
<li><a href='URL link'>Menu item 4</a></li>
<li><a href='URL link'>Menu item 5</a></li>
<li><a href='URL link'>Menu item 6</a></li>
<li><a href='URL link'>Menu item 7</a></li>
<li><a href='URL link'>Menu item 8</a></li>
</ul>
</div>
</div>


<!-- Tercera sección -->
<div class='left right'>

<h4>Subscribe blog!</h4>
<p>Subsribe</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Nombre-del-Feed' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Nombre-del-Feed'/>
<input name='loc' type='hidden' value='es_ES'/>
<input class='bt_register' type='submit' value='Suscribe'/></form>

</div>
</div>
</div>


<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Selamat Datang!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Buka menú</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup menú</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
<!-- Fin top sliding menu -->


Save dan lihat hasilnya.

Sekiranya korang guna Blogger Template Designer korang paste kod selepas:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Disember 08, 2011 - No comments

Heading Tag Dengan Efek Bayang dan Mouse Hover

Snapshot



Cara Pemasangan

1.Log masuk ke blogger dashboard anda

2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html

3.Seterusnya cari kod ]]></b:skin>

Pastekan kod dibawah sebelum/diatas kod ]]></b:skin>


/*----Cool Heading Tag----*/


h3{
font-family:veranda !important;
font-style:italic !important;

}
.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;


}

.post h3:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}


Nota:
  • Buang sebarang kod dalam template yang kelihatan seperti .post h3
  • Kod hijau boleh ditukar


Cara Menggunakan Heading Tag Dalam Pos

  • Buat pos baru macam biasa
  • Gunakan kod ini bila korang nak letak headline:
<h3>Tulis Teks Headline Kat Sini</h3>

07 Disember 2011

Disember 07, 2011 - No comments

Buat Gambar Yang Boleh Digerakkan Dekat Blog



Gerakkan gambar naruto dekat demo blog itu

1.Log masuk ke blogger dashboard anda

2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html

Cari kod
</head>

3.Pastekan kod dibawah sebelum/diatas kod </head>


<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://ciudad-blogger.googlecode.com/files/jquery.easydrag.js' type='text/javascript'/>


4.Save template.

5.Pergi ke layout page atau design-->Add a gadget-->Html Javascript
Untuk aktifkan gambar yang boleh digerakkan,kodnya adalah seperti ini:


<img id="easydrag1" src="URL gambar" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>


Ini pula sekiranya jika kita ingin letakkan link ke gambar:


<img id="easydrag1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL link')" src="URL gambar" /><script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>

01 Disember 2011

Disember 01, 2011 - No comments

Komik Impian

Dalam proses untuk menyiapkan sebuah komik untuk blog 100Pelukis.Harap2 siap.Ini hanya untuk kepuasan sendiri.Aku harap boleh dapat pandangan/idea korang.Aku berimpian nak buat komik pasal blogger.

Lukisan awal dengan sedikit idea dalam kepala.Aku nak bagi tajuk My Life As A Blogger.Aku guna ms paint seratus peratus,jadi agak panjangla masa nak siapkan,nak cari idea lagi huhu.Aku tulis komik impian sebab impian tak selalunya jadi kenyataan....nak2 kalau malas tu datang haha tapi aku cuba=)Tolong bagi aku idea korang yang menarik untuk dilukis.