Kumpulan efek - efek pada blog

 Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat script yang bisa di pasang di blog.

Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat  bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.

A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.

1. Efek salju berjatuhan
   
   <script src='http://tateluproject.googlecode.com/files/snow.js' type='text/javascript'></script>


2. Efek hati bertaburan
   
   <script src='http://tateluproject.googlecode.com/files/lovingheart.js' type='text/javascript'></script>

3. Efek bintang bertaburan

    <script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>

4. Efek kembang api

   <script src='http://tateluproject.googlecode.com/files/kembangapi.js' type='text/javascript'></script>

5. Efek Gelembung

    <script src='http://tateluproject.googlecode.com/files/efek-gelembung.js' type='text/javascript'></script>

5. Efek Kupu - Kupu Terbang
  
   <script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu1.js"></script>
   

Cara pemasangan :

1. Klik rancangan --> Edit html
2. Letakkan script efek di atas kode </body>
3. Klik Save

B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

1.Meteor Jatuh

 <script language="javascript">
nd_mode="meteor";
nd_control="on";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>
 

 2. Banjir
 <script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

 3. Bunga Mekar

 <script language="javascript">
nd_mode="flowers";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

4.  Bom Atom

     <script language="javascript">
nd_mode="bomb";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

5. Ufo
  <script language="javascript">
nd_mode="ufo";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

6. Graffity
 <script language="javascript">
nd_mode="graff";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

7. Shaver
 <script language="javascript">
nd_mode="shaver";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

8. Gun
 <script language="javascript">
nd_mode="gun";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

9.Bloody gun
<script language="javascript">
nd_mode="blood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

10. Paint ball
 <script language="javascript">
nd_mode="paint";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

11. Chainsaw
 <script language="javascript">
nd_mode="chainsaw";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

12. Dinosaur
< script language="javascript">
nd_mode="dino";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

13. Lebah
 <script language="javascript">
nd_mode="wasp";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

14. Lalat
 <script language="javascript">
nd_mode="fly";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

15. Semut
<script language="javascript">
nd_mode="ants";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

16. Siput
<script language="javascript">
nd_mode="snail";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

17. Cacing
<script language="javascript">
nd_mode="worms";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

18. Mold
  <script language="javascript">
nd_mode="mold";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

19. Bayi merangkak
   < script language="javascript">
nd_mode="baby";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

20. Telur mata sapi
    <script language="javascript">
nd_mode="eggs";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

21. Kopi tumpah
    <script language="javascript">
nd_mode="coffee";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

22. Terbakar
   <script language="javascript">
nd_mode="burn";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

23. Tomat
    <script language="javascript">
nd_mode="tomato";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

24. Creampie
  < script language="javascript">
nd_mode="creampie";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

25. Murka
  < script language="javascript">
nd_mode="god";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

26. Sapi Jorok
<script language="javascript">
nd_mode="cow";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

27. Anjing Jorok
   < script language="javascript">
nd_mode="dog";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

28. Kencing Sembarangan
 <script language="javascript">
nd_mode="pee";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

Cara pemasangan :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan script efek di dalam kotak yang di sediakan
3. Klik save dan lihat hasilnya.

Tambahan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ).  so, pilih mana yang terbaik menurut sobat.. salam..

Sumber :
http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html

Baca Selengkapnya →

cara membuat auto reed more (thumbnails) pada blog

Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini adalah penyempurnaan dari script auto readmore V1, di mana ditemukan adanya masalah pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dlm auto readmore ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading  page menjadi lebih cepat daripada auto readmore sebelumnya.

Langkah-langkahnya:

1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.

2. Jika dulu sudah diisi script auto  readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari posting auto readmore V1 untuk mengetahui mana saja yang harus dihapus.

3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script -http://buka-rahasia.blogspot.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {   
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script -http://buka-rahasia.blogspot.com- End -->

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<!-- Auto read more -http://buka-rahasia.blogspot.com- Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->

Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar.

Baca Selengkapnya →

cara membuat logo blog keren (6 online text logo generator)

Tampilan logo blog pada header yang khas dan memiliki desain yang bagus pasti menjadi dambaan setiap blogger. Logo blog biasanya ditampilkan sebagai bagian dari header yang berupa paduan gambar dan gambar teks yang berisi nama atau ciri dari suatu blog.  Umumnya, logo blog digunakan untuk menggantikan teks pada bagian title dan deskripsi header. Tentu saja, membuat logo blog, meskipun hanya berupa logo text, bukanlah perkara mudah bagi setiap orang. Keahlian setidaknya dibutuhkan untuk membuat teks logo dengan menggunakan software image editing semacam Correl Draw maupun Photoshop.

