S Y A Z W A N I T Y P I N G
Follow here


1 2 3 4 5 6
Tutorial : Save Image ON Sunday, October 13, 2013 AT 9:56 PM
Assalammualaikum , nampak tajuk tue ? Tutorial ni scha buat untuk kawan scha di twitter .Sapa tak tahu pun boleh jugak rujuk sini tiaww .Cara nak save image

 Mula mula korang buka image yang korang nak

  Right click di mouse dan akan keluar macam gambar di bawah .


Pilih save image as ,then keluar satu box tekan saja save . thats all done :)

Labels:


1Letter

Audioplay Music player ON Sunday, October 6, 2013 AT 8:37 PM

Assalammualaikum ,hai hello jum kita belajar cara nak dapatkan audioplay music player untuk bloggie .For sure benda ini ringan dan tidak memerlukan loading yang lama.Bentuk pun comel kecik aje.

Mula mula buka lama web ini laman sesawang  .Kedua rujuk gambar di bawah .Eh mana nak dapat url lagu? rujuk entry billy player tau :)


Mudahkan ? Dah siap letak di mana mana saja yang anda nak :)

Labels:


0Letter

Basic Code ON AT 4:50 PM


Assalammualaikum,.abaikan gambar di atas tatau nak letak apa dah :D.Okie hari ni kita belajar basic.Benda ni semua basic dalam HTML ,Tak kira lahh untuk template atau blogskin kedua-duanya sama :) Eh benda niyhh credit untuk afiqah ye.Tengok bebtul dah faham anda mampu buat layout sendiri.
  • position ( relative, fixed, absolute ) 
  • margin ( 35px 25px 25px 25px ) 
  • top ( 400px ) 
  • left ( 200px ) 
  • width ( 800px ) 
  • height ( 490px )
  • float ( left, center, right ) 
  • padding ( 35px 25px 25px 25px ) 
  • color ( transparent , black ) 
  • border-radius ( 35px 25px 25px 25px ) 
  • border ( 1px dashed #EEE ) 
  • z-index ( 2, 4, 6 ) 13. opacity ( 4, 6, 8 ) 
  • text-align ( left, center, right ) 
  • display (none, block, inline-block ) 
  • letter-spacing ( -2px ) 
  • word-spacing (-5px ) 
  • text-decoration ( none ) 
  •  font-weight ( normal, italic, underline ) 
  • line-height ( 9px ) 
  • font-family ( name font ) 
  • font-size ( 20px )

Labels:


0Letter

Tutorial : Billy Player ON Saturday, December 22, 2012 AT 4:53 PM
Assalamualaikum ,ni cara nak dapatkan billy player .



  • Dah dapat copy code .Kad mana ?rujuk gambar dibawah .
  • Paste dulu code tu dekat notepad or Microsoft words.
  • Amik code dari http://irondj hingga mp3


  • Then paste code tu dekat billy player tu
  • Tick autoplay 
  • Then generate code
  • Copy semua kod paste  kad mana hampa mau .


Labels:


0Letter

Tutorial : Scroll Bar berwarna ON AT 4:26 PM

Assalamualaikum ,ni code untuk webkit scrollbar means yang scroll belah kanan tu lahh ,buad jadik warna warni ,corak-corak bagai .

  • Paste dekat HTML tahu .kalau boleh atas </style>   
::-webkit-scrollbar {
width: 7px;
height: 10px;
background:#fff;}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #fff;border: 1px solid  #ffe0e1;}
  • warna biru tukar dengan warna yang nak tu untuk tapak dia .
  • warna purple tukar dengan warna yang nak untuk scrollbar .
  • warna hijau border scrollbar
  • siap save ,okiee .

Labels:


0Letter

Tutorial : Tukar Bullet kepada Icon Comel ON Friday, December 21, 2012 AT 11:16 PM

  • Dashboard > Design > Edit HTML 
  • Tekan Ctrl + f dan cari code ]]>/b:skin> atau </style>
  • Copy code dekat bawah ni 
li { list-style: url(URL ICON); }
  • Paste di atas code tadi 
  • Preview & save




Labels:


0Letter

Tutorials : Agree or Disagree ON AT 10:44 PM

Assalamualaikum ,hai ni code untuk agree disagree.

  • Dashboard > New Post > Edit HTML 
  • Copy code dekat bawah dan paste di ruangan Edit HTML
<center><img src="URL gambar" /><br></center>

