Tutorial Membuat Efek Daun Kering Berguguran

SCREENSHOT EFEK DAUN KERING 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://sites.google.com/site/faiztutorial/home/javascript/hujandaun.js'/></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 »

Tutorial Membuat Bloglist Scroll

SCREENSHOT BLOGLIST SCROLL

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 pada Template

3. Klik Edit HTML

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

5. Cari (CTRL +F) kod dibawah:

 <b:widget id='BlogList 

6. Lihat pada kod <div class='widget-content'> .

7. Gantikan kod <div class='widget-content'> dengan kod dibawah :

<div class='widget-content' style='overflow:auto; width: ancho; height:300px;'>

• height:300px; - gantikan 300 untuk ubah ketinggian bloglist scroll anda.

8. Pastikan ia seperti gambar dibawah:

9. Klik Save Template

#Selesai :)

Baca Selengkapnya »

Tutorial Membuat Slide Down Recent Post

SCREENSHOT SLIDE DOWN RECENT POST 

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:

<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B-VGFUPzYx5zTGIzTUppMVJjMFU/"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>

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 »

Tutorial Membuat Popular Post Bergerak (Marquee Alternate)

Screenshot Popular Posts

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, anda setting popular post dan 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>

/* -------- POPuLAR POST CUSTOM CSS START----------- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQVYMIe4FUc_OoqK3h5Nlc6blaG4cARZIFFk4rfae3ZOyPdc96ccXIVsSoooPAjVWaROE_l1a0AedYr7HkvdQAmfVhjxv9Kv8vZNNTlNTQa0C6CGkqXZtzzQ_JXtDoTlV-q6GJclpO2Y/s1600/check1.gif) no-repeat scroll 8px 7px;
list-style-type: none;
margin:5px 14px 5px 14px;
padding:5px 5px 5px 25px !important;
border: 1.5px solid #dddddd;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
font-family:Tahoma,Arial,verdana;
font-size:12px;
}
.popular-posts ul li:hover {
background:C4FAD2;
border:0.5px solid #0B3B17;
font-family:Tahoma,Arial,verdana;
font-size:12px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
/* -------- POPuLAR POST CUSTOM CSS END----------- */

11. Cari(Ctrl+F) kod dibawah:

<div class='widget-content popular-posts'>

12. Copy(Ctrl+C) kod dibawah dan Paste(Ctrl+V) dibawah kod " <div class='widget-content popular-posts'> " :

<marquee align="left" behavior="alternate" direction="up" height="500" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">

13. Cari(Ctrl+F) kod dibawah:

</b:loop>

14. Copy(Ctrl+C) kod dibawah dan Paste(Ctrl+V) dibawah kod "</b:loop> </ul>" :

</marquee>

15. Pastikan code anda akan jadi seperti contoh dibawah:

  <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
<marquee align="left" behavior="alternate" direction="up" height="500" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
</marquee>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

16. Preview dan jika ok Klik Save Template

TUTORIAL STEP BY STEP .  HARAP NEWBIE PUN BOLEH FAHAM. SELAMAT MENCUBA :)

Baca Selengkapnya »

Tutorial Daftar 8Share Dan Cara Penggunaan

 

Pada entri kali ini , saya ingin berkongsi cara-cara untuk menghasilkan pendapatan sampingan dengan mudah  melaui 8SHARE . Bagi anda yang belum tahu apa itu 8share, ia merupakan satu medium pengiklanan , dimana setiap ahli  akan diberi ganjaran 20sen/klik bagi setiap iklan yang dikongsikan. Tapi anda perlu tahu ,earning akan bertambah sekiranya iklan yang anda kongsikan di buka oleh UNIQUE VISITOR sahaja .

Hasil Yang Admin Perolehi :)

Tutorial:

CARA MENDAFTAR 8SHARE

1. Klik pada pautan  8share .

2.  Klik Sign Up

3. Isikan maklumat yang diperlukan seperti Username (1) , Email Address (2) , Password (3) , Confirm Password (4) dan setelah anda lengkapkan maklumat yang diperlukan, klik butang Create my account.

