Sunday

kotak mesej beranimasi

TUTORIAL FOR BLOG


Login ke Blogger
Dashboard  pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML 

<b:if cond='data:blog.pagetype == &quot;item&quot;'>
<style>
#info{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #B22222;
background-color: #F0E68C;
background-image: url('http://i208.photobucket.com/albums/bb138/robbie_9000/little%20stuff/icon_warning_32x.gif');
}
</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
});
$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});
</script>
<div id="info">
<a class="close" href="#close" style="float: right;"><img border="0" src="http://1.bp.blogspot.com/_rKG-ziTSNUQ/TL29UxFwn0I/AAAAAAAABz4/CN7abEjuuw0/s1600/close+message.png" /></a>
<center><b>Mesej:</b> - WELCOME TO MY SAJE SAJE BLOG.<br />Klik pangkah untuk memadam mesej</center></div>
</b:if>
...............

kod biru : url image anda
kod merah : mesej anda

then 'SAVE'
................................................

info :
meletak mesej di bawah tajuk post

Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template 

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

<div class='post-header-line-1'/>

dan paste kan kod tadi di bawah nya.


SELAMAT MENCUBA


cara meletak cute icon sebelah komen

TUTORIAL FOR BLOG


Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template 

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

<b:if cond='data:blog.pageType != &quot;item&quot;'>

tambah kod di bawah SELEPAS/ DI BAWAH kod tersebut

<img src='URL ICON ANDA SINI' style='border:0px'/>

then ' save template '
done

cara mendapat kan url icon anda

SELAMAT MENCUBA


buat link membesar apabila di sentuh

TUTORIAL FOR BLOG

penerangan : teks akan membesar apabila mouse menyentuh link tersebut

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

cari kod di bawah


a: hover {
color: $mainVisitedLinkColor;
text-decoration:none;
}