Kabar baiknya, saat ini ada banyak layanan situs online logo creator and generator yang dapat memudahkan pekerjaan membuat logo blog. Siapa saja dapat dengan mudah membuat teks logo blog maupun logo blog untuk header dengan hasil yang lumayan baik dan tidak mengecewakan. Telah saya pilihkan 6 online logo generator/creator yang mudah untuk digunakan sebagai berikut:

1. www.textspace.net

Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.

2. www.flamingtext.com

FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.

3. cooltext.com

Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.

4. www.simwebsol.com

Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

5. www.logomatik.net

Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yang dihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.

6. www.thelogoshop.info

Cukup sederhana, atau bisa dibilang sangat sederhana, selain karena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.

Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog. Simak Cara Mengubah/Memasang Gambar Background Header Blogger/Blogspot

Baca Selengkapnya →

cara memasamg start rating di posting blog

Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.

Cara Memasang Star Ratings Widget Pada Official Blogger Templates

Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:

1. Masuk ke dashboard Blogger.

2. Buka halaman layout (page elements).

3. Klik "edit" pada bagian badan posting (blog posts).

4. Klik/centang "Show Star Ratings"

5. Setelah itu save.

Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.

Cara Memasang Star Ratings Widget Pada Custom Blogger Templates

Pada template blogger yg tidak disediakan oleh Blogger sendiri, star ratings tidak akan muncul meskipun sudah diaktifkan dengan cara seperti di atas. Hal ini karena pada template Blogger yg disediakan oleh pihak ketiga tidak diberikan script serta HTML star ratings. Melihat hal demikian, saya mencoba menengok template-template resmi Blogger dan menemukan beberapa bagian widget star ratings. Sebagai uji coba, saya kemudian mengekstraknya & mengaplikasikannya pada template blog ini.

Ada dua langkah penting untuk memasang star rating blogger:

• Memasang Kode HTML star ratings:

1. Aktifkan terlebih dahulu fitur star ratings seperti cara di atas. Apabila tidak ditemukan, akses dashboard melalui draft.blogger.com. Save.

2. Buka edit HTML ( template > edit HTML), jangan lupa centang "Expand Widget Templates".

3. Jika ingin memasang star ratings di bawah judul posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F), letakkan kode berikut di bawahnya. Jika ingin memasang di bawah isi posting, cari <data:post.body/>, letakkan kode berikut di bawahnya:

<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>

Note:

-Apabila anda telah menggunakan share buttons (Facebook, Twitter, Google+) yg saya share pada posting terdahulu, letakkan kode di atas </b:if>.

- Apabila <div class='post-header-line-1'/> tidak ditemukan, cari <data:post.body/>, letakkan kode di atasnya.

• Memasang Script star ratings:

1. Masih pada edit HTML, cari <b:include name='feedLinks'/>, letakkan script berikut di bawahnya:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Note: Jika <b:include name='feedLinks'/> tidak ditemukan, cari <b:includable id='feedLinks'>.

2. Save template.

Blogger star ratings akan muncul di atas atau di bawah posting sesuai cara yg dipilih. Pastikan & perhatikan posisi widget agar sesuai dengan template blog. Jika perlu beri pengaturan CSS agar tampil pada posisi yg sempurna & sesuai keinginan.

Have a nice blogging * Have a nice learning!

Baca Selengkapnya →

cara modifikasi tampilan pd blog

Tips-tricks Blogger kembali lagi membahas tentang mengedit tampilan link di template Blogger/Blogspot. Kali ini diupayakan secara lengkap dan esensial agar nanti sobat dapat mengutak-atik bagian tampilan link secara mandiri.

Bagian CSS yang memberi aturan pada link ada 4 jenis:

1. a : tampilan dasar suatu link

2. a:hover: tampilan link ketika mouse berada di atas link (mouse hovering)

3. a:visited: tampilan link setelah di-click atau ketika halaman link tersebut telah dibuka.

 4. a:active: tampilan link ketika di-click ( ketika halaman baru belum terbuka secara sempurna)

Sedangkan style text CSS memiliki beberapa jenis:

1. color: warna link, valuenya berupa warna hexadesimal, RGB, maupun color name.

2. Text decoration: hiasan pada link, berupa underline (garis bawah, ini bawaan secara default), none (tanpa hiasan), overline (garis di atas) dan blink (berkedip)

3. Font-size: ukuran teks, biasanya dalam pixel (px), em, persen (%), dll.

