TIP AND TRIK: Desember 2010

Senin, 20 Desember 2010

MEMBUAT BINTANG BERTABURAN DARI MOUSE 2

Kadang kita merasa kesal, bila ternyata bintang bertaburan dari mouse yang berhasil kita buat, sekarang tidak lagi muncul. Adakah shobat yang pernah mengalami ?
Nah, saya sendiri pernah mengalami. Hal ini disebabkan karena link kita pada si pembuat sudah tidak diaktifkan lagi oleh pembuatnya. Duhhhh betapa kecewanya. Aku ubrek - ubrek mbah google untuk mendapatkan trik ini. Nah sekarang aku puas, aku sudah dapatkan cara baru pembuatan bintang bertaburan dengan scrypt. Pingin mencaobanya ?
Ini langkah - langkahnya :

Masuk ke blog shobat
Pilh rancangan
Pilih tambah Gadget
Pilih Java Scrypt/HTML
Pastekan kode berikut :

<script type='text/javascript'>
            // <![CDATA[
            var colour="yellow";
            var sparkles=65;

            var x=ox=400;
            var y=oy=300;
            var swide=800;
            var shigh=600;
            var sleft=sdown=0;
            var tiny=new Array();
            var star=new Array();
            var starv=new Array();
            var starx=new Array();
            var stary=new Array();
            var tinyx=new Array();
            var tinyy=new Array();
            var tinyv=new Array();
            window.onload=function() { if (document.getElementById) {
              var i, rats, rlef, rdow;
              for (var i=0; i<sparkles; i++) {
                var rats=createDiv(3, 3);
                rats.style.visibility="hidden";
                document.body.appendChild(tiny[i]=rats);
                starv[i]=0;
                tinyv[i]=0;
                var rats=createDiv(5, 5);
                rats.style.backgroundColor="transparent";
                rats.style.visibility="hidden";
                var rlef=createDiv(1, 5);
                var rdow=createDiv(5, 1);
                rats.appendChild(rlef);
                rats.appendChild(rdow);
                rlef.style.top="2px";
                rlef.style.left="0px";
                rdow.style.top="0px";
                rdow.style.left="2px";
                document.body.appendChild(star[i]=rats);
              }
              set_width();
              sparkle();
            }}
            function sparkle() {
              var c;
              if (x!=ox || y!=oy) {
                ox=x;
                oy=y;
                for (c=0; c<sparkles; c++) if (!starv[c]) {
                  star[c].style.left=(starx[c]=x)+"px";
                  star[c].style.top=(stary[c]=y)+"px";
                  star[c].style.clip="rect(0px, 5px, 5px, 0px)";
                  star[c].style.visibility="visible";
                  starv[c]=50;
                  break;
                }
              }
              for (c=0; c<sparkles; c++) {
                if (starv[c]) update_star(c);
                if (tinyv[c]) update_tiny(c);
              }
              setTimeout("sparkle()", 40);
            }
            function update_star(i) {
              if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
              if (starv[i]) {
                stary[i]+=1+Math.random()*3;
                if (stary[i]<shigh+sdown) {
                  star[i].style.top=stary[i]+"px";
                  starx[i]+=(i%5-2)/5;
                  star[i].style.left=starx[i]+"px";
                }
                else {
                  star[i].style.visibility="hidden";
                  starv[i]=0;
                  return;
                }
              }
              else {
                tinyv[i]=50;
                tiny[i].style.top=(tinyy[i]=stary[i])+"px";
                tiny[i].style.left=(tinyx[i]=starx[i])+"px";
                tiny[i].style.width="2px";
                tiny[i].style.height="2px";
                star[i].style.visibility="hidden";
                tiny[i].style.visibility="visible"
              }
            }
            function update_tiny(i) {
              if (--tinyv[i]==25) {
                tiny[i].style.width="1px";
                tiny[i].style.height="1px";
              }
              if (tinyv[i]) {
                tinyy[i]+=1+Math.random()*3;
                if (tinyy[i]<shigh+sdown) {
                  tiny[i].style.top=tinyy[i]+"px";
                  tinyx[i]+=(i%5-2)/5;
                  tiny[i].style.left=tinyx[i]+"px";
                }
                else {
                  tiny[i].style.visibility="hidden";
                  tinyv[i]=0;
                  return;
                }
              }
              else tiny[i].style.visibility="hidden";
            }
            document.onmousemove=mouse;
            function mouse(e) {
              set_scroll();
              y=(e)?e.pageY:event.y+sdown;
              x=(e)?e.pageX:event.x+sleft;
            }
            function set_scroll() {
              if (typeof(self.pageYOffset)=="number") {
                sdown=self.pageYOffset;
                sleft=self.pageXOffset;
              }
              else if (document.body.scrollTop || document.body.scrollLeft) {
                sdown=document.body.scrollTop;
                sleft=document.body.scrollLeft;
              }
              else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
                sleft=document.documentElement.scrollLeft;
             sdown=document.documentElement.scrollTop;
              }
              else {
                sdown=0;
                sleft=0;
              }
            }
            window.onresize=set_width;
            function set_width() {
              if (typeof(self.innerWidth)=="number") {
                swide=self.innerWidth;
                shigh=self.innerHeight;
              }
              else if (document.documentElement && document.documentElement.clientWidth) {
                swide=document.documentElement.clientWidth;
                shigh=document.documentElement.clientHeight;
              }
              else if (document.body.clientWidth) {
                swide=document.body.clientWidth;
                shigh=document.body.clientHeight;
              }
            }
            function createDiv(height, width) {
              var div=document.createElement("div");
              div.style.position="absolute";
              div.style.height=height+"px";
              div.style.width=width+"px";
              div.style.overflow="hidden";
              div.style.backgroundColor=colour;
              return (div);
            }
            // ]]>

