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


    cara membuat text menu bar berjalan



    Menu judul atau title bar ini letaknya ada di atas dan di pojok kiri pada browser milik sobat. Jika ingin title bar tersebut nampak berjalan,sobat bisa tambahkan kode script seperti di bawah ini:

    <script language="JavaScript">
    var txt=" SELAMAT DATANG ";
    var kecepatan=200;var segarkan=null;function bergerak(){ document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
    </script>


    CARA MEMASUKKAN KODENYA:
    • Yang pasti login dulu ke blog sobat.
    • Klik tata letak.
    • Pilih edit html.
    • Cari kode </head.>
    • Jika sudah ketemu masukkan kode diatas tadi tepat di atas kode </head.>
    • Yang bisa sobat edit:
      Kata SELAMAT DATANG bisa dirubah sesui keinginan sobat.
      Nilai kecepatan semakin tinggi semakin lambat jalannya.
      Supaya kata yang berjalan tidak berhimpitan beri spasi pada sebelum atau sesudah kata SELAMAT DATANG.
    • Pratinjau dulu kemudian simpan
    • Lihat hasilnya.


    Read More Add your Comment 0 komentar


    cara membuat link warna-warni



    Dalam membuat blog kita pasti ingin kelihatan menarik dan penuh warna. Bagaimana jika link kita nampak warna-warni ketika mouse di arahkan ke linktersebut, hhmmm...tentu nampak menarik.Terus bagaimana membuatnya..?
    • Login keblog sobat
    • Pilih tata letak
    • Edit HTML
    • Cari kode </body>
    • Letakkan kode ini diatasnya:
      <script src='http://sites.google.com/site/darmasites/my-forms/rainbow.js'/>
    • Simpan
    • Lihat hasilnya


    Read More Add your Comment 0 komentar


    cara membuat gambar melayang dipojok




    M
    ungkin para sobat pernah atau bahkan sering melihat gambar dipojok halaman blog yang terlihat seperti melayang meskipun scroll bar diarahkan kemanapun. Gambar ini akan tetap diposisi dimana tempatnya berada. Gambar yang sobat lihat tersebut biasa disebut dengan gambar melayang atau float image.Jika blog sobat ingin dihiasi gambar seperti tersebut dan belum tahu caranya bisa ikuti langkah-langkah dibawah ini:

    1. Login ke blog sobat

    2. Pilih tata letak

    3. Klik edit HTML

    4. Cari kode ]]></b:skin>

    5. Letakkan kode di bawah ini diatasnya,hingga posisinya sebagai berikut:

    #gambar {
    position:fixed;_position:absolute;bottom:0px; left:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression (document.documentElement.scrollLeft+ document.documentElement.clientWidth -
    offsetWidth);
    }

    ]]></b:skin>

    Perhatikan gambar yang dicetak tebal: bottom bisa sobat ganti dengan top sedangleft bisa sobat ganti dengan right.

    bottom= bawah
    top = atas
    left = kiri
    right = kanan

    6.Kemudian cari kode </body>

    7. Letakkan kode dibawah ini diatasnya:

    <div id="gambar">
    <a href="http://activekita.blogspot.com">
    <img border="0" src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png"/></a>
    </div>

    Tulisan warna merah ganti dengan alamat blog sobat. Warna biru ganti dengan alamat gambar sobat,bisa berupa gambar apa saja. Untuk mencoba sobat boleh memakai alamat gambar diatas.

    8. klik simpan

    9. Lihat hasilnya

    10. selesai


    Read More Add your Comment 0 komentar


    cara menyembunyikan navbar



    P
    ada postingan yang lalu saya pernah membahas tentang bagaimana cara menghilangkan navbar dengan segala resikonya,lihat di sini. Untuk postingan kali ini ada alternatif lain bagaimana agar navbar tersebut tidak menghilang sama sekali,tapi cukup dengan menyembunyikannya.

    Maksud dari menyembunyikan adalah jika nanti pointer mouse kita arahkan keatas dimana letak posisi dari navbar,maka navbar tersebut akan muncul kembali. Jika sobat tertarik dengan cara ini,silahkan ikuti langkah-langkah di bawah ini:
    • Login ke blog sobat
    • Pilih tata letak
    • Klik Edit HTML.
    • Cari kode ]]></b:skin>
    • Letakkan kode dibawah ini diatasnya.

      #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
      #navbar-iframe:hover {opacity:1.0;filter:alpha(Opacity=100,FinishedOpasity=100)}
    • Hingga hasilnya sebagai berikut:

      #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
      #navbar-iframe:hover {opacity:1.0;filter:alpha(Opacity=100,FinishedOpasity=100)}
      ]]></b:skin>
    • Simpan.
    • Lihat hasilnya.
    • Selesai.


    Read More Add your Comment 0 komentar


    cara menghilangkan navbar



    M
    enghilangkan navbar merupakan salah satu keinginan banyak para blogger. Mungkin para blogger ingin blognya terlihat seperti yang lain tanpa ada navbardiatasnya.Hal ini bisa saja dilakukan tapi ada yang perlu di perhatikan.

    Sebenarnya google menyediakan nasbar ini gunanya untuk mempermudah login keblogger atau sebagai jalan untuk melihat blog lain.Bisa juga untuk menandai blog yang melanggar TOS seperti mengandung SARA atau pornografi untuk dilaporkan ke pihak blogger.

    Sebelum menghilangkan pikirkan terlebih dahulu,sebab resiko yang di tanggung cukup berat juga yaitu akan di tutupnya account kita di blogger. Sayangkan...?! Walaupun sekarang ada isu yang berkembang bahwa pihak blogger memperbolehkan tanpa resiko apapun. Keputusan ada ditangan sobat. Jika menurut sobat navbar itu tidak mengganggu dan menguntungkan biarkan saja nampak di atas.Tapi jika sobat masih ingin menghilangkan mungkin ini cara yang bisa sobat gunakan,tapi resiko ditanggung sendiri ya...!
    fikir
    • Login ke blog sobat
    • Klik tata letak (Layout)
    • Klik edit HTML
    • Carikode ]]></b:skin>
    • Letakkan kode berikut diatasnya #navbar{display:none }
    • Hingga hasil kodenya sebagai berikut:
      #navbar{display:none
      }
      ]]></b:skin>
    • Klik simpan template
    • Lihat hasilnya
    • selesai
    Jika mau memunculkan lagi tinggal hapus kodenya.menarimenari


    Read More Add your Comment 0 komentar


    cara membuat read more versi baru



    J
    enis read more ini kita beri judul read more versi baru karena telah ada versi read more sebelumnya. Jika ingin tahu versi sebelumnya coba sobat lihat disini.

    Meskipun jenis read more versi ini agak berbeda dengan versi sebelumnya,akan tetapi kegunaannya sama.
    Kalau Versi sebelumnya kita harus menunggu beberapa saat untuk membuka,tapi dengan read more versi baru ini sobat tinggal klik tidak begitu lama lanjutan halaman postingan akan terbuka. Sobat tinggal pilih yang mana tergantung selera.

    Untuk membuat read more ini kita harus menambahkan beberapa kode pada kode template yang sobat miliki.

    Kode apa saja yang harus ditambahkan lihat langkah-langkah dibawah ini:

    1.Login di blogger dengan id sobat.
    2.Pilih tata letak.
    3.Klik edit HTML.
    4.Download template lengkap terlebih dahulu.
    5.Beri tanda centang pada Expand template widget.
    6.Cari kode <head/> kemudian letakkan kode di bawah ini tepat diatasnya.Hingga
    hasil kodenya seperti ini:


    <script type='text/javascript' src='http://sites.google.com/site/darmasites/javascript/Readmore.js'/>


    <head/>

    Untuk diketahui bahwa kode yang berwarna merah adalah kode tambahan,sedang yang hitam adalah kode asli.

    7.Cari kode <div class=post-body' atau <p><data:post.body/></p>

    Tambahkan kode dibawah ini hingga hasilnya seperti berikut:

    <div class='post-body' expr:id='"post"+data:post.id'>
    <b:if cond='data:blog.pageType == "item"'>
    <p><data:post.body/></p>
    <b:else/>
    <style>#fullpost {display:none;} </style>
    <p><data:post.body/></p>
    <span id='showlink'>
    <p><a expr:onclik='"javascript:showFull(\"post-" + data:post.id + "\");"'
    href='javascript:void(0);'>[+/-] selengkapnya...</a></p>
    </span>
    <span id='hidelink' style='display:none'>
    <p><a expr:onclik='"javascript:hideFull(\"post-" + data:post.id + "\");"'
    href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
    </span>
    <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")
    </script>
    </b:if>
    <div style='clear: both;'/> <!--clear for photos floats-->
    </div>
    </div>

    ....rest of template code ....

    8.Klik simpan.
    9.Setelah tersimpan klik pengaturan.
    10.pilih menu format.
    11.Masukkan kode dibawah ini pada kotak kosong yang bertuliskan Template posting.

    <span id="fullpost">

    </span>

    12.Klik tombol simpan setting.
    13.Selesai.

    Cara posting pastikan pada Edit HTML jangan pilih Compose,maka akan nampak kode dibawah:

    <span id="fullpost">



    </span>

    Cara meletakkan artikel:

    Disini tempat meletak artikel yang akan ditampilkan pada awal posting

    <span id="fullpost">

    Disini tempat meletakkan artikel kelanjutannya atau seluruhnya

    </span>


    Jika ingin tanpa read more tinggal hapus kodenya saja.

    Moga 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