4. dan masih banyak lagi jenis text-style yang lainnya, sobat nantinya silahkan mempelajari sendiri cara-cara memodifikasi tampilan teks dengan CSS.

Nah, setelah mengetahui beberapa properti style CSS pada link, untuk mengubah tampilan default link pada blog, silahkan lihat pada template Blogger/Blogspot sobat (lihat melalui edit HTML), kemudian cari aturan CSS yang mengatur link, yaitu a, a hover, .... dan seterusnya.

Clue: aturan CSS terletak di antara <b:skin><![CDATA[ dan ]]></b:skin>, aturan link berada di bagian awal, biasanya setelah variable dan setelah body {...}

Contoh aturannya seperti ini (namun tidak sama persis tergantung aturan CSS teks-nya):

a {color: #1C4991; text-decoration: none;}
a:hover {color: #f2984c; text-decoration: underline;}
a:visited {color: 1C4991; text-decoration:none;}

Pada bagian berwarna biru itulah sobat bisa memodifikasi tampilan link, baik tampilan awal link (a), ketika mouse di-hover di atas link (a:hover), dan ketika link telah di klik/dikunjungi (a:visited). Ingat, tampilan dasar link selalu bergaris bawah, maka untuk menghilangkan garis bawah (underline) link pada tampilan link dasar maupun ketika di-hover, harus ditambahkan text-decoration: none. Sedangkan untuk warna, sobat bisa pula mengganti value warna di link di tempate sobat dengan mengganti kode di belakang color: dengan kode warna lain yang diinginkan. Untuk mengetahui kode-kode warna, gunakan Hex Color Code Chart Generator.

Jika ingin menambahkan aturan link lain yang belum ada di template sobat, misalnya belum ada a:hover, maka tinggal ditambahkan saja, dengan catatan urutannya harus seperti ini:

1. a {aturan css text styling}
2. a:hover {aturan css text styling}
3. a:visited {aturan css text styling}
4. a:active {aturan css text styling}

Keempatnya harus memiliki unrutan seperti itu, jadi tidak boleh terbalik-balik, kecuali jika salah satunya tidak ada, boleh langsung melompat ke aturan link lain.

Jika ingin mengubah tampilan link secara individual dan berbeda dari aturan default link yang mengikuti aturan template, sobat bisa langsung memasukkan perintah CSS text-style ke dalam link yang ingin diberi tampilan berbeda (style="....."), misalnya:

<a  href="http://buka rahasia.blogspot .com" style="color:#FF9900;text-decoration:blink;font-size:24px">tips-tricks blogger</a>

Maka hasilnya akan seperti ini:

tips-tricks blogger

(Note: Penggunaan text decoration berjenis blink di atas hanyalah untuk contoh, perhatikan benar-benar penggunaan text decoration seperti ini karena dapat membuat mata lelah dan sakit. Ga percaya? Silahkan dilihat terus link di atas dalam waktu 2 atau 3 menit. Hehe... Padu padankan warna, ukuran, serta urgensi/kepentingan penggunaannya sehingga benar-benar pas dan tidak berlebihan).

Nah, sekarang jika sobat ingin mengutak-atik tampilan link blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, belajar dan belajar! Good luck!

Baca Selengkapnya →

tool peralatan bermanfaat pd blog

Untuk melakukan maintenance/perawatan blog serta untuk memudahkan optimasi desain blog, ada beberapa tools/peralatan yg bisa digunakan. Posting ini merupakan rangkuman artikel-artikel yg berkaitan dengan Blog Tools / alat penunjang blog untuk melakukan usaha-usaha yg telah disebutkan di atas:

1. Contact Form

Contact form sangat berguna untuk melakukan komunikasi dan korespondensi dengan pembaca/pengunjung blog secara personal. Dengan menggunakan contact form kita juga dapat menjauhkan spam karena pesan tidak langsung disampaikan melalui email. Alamat email pun tidak terekspose dan menjadi sasaran empuk para spammer. Posting ini memberikan arahan tidak saja untuk membuat form kontak, tapi juga cara untuk menjadikan tool ini menjadi sebuah halaman yg menjadi bagian dari blog.

2. Alexa Rank
Alexa ranking adalah tolok ukur peringkat blog/web yang dinilai dari beberapa hal seperti: jumlah traffic, termasuk pageview dan visitor, lama pengunjung berada dlm sebuah situs, jumlah traffic dari search engine (penilaian dlm hal SEO), usia dan latar belakang pengunjung, review, dan masih banyak lagi. Dengan menggunakan patokan Alexa Rank, kita dapat mengetahui perkembangan blog khususnya dalam hal traffic. Posting ini mengulas tentang bagaimana mendaftarkan blog/web di Alexa dan membawa anda ke posting lain tentang bagaimana meraih peringkat Alexa Rank. Sebuah tool yg menurut saya wajib digunakan oleh para Blogger.

3. Follow by Email Widget

Widget ini merupakan tool baru dari Blogger yg sangat berguna untuk menggaet royal readers sehingga anda dapat memastikan berapa banyak orang yg menjadi pembaca setia blog anda. Widget ini dapat menjadi alternatif pengganti email subscription melalui FeedBurner.

4. Image Compression Tool

Tidak seperti alat kompresi gambar yg lain, PNG Gauntlet adalah tool offline (software) yg memiliki banyak keunggulan dibandingkan tool-tool online. Yg paling mencolok adalah kita tidak perlu mengupload dan mendowload file gambar sehingga dapat menghemat waktu. Selain itu, tool ini memiliki banyak fitur dan jenis kompresi gambar PNG yg memiliki hasil/output dengan kualitas yg sama bagusnya dengan gambar PNG sebelum dikompres. Kompresi gambar yg maksimal dapat mempercepat loading gambar blog dan kualitas yg bagus dapat menjaga kualitas tampilan blog. Posting ini memuat link download gratis untuk mendapatkan PNG Gauntlet.

5. Alexa & Pagerank Toolbar

Penggunaan toolbar dengan fungsi yg banyak tidak hanya akan memberi informasi mengenai Pagerank Google yg dimiliki sebuah halaman situs dan peringkat ALexa-nya, namun juga memberi anda informasi mengenai dofollow/nofollow link, keyword density, related links, peringkat SERP, kekuatan SEO, dan masih banyak lagi. Add on ini compatible dengan Mozilla Firefox Browser.

6. CSS Compression Tool

Berfungsi memampatkan/kompres file CSS blog dengan cara kerja instan. File-file CSS terkadang ditulis tampa memperhatikan efisiensi penggunaan kode serta memiliki banyak sekali white space, sehingga file menjadi lebih berat dan besar,. Browser pun akan membaca lebih lama. Oleh karea itu, kita perlu melakukan kompresi CSS baik secara manual maupun dengan Tool seperti yg telah dimuat dalam posting ini.

7. Quick Post Editor

Untuk melakukan posting dan mengeditnya secara cepat tanpa membuka post editor Blogger, pastikan anda menginstal ScrivefireNext yg merupakan add-on Firefox untuk melakukan editing post/artikel secara efision dan dengan fitur yg lengkap.

8. Free Fast Javascript Hosting

File javascript (.js) eksternal, atau yg diupload ke hosting lain berpengaruh terhadap kecepatan loading. Request browser yg mendapat respon terlalu lama dari server hosting javascript dapat mengganggu dan memperlama kesempurnaan loading blog. Oleh karena itu, gunakan hosting ini yg dapat memuat dengan cepat dan digunakan untuk pribadi (khusus untuk satu atau beberapa web/blog tertentu saja) sehingga dapat menjamin cepatnya download file js oleh browser.

9. Blog Speed Test
Sebuah blog atau website memiliki kecepatan loading (load speed) dan waktu loading (load time) yg berbeda-beda sesuai dengan berat dan banyaknya file di dalam sebuah halaman. Oleh karena itu, kita perlu mengetahui seberapa cepat/berat blog ketika di load oleh browser. Cek kecepatan blog sesuai dengan kecepatan internet standar (internasional) untuk mengetahui seberapa berat file di dalam halaman-halaman blog. Lakukan langkah-langkah penting apabila blog anda memiliki berat dan waktu loading yg terlalu lama. Diantaranya adalah dengan menggunakan beberapa tool kompresi dan hosting javascript yg cepat seperti di atas

10. URL Shortener
Memendekkan URL asli memiliki banyak manfaat, diantaranya adalah url terlihat rapi dan tidak terlalu memakan baris. Selain itu, bagi anda yang memiliki banyak link affiliasi/referral, menyembunyikan url affiliasi/referral yang sebenarnya dapat meningkatkan jumlah klik ataupun kunjungan. Gunakan layanan URL-shortener dari 11 situs yang berhasil saya kumpulkan. (Note: Jangan gunakan shortlink untuk source link [link sumber], link partner, dan sejenisnya).

11.Hex Color Chart Generator

Khusus untuk tool yg satu ini, anda dapat menggunakan secara langsung. Gunakan dan cari variasi serta kombinasi warna yg dapat anda gunakan untuk membuat komposisi warna yg akan digunakan sebagai bagian warna dari blog/web anda.

12. Facebook Insights For Blog/Website
Gunakan Facebook Insights, tool bagi para blogger/webmaster menganalisa dan memahami tingkat popularitas, ketertarikan, serta kepuasan pengguna Facebook akan konten blog/web yg di-share melalui Facebook. Ketahui jumlah "likes", sends", "shares", klik, impressions, "recommend", popular pages, asal/negara user, dan lain sebagainy

Baca Selengkapnya →

membuat cursor di ikuti teks

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();



Cara Menambakannya adalah Sbgb:
1.Masuk ke akun **** anda
2.Pilih Tata Letak/Rancangan--->Kemudian Pilih HTML/Java Script
3.Masukan kode/Script Diatas
4.Ubah kode yg berwarna hijau sesuai keinginan sobat
5.Simpan
~SELAMAT MENCOBA~

Baca Selengkapnya →

membuat juduk blog berganti"

Seperti pada Judul diatas, kali ini kita akan membahas cara membuat judul Bl09...
langsung aja ke TKP mas bro.... :D hehehehe...


1. Buka dan Loggin Blogger
2. Masuk Ke Rancangan
3. Elemen Halaman
4. Tambah Gadget --> HTML/Java Script
5. Copaz Code saya ini.

<script language="JavaScript">
<!--
/*****JUDUL BERGANTI By. Iwenk*****/

function tb5_makeArray(n){
this.length = n;
return this.length;
}

tb5_messages = new tb5_makeArray(6);
tb5_messages[0] = "pesan 1";
tb5_messages[1] = "pesan 2";
tb5_messages[2] = "pesan 3";
tb5_messages[3] = "pesan 4";
tb5_messages[4] = "pesan 5";
tb5_messages[5] = "pesan 6";
tb5_rptType = 'infinite';
tb5_rptNbr = 10;
tb5_speed = 50;
tb5_delay = 2000;
var tb5_counter=1;
var tb5_currMsg=0;
var tb5_stsmsg="";
function tb5_shuffle(arr){
var k;
for (i=0; i<arr.length; i++){
k = Math.round(Math.random() * (arr.length - i - 1)) + i;
temp = arr[i];arr[i]=arr[k];arr[k]=temp;
}
return arr;
}
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
tb5_arr[i] = i;
tb5_sts[i] = "_";
}
tb5_arr = tb5_shuffle(tb5_arr);
function tb5_init(n){
var k;
if (n == tb5_arr.length){
if (tb5_currMsg == tb5_messages.length-1){
if ((tb5_rptType == 'finite') && (tb5_counter==tb5_rptNbr)){
clearTimeout(tb5_timerID);
return;
}
tb5_counter++;
tb5_currMsg=0;
}
else{
tb5_currMsg++;
}
n=0;
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
tb5_arr[i] = i;
tb5_sts[i] = "_";
}
tb5_arr = tb5_shuffle(tb5_arr);
tb5_sp=tb5_delay;
}
else{
tb5_sp=tb5_speed;
k = tb5_arr[n];
tb5_sts[k] = tb5_messages[tb5_currMsg].charAt(k);
tb5_stsmsg = "";
for (var i=0; i<tb5_sts.length; i++)
tb5_stsmsg += tb5_sts[i];
document.title = tb5_stsmsg;
n++;
}
tb5_timerID = setTimeout("tb5_init("+n+")", tb5_sp);
}
function tb5_randomizetitle(){
tb5_init(0);
}
tb5_randomizetitle();