simpan.
Keterangan :
Untuk warna lain ubah yellow sesuai dengan keinginan shobat. Caranya ubah yellow dengan :
merah dengan "red", biru dengan "blue", hijau dengan "green", putih dengan "white", ungu dengan "purple"

Selamat menikmati ....!

MEMBUAT RECENT SLIDE POST

Kadang kita merasa sedih ketika postingan lama kita tidak pernah tersentuh oleh pengunjung lagi. ini disebabkan karena ketidaktahuanpara pengunjung terhadap keberadaan postingan kita tersebut. Nah.. shobat, untuk sedikit mengurangi rasa sedih tersebut ada baiknya shobat membuat recent slide post, sehingga postingan lama kita bisa dibaca kembali oleh para pengunjung, syukur pengunjung mau membuka kembali.

Nah, bila shobat ingin mencobanya, ini sedikit trik dari saya :

Masuk ke bloger kamu

Pilih rancangan

Pilih tambah gadget

Pilih Java Scrypt/HTML

Pastekan kode berikut :

.gfg-root {

width : 90%;

height : auto;

position : relative;

overflow : hidden;

text-align : center;

font-family: "Arial", sans-serif;

font-size: 12px;

border: 2px solid #9be106;

}

.gfg-title {

font-size: 14px;

font-weight : bold;

color : #f8c664;

background-color: #245b09;

line-height : 1.4em;

overflow : hidden;

white-space : nowrap;

}

.gfg-title a {

color : #ccc333;

}

.gfg-subtitle {

font-size: 14px;

font-weight : bold;

color : #ccc333;

background-color: #ecdc53;

line-height : 1.4em;

overflow : hidden;

white-space : nowrap;

margin-bottom : 0px;

}

.gfg-subtitle a {

color : #f3eb0e;

display:none !important;

}

.gfg-entry {

background-color : green;

width : 100%;

height : 6.9em;

position : relative;

overflow : hidden;

text-align : left;

margin-top : 3px;

}

/* To allow correct behavior for overlay */

.gfg-root .gfg-entry .gf-result {

position : relative;

background-color : green;

width : auto;

height : 100%;

padding-left : 20px;

padding-right : 5px;

}

.gfg-list {

position : relative;

overflow : hidden;

text-align : left;

margin-bottom : 5px;

display:none !important;

}

