selamat datang di www.andikasangrajatutor.blogspot.com

cara membuat gambar / foto animasi .gif




 Mungkin ada beberapa sobat yang ingin menambah gambar atau foto animasi ke blog mereka. Sebenarnya untuk menambahkan gambar atau foto bergerak ke blog tidak begitu sulit. Karena ada beberapa layanan yang menyediakan jasa seperti ini, misalnya :

www.slide.com
www.flickr.com
www.picasion.com

Disini saya akan mencoba menggunakan layanan www.picasion.com. Dimana pada layanan online ini sobat tidak perlu login. Tinggal memasukan beberapa gambar atau foto sobat yang nantinya akan bergerak sesuai urutan yang sobat inginkan.
Mari langsung saja kita mulai:
  • Masukkan alamat www.picasion.com ke browser sobat.
    Masukkan gambar atau foto sobatdari mulai urutan 1(pertama).

  • Kemudian sobat bisa menentukan ukuran juga kecepatannya (tenggang).
  • Setelah itu klik create animation,gambar atau foto sobat sudah langsung terupload.
  • Kemudian copy paste alamat url dan code html nya ke notepad.
  • Setelah itu save this animation.



Sekarang sobat tinggal upload gambar tersebut ke blog sobat:
  • Masuk ke blog sobat dan pilih layout(tata letak).
  • Klik tambah gadget.
  • Kemudian pilih gambar yang bertuliskan HTML/Java Script.
  • Masukkan code HTML saja yang telah sobat copy paste tadi ke halaman conten.
  • Sebelumnya sobat bisa merubah ukuran juga title nya.
  • Jika sudah tinggal save.
  • Letakkan gambar tersebut ke tempat yang sobat suka .
  • Kemudian save.
  • Lihat blog sobat.
Silahkan mencoba..!


Read More Add your Comment 0 komentar


cara membuat efek hujan salju diblog



Cara Membuat Efek Hujan Salju di Blog ~ Menghias blog kesayangan anda dengan berbagai efek-efek widget yang keren seperti efek hujan salju memang dapat mempercantik dan memperindah tampilan blog saudara. Dengan memasang efek hujan salju pada blog dapat membuat pengunjung blog merasa nyaman dan betah sehingga pengunjung tersebut ingin berlama-lama di blog anda. 

Mungkin sudah banyak para blogger yang membahas dan mengetahui bagaimanacara membuat efek hujan salju pada blog. Tapi tidak ada rugi dan salahnya jika saya memposting artikel yang serupa. Jadi jika anda tertarik dengan widget efek ini, tidak ada salahnya jika anda memasang efek hujan salju pada blog kesayangan saudara.

Cara Memasang Efek Hujan Salju Pada Blog

Silahkan ikuti panduan di bawah ini untuk memasang Efek Hujan Salju pada Blog:
  • Login dengan akun blog saudara
  • Masuk ke menu TATA LETAK --> TAMBAH GADGET --> HTML/JAVASCRIPT
Langkah-Langkah Membuat Efek Hujan Salju Pada Blog
  • Lalu masukan script di bawah ini :