//-->
</script>

Keterangan Code :
Tulisan Berwarna merah: Adalah Pesan yang ingin Kita Tulis di Judul
Tulisan Berwarna hijau: Adalah Satuan Delay dari tiap tiap Pergantian Teks
Tulisan Berwarna biru: Adalah Kecepatan Pergantian Teks

Baca Selengkapnya →

cara mengganti icon blog pada address bar

apabila anda belum merasa puas dengan tampilan blog anda, mungkin tutorial ini akan sedikit membantu untuk memperindah blog anda. Simak ea... :)

1. Log in Blogger
2. Layout
3. Pilih Edit HTML
4. Kemudian Letakkan kode berikut sebelum kode  </head>

<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>


Silahkan ganti kode berwarna biru dengan url gambar anda, anda bisa menggunakn gmbar dbawah ini :





http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif


Demikian tutorial Cara Mengganti Icon Blog Pada Address Bar, semoga dapat membantu anda dan bermanfaat untuk anda. Terimakasih atas kunjunganya.    

Baca Selengkapnya →

memasang flash pd blog

Untuk memasang flash ke dalam blog cukuplah mudah. Yang kamu perlukan yaitu file flash yang biasanya ber-extensi .swf lalu upload file tersebut ke hosting. misal di geocities.com ato 000webhost ato tempat hosting lainnya. File animasi flash tersebut bisa dijadikan hiasan pada blog ato bisa juga dijadikan hiasan di header sehingga membuat blog menjadi lebih animatif. Untuk memasang flash pada blog caranya sebagai berikut :

