Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts


Tutorial : Tukar Font Comel Untuk Blog

by:   7 comments    
categories: 

maaf untuk memudahkan korang 
sila tekan CTRL + C serentak untuk copy kerana right click disablekan..

DASHBOARD > DESIGN > EDIT HTML

cari kod <head>

copy kod ini dan paste dibawah  <head>  tadi

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font yang dipilih"/>

seperti ini

<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Font yang dipilih "/> 

Tukar font yang dipilih tadi kepada nama tulisan yang anda pilih

contoh :
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Architects Daughter"/>
siap?

CTRL +  F  code font-family atau font..
kan tepi dia ada nama font dalam blog korangkan..so korang ganti jelah macam di bawah nie..


font : normal normal 12px  Century Gothic;

Century Gothic  kepada Architects Daughter

preview dulu kalau takde masalah barulah save okay..

kat mane nak cari tulisan yang comel dan cantik?? kat sini  1001 Free Fonts atau dafont.com..

kalau tak paham boleh tanya okay..selamat mencuba..


Tutorial : Header Hover Ke bawah Dan Ghaib

by:   1 comment    
categories: 

.Dashboard > Design > Edit HTML > Tick Expand Widget Template

.Tekan Ctrl+F, cari code ini :

h1.title {

.Copy code bawah ini , and paste ATAS code yang korang cari tadi :

#header:hover{
padding-top:40px;
-webkit-transition-duration: .8s;
opacity: 0.1;
}

.Preview dulu,kalau tiada error.Terus SAVE!


Nota kaki : jika sebelum ini korang ada guna code untuk header hover yg laen , sila buang code lama tersebut kemudian baru guna code yang baru ini.


Tutorial : Tutorial Auto Refresh Dalam Blog

by:   No comments    
categories: 


hai selamat malam..memandangkan line broadband agak bagus so rasa nak share 1 lagi tutorial..kalau korang perasan yang blog aku nie akan refresh sendiri setiap 4 minit..manelah tau line tak okay ke nanti kita tak payah susah-susah nak refesh..blog aku nie refresh sendiri je..

hahaa macamane nak buat..meh sini aku tunjukkan..

mula-mula macam biasa login blog korang..

kemudian klik Design > Edit HTML

cari kode </head>

kemudian letakkan kode dibawah nie bawah code </head>

<meta content='300' http-equiv='refresh'/>

preview dulu..kalau takde masalah baru lah save...



ABC boleh tukar ke berapa saat korang nak..macam blog aku 240 je..


Tutorial : Gerakkan Title Blog

by:   2 comments    
categories: 
Dashboard > Design > Add Gadget > Html/JavaScript

Copy paste code dibawah dalam ruangan Html / JavaScript


<script language=javascript>
msg = "ayat korang lah kan takkan ayat aku pulak hehehe ";
msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>


Klik save sudah...


Tutorial : Iklan Churp-churp Tergantung Di Tepi Blog

by:   No comments    
categories: 


.log in>add gadget>html/java script.

.copy and paste code kat bawah ney di html/java script ..



<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:140px; left:-12px;'>

<a class='linkopacity' href="URL CHURP-CHURP/SAYS.COM/DLL" imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='rahsia'><img border="0" src="URL GAMBAR IKLAN" ;width=50px height=50px /></a><br /> 

<a class='linkopacity' href="URL CHURP-CHURP/SAYS.COM/DLL" imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='rahsia'><img border="0" src="URL GAMBAR IKLAN" ;width=50px height=50px /></a><br />  

<<a class='linkopacity' href="URL CHURP-CHURP/SAYS.COM/DLL" imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='rahsia'><img border="0" src="URL GAMBAR IKLAN" ;width=50px height=50px /></a><br /> 

<a class='linkopacity' href="URL CHURP-CHURP/SAYS.COM/DLL" imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='rahsia'><img border="0" src="URL GAMBAR IKLAN" ;width=50px height=50px /></a><br /> 
</div>


.tekan save ..dan siap!!


macam mane nak amek URL CHURP-CHURP/SAYS.COM/DLL nie?