.gfg-listentry {

line-height : 1.5em;

overflow : hidden;

white-space : nowrap;

text-overflow : ellipsis;

-o-text-overflow : ellipsis;

padding-left : 15px;

padding-right : 5px;

margin-left : 5px;

margin-right : 5px;

}

.gfg-listentry-odd {

background-color : #2ca940;

}

.gfg-listentry-even {

}

.gfg-listentry-highlight {

background-image : url('garrow.gif');

background-repeat: no-repeat;

background-position : center left;

}

* FeedControl customizations.

.gfg-root .gfg-entry .gf-result .gf-title {

font-size: 24px;

line-height : 1.2em;

overflow : hidden;

white-space : nowrap;

text-overflow : ellipsis;

-o-text-overflow : ellipsis;

margin-bottom : 2px;

}

.gfg-root .gfg-entry .gf-result .gf-snippet {

height : 3.8em;

color: #d6fa59;

margin-top : 3px;

}

* Easy way to get horizontal mode, applicable via js options to gadget.

.gfg-horizontal-container {

position : relative;

}

.gfg-horizontal-root {

height : 1.5em;

_height : 100%;

position : relative;

white-space : nowrap;

overflow : hidden;

text-align : center;

font-family: "Arial", sans-serif;

font-size: 13px;

border: 1px solid #f2e2ba;

padding : 5px;

margin-right : 80px;

}

.gfg-horizontal-root .gfg-title {

font-weight : bold;

background-color: #d6fa59;

line-height : 1.5em;

overflow : hidden;

white-space : nowrap;

float : left;

padding-left : 10px;

padding-right : 12px;

border-right: 1px solid #f2e2ba;

}

.gfg-horizontal-root .gfg-title a {

color : #bdd20b;

text-decoration : none;

}

.gfg-horizontal-root .gfg-entry {

width : auto;

height : 1.5em;

position : relative;

overflow : hidden;

text-align : left;

margin-top : 0px;

margin-left : 0px;

padding-left : 10px;

}

/* To allow correct behavior for overlay */

.gfg-horizontal-root .gfg-entry .gf-result {

position : relative;

background-color : white;

width : 100%;

height : 100%;

line-height : 1.5em;

overflow : hidden;

white-space : nowrap;

}

.gfg-horizontal-root .gfg-list {

display : none;

}

* FeedControl customizations.

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,

.gfg-horizontal-root .gfg-entry .gf-result .gf-author {

display : none;

}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {

color: #fff714;

margin-right : 3px;

float : left;

}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {

float : left;

}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,

.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {

display : block;

color: #f2e2ba;

}

.gfg-branding {

white-space : nowrap;

overflow : hidden;

text-align : left;

position : absolute;

right : 0px;

top : 0px;

width : 80px;

}

.gfg-collapse-open, .gfg-collapse-closed {

background-repeat : no-repeat;

background-position : center;

cursor : pointer;

float : right;

width : 17px;

height : 20px;

}

.gfg-collapse-open {

background-image : url('arrow_open.gif');

}

.gfg-collapse-closed {

background-image : url('arrow_close.gif');

}

.gfg-collapse-href {

float : left;

}

.clearFloat {

clear : both;

}

#feedGadget {

margin-top : 5px;

margin-left: auto;

margin-right: auto;

width : 500px;

font-size: 10px;

color: #f5ab40;

}

</style>

type="text/javascript"></script>