1. Login ke blogger kemudian pilih menu "Layout".
2. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.
3. Pilih "HTML/Javascript" kemudian taruh script berikut :

<embed src="http://blogoholic.info/wellcome.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

Contoh :


* Ganti "http://blogoholic.info/wellcome.swf" dengan alamat file flash kamu yang telah ditaruh di hosting. 
* Ganti width="500" height="100 dengan ukuran dari file flashmu.

Baca Selengkapnya →

membuat tempat chating di blog

Sebelumnya saya pernah membahas mengenai pembuatan fasilitas life chat di blog (Baca: Fasilitas Live Chat di Blog). Jika disitu Anda bisa memilih olark, jabbify dan geesee, sekarang Anda akan mempunyai lebih banyak lagi pilihan. Selain menempatkannya di blog, Anda bisa memilih untuk menempatkannya di halaman fans facebook untuk chat konferensi atau bareng-bareng (baca:Menambah Fasilitas Chat di Halaman Fans Facebook).

cbox
Chat ini yang paling simple, ukurang kecil dan mudah digunakan.

99Chats
Chat ini dapat dengan mudah ditambahkan ke blog Anda. Juga sangat simple dalam pengoperasiannya. Anda bisa chat bareng-bareng atau ngobrol prinadi dengan klik nama orang di kolom daftar nama, pada bagian kanan chat.