mula-mula klik sini lepas tue klik Reward..nampak tak?


done klik Reward  lepas tue ikut step macam gambar di bawah nie..

  klik yang pulak lepas tue copy code yang ada dalam tue..


gantikan code tersebut dekat URL CHURP-CHURP/SAYS.COM/DLL ini..


kalau URL GAMBAR IKLAN pulak..klik Reward jugak lepas tue nampak gambar iklan tue kan..

okay lepas tue sila ikut step seperti dibawah ini ea..




done copy?? okay gantikan URL GAMBAR IKLAN dengan code yang korang copy tadi...

preview dulu kalau dah jadi save terus..





Tutorial : Letak Facebook Share Button Setiap Post

by:   1 comment    
categories: 
  • Dashboard>Design>Edit html>Tick Expand Widget Templates

  • cari  code nie : 

<div class='post-body entry-content'>

  • copy code nie :

<div style='float:right;padding:4px;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow'
type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'
type='text/javascript'/>
</div>


  • paste kan selepas <div class='post-body entry-content'> tau..

  • preview & save kalau tak de masalah..


Tutorial : Letak Ayat Di Bawah Post

by:   No comments    
categories: 



.Dashboard > Design > Edit HTML >   Expand Widget Templates

.Search  code <data:post.body/>

.Copy code nie, tekan CTRL + C untuk copy dan CTRL + V untuk paste bawah code <data:post.body/>


<hr/><center><b>  Thanks for reading this. LIKE it if you like. Do comment too♥  </b></center><hr/>


Thanks for reading this. LIKE it if you like. Do comment too♥ boleh tukar ayat korang..

lepas tue preview kalau takde pape masalah baru save..


Tutorial : Scrollbar berbackground

by:   No comments    
categories: 


Tutorial ini akan menjadi sekiranya korang menggunakan Google Chrome selain dari itu tidak akan kelihatan scrollbar korang yang kiut miut itu okay..


.Dashboard < Design < Edit html < Expand Widget Templates

.Ctrl + f atau f3 code

/* Header


.Jumpa?dah jumpa boley lah copy paste code dibawah nie di atas code /* Header

::-webkit-scrollbar {
height:12px;
width: 13px;
background: #FAC1F3;
}
::-webkit-scrollbar-thumb {
background: url(  Url background korang);
-moz-border-radius: 10px;
border-radius: 10px;
}

.Nanti dah copy code tue akan jadi macam nie.


::-webkit-scrollbar {
height:12px;
width: 13px;
background: #FAC1F3;
}
::-webkit-scrollbar-thumb {
background: url(   Url background korang );
-moz-border-radius: 10px;
border-radius: 10px;
}
/* Header
----------------------------------------------- */

.Lepas tue preview dulu tau..kalau takde maslah boleh lah save..


ABC boleh di tukar di sini HTML CODE COLOR


Tutorial : Like Button Facebook Dalam Setiap Post

by:   3 comments    
categories: 
Tutorial nie direquest sorang adik mirza  nie kat tagboard aku..memandangkan aku sekarang memang takde kerja nak buat so aku pun buat lah tutorial nie..

okay mula-mula pegi dekat Dashboard<Design<Edit Html<klik Expand Widget Templates..

lepas tue ctrl + F atau f3 untuk cari code dibawah nie.

<data:post.body/>

dah jumpa??okay cantek sangat lah tue..

lepas tue copy paste code dibawah nie kat atas atau bawah code <data:post.body/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>  

preview dulu tau..kalau dah takde masalah baru lah save..




Tutorial : Letak Comment dalam Blogskin

by:   3 comments    
categories: 


.Dashboard>Edit HTML

search code <Blogger>

copy code di bawah dan paste di bawah <Blogger>


<a href="<$BlogItemCommentCreategt;"<$BlogItemCommentFormOnClickgt;> <span style="font-size: 9.5pt; color: #7FC2C7; background-color:#f9f9f9; padding: 4px; text-transform: uppercase;"><font size="2"><font color="#7FC2C7">♥♥</font></font>
<$BlogItemCommentCountgt; SAY SOMETHING ♥ </span></a></BlogItemCommentsEnabled>