<div style="text-align: left; padding-left: 20px; padding-right: 20px;">

<img src="URL ICON" /> Ayat  <br>

<img src="URL ICON" /> Ayat  <br>

<img src="URL ICON" /> Ayat  <br>

<img src="URL ICON" /> Ayat  <br>
<img src="URL ICON" /> Ayat  <br><br></div>
<center><a class="pager" onClick="document.getElementById('entry').innerHTML=document.getElementById('stuff').innerHTML"><a href="URL AGREE">Agree </a></a> or <a class="pager" onClick="document.getElementById('entry').innerHTML=document.getElementById('diary').innerHTML"><a href="URL DISAGREE">Disagree</a></a><br</center>

Labels:


0Letter

Tutorial : Letak Crusor Comel ON Tuesday, December 11, 2012 AT 3:18 PM


Assalamualaikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,mari belajar cara letak cursor untuk blogskin jugak .

1.Dashboard > Template > Edit HTML
2.Press Ctrl + c  serentak  dan cari code body {
3.Copy code ni
cursor: url(URL CURSORS)auto;
4.Paste di bawah anak-anak code selepas code body { . Contoh mcm bawah ni,mana pun boleh tak sejibik kod ta sama .


5.Preview & save
unggu : gantikan dgn url cursor

Labels:


0Letter

Tutorial : Tukar Title Blog ON AT 3:16 PM

Assalamualaikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,kami nak ajar cara nak tukar title bagi blogskin,title bloggie tau ?

1.Dashboard > Template > Edit HTML
2.Press Crtl + f , cari code ni <title>
3.Tapi korg nmpak code dia mcm ni kn
<title>BarbieBiru </title>
4.Now delete ayat ayng tengah itu dia jadi macam ni <title>Title blog</title>
5.Gantikan dengan apa-apa tajuk yang anda nakk
6.Preview & save

  • unggu: Gantikan dengan tajuk.

Labels:


0Letter

Tutorial : Favicon Blogskin ON AT 3:15 PM

Assalamualaikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,kami nak ajar cara nak letak favicon bagi blogskin .

1.Dashboard > Template > Edit HTML
2.Tekan Ctrl + f. cari code ni </title>
3.Copy code dekat bawah ni
<link rel="shortcut icon" href="URL FAVICON" />
5.Paste dekat bawah code </title>
6.Preview & save

Labels:


0Letter

Tutorial :Cara tukar background ON AT 3:05 PM


Assalamualaikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,cara nak tukar background bagi blogskin dan template designer


Classic Template/Blogskin users  
  1. Dashboard > Template
  2. Tekan Ctrl +f dan cari code body {
Template Designer Users
  1.  Dashboard > Design > Edit HTML
  2.  Tekan Ctrl+f dan cari code body {
  3.  Sekarang copy cari code dekat bawah ni .
background: url(URL BACKGROUND);
4. So, yang dah ada code tu gantikan macam dalam kurungan tu yang lama dengan yang baru ,yang tadak amik semua code tadi paste .
5. Preview & save

Labels:


0Letter

Tutorial : Make your own Template ON AT 2:22 PM
Assalamualaikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,mari belajar cara buat blogskin sendiri .

1. Bagi yang belum ubah template designer ke classic template/blogskin ,pergi sini --> D O O R
2. Copy code dibawah ini and paste di atas sekali ,ni kira opening lahh .
<html>
<head>
<center><img src="URL HEADER"></img></center>
<title> Title Blog </title>
<style type="text/css">
     [CSS CODES]
</style>
<body>
     [CONTENT (SCRIPT)]
</body></html></head>
  • Biru: URL header
  • Unggu: tajuk blog korang

3. Now kita start dengan bahagian CSS dulu
untuk body
body{
background: url(URL BACKGROUND);
font: 12px Century Gothic;
cursor: crosshair;
}
  • biru: URL background
  • unggu: jenis font

untuk content 
#content{
width: 800px;
background:#ffffff;
color: #000000;
font: 11px Century Gothic;
top: 200px;
left: 100px;
position: absolute;
} 
  • ungu: Lebar post body
  • biru: warna font

untuk link & hover
a:link, a:visited {
color:#C8DEE5;
text-decoration:none;
cursor: crosshair;
}
a:hover {
cursor: crosshair;
color: #B1E2F2;
}
  • merah: warna link

untuk blockquote & hover
blockquote {
background: #D0C8C8;
color: #ffffff;
padding: 3px;
-webkit-transition: 1.0s;
}
 blockquote:hover {
background: transparent;
padding: 3px;
color: #000000;
-webkit-transition: 1.0s;
}
untuk post title & date
.post-title {
color:#000000;
font-size:16px;
padding:3px;
border-bottom: 1px solid #000000;
text-align: left;
-webkit-transition: 0.7s;
}
 .date {
color: #000000;
font-size:10px;
margin-bottom:2em;
text-transform:uppercase;
}
  • biru: warna font
  • unggu: saiz font
  • oren: ketebalan border
  • pink: solid/ dotted/ dashed
  • merah: warna border

4. Dah habis pasal code basicdi bahagian CSS. Dan, sekarang untuk bahagian SCRIPT pulak. Letak dekat bahagian [CONTENT (SCRIPT)] .
<div id="content" style="display: none;">
<blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$><br><br>
</blogger>
</div>

5. Okie done siap ,u just made a template .Yang lain edit sendri tauu .
Code tue akan jadi macam nih.

<html><head><center><img src="URL HEADER"></img></center>
<title>Title Blog</title>
<style type="text/css">body{background: url(URL BACKGROUND);
font: 12px Century Gothic;
cursor: crosshair;
}#content{width: 800px;
background:#ffffff;
color: #000000;
font: 11px Century Gothic;
top: 200px;left: 100px;position: absolute;}a:link, a:visited {color:#C8DEE5;
text-decoration:none;cursor: crosshair;
}a:hover {cursor: crosshair;
color: #B1E2F2;
}</style><body>     <div id="content" style="display: none;"><blogger><div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div><$blogitembody$><br><br></blogger></div></body></html></head>




Labels:


0Letter

Tutorial : Image Hover ON AT 1:48 PM

Assalamualaikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,image hover tu apa ?okie cuba halakan cursor dekat image di atas tue ,taraaa ia betukar kan ?so itulah image hover ,image hover ada banyak patter zoom lah ,senget lahh ,so buat ikut step by step .

Classic Template/Blogskin users  
  1. Dashboard > Template
  2. Tekan Ctrl +f dan cari code </style> atau <style>
  3. Padam Semua kod img {  and img:hover{
Template Designer Users
  1.  Dashboard > Design > Edit HTML > Tick Expand Widget Templates
  2.  Tekan Ctrl+f dan cari code  /* Header
  3.  Padam Semua kod img {  and img:hover{
  4.  Sekarang copy code dekat bawah ni
Sini kami bagi banyak pilihan kod ,ada untuk terang ,ada menyeget ,but pilih satu sahaja .
/*------ IMAGE ANIMATION------*/
img, a img { border: 0px;  opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }
img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }
Gambar jadi melengkung
img {
border-radius:10px;
opacity:0.6;
-webkit-transition-duration:2.5s;
}
img:hover{
border-radius:30px;
opacity:10.8;
-webkit-transition-duration:2.5s;
}
img {
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
img {
border-radius:10px;
border:none;
}
img:hover {
filter:Alpha(Opacity=50,FinishOpacity=0,Style=0);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
padding-left: 160px;
-webkit-transition: 1.5s;
-webkit-transform: rotate(6deg);
}
/*------ IMAGE ANIMATION------*/
img, a img {
filter: none;
-webkit-filter: grayscale(0);}
.photo img {
opacity:1;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}
img:hover, a:hover img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}                             
5.  Lepas tu paste di atas code </style> or  /* Header
6. Preview dan save

Labels:


0Letter

Tutorial : Header Berpusing ON Wednesday, May 30, 2012 AT 11:45 PM

Assalammualaikum , spin macam mana ? macam niyy PREVIEW
  • Dashboard > Design > Edit HTML
  • CTRL+F cari kod
 h1.title {
  • Pastekan kod bawah ni atas kod tadik
#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}

Labels:


0Letter

Tutorial : Remove Powered By Blogger ON AT 11:40 PM


  • First go to your Dashboard > Design > Edit HTML [tick expand widget]> ctrl + F and cari kod niey :
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
  • Okie perkataan true tukaq pie false then save .okie done ,but belum habis .
  • Now pergi dashboard > design > cari ATTRIBUTION .
  • Da jumpak tekan edit ,then bila taraaa pop up keluaq tekan remove .Tada dah habis .


Labels:


0Letter

Tutorial : Code Border ON AT 11:32 PM

Assalamualikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,kami share dengan hampa kod bentuk border bagi blocquote ,sidebar ,main body post tittle,sidebar tittle dan sebagainya .Gunalah kayy .


#Example_A  {

  

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

#Example_B {


-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

#Example_C {


-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

#Example_D {


-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

#Example_E {


-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

#Example_F {


-moz-border-radius: 35px;
border-radius: 35px;



Paste yang warna purple saja tau :)

Labels:


0Letter

Tutorial : Remove Navigation Bar ON AT 11:01 PM

Assalamualikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,okie now ,nak ajaq cara hilangkan navigation bar .yang mana ?aloh yang dekat ataih tu yang warna hitam ,biru and transparents tu .


  • Dashboard > edit html >Ctr+F dan cari kod neyh:
/* Variable definitions
  • dah jumpak? Sila copy kod di bawah copykan di ATAS coding tadi tuh.
 #navbar-iframe { display: none !important; } 
  • So tadak dah en ?owesomeee ,comel je bloggie .


Labels:


0Letter

Tutorial : Webmiss ON Sunday, December 11, 2011 AT 3:48 PM


Setelah berdiam selama sehari ,kenapa diam ?ha sebab apa mendiam ?sebab nanti kita ceta lah keyh ,now nak ajar letak gambar dekat sidebar ,means macam dekat webmis tu ,tgok gamba di bawah kalau ta faham ?okie lah yang ta tau puns boleh try tau.


  • korang pilih lah gambar kad mana korang nak ,wani amik kad fb jha .contoh ni untuk gamba kad fb tau 




  • so amik semua url kad atas tuh,and sedia untuk paste
  • Design > Page Element > Add Gadget > Html/JavaScript
  • Kat bahagian atas tuh , korang  nampak tak , ada Edit HTML / Rich Text ??
  • Korang CLICK Edit Html , then paste yang tadi tau ?
  • okie lepas tu buad macam ni .
Contoh
<center><img src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1189.snc4/154158_180103432016612_100000508706476_573355_7805816_n.jpg"/><center>

  • Okie kerja you all paste yang purple tu kad depan and hujung link you all tau ??
  • lepas tuh korang tekan Rich text click gambar and adjust saiz gambar ikud suka hati you all tau ?
  • bawah tu tulis lah tentang korang ,i`m a Barbie girl in a Barbie world ,or apa2 ja lah :D
  • sila komen kalau dah guna tuto nie :D
Nota Barbie
Kalau nak gambar dari lappy you all ,upload kad photobucket and amik kod kad sana tau .

Labels:


0Letter

Tutorial : Header Transparent ON Saturday, November 26, 2011 AT 5:14 PM
Assalamualikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,hey ,skarang kita nak blajar cara buad header transparent ,tapi cara ni mmg pelik gila tau :D ,sebab budak pemalas mmg akan guna cara nih ,tapi bukan korang kami yang pemalas sebab wani yang ajar korang ,tau tak ?okie jum mula.

  • korang tolong save gambar nih tau * bawah ni ada gambar tapi transparent so tak nampak kayy *

  • korang bukak gambar nih dengan photoscape ,gambar tuh transparent sebenarnya .
  • ha edit sesuka hati hampa kayy
  • save dna upload di blog kamu 
  • dia tidak perlu ditransparent kerana sudah transparent

Labels:


3Letter

Tutorial : Cara Tukar Ke Blogskin ON Friday, November 25, 2011 AT 8:18 PM

Assalamualikum ,dengan lafaz bismillahirahmanirahim ,kami share body blogskin dengan hampa yang ni untuk adeq arnie natasya :)so jum layan tanak cakap bebanyak:D ,kalau takod blog rosak download full template dulu keyh XD

  • First pilih mana2 layout blogskin yang korang nak kad sini http://blogskin.com/
  • Then cari benda nih *tgok gamba di bawah*


  • Pilih la nak save or open with ,save lagi selamat kod
  • Pilih open kalau save lah
  • Copy smua kod tuh
  • pegi dashboard >design>edit html
  • Then cari benda nih *tgok gamba di bawah*





  • Then dia akan jadi macam nih ,paste kod kad situ pastikan buang dulu kod yang tersedia di situ tau :D




  • save template changes
  • pandai-pandailah edit ,tentang blogskin will come

Labels:


8Letter


Older Post