GixawChat
Ini cukup komplit dan bagus. Sayangnya di versi free Anda hanya bisa memiliki satu ruang ddengan 5 orang chatters. Jadi sangat terbatas.

TinyChat
Sekarang tampil dengan desain yang lebih bagus. Untuk pendaftaran pun mudah karena Anda bisa gunakan akun twitter Anda. Loadnya relatif lebih cepat ketimbang yang lain.

Meebo
Ini juga sama namun memiliki kelebihan dalam hal fitur yang jauh lebih bagus, seperti Anda bisa dengan mudah sharing foto dari flickr atau video dari youtube.

Yaplet
Ini salah satu yang sangat bagus, karena ini akan tampil di sisi kanan situs Anda. Loading juga ringan dan sangat cepat. Setelah Anda masukkan pesan akan cepat muncul. Widget ini tidak akan menjadi bagian gadget Anda jadi Anda jangan takut akan tata ruang. Yeplet mempunyai jendela sendiri di bagian kanan blog Anda.

Chatango
Chatango adalah salah satu yang paling mudah diatur daam hal background dan lain-lain. Instalasi juga mudah, hanya saja sangat gampang terputus saat jaringan lemah. Anda bisa chat rame-rame dan juga privat dalam satu widget.

Semoga bermanfaat... Silahkan Anda pilih yang Anda suka sebagai alternatif tempat chatting di blog Anda.... Jika Anda punya rujukan lain untuk tempat pembuatan kotak chatting, silahkan tambahkan di komentar...  Sekali lagi, Terima kasih banyak dan semoga bermafaat...

Baca Selengkapnya →

memasang script gambar kamera cctv di blogspot

Membuat gambar kamera melayang seperti anda lihat di pojok kanan atas blog saya itu sangat mudah koq. Mau tau caranya? Agan" juga mau memasangnya di blog agan? oke saya kasih tau deh, dari pada nanti agan" nangis gak di kasih tau sama saya. hahaha PEACE gan :p

ni scriptnya:

<script language="JavaScript" src="http://js4you.googlecode.com/files/cctv.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMGb-eTQz_tOYSg4sptDogv4PaspORqSAu4cqFD5po7yaxohokUkUUMEMXOFKXihL_jqt4yYpZDX1NtjBjhxBvKIFXKRHg-V-AT7TFs6iv9_l2C4Gm3qvvFWm9mB4y7Po8CTZrOn7eaZ8/s1600/cctv.gif")</script>

Cara memasangnya:


1. Buka blog agan.


2. Masuk ke rancangan


3. Pilih elemen laman


4. klik Tambah Gadget


5. Pilih HTML/JavaScript


