Monday 30 September 2013

Tutorial Membuat Popular Post Warna Warni (Pelangi)

Popular Post Warna Warni (Pelangi)
Screenshot Popular Post Warna Warni (Pelangi)
Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.

2. Klik butang "More Options" dan klik " Layout  ".

3. Pada halaman Layout, klik " Add a Gadget " .

4. Klik pada widget Popular Posts

5. Pada Configure Popular Posts, setting popular post , untick pada image thumbnail dan snippet . Setelah itu, klik Save.

6. Selanjutnya , Klik pada " Template " .

7.  Klik " Edit HTML "

8. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

9. Cari(Ctrl+F) kod dibawah:
 ]]></b:skin>
10. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></b:skin>
/* Rainbow Popular Post*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/* Rainbow Popular Post*/
11. Preview dan jika ok Klik Save Template


 SELAMAT MENCUBA :)
Baca Selengkapnya »
Posted by at 1 comment:
Labels:

Tutorial Membuat Efek Daun (Hijau) Berguguran

Efek Daun (Hijau) Berguguran
Screenshot Efek Daun (Hijau) Berguguran
Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<script src='https://dl.dropboxusercontent.com/s/ru6u2110wb2m123/efekdaun2.js' type='text/javascript'/></script>
6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..
Baca Selengkapnya »
Posted by at No comments:
Labels:

Tutorial Membuat Efek Hujan (Rainy Afternoon Effect)

Efek Hujan (Rainy Afternoon Effect)
 Scereenshot Efek Hujan (Rainy Afternoon Effect)
Tutorial:
1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".
GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.
GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).
GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<script type="text/javascript">
// <![CDATA[
var speed=50; // lower number for faster
var drops=100; // number of 'drops'
var colour="#999"; // colour of drops (generally grey!)
</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/wjgctyfqxvs5ruc/efekhujan1.js"></script>
Keterangan:
  • var speed=50;  -->  gantikan nilai 50 untuk ubah kelajuan titisan hujan turun ( gantikan dengan nilai yang lebih rendah untuk lebih cepat )
  • var drops=100;  -->  gantikan nilai 100 untuk ubah bilangan titisan hujan.
  • var colour="#999";  -->  gantikan kod warna #999 untuk ubah warna titisan. [kod warna]

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)
GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..
Baca Selengkapnya »
Posted by at No comments:
Labels:

Friday 27 September 2013

Tutorial Membuat Efek Kelopak Bunga Berguguran

Efek Kelopak Bunga Berguguran
Screenshot Efek Kelopak Bunga Berguguran
Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}
image_urls['rain1']="https://dl.dropboxusercontent.com/s/d2n5lu5usg1kb8h/pinkpetal1.png";
image_urls['rain2']="https://dl.dropboxusercontent.com/s/88s3oflutds66oz/pinkpetal2.png";
image_urls['rain3']="https://dl.dropboxusercontent.com/s/btb1zxe5gv05a4f/redpetal1.png";
image_urls['rain4']="https://dl.dropboxusercontent.com/s/f3uztzh3le65d4o/redpetal2.png";
$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://dl.dropboxusercontent.com/s/d2n5lu5usg1kb8h/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).append(a).appendTo('body')});</script>
6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..
Baca Selengkapnya »
Posted by at No comments:
Labels:

Tutorial Membuat Efek Salji (3)

Screenshot Efek Salji (3)
Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:

i. Efek Salji Putih
<script src="https://dl.dropboxusercontent.com/s/m7i6czcbb6fxvl7/efeksalji3.js"/></script>
ii .Efek Salji (Custom)
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/fsb00m4xx7u95yx/efeksalji3-custom.js" /></script>
<script type="text/javascript">
snowStorm.snowColor = '#99ccff'; // salju biru muda (boleh ganti dengan warna lain)
snowStorm.flakesMaxActive = 96;
snowStorm.useTwinkleEffect = true;
</script>
Keterangan:

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..
Baca Selengkapnya »
Posted by at No comments:
Labels:

Tutorial Membuat Efek Salji (2)

Screenshot  Efek Salji (2)
Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<script src='https://dl.dropboxusercontent.com/s/v990kxfxbjlwx5k/efeksalji2.js' type="text/javascript"></script>
6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..
Baca Selengkapnya »
Posted by at No comments:
Labels:

Tutorial Membuat Efek Salji (1)


Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<script src='https://dl.dropboxusercontent.com/s/b2ur0sfipxdkc0k/efeksalji1.js' type="text/javascript"></script>
6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..
Baca Selengkapnya »
Posted by at No comments:
Labels:

Tutorial Membuat Efek Kupu-Kupu Berterbangan


Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<script type="text/javascript">
     var Ymax=8; //jarak per langkah kupu-kupu pada paksi-y
     var Xmax=8; //jarak per langkah kupu-kupu pada paksi-x
     var Tmax=10000; //tempoh langkah dalam milidetik
     var floatimages=new Array();
     floatimages[0]='https://dl.dropboxusercontent.com/s/8qskc9ohjhwzwpm/butterfly.gif';
     floatimages[1]='https://dl.dropboxusercontent.com/s/8qskc9ohjhwzwpm/butterfly.gif';
</script>
<script src="https://dl.dropboxusercontent.com/s/0lcccyxzewc3tkt/scriptkupu.js" type="text/javascript"></script>
6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..
Baca Selengkapnya »
Posted by at No comments:
Labels:

Timbang Berat Blog

Anda tahu berapa saiz blog anda dan masa yang perlu diambil untuk load ? . Hal ini agak penting kerana jika blog kita terlalu berat dan terlalu mengambil masa yang lama untuk load, tidak mustahil visitor blog anda akan pangkah je page blog anda sebab bosan menunggu . Jadi jom timbang blog anda guna tool kat bawah ni  ... Selamat mencuba :)


URL Blog Anda:
(cth: faiz-tutorial.blogspot.com)

Baca Selengkapnya »
Posted by at No comments:
Labels:

Thursday 26 September 2013

Tutorial Membuat Recent Post Image Gallery Pada Blogger

Recent Post Image Gallery
Screenshot Recent Post Image Gallery

Tutorial:
1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".
GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2
4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3
5.  Copy (CTRL+C) kod javascript dibawah:
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/9va4d80hh8mnuta/recentpostgalleryimage.js"></script>
<link type="text/css" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/0i4cgcc2yipk8gj/rpgalleryimage_style.css" />

<script>
  var ftrpg_thumbSize = 110;
  var ftrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=ftrpGallery"></script>
Keterangan:

  • var ftrpg_thumbSize = 110;  -  Gantikan 110 dengan saiz gambar yang anda mahu.
  • var ftrpg_showTitle = true;  -  Untuk sembunyikan tajuk gantikan true ke false .


6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " .
Baca Selengkapnya »
Posted by at 2 comments:
Labels:
Subscribe to: Posts (Atom)