4. Selanjutnya, isikan maklumat diri anda dan klik Okay,done!

5.Apabila muncul seperti gambar dibawah,  Klik Start your 3-minute tour untuk mengetahui cara-cara penggunaan 8share. Jika anda sudah paham tentang penggunaan 8share ,anda hanya perlu klik No, thanks, I'll do it later .

6. Buka email yang anda gunakan semasa mendaftar dan aktifkan akaun 8share anda.


CARA  PENGGUNAAN 8SAHARE DAN DAPATKAN SPECIAL LINK IKLAN

1. Klik pada SPECIALS

2. Pilih dan klik pada salah satu iklan

CP adalah Contribution  Point , dimana anda boleh menukarkannya dengan barang dari 8share.

RM* adalah Ganjaran Wang , dimana anda boleh Cashout pendapatan yang terkumpul sekiranya nilai ganjaran cukup RM50 (paling minima) .

3. Kenalpasti iklan yang ingin anda kongsi.

4. Pilih Mesej yang sesuai bagi iklan yang hendak anda kongsikan .

5. Klik pada salah satu button untuk share iklan tersebut.

6. Contoh untuk dapatkan link:

• Melalui butang Share on Facebook (lihat gambar)

• Melalui butang Share on Twitter (lihat gambar)

SELAMAT MENCUBA :)

Baca Selengkapnya »

Cara Menggunakan Google Drive Untuk Menyimpan File Dan Web Editor

Google Drive dan Documents merupakan komponen dari sebuah layanan terintegrasi yang menyediakan tempat untuk menyimpan, mengakses, membuat, mengedit, dan berbagi semua jenis dokumen, file, dan folder.

• Google Documents adalah editor berasaskan-web untuk membuat, mengedit, dan berbagi dokumen, spreadsheet, presentasi, gambar, dan formulir Google. Dokumen online ini sangat terintegrasi dengan layanan Google Apps lainnya dan menyediakan ciri-ciri gabungan real-time yang sangat canggih.

• Google Drive merupakan satu tempat untuk mengelola semua file Anda, termasuk Google Documents. 

Tutorial:
1. Pergi ke pautan https://drive.google.com dan login menggunakan akaun google.

2. Cara untuk membuat folder baru:

• Klik pada butang New Folder

• Masukkan nama folder
• Klik Create

3. Untuk muatnaik(upload) file :

• Klik pada butang UPLOAD.
• Klik pada Files .
• Pilih file dan tunggu proses upload selesai.

4. Cara untuk share file pada umum(public):

• Selepas proses upload selesai, akan muncul kotak seperti gambar dibawah.
• Klik pada Share.

• Seterusnya, pada Sharing Settings , pada bahagian Who has access , klik Change..

• Pada bahagian Visibility options , tandakan(tick) pada Public on the web.
• Klik Save.

• Selanjutnya, anda boleh copy link yang berada pada bahagian Link to share dan anda boleh share pada rakan-rakan anda.
• Anda juga boleh berkongsi file melalui Social Button yang disediakan.

5. Cara untuk pautkan link file seperti CSS atau JS(javascript) pada blog atau web:

• Link asal adalah seperti gambar dibawah.
• Kod yang di highlight adalah Code ID bagi file tersebut.

• Untuk letakkan pada blog atau web, anda tidak boleh menggunakan link share seperti gambar di atas.
• Anda perlu gunakan link seperti dibawah:

https://googledrive.com/host/CODE ID FILE/

• Gatikan CODE ID FILE dengan  code ID file .
• Contohnya:

https://googledrive.com/host/0B-VGFUPzYx5zUGdHUjN5MExsWk0/

6. Cara untuk menggunakan Google Drive Web Editor :

• Klik pada CREATE
• Pilih Editor yang anda mahu gunakan seperti Document, Presentation, Spreadsheet, Form dan Drawing.

SEMOGA SEDIKIT SEBANYAK DAPAT MEMBANTU . SEKIAN :)

Baca Selengkapnya »