preview kalau takde pape masalah baru save k..


Tutorial : Letak Button Follow & Dashboard [Blogskin]

by:   7 comments    
categories: 
.Dashboard>Edit HTML

search code </body>

copy code di bawah dan paste di bawah </body>


<div style="top:0px; right:0px; position:fixed;">
<a style="background: #ffffff; font-size:8pt; text-align:center; display:inline-block; width:100px; padding:6px;  -moz-border-radius-bottomright: 30px 15px;  border-bottom-right-radius: 30px 15px;  border: 2px solid #F5A9D0;"
href="http://www.blogger.com/follow-blog.g?blogID=IDblog korang" target="_blank">FOLLOW+</a> <a style="background: #ffffff; font-size:8pt; text-align:center; display:inline-block; width:100px; padding:6px;  -moz-border-radius-bottomright: 30px 15px;  border-bottom-right-radius: 30px 15px;  border: 2px solid #F5A9D0;"
href="http://www.blogger.com/home" target="_blank">DASHBOARD♥</a></div>


preview kalau takde pape masalah baru save k..


Tutorial : Top Button

by:   No comments    
categories: 
tutorial paling senang nak buat..so ape lagi try lah k..


.log in>add gadget>html/java script.

.copy and paste code kat bawah ney di html/java script ..

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Top"><img src="URL ICON"
/></a>

.tekan save ..dan siap!!


Tutorial : Letak Facebook Like Button Dalam Post [Blogskin]

by:   3 comments    
categories: 
Dulu penah guna blogskin,,so sekarang nie na share macam mana nak letak like button dalam blogskin punya template..

.dashboard => Template
.cari code ini :

</blogger>

lepas tue copy code bawah nie..letak atas code </blogger> nie tau ..

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

tolong preview dulu kalau tak de masalah baru save k.


Tutorial : Date Header Luar Body Blog

by:   No comments    
categories: 


bagi pengguna Washed denim macam nie..

.Dashbord > Design > Edit HTML