function showGadget() {

var feeds = [

{title:'title',

url:'http://haripurwantosolobaru.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',

{numResults : 1000, stacked : true,

title: "ENTRY DISCRIPTION"});

}

google.load("feeds", "1");

google.setOnLoadCallback(showGadget);

</script>

<div id="feedGadget">Masih Proses, Mohon Sabar :D</div>

<div id="feedGadget"><a href="http://haripurwantosolobaru.blogspot.com/" target="_blank"></a>Sponsored By :<a href="http://haripurwantosolobaru.blogspot.com/" target="_blank">HARIPURWANTO</a>.</div>

Simpan

Keterangan :

Ubah warna dan ukuran font sesuai keinginanmu

Ubah http://haripurwantosolobaru.blogspot.com dengan url kamu

Ubah HARI PURWANTO dengan judul blog kamu

Ubah http://haripurwantosolobaru.blogspot.com/feeds/posts/default dengan url atom kamu

Selamat menikmati

Selasa, 07 Desember 2010

MEMASANG FILE SWF DI BLOG

File flash yang berekstensi swf merupakan file pemanis dalam tampilan blog atau website. Hal itu karena sifatnya yang interaktif, ringan (ukuran file biasanya tak terlalu gede) dan dapat dibuat sendiri dengan berbagai tutorial yang tersedia di dunia maya. Sehingga akan lebih nampak “sentuhan pribadi” pada tampilan tersebut.

File flash dalam berbagai bidang memang sangat berdaya guna sebagai media interaktif. Yang saya rasakan sendiri adalah dalam bidang pendidikan anak, file flash sangat cocok untuk menampilkan berbagai materi secara interaktif sehingga sangat menarik terutama untuk usia anak-anak, sehingga pembelajaran menjadi lebih menarik dan merangsang anak untuk mencoba nya sendiri. Dengan mempelajari sedikit cara menggambar, kemudian diolah dengan action script anda telah dapat menampilkan sebuah animasi yang menarik untuk ditampilkan pada blog atau website pribadi.

Bagi anda yang memiliki blog atau website yang telah dihosting terpisah, baik gratis maupun berbayar, mungkin tidak menjadi masalah dalam mengembed file flash. Namun bagi kita yang ngeblog pada paket gratis tanpa hosting perlu sedikit belajar bagaimana mengembed file flash. Jika blog anda berada di wordpress.com maka anda tidak diijinkan untuk mengembed file flash, gak tau juga kenapa yah?? Tapi kalao blog anda di blogger.com (blogspot) atau blogdetik.com (yg saya tahu hehehe…) anda masih diijinkan untuk memasang file flash di blog.

Bagi kita yang nge-blog tanpa hosting terpisah, persoalan berikutnya adalah dimana kita menyimpan file flash tersebut? Karena biasanya tak dapat di simpan pada paket penyimpanan yang tersedia pada blog kita. Solusinya adalah file kita simpan di web yang menyediakan file swf hosting, tentu saja kita pilih aja yang gratis. Tapi hati-hati yang gratisan begini biasanya diembel-embeli dengan iklan, maklum merupakan sumber pendapatan mereka. Diantara free file swf hosting, saya pribadi lebih pas menggunakan 4shared.com atau swfcabin.com. Keduanya gratis dan langsung bisa kita pasang di blog.

Jika anda upload file di 4shared.com, untuk memasang file swf perlu beberapa langkah berikut :

Login di 4shared.com
Upload file swf anda
Coba mainkan file swf tersebut di 4shared.com, untuk mendapatkan url dari file swf anda harus mengcopy sumber filenya. (URL yg tampil pada 4shared.com jika kita pasang pada blog akan menampilkan juga halaman 4shared.com)
Cara mendapatkan url file, Klik “Tool”, klik “Page Info”, klik “Media” (untuk browser Mozilla Firefox). Kemudian perhatikan daftar file yang tampil, cari file dengan keterangan “embed” atau “menggabung”. Blok nama url tersebut kemudian copy dan pasang di blog sesuai format embed pada blog anda.

Untuk swfcabin.com, jauh lebih mudah tanpa regristrasi anda langsung upload file swf, kemudian ikuti langkah mendapat URL file swf seperti pada langkah diatas, setelah anda mendapatkan copy url file swf anda kemudian pasang di blog sesuai format yang diijinkan. Namun perlu diingat karena tanpa regristrasi maka url file harus anda simpan dengan baik karena jika memerlukan sewaktu-waktu anda harus search menggunakan nama file tersebut.

Sabtu, 04 Desember 2010

MEMBUAT BLOGROLL

Apa manfaat dari blogroll?

Kita kadang berpikir dua kali ketika menu link yang kita punya begitu banyaknya, sehingga menyita banyak tempat. Namun dengan marquee, semua bisa teratasi. Kita tinggal memperkecil skala heigt dan weight marquee itu dan membuat link menu yang kita punya menjadi berjalan., sehingga semua link tetap dapat dilihat dan diakses. Untuk membuatnya, langkah - langkah yang perlu diambil adalah :
Copy kode berikut:

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="80%" height="200" >
Masuk ke blog kamu
Pilih rancangan
Pilih tambah gadget
Pilih Kode HTML
Copy code berikut :
Pastekan di sini kode yang kamu copy tadi.
Tulis link kamu di bawahnya
Blok yang barusan kamu tulis
Pilih link

isikan alamat URL link kamu

OK

Ketik

</marquee>

Simpan.
kembali ke blog kamu.
Selamat menikmati hasilnya.....

Sedikit penjelasan.. Kode diatas tidak baku harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan dengan kondisi dan keinginan sobat. Kode yang bisa di rubah adalah :

scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5"

direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" , direction="left" , direction="right" .

width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" , width="100%"

height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" , height="400" , height="250" .
Selamat mencoba.......

Jumat, 03 Desember 2010

MEMBUAT SCROLBAR

Sudah pernahkah kamu mellihat blog yang menyajikan sebuah tampilan yang dapat digeser ke kanan dan ke kiri sekehendak kita, dimana di dalamnya terdapat pilihan menu yang dapat kita buka?
Nah disini akan saya coba untuk mendiskripsikan bagaimana langkah - langkah membuat membuat scrollbar tersebut.

langkah pertama, masuklah ke blog kamu
pilih rancangan
pilih tambah gadget
pilih Java Srip/HTML
Copy code di bawah ini dan pastekan kedalamnya

<div style="overflow:auto;width:200px;height:50px;padding:10px;border:1px solid #eee">

Di sini tulislah judul menu yang akan dijadikan link
Contoh : Membuat scrolbar

</div>

Selanjutnya blok judul menu kamu dan klik link
masukkan alamat link
OK
simpan
Selamat menikmati ........

Kamis, 02 Desember 2010

Membuat bintang bertaburan dari mouse

Kamu pernah melihat bintang yang jatuh dari kursor pada blog blom ? Kalau pengin lihat disini. Nah tertarik bukan ? Yang jelas dengan kehadiran bintang yang jatuh bertaburan, membuat blog kamu menjadi tambah caaaaaantik dan seeeeeru. kalau pengin, langkahnya begini:

Masuk di blog kamu
pilih rancangan
Pilih tambah gadget
Pilih HTML/ java scrypt
Copy code HTML di bawah ini :

Simpan.

Selamat menikmati.......

Membuat menu drop down

Banyak sekali tip and trik yang menampilkan bagaimana cara membuat tampilan menu yang menawan. Pengin lihat, nich contohnya.Ini terinspirasi setelah banyak muter - muter di dunia maya.Dulunya saya sendiri juga bingung, kock bisa ya... gumun lah. Namanya juga pemula. Setelah banyak mencoba dan hasilnya nihil. Sampai pada akhirnya ketemu trik jitu untuk membuat menu cantik.

langkah pertama, kunjungi situs flash vortex.com
Pilih contoh menu yang tersedia
Gantilah teks dan warna tampilan sesaui imajinasi kamu
klik generation.
copy code html yang tersedia.
selanjutnya masuk di blog kamu
pilih rancangan, tambah gadget
pilih HTML/java script
pastekan
simpan.

silahkan lihat hasilnya.

Cara membuat banner

Banyak sekali tip and trik yang menampilkan bagaimana cara membuat banner. dulunya saya sendiri juga bingung setelah banyak mencoba dan hasilnya nihil. Sampai pada akhirnya ketemu trik jitu untuk membuat banner.

langkah pertama, kunjungi situs flash vortex.com
Pilih contoh banner yang tersedia
Gantilah teks dan warna tampilan sesaui imajinasi kamu
klik generation.
copy code html yang tersedia.
selanjutnya masuk di blog kamu
pilih rancangan, tambah gadget
pilih HTML/java script
pastekan
simpan.

silahkan lihat hasilnya.