<script type="text/javascript">
   
  //Configure below to change URL path to the snow image 
  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVr9lEU8pgqGyG9KJs0vIhZN4XLqbpPp8DL05JSdXVMk27iwv_F-hVMmWHUVpdbpmvQB2rpxhnGt5wtxRqugIR4ecZYgEStZDZD02TYD3fqbV1ABLfQ469oU6hNNnIJ4zvomTJt5Y6tT0/s400/snow.gif" 
  // Configure below to change number of snow to render 
  var no = 15; 
  // Configure whether snow should disappear after x seconds (0=never): 
  var hidesnowtime = 0; 
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight") 
  var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
  var ie4up = (document.all) ? 1 : 0; 
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    function iecompattest(){ 
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body 
    }
  var dx, xp, yp;    // coordinate and position variables 
  var am, stx, sty;  // amplitude and step variables 
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) { 
    doc_width = self.innerWidth; 
    doc_height = self.innerHeight; 
  } else if (ie4up) { 
    doc_width = iecompattest().clientWidth; 
    doc_height = iecompattest().clientHeight; 
  }
  dx = new Array(); 
  xp = new Array(); 
  yp = new Array(); 
  am = new Array(); 
  stx = new Array(); 
  sty = new Array(); 
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVr9lEU8pgqGyG9KJs0vIhZN4XLqbpPp8DL05JSdXVMk27iwv_F-hVMmWHUVpdbpmvQB2rpxhnGt5wtxRqugIR4ecZYgEStZDZD02TYD3fqbV1ABLfQ469oU6hNNnIJ4zvomTJt5Y6tT0/s400/snow.gif" : snowsrc 
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables 
    xp[i] = Math.random()*(doc_width-50);  // set position variables 
    yp[i] = Math.random()*doc_height; 
    am[i] = Math.random()*20;         // set amplitude variables 
    stx[i] = 0.02 + Math.random()/10; // set step variables 
    sty[i] = 0.7 + Math.random();     // set step variables 
        if (ie4up||ns6up) { 
      if (i == 0) { 
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>"); 
      } else { 
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>"); 
      } 
    } 
  }
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; 
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; 
    for (i = 0; i < no; ++ i) {  // iterate for every dot 
      yp[i] += sty[i]; 
      if (yp[i] > doc_height-50) { 
        xp[i] = Math.random()*(doc_width-am[i]-30); 
        yp[i] = 0; 
        stx[i] = 0.02 + Math.random()/10; 
        sty[i] = 0.7 + Math.random(); 
      } 
      dx[i] += stx[i]; 
      document.getElementById("dot"+i).style.top=yp[i]+"px"; 
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    } 
    snowtimer=setTimeout("snowIE_NS6()", 10); 
  }
    function hidesnow(){ 
        if (window.snowtimer) clearTimeout(snowtimer) 
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" 
    } 
        
if (ie4up||ns6up){ 
    snowIE_NS6(); 
        if (hidesnowtime>0) 
        setTimeout("hidesnow()", hidesnowtime*1000) 
        }