.Ctrl F and search code .date-header {


akan jumpa macam ni :

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
Okay,delete code tu semua dan gantikan dengan yang bawah ni :-

.date-header {
height:40px;
margin:-15px -20px -500px -115px;
padding: 30px 300px 105px 10px;
background: url(Url Gambar Anda) no-repeat;
position:absolute !important; position:relative; float:right;
text-align: center;
font: normal normal 12px Century Gothic;
color: #4D4D4D;
}
Preview dan save template

bagi pengguna Template lak cam nie :


.Dashbord > Design > Edit HTML
.Ctrl F dan search code h2.date-header {


Copy dan paste code ni di bawah h2.date-header {

height:40px;
margin:-15px -20px -500px -115px;
padding: 30px 300px 105px 10px;
background: url(Url Gambar Anda) no-repeat;
position:absolute !important; position:relative; float:right;
text-align: center;


Code full dia macamkat bawah nie :
h2.date-header {
height:40px;
margin:-15px -20px -500px -115px;
padding: 30px 300px 105px 10px;
background: url(Url Gambar Anda) no-repeat;
position:absolute !important; position:relative; float:right;
text-align: center;
font: normal normal 12px Century Gothic;
color: #4D4D4D;
.Preview dan save template .


Nota
Gantikan Url gambar korang tu dengan gambar korang.
Jenis font dan warna font tu boleh tukar ikut korang.


Tutorial : Gambar Jadi Melengkung ( Entry & Sidebar )

by:   1 comment    
categories: 
Pergi ke Dashboard - Design - Edit HTML
Ctrl+F , cari code dekat bawah nie.
/* Header
Copy paste code nie ATAS code ayat korang cari tadi
img { filter: alpha(opacity=100); opacity: 6; }
img:hover { filter: alpha(opacity=75); opacity: 7; -webkit-transition: 0.5s; }
img {
-webkit-transition: 0.5s;
border-radius: 12px;}

nanti dia akan jadi macam ni :

img { filter: alpha(opacity=100); opacity: 6; }
img:hover { filter: alpha(opacity=75); opacity: 7; -webkit-transition: 0.5s; }
img {
-webkit-transition: 0.5s;
border-radius: 15px;}
/* Header
----------------------------------------------- */



lepas tue preview kalau tak de masalah boleh lah save.


Tutorial : Buang navigation Bar Template Denim

by:   1 comment    
categories: 
.dashboard>design>Edit HTML
.cari code di bawah ni...ctrl+f atau f3

/* Variable definitions
.dah jumpa copy code di bawah ni dan paste atas code tadi..ctrl+c untuk copy

#navbar-iframe {
display: none !important;
}

.nanti orang punya code akan jadi macam ni

-----------------------------------------------
Blogger Template Style
Name: Washed Denim
Designer: Darren Delaye
URL: www.DarrenDelaye.com
Date: 11 Jul 2006
-----------------------------------------------
*/
#navbar-iframe { display: none !important; }
/* Variable definitions
====================

5.dah jadi macam ni..kamu preview dulu..kalau dah puas hati save saja..


Tutorial : Recent Post Berbackground

by:   No comments    
categories: 


.Dashboard>Design>Page Elements>Add a Gadget

.Klik HTML/Javascript

.Kemudian copypaste code di bawah ni dalam HTML/Javascript  tu.


<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:270px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background: url(" URL BACKGROUND");
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-left: 2px solid #FAC1F3;;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background: url("URL BACKGROUND");
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-left: 1px solid #FAC1F3;;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 30;
home_page = "URL BLOG korang";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div></center>


ABC boleh tukar di sini



Tutorial : Scroll Box Untuk Blog Archive

by:   No comments    
categories: 
.Dashboard > design > edit html > Expand widget templates.

.Cari ctrl + f <div id='ArchiveList'>

.Jumpa code nie kan <div class='widget-content'> kat atas code Achivelist tadi kan..

.Gantikan Code yang korang jumpa tue tadi <div class='widget-content'> dengan <div class='widget-content' style='overflow:auto; height:200px'> 

.Save

ABC boleh tukar mengikut kesesuaina blog korang k..


Tutorial :Calendar Blog Archieve Berbackground

by:   No comments    
categories: 
.Dashboard>Design>Add a gadget>Html/Java script


Copy code kat bawah ni then pastekan dekat Html/Java scipt tadi :

<div id="blogCalendar"></div>
<script type="text/javascript" src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js"></script>
<script type="text/javascript">
Calendar.base="URLBLOGKORANG";
Calendar.timeZone="+08:00";
Calendar.timeZoneCheck = true;
Calendar.drawTable();
</script>
<style>
#blogCalendar {
display:block;
text-algin:center;
border:3px double  #FFE4C4 ;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
width:90%;
background: url(URLIMG);
}
#CalendarCaption a {
text-decoration:none;
}
#CalendarCaption {
border-bottom: 3px solid  #FF1493 ; -moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
width:85%;
margin:auto;
}
#CalendarTable a {
font-weight:bold;
color:  #FFE4C4 ;
}
.Today {
background:  #FFE4C4 ;
font-weight:bold;
text-decoration:none;
}
#CalendarFooter {
font-weight:bold;
margin-top:5px;
margin-bottom:5px;
background:  #FFE4C4 ;
}
.yearInput {
color: #000000;
background:  #FF1493 ; }
.monthTable {
color: #000000;
background:  #FFE4C4 ;
}
</style></center>


Biru : Ganti dengan url blog korang.
Hijau : Ganti dengan url gambar kesukaan korang.
Merah : Boleh tukar code warna di SINI


Tutorial : Link Berpelangi

by:   No comments    
categories: 
.Dashboard > Design > Page Element > Add Gadget > Html/java script

.Ctrl + C untuk copy code di bawah dan paste kan .

<script src="http://fwzynn.googlepages.com/rainbow.user.js" type="text/javascript">
/***********************************************
* Script edited by zaidatulazni at http://zaidatulaznishamsuddin.blogspot.com/
* Please keep this notice intact
***********************************************/
</script>

.Save
Subscribe to: Posts (Atom)