lebih mudah gunakan "Ctrl + F "
a: hover {

tambah kod berwarna merah ke dalam kod tersebut


a: hover {
color: $mainVisitedLinkColor;
text-decoration:none;
font-size: 150%
}

..........


kod yang berwarna merah boleh di ubah mengikut kehendak.
then ' save template '

SELAMAT MENCUBA
DONE


memasang fungsi read more

TUTORIAL FOR BLOG


Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template 

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

</head>

Pastekan kod dibawah ni DI ATAS/SEBELUM kod di atas

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://files.bloggerplugins.org/excerpt.js' type='text/javascript'/>

next 

Cari kod <data:post.body/> 

Gantikan kod <data:post.body/> dengan kod dibawah ni

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read More >></b></a></span>
</b:if>

then 'save template'

SELAMAT MENCUBA




meletak icon pada tajuk post

TUTORIAL FOR BLOG


Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template 

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

<b:if cond=" 'data.post.url' ">

anda akan melihat kod seperti ini

<b:if cond="'data:post.url'"><a href="'data:post.url'"><data:post.title/></a>

tambahkan kod di bawah di ANTARA kod 
<b:if cond="'data:post.url'"> dan <a href="'data:post.url'"><data:post.title/></a>


seperti ini :

<b:if cond="'data:post.url'">
<img src="'URL IMAGE/ICON ANDA'/" />
<a href="'data:post.url'"><data:post.title/></a>

.......

cara mendapatkan url image/icon

SELAMAT MENCUBA
DONE



Saturday

cara menghilangkan tarikh atau postdate

TUTORIAL FOR BLOG


Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template 

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

h2.date-header {

atau

.date-header {

tambahkan kod di bawah SELEPAS/DIBAWAH kod di atas

visibility: hidden;

contoh seperti di bawah

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}

Preview and then " Save Template "

SELAMAT MENCUBA



Friday

meletakkan background pada blockquote

TUTORIAL FOR BLOG






Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template 

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

.post blockquote {

anda akan nampak kod seperti ini
 .post blockquote {
margin:1em 20px;
}

gantikan kepada

post blockquote { 
background: url(URL BACKGROUND ANDA) ;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px dashed #000000;
margin:1em 20px;
}

Then , "Save"

........

cara mendapatkan url background/image

SELAMAT MENCUBA


top navigation menu like mine

TUTORIAL FOR BLOG


Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template 

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

]]></b:skin>
copy dan paste kod di bawah SEBELUM / DI ATAS kod di atas
/**************MENU HEADER*************************/
/*Credits: By Mohd Artarmizi (http://mymijie.blogspot.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/menub_bg.gif) repeat-x;
width: 945px;
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/menub_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{< color: #fff; background: url(http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}  
Next Step,
Save template anda dan pergi ke 
Dashboard, Layout >> Page Elements >>Dan pilih Add HTML/JavaScript
letakkan di atas kawasan catatan blog/blog post 
paste kan kod di bawah di dalam kotak HTML/JavaScript tersebut

<ul class='glossymenu'>
<li class='current'><a href='Masukkan Link Disini'><b>NAMA MENU</b></a></li>
<li><a href='Masukkan Link Disini'><b>NAMA MENU</b></a></li>
<li><a href='Masukkan Link Disini'><b>NAMA MENU</b></a></li>
</ul>

kod_url --> link kan dengan URL anda
Menu --> gantikan dengan nama yang anda mahu

"Preview and Save"
DONE 
SELAMAT MENCUBA

disable highlight text

TUTORIAL FOR BLOG

Login ke Blogger
Dashboard  pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML 

<script type="text/javascript">
/***********************************************
* Disable Text Selection script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}

//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>

Then "SAVE"
DONE

membuka link di new tab tanpa right klik

TUTORIAL FOR BLOG

Login ke Blogger
Dashboard  pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML 

 <!-- code for turning all non-blog links to new page links -->
    <script type="text/javascript" language="javascript">
       var arr = document.getElementsByTagName("a");  //get all links in the page
       for(var i = 0; i < arr.length; i++)
       {
          if(arr[i].href.indexOf("Your URL") < 0 //not links that are 'inside' blog
             && arr[i].href.indexOf("javascript:") < 0) //not javascript links
             arr[i].target = "_blank"; 
       }
    </script>

Then "SAVE"

SELAMAT MENCUBA


Wednesday

cara menukar background pada blog


TUTORIAL FOR BLOG



Login ke Blogger
Dashboard  pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML

<script type="text/javascript">
var background= new Array()
background="Masukkan URL background di sini"
document.write("<style>");
document.write("body {");
document.write(' background:url("' + background + '") repeat top center;');
document.write(" }");
document.write("</style>");
</script>

OK, Save.
DONE.

memasang Floating Button di sisi blog


TUTORIAL FOR BLOG




Login ke Blogger
Dashboard  pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:240px; left:-12px;'>

<a class='linkopacity' href='http://gengblogger.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="http://3.bp.blogspot.com/_LZtXSNcp76A/TB5XWecF0sI/AAAAAAAABHY/pPKlT79yKMA/s320/icongb.PNG" /></a><br />

<a class='linkopacity' href='http://facebook.com/akaun facebook anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://3.bp.blogspot.com/_LZtXSNcp76A/TBIPXEkOOEI/AAAAAAAABFQ/DAPJdek1QbQ/s320/facebook.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/akaun twitter anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://1.bp.blogspot.com/_LZtXSNcp76A/TBIPlDeEV5I/AAAAAAAABFw/5Z4co3O_jpU/s320/twitter.png" /></a><br />

<a class='linkopacity' href='http://maribinablog.blogspot.com/feed blog' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://3.bp.blogspot.com/_LZtXSNcp76A/TBIPaMfmxJI/AAAAAAAABFY/bPNaLBTwrhQ/s320/feedblogger.png" /></a><br />

<a class='linkopacity' href='http://feedburner.com/akaun feedburner anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="http://2.bp.blogspot.com/_LZtXSNcp76A/TBIPdJ0ZHsI/AAAAAAAABFg/i-CB_cBEzZM/s320/feedburner.png" /></a><br />

<a class='linkopacity' href='http://youtube.com/akaun youtube anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="http://2.bp.blogspot.com/_LZtXSNcp76A/TBIPnxEur8I/AAAAAAAABF4/edEB1NQCdGg/s320/youtube.png" /></a><br />

<a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="http://4.bp.blogspot.com/_LZtXSNcp76A/TBIPhuMVmKI/AAAAAAAABFo/6YC2J5UAXp0/s320/flickr.png" /></a><br />

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

info :
kod warna biru : url akaun anda
kod warna purple : url image icon

<div style='display:scroll; position:fixed; top:240px; left:-12px;'>
 tukar kedudukan ( left / right )
 saiz ( px )

Then " Save  "

OK, DONE.