</script>. 
  • Klik simpan
    Bagaimana Keren Kan? Jika anda ingin memasang widget keren lainya pada blog saudara. Anda bisa mencoba memasang permalink keren pada blog anda. Tapi jangan khawatir, setelah memasang widget ini loading halaman blog saudara masih terjagakecepatanya. Tidak percaya? Silahkan Buktikan Sendiri!!

    Selamat Mencoba . . .


    Read More Add your Comment 0 komentar


    membuat sidebar dikanan dan dikiri blog



    S
    ebelum menambah kolom sidebar yang perlu kita perhatikan adalah pada bagian di bawah ini:

    Outer-wrapper=660px;

    Header-wrapper=660px;
    Footer-wrapper=660px;

    • Sekarang masuk ke blog sobat.
    • Klik tata letak.
    • Edit html.
    • Jangan beri centang pada Expand widged template.
    Cari kode seperti di bawah ini:

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 410px;
    float:right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #sidebar-wrapper {
    width: 220px;
    float: $startSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    Outer-wrapper ini merupakan sebuah bingkai di mana main wrapper dan sidebar berada,termasuk header dan footer berada di dalamnya.

    Jika ingin menambah satu sidebar berarti kita harus menambah pula lebar dari bingkai tersebut.Misalnya kita ingin menambah satu sedebar dengan lebar yang sama dari sedebar sebelumnya,kita tinggal cloning dan menambahkan nilai sidebar tersebut pada Outer-wrapper= 660+220=880.

    Kemudiann kasih nama sidebar tersebut dengan nama yang berbeda.Agar lebih mudah membedakannya kita beri nama sidebarbaru-wrapper,hingga hasilnya sbb:

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
    width: 880px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 410px;
    float:$endSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #sidebar-wrapper {
    width: 220px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    padding:5px;

    #sidebarbaru-wrapper {
    width: 220px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    padding:5px

    Untuk warna merah adalah hasil cloning dari sedebar-wrapper yang kita beri nama sidebarbaru-wrapper,sedang warna biru tambahan sela agar font tidak terhimpit bingkai sidebar. warna orange dimana letak sidebar berada.

    Jangan lupa ganti juga nilai lebar dari:
    header-wrapper= 880px;
    footer-wrapper= 880px;

    Setelah mengganti kode-kode angka dan memberi nama sidebar tersebut,kemudian tarik ke bagian bawah pada kode template sobat. Temukan kode seperti di bawah ini:

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>

    Letakkan kode dibawah ini tepat atasnya:

    <div id='sidebarbaru-wrapper'>
    <b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
    </div>


    Hingga hasilnya sebagai berikut:

    <div id='sidebarbaru-wrapper'>
    <b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
    </div>


    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>

    • Klik pratinjau.
    • Jika di rasa sudah sesuai klik simpan template.


    Read More Add your Comment 0 komentar


    kurangi blog berat loading lambat



    S
    ebenarnya apa maksud judul yang membingungkan ini....
    Banyak para blogger yang suka menghias blognya dengan bermacam pernak-pernik dan accesoris.
    Sebenarnya dengan accesoris dan pernak-pernik yang pas blog akan terlihat cantik dan menarik.Tetapi apa yang terjadi ketika blog kita buka,di situ akan terasa berat dan cukup lama waktu loadingnya,yang terkadang membuat kita sedikit jengkel. Apalagi yang kita buka blog milik orang lain,tahu sendiri...

    Dari judul di atas maksudnya adalah bagaimana cara mengurangi berat pada blog kita.
    Sebenarnya berat blog ini bisa juga terjadi karena penulisan kode css kita yang kurang pas,dalam artian bukan berarti salah.Untuk itu kita perlu mengeditnya.

    Jika kode css sudah terlanjur banyak dan malas untuk mengedit tidak perlu khawatir,karena ada jasa yang suka rela dan senang hati bersedia membantunya. Masuk saja ke alamat http://www.csscompressor atau ke http://www.cssdrive.com di sini kode css kita akan di compress yang nantinya dapat mengurangi beban blog kita.

    Caranya:
    • Kemudian masuk ke blog sobat.
    • Pilih tata letak.
    • Klik edit html.
    • Kasih tanda centang pada Expand widget.
    • Cari kode yang akan kita compress,letaknya antara </b:skin> dan ]]></b:skin>
    • Untuk jaga-jaga copy kode yang akan kita kompress kemudian simpan di notepad.
    • Paste juga pada tempat pengompressan pada alamat di atas.
    • Untuk compressor mode pilih normal.
    • Untuk comments handling pilih Don't strip any comments.
    • Klik compress it.
    • Ganti kode css sobat dengan kode yang sudah terkompres.
    • Klik pratinjau.
    • Jika sudah aman klik simpan.

    Dari hasil compress tersebut kita bisa pelajari cara penulisan kode css yang pas.

    Semoga bermanfaat.


    Read More Add your Comment 0 komentar


    cara membuat footer multi kolom dalam blogger



    D
    engan satu kolom footer rasanya masih kurang,ini yang sering dirasakan bagi mereka yang suka mempercantik blognya dengan berbagai pernak-pernik. Bagi saya sendiri footer ini sangat berguna yang saya anggap fungsinya hampir sama dengan sidebar.

    Yang sering saya lihat diberbagai blog mereka senang menggunakan footer dengan tiga kolom,sebenarnya ini tergantung selera masing-masing orang. Bagaimana cara membuatnya
    di sini akan kita bahas bersama.

    Biasanya beda template ukuranya berbeda-beda pula,agar ukuranya sesuai dengan template yang sobat miliki di sini ukuranya kita buat persen (%),sehingga kita tidak terlalu kebingungan mengganti ukuranya.
    Untuk membuatnya mari kita lihat langkah-langkah di bawah ini:

    • Login ke blog sobat.
    • Klik tata letak.
    • Pilih edit HTML.
    • Jangan kasih centang pada expand widget.
    • Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atasnya,hingga posisinya sebagai berikut:

      /* footer_wrapper
      ---------------------------- */
      #footer_wrapper{
      width: 100%;
      position: relative;
      float: left;
      background:#ff69b4;
      border: px solid #ff0000;
      padding:%;
      }

      #footer_wrapper1{
      float:left;
      width:30%;
      margin:1px;
      background:#7cfc00;
      padding:1%;
      }

      #footer_wrapper2{
      float:left;
      width:30%;
      margin-top:1%;
      margin-bottom:1%;
      background:#7cfc00;
      padding:1%;
      }

      #footer_wrapper3{
      float:left;
      width:30%;
      margin:1%;
      background:#7cfc00;
      padding:1%;
      }

      ]]></b:skin>
    • Kemudian tarik ke bawah pada bagian body temukan kode sebagai berikut:

      <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
      </div>
    • Jika sudah ketemu letakkan kode di bawah ini di atasnya hingga posisinya sebagai berikut :

      <div id='footer_wrapper'>
      <b:section class='footer' id='footer_wrapper1'/>
      <b:section class='footer' id='footer_wrapper2'/>
      <b:section class='footer' id='footer_wrapper3'/>
      </div>

      <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
      </div>
    • Dan lihat hasilnya pada tata letak,untuk mencoba tambahkan gadget.

      Catatan: Kode yang berwana merah adalah kode yang asli sedang yang hitamadalah kode yang ditambahkan.
    Sebenarnya cara membuat multi kolom pada footer hampir sama dengan menambah atau membagi kolom header,jika sobat ingin tahu bisa lihat di sini.

    Semoga bermanfaat.


    Read More Add your Comment 0 komentar


    cara membuat link dalam satu halaman



    S
    ebuah link biasanya di gunakan untuk mengarahkan alamat ke halaman lain atau ke postingan lain. Bagaimana jika kita ingin link tersebut mengarah pada satu halaman atau satu postingan,disini kita akan coba membahasnya.

    Link dalam satu halaman ini biasanya disebut dengan anchor link. Kita bisa mengarahkan link tersebut ke atas,ke tengah atau ke bawah. Biasanya digunakan untuk postingan yang panjang dengan sub-sub halaman atau menggunakan beberapa bab.

    Sesuai dengan namanya (Anchor link) untuk membuat link ini kita butuh yang namanya anchor name dan juga link name. Untuk lebih jelasnya mari kita sama-sama mencoba.

    • Pertama kita buat dulu anchor name:

      <A NAME="BAB 1"> BAB 1 </A>

    Pada anchor name inilah nantinya link kita akan mengarah,tepatnya satu baris di bawah tempat kita meletakkannya. Sebagai contoh anchor name ini akan saya letakkan tepat dibawah judul postingan ini.
    Sebagai catatan untuk tulisan BAB 1 yang berwarna merah boleh diganti dengan tulisan apa saja,sedang BAB 1 yang berwarna biru boleh dihilangkan.

    • Kedua yang harus kita buat adalah link name:

      <a href="#BAB 1"> kembali ke atas</a>

    Link name ini kita gunakan untuk mengarahkan di mana anchor name tadi diletakkan,dan sebagai contoh link name ini akan saya letakkan di bawah postingan.

    Catatan lagiii...: Untuk tulisan BAB 1 pada link name harus sama dengan anchor name.Untuk tulisan kembali ke atas boleh dirubah dengan kata apa saja,asal bukan kata-kata yang jorok sengihnampakgigi.
    Misal: Kembali ke atas, ketengah atau bawah karena fungsinya untuk keterangan saja. Untuk melihat hasilnya silahkan klik Kembali ke atas.
    kembali ke atas


    Read More Add your Comment 0 komentar


    cara membuat buku tamu dengan shoutmix



    Untuk mempererat hubungan antara pengunjung dan pemilik blog alangkah indahnya jika si pengunjung bisa meninggalkan jejak untuk sekedar bersalam sapa. Untuk hal yang satu ini biasanya si pemilik blog memasang shoutbox atau buku tamu padablog mereka. Saya ingin sedikit berbagi dengan sobat yang belum tahu bagaimana cara memasang buku tamu tersebut. Kali ini kita memasang buku tamu dengan menggunakan shoutmix.

      Caranya :
    • Masuk ke www.shoutmix.com.
    • Dari halaman ShoutMix klik create shoutbox.
    • Isi kotak yang tersedia:
      Shoutbox informationShoutbox ID : Nama ID sobat.>
      Choose passsword : Masukkan password.
      Retype password : Ulangi masukkan password yang sama.
      Contact information
      Name : Nama sobat.
      Email : Masukkan alamat email sobat.
    • Beri tanda ceckbox pada kotak kecil.

    • Klik Continue
      Tunggu sampai proses loading selesai,sobat akan di bawa ke halaman setting. Sesuaikan dengan keinginan sobat.
    • Untuk mengambil kodenya pada kolom Quick Start klik Get codes.
      Jika sudah terbuka halaman baru sobat bisa menyesuaikan ukurannya sesui dengan template sobat. Kemudian ambil kodenya,kopi dan paste. Bisa disimpan pada notepad terlebih dahulu.

      Untuk memasukkan kodenya.
    • Login ke blog sobat.
    • Pilih tata letak.
    • Tambahkan Gadget.
    • Pilih HTML/JAVAScript.
    • Masukkan kode yang sobat ambil tadi ke bagian konten.
    • Klik simpan.
    • Lihat hasilnya.

    SEMOGA BERHASIL


    Read More Add your Comment 0 komentar


     

    Categories

    Wavy Tail

    © 2010 tutorial blog All Rights Reserved Thesis WordPress Theme Converted into Blogger Template by Hack Tutors.info