6. dan terakhir, copy script yg tadi dan paste kan di HTML/JavaScript. Lalu simpan, dan lihat hasilnya.






Gampang kan sob? nah cuma itu yg bisa saya share. Jika ada kesalahan kata atau apa lah gitu mohon di maklumin. Maklum saya masih newbie sob. hehe :)






Jangan lupa berkomentar juga ya!






oia https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMGb-eTQz_tOYSg4sptDogv4PaspORqSAu4cqFD5po7yaxohokUkUUMEMXOFKXihL_jqt4yYpZDX1NtjBjhxBvKIFXKRHg-V-AT7TFs6iv9_l2C4Gm3qvvFWm9mB4y7Po8CTZrOn7eaZ8/s1600/cctv.gif juga bisa kalian ganti dengan gambar kalian :)
Diposkan oleh mashter fahrian

Baca Selengkapnya →

cara membuat daftar isi sesuai label

Ini yang sering kali susah di cari keywordnya oleh blogger. Jadi setiap mau nyari di google susah ketemu padahal ini yang di cari cari buat blogger. Dari pada ngetik satu satu kebanyakan, mending langsung cara simple nya aja.
Saya sampai bingung cari keyword nya, akhirnya ketemu juga.
Dan dari pada bingung nyari nya lagi takut lupa, saya posting aja :)

Cara Membuat Daftar Isi sesuai label atau kategori, mungkin ini biasa ya ? oke saya tambahkan dengan fungsi scroll ? oh itu baru luar biasa  :)
Demo nya anda bisa lihat di bagian 3 kolom pada bagian bawah. Bagus bukan ? Mari kita membuatnya.

Cara Membuat Daftar Isi Sesuai Label :

1. Login dulu ke blog anda, lalu ke rancangan, dan tambahkan gadget > HTML/Javascript.
2. Copy paste kode di bawah ini lalu save

<script style="text/javascript">
var numposts = 500;
var standardstyling = true;
</script>

<script type='text/javascript' src='http://gecokkkk.googlecode.com/files/label-post.js'></script>
<div style="overflow:auto;width:280px;height:200px;padding:10px;border:1px solid #eee">
<ul>
<script src="http://gecokk.blogspot.com/feeds/posts/default/-/Tutorial Blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=100"></script>
</ul>
</div>

    3. Lalu save dan lihat hasilnya :)

Catatan:  
width:280px adalah lebar scroll;
height:200px adalah tinggi scroll;
dan yang paling penting huruf yang di cetak tebal berwarna biru (Tutorial Blog), itu adalah nama label atau kategori. Harap diganti sesuai anda.

Baca Selengkapnya →

cara membuat player musik di blog yg auto replay

Untuk memenuhi permintaan dari sobat-sobat  yang setia pada blog ini, dimana para sobat banyak yang sangat menginginkan bagaimana cara membuat sebuah player musik di blog yang dapat mengulang-ulang lagunya secara otomatis.

Dalam postingan kali ini saya akan membagi kepada anda, sebuah player musik yang berjalan secara otomatis yang juga dapat mengulang-ulang lagunya secara terus menerus sampai anda ataupun pengunjung blog anda merasa bosan untuk mendengarkan lagunya hehehe...namun player musik ini hanya untuk membaca lagu yang berformat mp3.

Tanpa panjang lebar mari...kita siapkan peralatan tempurnya...!

• Siapkan secangkir kopi hangat dan sebungkus rokok.
• Siapkan lagunya, formatnya harus mp3, agar tidak memberatkan loading dari blog anda, usahakan ukuran lagunya dibawah 1Mb, dan lagunya terserah  mau rock, pop, dangdut, jazz yang penting lagunya enak didengar.
• Upload lagunya kedalam hostingan anda, saya menyarankan anda mengupload lagunya Disini, setelah mengupload lagu tersebut anda akan mendapatkan linknya, dan catat link mp3 tersebut.
• Dan terakhir silahkan anda copy/paste script yang ada dibawah ini kedalam blog anda, namun terlebih dahulu rubah tulisan yang berwarna "Merah" dengan link lagu milik anda sendiri.

<embed wmode="transparent" src="https://sites.google.com/site/davotmarbun/CatatanPena.swf" flashvars="file=HTTP://LINK LAGU MILIK ANDA.mp3&amp;frontcolor=0xffffff&amp;backcolor=0xe6e  6dc&amp;lightcolor=0xffffff&amp;repeat=always&amp;autostart=true&amp;usefullscreen=false&amp;showeq=true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" menu="false" allowfullscreen="false" width="260" height="24"></embed>

Mudah bukan dan silahkan anda mencobanya.

Dan dibawah ini adalah contohnya.

Knaan - Wavin Flag ( By: Catatan Pena )

Semoga informasi ini bermanfaat.

Baca Selengkapnya →

Javascript Untuk Menonaktifkan Klik Kanan Mouse

Javascript Untuk Menonaktifkan Klik Kanan Mouse


Kenapa klik kanan mouse harus di-disable? tentu karena beberapa kepentingan, diantaranya konon mempersulit copy paste, meskipun tetap saja bisa di copy. Kalau menurut saya sendiri menonaktifkan klik kanan mouse berguna untuk situs-situs tertentu yang memang mensyaratkan klik kiri baru linknya bisa bekerja, salah satunya jika menggunakan teknik seperti di Cara Membuat Iklan Banner Affiliasi Tidak Tampak Linknya. Pembuatan link semacam itu biasanya diterapkan pada situs / blog download. Perhatikan dua jenis link dibawah ini:

Gudang Informasi

Gudang Informasi

Pada link sebelah kiri, saat di klik kanan akan ada pilihan untuk "Open Link In New Window" sedangkan yang sebelah kanan tidak ada., nah situs dengan cara kerja link seperti disebelah kanan itulah yang sering perlu menonaktifkan klik kanan mouse. Kenapa link perlu dibuat seperti sebelah kanan? wew, kapan-kapan deh dibahas.
Cara mendisable klik kanan dengan kode javascript adalah seperti dibawah ini:
<script language="JavaScript">
var message="Maaf Dilarang Klik Kiri";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
Letakkan saja kode diatas dihalaman yang ingin klik kanan mousenya tidak berfungsi. Untuk menerapkan pada seluruh halaman blog letakkan saja di bagian header, diantara <head> dan </head>. Warna merah bisa Anda ganti dengan pesan Anda sendiri.
Contoh penerapan bisa dilihat disini. Tips ini memang sederhana, namun dengan ide dan gabungan dari beberapa trik sederhana akan membuat sebuah konsep yang bagus. Semoga bermanfaat.

Incoming search terms for the post:

mematikan klik kanan, cara mematikan javasCript, gudang javascript, menonaktifkan klik kanan, pengertian klik kanan, mouse tidak bisa klik kanan, javascript iklan, pengertian klik kiri, pesan larangan membuka dibloger, cara menonaktifkan clik kanan dengan php, menonaktifkan klik kanan dengan memunculkan pesan, cara membuat mouse lucu pada blogger, mengnonaktifkan klik kanan, gudang java script, informasi tentang java script, javascript meninaktifkan klik kanan, cara mematikan klik kanan, cara mematikan java script, aplikasi javascript function disabled tidak bisa dicopy, cara matikan javascript, agar wordpress tidak bisa klik kiri

Baca Selengkapnya →

Cara membuat blog / web agar terindex di google dengan cepat

 cipok dulu akh... :D wkwkwkk
langsung aja ane kasih link tuk blog/web agan" agar terindex di mbah google dgn cepat... :)
http://googleping.com/

Baca Selengkapnya →

Cara Membuat Auto Read More Pada Blog

Fungsi Read More kali ini emang agak berbeda dengan Read More yang kita bahas sebelumnya. Bila versi terdahulu kita harus mengatur tulisan yang akan di tampilkan dengan yang di minimalisasi tulisan menggunakan cara manual dengan melakukan pemangilan fungsi :

....<span class="fullpost">.............</span>

dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan yang ada di template posting. Untuk versi Auto Read More kali ini akan lebih mudah dan simple, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode seperti diatas.

Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman kita sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter.

1. jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan
2, jumlah karakter tanpa image. apabila masih bingung langsung aja kita bahas dengan praktek.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

kode yang kita pelajari sebelumnya tampilannya seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More.. &#187;&#187;</a>
</b:if>

jika sudah ikuti langkah-langkah selanjutnya.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode

</head>

kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Kedua, Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:left'>
<a expr:href='data:post.url'>Read More... <data:post.title/></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Tulisan yang berwarna coklat itu menandakan read more + judul posting jika kita tidak menghendakinya tinggal di hapus.
dan tulisan left yang berwarna biru menandakan letak daripada tulisan read more tersebut.
jika left : berarti berada di sebelah kiri. tetapi jika kita ganti menjadi
right : berarti berada di sebelah kanan (seperti pada contoh gambar di atas)

silahkan disimpan dan lihat hasilnya :)

Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Semoga Berhasil.

Baca Selengkapnya →