ShaRing KNoWLedGe...

CARA MEMBUAT RECENT POST DENGAN THUMBNAIL YANG PRAKTIS.....

2010-11-30T08:04:00.002+07:00

Contoh preview

..Hanya sekedar berbagi informasi seputar blogspot... mungkin banyak juga blogger yang sudah mengetahui hacked recent post gadget ini di blogspot.. bagi yang belum mengetahui simak cara membuat recent post dengan cuplikan gambar terkait postingan ( thumbnail ) yang praktis ini...

..Ini contoh Recent Post dengan thumbnail yang susah membuatnya ... linknya > www.bloggertricks.com .... kalau mau mencoba silahkan...

Mengapa Praktis ? ..karena kita tidak perlu susah-susah meng-oprek script atau mengunakan file javascript.. semuanya sudah dibuat sedemikian rupa mudah ..hanya tinggal diatur sesuai keinginan kita... akhirnya ada juga yang mau hack ini gadget.. hehe :D .. oke langsung saja simak cara membuatnya..

Langkah-langkahnya sebagai berikut :

1. Login ke Blogger > Rancangan > Elemen halaman ...

2. Klik Tambah gadget di tempat yang kamu inginkan untuk meletakan Recent Post Thumbnail ini...

3. Pada pop up window daftar gadget pilih menu Unggulan... cari gadget dengan nama Recent Post Advanced by Bloggerplugin.org....

4. Add gadget dengan cara Klik pada gambar / namanya / simbol [ + ] ...

5. Lalu akan muncul pop up window Setel Gadget... kamu atur sesuai yang kamu inginkan..... judul RP-nya / ukuran RP / border RP dan sebagainya... seperti contoh ini :
> Snippet style = Pilih summary & thumbnail
> Snippet thumbnail = Pilih any thumbnail
> Show powered by link = Pilih No

6. Jika sudah di atur sesuai yang kamu inginkan maka Simpanlah... dan lihat hasilnya dengan refresh halaman blog kamu... Selesai...

Teknologi baju spiderman untuk film terbarunya... HOT...

2010-11-26T13:38:00.000+07:00

Buruan beli gan... di warung deket rumah juga ada kok !!..

Gedung aja bisa hancur akibat bermain sepakbola..

2010-11-26T13:25:00.002+07:00

Siape ye yang nendang ini bola... ??!

Mobil yang paling disegani & ditakuti dijalanan.. apa ya bedanya dengan mobil biasa ?

2010-11-26T13:17:00.000+07:00

silahkan aj gan kalo mau corat-coret, di tabrakin juga boleh.. hehe

Aksi mobil super canggih dengan desain spiderman.. kayak bat-mobil..

2010-11-26T13:06:00.001+07:00

Mobil model spidey ini akan menghemat tempat parkir gan...

Pisau lipat khusus wanita.. merk SWISS loh...

2010-11-26T11:33:00.001+07:00

Ini pisau lipat pasti laku keras di pasaran..

Mobil Fantastis... bikin ratusan orang-orang kepincut.. kalo lagi dibawa jalan bisa dapet kiriman banyak email...

2010-11-26T11:26:00.000+07:00

Nih yang punya mobil pasti sering bonyok mukanya...

Polusi di Bis kota sangat berbahaya.... ini nih buktinya

2010-11-26T11:09:00.000+07:00

Kalo naek biskota siapin aja masker gan..polusinya bikin kanker paru2...

Sendal jepit model terbaru... makin keren aja.. udah pake sistem pengaman loh..

2010-11-26T11:03:00.000+07:00

Gileeeee ....keren gk tuh pengaman !!! sampe yg mo nyolongnya aj ngaruk2 kepala dibuatnya..

Motherboard kalian rusak..tidak usah jengkel... begini cara cepat dan benar memperbaikinya...

2010-11-26T10:51:00.002+07:00

Mudah bukan.... ngak perlu biaya service yang mahal-mahal gan..

Hati-hati Gan ada peraturan baru buang air kecil di toilet umum !!!

2010-11-26T10:37:00.002+07:00

Peraturan baru gan.. :D hehe

CARA UPLOAD FILE JAVASCRIPT KE GOOGLE SITE...

2010-11-24T10:13:00.003+07:00

...Postingan ini untuk membantu beberapa sobat-sobat blogger (pemula/newbie) yang masih belum paham cara mengunakan widget yang menggunakan file javascript..bagi yang sudah mengerti ini hanya sebagai referensi saja.. juga sebagai jawaban dari pertanyaan sobat Bintang Musik .. di postingan artikel "CARA MEMBUAT RECENT COMMENTS..."

...Karena kita blogger maka gunakan saja fasilitas penyimpan yang sudah ada di google yaitu Google site.. bisa juga memakai tempat penyimpanan file lainnya diluar google.

Ikuti langkahnya berikut ini :

1. Meluncur ke sites.google.com ..lalu loginlah dengan user & password gmailmu..

2. Jika belum punya site.. Klik buat situs baru.. lalu ikuti saja langkah-langkahnya..

3. Jika situs anda sudah jadi atau sudah bisa dipakai di google site... Kliklah nama site kamu..nanti akan tampil Beranda situs... lalu Klik Buat Laman (yg ada pada bagian atas kanan beranda)..

4. Pilih template "Lemari berkas" ..beri namanya misalnya "utk file JS"..dan pilih option Letakan laman di Beranda... lalu klik Buat Laman..

5. Di Beranda carilah nama laman tadi "utk file JS" lalu Klik.. maka kamu akan melihat tampilan seperti dibawah ini..

6. Untuk meng-Upload file Javasript (.JS) klik saja Tambahkan Berkas... lalu Browse di komputer kamu & pilih file javascript yang mau di upload lalu klik Unggah... Selesai file JS sudah tersimpan..

7. Cara mengunakan file javascript yang sudah terupload di google site ini sangat mudah.. kamu tinggal copas saja link download (unduhnya)..dengan cara mouse-over link "unduh" lalu klik kanan lalu Copy link location...

8. Paste-kan di tempat yang kamu mau (contohnya di widget yang mengunakan file javascript )..berikut ini contoh link unduhnya : https://sites.google.com/site/ecaknyo/blog/bank-javascript-ecaknyo/addSmiley-ecaknyo.js?attredirects=0&d=1 ..tapi copy & paste hanya sampai .js seperti ini https://sites.google.com/site/ecaknyo/blog/bank-javascript-ecaknyo/addSmiley-ecaknyo.js ..

... Mudahkan ...

CARA MEMBUAT ARTIKEL POSTINGAN TAMPIL HANYA JUDULNYA SAJA...

2010-09-21T09:35:00.001+07:00

...Membuat tampilan artikel postingan di Halaman Utama Blog tampil Minimalis atau hanya terlihat Judul artikel saja seperti yang terlihat di blog ecaknyo ini...

..Hal ini tampaknya menjadi trend juga pada beberapa tampilan blog... adminnya berusaha membuat tampilan blognya sesimple mungkin tapi berkualitas.. salah satunya modifikasi cuplikan artikel postingan diblog...

...Ada ragam cara untuk membuat tampilan cuplikan postingan artikel di blog Minimalis... tapi disini saya akan membahas trik yang saya gunakan untuk meminimalis tampilan postingan artikel sehingga tampak judulnya saja beserta atribut jumlah komentar, tgl posting, label, dsb....

Oke.. langsung saja simak caranya...mudah saja... langkah-langkahnya sbb :

1. Login ke blogger > Rancangan > Edit HTML > Edit Template ( Centang Expand Template Widget ) ...tekan CTRL+F lalu cari " <data:post.title/> " ... jika sudah ketemu lalu tambahkan kode dibawah ini...

Lakukan Persis seperti contoh dibawah ini... Perhatikan ya cara penempatannya...

<div style='border: 0px solid rgb(250, 252, 252); margin: 10px 0px; padding: 10px; -moz-border-radius: 0px 0px 0px 0px; width: auto; height: auto; background-color: rgb(250, 252, 252); '>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
</div>

    </b:if>

Ket :
background-color: rgb(250, 252, 252); = Warna Background-nya bisa kamu ubah sesuai keinginan .. >> cek warna disini

..Jika sudah benar... Simpanlah template-nya..

TRik ini akan membuat Judul artikel postingan seperti gambar dibawah ini...

2. Beralih ke Rancangan > Elemen Halaman > Klik Edit pada Posting bLog.. Lalu aturlah seperti gambar di bawah ini.. atau aturlah seperti kemauan kalian sendiri...

3. Saya pakai editor entri baru dari blogger ( Cek editor kamu di Pengaturan > Dasar > Setting Global > Editor Entri > Pilih option Editor yang diperbarui..) lalu pada awal postingan (tambahkan) klik Insert Jump Break, baru setelahnya isilah dengan postingan kita... Simple kan.. :)

4. Selesai... Terbitkanlah postingan... dan lihat hasilnya pada Halaman Utama Blogmu...

....tapi kalo terlalu minimalis malah aneh ya :D ....

CARA MEMBUAT GOOGLE CUSTOM SEARCH....

2010-09-01T10:14:00.005+07:00

... Jika kalian perhatikan di blog ini baru saya tambahkan widget pencarian artikel menggunakan Google Custom Search... maksudnya biar para pembaca tutor blogging di blog ini mudah dalam pencarian tutor-tutor lainnya yang telah saya postingkan disini... memang sudah saya sediakan scrolling Daftar isi.. tapi saya rasa fasilitas pencarian ini membantu juga bagi yang malas mencari manual di Daftar isi... :) .. sekalian ini postingan (cemilan) ringan...adminnya lagi malas posting yang berat-berat.. :D gyahahahaha...

... Cara membuatnya gampang... perhatikan :

1. Ke Google Custom Search ....

2. Klik Create a custom Search Engine...

3. Isilah Bagian Set up your search engine...

> Describe your search engine

- Name = Judul Blog kamu ....

- Description = Uraian blog kamu...

- Bahasa = Bahasa yang digunakan di blog kamu...

> Define your search engine

- Site to search = Isi dengan URL blog kamu... contohnya : ecaknyo.blogspot.com..

> Select an edition

- Pilih saja yang FREE yaitu Standard Edition... :D

Lalu Centang > I have read and agree to the Terms of Service. ...Kemudian Klik NEXT

4. Aturlah di Bagian Try it out...

> Choose or customize a style

- Pilihlah tampilan pencariannya mau seperti apa.. Klik Customize...

> Try your search engine

- Jika sudah kamu atur sesuai yang kamu inginkan.. lalu kamu coba.. ketik saja judul artikel yang sudah kamu postingkan di blog kamu.. nanti akan tampil sesuai style yang kamu atur tadi..baik warna. background..warna ketika hover.. warna link.. dll..
- Kemudian Klik NEXT..

5. Di Bagian Get the code ...

> Custom Search element code

- Copy code Google custom Search yang ada di dalam Textarea Box

...Login ke Blogger ...dan tinggal Paste saja kode Google Custom Search-nya ke Gadget HTML/javascript... Simpan & Selesai...

...Memperkeren Tampilan Blog juga sih...

UPGRADE BLOGGER.... TELAH ADA DETEKSI SPAM DI BLOGSPOT....

2010-08-24T10:46:00.006+07:00

...Ini kabar baik...jika kalian belum mengetahuinya...atau sudah tahu tapi cuek-cuek saja :D... Blogger sudah menerapkan fitur anti-spamnya di blogspot..

...Fitur ini sangat membantu sekali.. " karena beberapa waktu yang lalu saya juga telah pernah melaporkan ke blogger ada yang membuat spam di kotak komentar saya sampai berkali-kali lagi dengan teks iklan yang sama... benar-benar membuat jengkel .. men-sortir komentar yang berupa spam itu merepotkan sekali.. ya mau tak mau dengan berat hati saya aktifkan lagi verifikasi kata pada kotak komentar untuk minimalisir spam yang masuk... mungkin sudah banyak juga sobat blogger yang pernah mengalami kejadian terkena serangan spam seperti yang saya alami beberapa waktu yang lalu... makanya blogger serius mengkaji masalah spam ini karena imbasnya berpengaruh pada penyimpanan data server blogger juga... bayangkan saja jika blogger dari seluruh penjuru dinia dipenuhi file berupa spam... bisa-bisa over kuota server blogger gara-gara spammer.. sekarang setelah blogger telah menambahkan fitur anti spam ini... otomatis saya non-aktifkan lagi verifikasi kata pada komentar biar sobat-sobat kasih komentarnya pada enak lagi... Siiip... "

..Jika kalian login ke blogger akan lansung terlihat pemberitahuan seperti gambar diatas... kalo kita perhatikan lagi telah bertambah 1 tab menu lagi di deretan menu navigasi blogger yaitu menu tab Komentar.. lihatlah gambar dibawah ini...pengunaannya pun sangat mudah.... :)

... Blogger.. gitu dwong...i like it...

CARA MEMBUAT MENU HORIZONTAL DROP-DOWN (MHD2) DI BLOGGER....

2010-08-11T12:42:00.015+07:00

Demo

....Posting ini atas permintaan dari sobat Sigit Super... " oia gimana caranya buat biar menu di navbar bisa ada dua atau tiga menu.maksudnya dropdown menu plis ya bung ?" ...Widget MHD2 ini termasuk salah satu yang cukup rumit untuk dibahas...Btw setelah beberapa kali saya mencoba membuat sendiri MHD2 ini... sampai merumuskan kode script yang kurang lebih hampir sempurnalah (..menurut saya sih..).. karena telah banyak kode yang saya utak-atik di script MHD2 ini agar sesuai dengan keinginan imajinasi saya....dengan tampilan MHD2 yang Minimalis tapi Modern dan Cool...dan postingan inilah yang akan memuat hasil akhir dari Script MHD2 ala Andi Wong... Ecaknyo... Hehe.. :D ( Narsis.com... )

Jadi... Baca & Pahami langkah-langkah cara pembuatan MHD2-nya berikut ini :

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Dan seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga..kan tinggal copy-paste saja lagi agar template blognya kembali seperti semula..

3. LANGKAH PERTAMA .... Cari (CTRL+F) kode " ]]></b:skin> " lalu Copy script dibawah ini dan Paste-kan diatasnya :

/*  MHD2  */<br /> <br /> <br />           #bg_nav {<br /> <br />               background: #FCF526;   /* kuning_warna background dasar  */<br /> <br />               width: 760px;          /* Panjang dari kotak menu dasar */<br /> <br />               height: 29px;<br /> <br />               font-size: 11px;<br /> <br />               font-family: Arial, Tahoma, Verdana;<br /> <br />               color: #000000;<br /> <br />               font-weight: 28px;<br /> <br />               margin: 0px auto 0px;<br /> <br />               padding: 0px;<br /> <br />               overflow: hidden;<br /> <br />               -moz-border-radius:0px;<br /> <br />               }<br /> <br />          <br /> <br /> #bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */<br /> <br />               color: #ffffff;<br /> <br />               font-size: 11px;<br /> <br />               text-decoration: none;<br /> <br />               text-transform: uppercase;<br /> <br />               padding: 0px 0px 0px 0px;<br /> <br />               }<br /> <br />           #bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */<br /> <br />               color: #ffffff;<br /> <br />               text-decoration: underline;<br /> <br />               padding: 0px 0px 0px 0px;<br /> <br />               }<br /> <br /> <br />           #navleft {<br /> <br />               width: 760px;<br /> <br />               color: #FFFFFF;<br /> <br />               float: left;<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               }<br /> <br />          <br /> <br />           #nav {<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               list-style: none;<br /> <br />               }<br /> <br />           #nav ul {<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               list-style: none;<br /> <br />               }<br /> <br /> <br />           #nav a, #nav a:visited {  /* Menu Utama */<br /> <br />               background: #FCF526;  /*Kuning_warna latar menu utama  */<br /> <br />               color: #053EFA;           /*BIRU_warna teks menu utama */<br /> <br />               text-shadow: 4px 4px 4px #aaa;    /* Memberi efek bayangan di teks */<br /> <br />               display: block;<br /> <br />               height: auto;<br />               <br />               width: auto;<br /> <br />               font-weight: bold;<br /> <br />               margin: 0px auto 0px;<br /> <br />               -moz-border-radius:0px;<br /> <br />               padding: 8px 15px 8px 15px;<br /> <br />               opacity: 0.7;filter:alpha(opacity=70);zoom:1;<br /> <br />               }<br /> <br />           #nav a:hover {<br /> <br />               background: #F7F68F; /*Kuning cerah_warna hover di Menu Utama*/<br /> <br />               color: #3854F2;    /* Biru_warna teks di menu drop-down n teks hover MU*/<br /> <br />               margin: 0px auto 0px;<br /> <br />               font-weight: bold;<br /> <br />               padding: 8px 15px 8px 15px;<br /> <br />               text-decoration: none;<br /> <br />               -moz-border-radius:0px;<br /> <br />               opacity: 0.7;filter:alpha(opacity=70);zoom:1;<br /> <br />               }<br /> <br /> <br />           #nav li {<br /> <br />               float: left;<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               }<br /> <br />           #nav li li {<br /> <br />               float: left;<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               width: 300px;<br /> <br />               }<br /> <br />           #nav li li a, #nav li li a:link, #nav li li a:visited {<br /> <br />               background: #F7F68F;  /*kuning cerah_warna latar menu drop-down*/<br /> <br />               width: 200px;<br /> <br />               float: none;<br /> <br />               margin: 0px;<br /> <br />               padding: 7px 30px 7px 10px;000000;<br /> <br />               }<br /> <br />           #nav li li a:hover, #nav li li a:active {<br /> <br />               background: #F8FABB; /*kuning cerah2_warna hover menu drop-down*/<br /> <br />               padding: 7px 30px 7px 10px;<br /> <br /> <br />               }<br /> <br />          <br /> <br />           #nav li ul {<br /> <br />               position: absolute;<br /> <br />               width: 10em;<br /> <br />               left: -999em;<br /> <br />               }<br /> <br /> <br />           #nav li:hover ul {<br /> <br />               left: auto;<br /> <br />               display: block;<br /> <br />               }<br /> <br />           #nav li:hover ul, #nav li.sfhover ul {<br /> <br />               left: auto;<br /> <br />               }<br /> <br />     #nav li ul a {<br /> <br /> <br />         width: 100px;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li ul ul {<br /> <br /> <br />         position: absolute;<br /> <br /> <br />         margin: -30% 0 0 95%;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {<br /> <br /> <br />         left:-999em;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {<br /> <br /> <br />         left:auto;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li li li.sfhover ul {<br /> <br /> <br />         left:auto;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li:hover, #nav li.sfhover {<br /> <br /> <br />         position:static;<br /> <br /> <br />         }<br /> <br /> /* eleman dibawah header */<br /> #under_header{<br /> margin:-20px 0 25px 0px;<br /> padding:1%;<br /> height;0px;<br /> width:98%;<br /> }<br /> <br /> ]]></b:skin><br />

Contohnya seperti dibawah ini.......

/* MHD2 */

          #bg_nav {

              background: #FCF526;   /* kuning_warna background dasar */

              width: 760px;          /* Panjang dari kotak menu dasar */

              height: 29px;

              font-size: 11px;

              font-family: Arial, Tahoma, Verdana;

              color: #000000;

              font-weight: 28px;

              margin: 0px auto 0px;

              padding: 0px;

              overflow: hidden;

              -moz-border-radius:0px;

              }



#bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */

              color: #ffffff;

              font-size: 11px;

              text-decoration: none;

              text-transform: uppercase;

              padding: 0px 0px 0px 0px;

              }

          #bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */

              color: #ffffff;

              text-decoration: underline;

              padding: 0px 0px 0px 0px;

              }

          #navleft {

              width: 760px;

              color: #FFFFFF;

              float: left;

              margin: 0px;

              padding: 0px;

              }



          #nav {

              margin: 0px;

              padding: 0px;

              list-style: none;

              }

          #nav ul {

              margin: 0px;

              padding: 0px;

              list-style: none;

              }

          #nav a, #nav a:visited { /* Menu Utama */

              background: #FCF526; /*Kuning_warna latar menu utama */

              color: #053EFA;           /*BIRU_warna teks menu utama */

              text-shadow: 4px 4px 4px #aaa;    /* Memberi efek bayangan di teks */

              display: block;

              height: auto;

              width: auto;

              font-weight: bold;

              margin: 0px auto 0px;

              -moz-border-radius:0px;

              padding: 8px 15px 8px 15px;

              opacity: 0.7;filter:alpha(opacity=70);zoom:1;

              }

          #nav a:hover {

              background: #F7F68F; /*Kuning cerah_warna hover di Menu Utama*/

              color: #3854F2;    /* Biru_warna teks di menu drop-down n teks hover MU*/

              margin: 0px auto 0px;

              font-weight: bold;

              padding: 8px 15px 8px 15px;

              text-decoration: none;

              -moz-border-radius:0px;

              opacity: 0.7;filter:alpha(opacity=70);zoom:1;

              }

          #nav li {

              float: left;

              margin: 0px;

              padding: 0px;

              }

          #nav li li {

              float: left;

              margin: 0px;

              padding: 0px;

              width: 300px;

              }

          #nav li li a, #nav li li a:link, #nav li li a:visited {

              background: #F7F68F; /*kuning cerah_warna latar menu drop-down*/

              width: 200px;

              float: none;

              margin: 0px;

              padding: 7px 30px 7px 10px;000000;

              }

          #nav li li a:hover, #nav li li a:active {

              background: #F8FABB; /*kuning cerah2_warna hover menu drop-down*/

              padding: 7px 30px 7px 10px;

              }



          #nav li ul {

              position: absolute;

              width: 10em;

              left: -999em;

              }

          #nav li:hover ul {

              left: auto;

              display: block;

              }

          #nav li:hover ul, #nav li.sfhover ul {

              left: auto;

              }

    #nav li ul a {

        width: 100px;

        }

        #nav li ul ul {

        position: absolute;

        margin: -30% 0 0 95%;

        }

        #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

        left:-999em;

        }

        #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

        left:auto;

        }

        #nav li li li.sfhover ul {

        left:auto;

        }

        #nav li:hover, #nav li.sfhover {

        position:static;

        }

/* eleman dibawah header */
#under_header{
margin:-20px 0 25px 0px;
padding:1%;
height;0px;
width:98%;
}

]]></b:skin>

PAHAMI & PERHATIKAN SCRIPT INTI MHD2 DIATAS :

>> Untuk script diatas ini kalau tidak begitu memahami jangan terlalu banyak diubah2 ya.. biarkan saja seperti MHD2 punya saya diatas...jadi copas saja...takutnya nanti error loh..

> Hitam = Yang ada di bagian bg_nav dan navleft... ini untuk mengatur panjang menu horizontal..harus sinkronisasi ya...silahkan diatur sesuaikan dengan blognya...
> Hijau = Warna Latar menu.... bisa diubah & disesuaikan dengan keinginan...
> Pink = Warna hover menu ketika menu di mouseover... bisa diubah & disesuaikan dengan keinginan...
> Orange = Warna teks menu utama... bisa diubah & disesuaikan dengan keinginan...
> Biru = Warna hover ketika teks di mouseover.... bisa diubah & disesuaikan dengan keinginan...

4. LANGKAH KEDUA.... Cari (CTRL+F) kode " <div id='header-wrapper'> " lalu Copy script dibawah ini setelah kode " </div> " :

..Atau ( Jika tidak ada kode header-wrapper ).. Cari (CTRL+F) kode " <body> " lalu Copy script dibawah ini setelahnya :

<div id='under_header'><br /> <b:section class='header' id='underheader' preferred='yes'/><br /> <div id='bg_nav'><br /> <br />           <div id='navleft'><br />                <div id='nav'><br /> <br />    <ul><br /> <br />         <li><a href='http://ecaknyo.blogspot.com/'> Home</a></li><br /> <br />         <li><a href='####' target='_blank'> Blogging</a><br /> <br />         <ul><br /> <br />         <li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li><br /> <br />         <li><a href='http://www.blogger.com/profile/07038241031299325975' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blogger profil</a></li><br /> <br /> <li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li><br /> <br />         </ul></li><br /> <br />         <li><a href='#' target='_blank'> Demo</a><br /> <br />         <ul><br /> <br />         <li><a href='http://eksperimen284.blogspot.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blog eksperimen284</a></li><br /> <br />         </ul></li><br /> <br />         <li><a href='URL tujuan utk menu 2'> ALAT</a><br /> <br />         <ul><br /> <br />         <li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li><br /> <br />         <li><a href='http://centricle.com/tools/html-entities/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Encode/Decode HTML Entities</a></li><br /> <br /> <li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li><br /> <br /> <li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li><br /> <br />         <li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li><br /> <br /> <li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li><br />         <br />         </ul></li><br /> <br />         <br />              <br />         <li><a href='#' target='_blank'> Download/Upload</a><br /> <br />         <ul><br /> <br />         <li><a href='http://www.filehippo.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> FileHippo</a></li><br /> <br />         <li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li><br /> <br />        </ul></li><br /> <br />         <li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a><br /> <br />         <ul><br /> <br />         <li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li><br /> <br />         <li><a href='http://www.idr-clickit.com/register.php/wong284.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li><br /> <br />         <li><a href='http://www.donkeymails.com/pages/index.php?refid=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li><br /> <br /> <li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li><br /> <br />        </ul></li><br />        <li><a href='http://ecaknyo.blogspot.com/2010/08/cara-membuat-menu-horizontal-drop-down.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat Menu drop-down seperti ini</a></li><br />         <br />   </ul><br /> <br />         </div><br /> <br />         </div><br />  </div><br /> <br /> </div><br />

....Paste-kan persis seperti Contoh dibawah ini :

<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
<div id='bg_nav'>

          <div id='navleft'>
               <div id='nav'>

   <ul>

        <li><a href='http://ecaknyo.blogspot.com/'> Home</a></li>

        <li><a href='####' target='_blank'> Blogging</a>

        <ul>

        <li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li>

        <li><a href='http://www.blogger.com/profile/07038241031299325975' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blogger profil</a></li>

<li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li>

        </ul></li>

        <li><a href='#' target='_blank'> Demo</a>

        <ul>

        <li><a href='http://eksperimen284.blogspot.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blog eksperimen284</a></li>

        </ul></li>

        <li><a href='URL tujuan utk menu 2'> ALAT</a>

        <ul>

        <li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li>

        <li><a href='http://centricle.com/tools/html-entities/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Encode/Decode HTML Entities</a></li>

<li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li>

<li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li>

        <li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li>

<li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li>

        </ul></li>



        <li><a href='#' target='_blank'> Download/Upload</a>

        <ul>

        <li><a href='http://www.filehippo.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> FileHippo</a></li>

        <li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li>

       </ul></li>

        <li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a>

        <ul>

        <li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li>

        <li><a href='http://www.idr-clickit.com/register.php/wong284.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li>

        <li><a href='http://www.donkeymails.com/pages/index.php?refid=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li>

<li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li>

       </ul></li>
       <li><a href='http://ecaknyo.blogspot.com/2010/08/cara-membuat-menu-horizontal-drop-down.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat Menu drop-down seperti ini</a></li>

</ul>

        </div>

        </div>
</div>

</div>

PAHAMI & PERHATIKAN SCRIPT ISI MHD2 DIATAS :

>> kalau kamu telah mengerti susunan menu drop-down diatas ini.... maka kamu akan bisa menambah maupun mengurangi menu drop-down nya... jadi pelajari dan pahami dulu...

> Hitam = Gantilah nama menu-menu nya sesuai keinginan...
> Biru = Ganti alamat URL-nya sesuaikan dengan Nama Menu yang kamu cantumkan...

5. Jika telah sesuai dengan langkah-langkah diatas... sudah kamu edit isi menu-nya sesuai keinginan kamu.. lalu Simpan & Refresh-lah dan lihat hasilnya....

.... Pahami benar2 Script MHD2 ini... .

CARA MEMBUAT WARNA KOTAK KOMENTAR ADMIN BLOG BERBEDA....

2010-08-09T09:02:00.005+07:00

...Ini Modif ke-2 ...baiklah sahabat Marfin... untuk membuat tampilan kotak komentar admin blog berbeda dengan kotak komentar pengunjung blog.. dalam hal ini warna latar dan border kotak komentarnya yang kita modifikasi.. pada postingan yang lalu telah saya bahas mengenai Modif ke-1 yaitu CARA MENAMBAHKAN FUNGSI SCROLLING PADA KOTAK KOMENTAR... dan sekarang mari kita mulai membahas langkah-langkah untuk mengubah tampilan kotak komentar admin blog ini...

Jadi.. Perhatikan & pahami langkah-langkahnya berikut ini :

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga..kan tinggal copy-paste lagi trus simpan & kembali seperti semula..

A. Untuk Kode HTML-nya...

3. Lalu cari "<data:comment.author/>" atau " <data:commentPostedByMsg/> ".... ( tekan CTRL + F untuk pencarian)...

4. Jika sudah ketemu dan yakin sudah benar tempatnya... lalu Copy kode html dibawah ini dan Paste-kan sesudah kode " </dt> "...

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

Dan... cari lagi kode html " <data:comment.body/> " dan tambahkan kode b:if dibawah ini setelah kode " </dd> " ...

</b:if>

5. Lakukan persis seperti contoh di bawah ini...

<data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

            <dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                  <span class='interaction-iframe-guide'/>
                </p>
              </b:if>
            </dd>

</b:if>

            <dd class='comment-footer'>
              <span class='comment-timestamp'>

B. Untuk Kode CSS-nya...
6. Cari kode CSS untuk comment-body ...ini biasanya terletak dibagian atas dari widget template blog.. cari kode css seperti ini " .comment-body " atau " #comments-block .comment-body " ..ini kalau yang di template blog saya....kalau sudah ketemu maka kodenya seperti dibawah ini.....

.comment-body {
font-size:100%;
font-weight:normal;
color:black;
}

Atau seperti dibawah ini... kalau di template blog saya....

#comments-block .comment-body{
border-left:1px solid #C6D09D;
border-right:1px solid #C6D09D;
margin-left:0;
margin-right:20px;
padding:7px}

7. Yang perlu kamu lakukan hanya meng-Copy seluruh kode css .comment-body ini dan Paste-kan dibawahnya.. kemudian ubah namanya menjadi .comment-body-author ...lakukan seperti contoh dibawah ini...

..comment-body {
font-size:100%;
font-weight:normal;
color:black;
}

.comment-body-author {
margin:0px;
padding:5px;
color:#000000;     /* ini untuk mengubah warna huruf */
background:#F77D40;        /* ini untuk mengubah warna latar */
border: 3px solid #CCC;     /* ini untuk mengubah warna bingkai */
border-radius:7px;       /* ini untuk membuat bingkai */
-moz-border-radius:7px;     /* ini untuk membuat lingkaran ditiap sisi bingkai */
-webkit-border-radius:7px;
}

Atau seperti dibawah ini... kalau di template blog saya....

#comments-block .comment-body{
border-left:1px solid #C6D09D;
border-right:1px solid #C6D09D;
margin-left:0;
margin-right:20px;
padding:7px}

#comments-block .comment-body-author {
margin-left:0;
margin-right:20px;
padding:7px;
color:#000000;                     /* ini untuk mengubah warna huruf */
background:#F6FA84;         /* ini untuk mengubah warna latar */
border: 1px solid #CCC;      /* ini untuk mengubah warna bingkai */
border-radius:7px;                /* ini untuk membuat bingkai */
-moz-border-radius:7px;       /* ini untuk membuat lingkaran ditiap sisi bingkai */
-webkit-border-radius:7px;
}

Ket :
> Kode CSS yang saya kasih penjelasan dengan tanda kutip slash bintang ( /* ..... */ )... itu merupakan kode CSS tambahan... jadi Copy-Paste kan kode CSS tambahannya seperti contoh diatas jika kalau memang belum terdapat pada kode CSS di template blog kamu...

8. Jika semua langkah-langkah diatas sudah dijalankan dengan benar... Simpan Template & Refresh Blog kamu... dan lihatlah perubahan yang terjadi pada bagian kotak komentar....

... agak sedikit rumit ya....

CARA MENAMBAHKAN FUNGSI SCROLLING PADA KOTAK KOMENTAR...

2010-08-03T10:13:00.006+07:00

...Modif ke-1...yaitu Penambahan fungsi scrolling pada kotak komentar... ini merupakan salah satu bagian dari modifikasi kotak komentar... karena masih ada lagi modifikasi lainnya seperti Mengubah warna kotak komentar admin blog biar berbeda dengan kotak komentar pengunjung blog (..ini nanti akan saya bahas pada postingan berikutnya... Modif ke-2..)... sebenarnya ada beberapa sobat blogger yang sudah memposting hal ini... tapi setidaknya menambah tutorial di blog ini.. :)

... Saya bahas di postingan kali ini dikarenakan ada sahabat yang menyinggungnya... Sahabat marfin.. " mas saya suka dengan blog mas, saya mau tau cara bikin kolom komentar seperti yangf mas punya, saya pengen belajar mas.. " dan.. "kolom komintarnya ga memakan banyak area gan.. betul gan, saa mau belajar kaya gitu gan.." ...heuuum... okelah kalau begitu... sekalian saya kasih kamu Backlink gratis Marfin.. :D

Jadi...Perhatikan Langkah-langkahnya berikut ini :

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

3. Lalu cari " <dl expr:class='data:post.avatarIndentClass' id='comments-block'> " ... ( tekan CTRL + F ..untuk pencarian)...

4. Jika sudah ketemu dan yakin sudah benar tempatnya... lalu Copy kode html Fungsi Scrolling dibawah ini.. tepat di atasnya...

<div style='overflow:auto; width:ancho; height:400px;'>

dan..

</div>

5. Kemudian cari ( tekan CTRL + F ..untuk pencarian).. " <b:if cond='data:post.commentPagingRequired'> ".. lalu copy /div dibawah ini

</div>

Ket :
overflow = ini yang membuat fungsi efek scrolling secara otomatis jika sudah melebihi kuota widht & hieght yang kita tentukan...
height = bisa kamu ubah-ubah nilainya...
widht = ini juga bisa kamu ganti dengan angka ..dan bisa kamu ubah-ubah juga.. misalnya 500px

Kamu juga bisa memodifikasi lagi kode html Fungsi Scrolling diatas... semakin cerdik akan semakin bagus tampilannya.. tambahkan background ..atau border juga bisa ...tapi hati-hati ya..nanti bisa error template blog-nya.. :)

6. Perhatikan.. langkah 4 & 5 kamu Paste-kan seperti Contoh dibawah ini....

<div style='overflow:auto; width:ancho; height:400px;'>

        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>

<span><a expr:href='"https://www.blogger.com/comment.g?blogID=8387318707126436251&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E%3A%20#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;' style='padding:0px 5px; border:1px solid #999;'>Reply</a></span>

            </dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<i><a href='http://ecaknyo.blogspot.com/2010/08/cara-membuat-warna-kotak-komentar-admin.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat kotak komentar admin seperti ini..</a></i>
<p><data:comment.body/></p>
</dd>
<b:else/>

            <dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                  <span class='interaction-iframe-guide'/>
                </p>
              </b:if>
            </dd>

</b:if>

            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>
</div>
      <b:if cond='data:post.commentPagingRequired'>

7. Simpan perubahan template nya dan refresh blog kamu lihatlah dibagian komentarnya...

... Mudah kan....

CARA MENGEDIT TOP MENU PADA TEMPLATE BLOGGER...

2010-07-19T09:36:00.004+07:00

...Postingan ringan lagi.... yang merupakan pertanyaan dari sobat yunblogs.. " Sob klu mau edit menu di atas blog seperti home ,about,post rss ,coment rss, mohon solusinya sob ? " ..oke setelah dua hari libur ngeblog... now here we go again... :)

...Memang belum tersedia fitur untuk mengedit top menu pada template blogger ..belum secanggih itu... tapi mungkin mbah google suatu saat nanti akan mendukung juga fitur untuk mengubah menu top blogger...wow hehe :D .. idak seperti jika kita menggunakan drupal / joomla / mambo yg praktis hanya tinggal menginstal fitur list top menu yang bisa di ubah-ubah...

... Untuk mengedit top menu pada template blogger kita harus sedikit mengubah kode script html template blognya... jadi perhatikan caranya berikut ini :

>> Contoh I

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga...

3. Tekan Control+F lalu cari kode " <div id='menu'> " ...kalau di kode html blog saya seperti ini.. biasanya ada sedikit perbedaan dengan kode template blog kalian..

4. Nanti akan terlihat kode sesudah " <div id='menu'> " yang seperti contoh dibawah ini...

<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>
   </ul>
</div>

    </div>

Keterangan :

> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...

> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :

<div id='menu'>

<ul>

<li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>

<li><a href='menambah menu di tengah'>Tambah Menu di tengah</a></li>

<li><div class='gap'/></li>

<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>

<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>

<li><a href='http://www.blogger.com/'>Login</a></li>

<li><a href='menambah menu dibawah'>Tambah Menu dibawah</a></li>

</ul>

</div>

ATAU....

>> Contoh II

1. Jika kode html top menu di Contoh I berbeda dengan kode top menu di template kamu.. coba yang ini..
2. Tekan Control+F lalu cari kode " <div class='Menu'> " ...

3. Nanti akan terlihat kode sesudah " <div class='Menu'> " yang seperti contoh dibawah ini...

<div class='Menu'>
               <ul>
               <li><a href='/'><span>Home</span></a></li>
               <li><a href='#' title='About'><span>About</span></a>
</li>
               <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
               <li><a href='#' title='Extras'><span>Extras</span></a>
</li>
               </ul>
           </div>

Keterangan :

> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...

> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Dan jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :

<div class='Menu'>
               <ul>
               <li><a href='/'><span>Home</span></a></li>
               <li><a href='#' title='About'><span>About</span></a>
</li>

                <li><a href='menambah menu di tengah' title='#'><span>Tambah Menu di tengah</span></a>

</li>

                 <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
               <li><a href='#' title='Extras'><span>Extras</span></a>
</li>

                <li><a href='menambah menu dibawah' title='Extras'><span>Tambah Menu dibawah</span></a>

</li>

</ul>
</div>

...mudah bukan...

CARA MEMBUAT RELATED POST... DENGAN ATAU TANPA SCROLLING... DAN TANPA THUMBNAIL....

2010-07-13T13:31:00.026+07:00

... Menambah tutorial lagi.. berhubung ada sahabat blogger iplock yang bertanya "oia kang,ane pngn di scroll dong yang artikel terkaitnya.

jadi ga panjang yang diblog ane ntu,ntuh digimanain ya??? ".... baiklah akan dibahas sekalian di postingan kali ini...

...Artikel Terkait (Related Post) adalah suatu daftar beberapa judul artikel yang masih ada hubungannya dengan judul artikel yang sedang dibaca pada saat itu.. dan biasanya terletak langsung dibawah artikel tersebut....

...Script Artikel Terkait yang saya gunakan mungkin berbeda dengan yang sobat blogger lain gunakan... karena memang sebenarnya ada beberapa kode script yang berbeda untuk menampilkan Artikel Terkait (Related Post)... tetapi untuk menambahkan scrolling pada artikel terkait dengan daftar yang panjang menggunakan trik script scrolling yang sama saja... masih binggung ??! ....

...Tanpa panjang lebar lagi... Pahami langkah-langkahnya berikut ini :
1. Seperti biasa Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang expand template widget )...
2. Backup dahulu template widget-nya ke notepad ( untuk antisipasi )...
3. Tekan Control+F lalu Copas kode ini " </head> " tinggal dicari dengan klik Next / Previous ( jika memakai Mozilla Firefox )...
4. Jika sudah ketemu lalu Copy kode dibawah ini diatas " </head> " ...

5. Paste -kan seperti contoh dibawah ini...

6. Kemudian Cari lagi kode ini " <data:post.body/> " seperti langkah ke- 3 diatas lalu Copy lagi kode dibawah ini sesudahnya...

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>

7. Paste seperti contoh dibawah ini...

<data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>

PERHATIKAN :
> Hitam ;
- Tutorial blogging lainnya... = Gantilah judulnya sesuai dengan keinginanmu...
- "max-results=5" = Ubah nilainya, untuk menentukan banyak artikel terkait yang akan ditampilkan..

> Biru = script ini untuk membuat border kolom pada artikel terkait.. bisa kamu ubah-ubah warnanya di backround-color.. kalau saya menggunakan warna hijau muda... bisa juga kamu atur border, moz-border-radius, dsb... atau bisa juga kamu HAPUS script border kolom ini jika tidak mau memakainya...

> Hijau = Script ini untuk fungsi SCROLLING... bisa kamu atur sesuai keinginan kamu Height, Widht, Border, serta text-align-nya... atau bisa juga kamu HAPUS script scrolling ini jika kamu tidak suka memakai scrolling...

Ket : baik kode script border kolom & kode script Scrolling ini bisa juga diterapkan di kode script related post lainnya.. maksudnya yang mungkin agak berbeda dengan kode script related post yang saya gunakan seperti diatas...

8. Jika sudah selesai.. Simpan Template & Resfresh blognya...

.... Di pahami benar2 dulu ya...

CARA MEMBUAT RECENT COMMENTS...

2010-07-12T12:56:00.010+07:00

...Melengkapi tutorial blogging di blog saya ini.. kali ini saya akan membahas bagaimana membuat widget Recent Comments.. yaitu suatu widget yang berkemampuan menampilkan beberapa komentar terakhir dalam postingan di blog kita...

...Keuntungannya... ialah akan membantu kita dalam mengetahui beberapa komentar yang terbaru... kita juga mengetahui postingan mana saja yang menjadi favorit pembaca... dan apa saja tutorial yang paling dicari ?..
.. Baiklah... langsung saja mulai pembahasan membuat widget recent comments versi saya... jadi pahami baik-baik ya...

... Langkah-langkah membuatnya sebagai berikut ;
1. Seperti biasa login ke Blogger ...
2. Perhatikan kode javascript dibawah ini....

Ket :
> Copy-paste kode javascript diatas ke dalam notepad..
> Lalu ubah teks yang berwarna merah sesuai keinginan kalian...
> Jika telah selesai simpan file notepad ini dengan format .js ... misalnya : recent comments_ecaknyo.js

3. Simpan (Upload) file recent comments.js ini ke google site atau ke server file lainnya... jika sudah salinlah tautan url file recent comments.js tadi...

Contoh : kalau saya menggunakan penyimpanan file di google site.. tautan url-nya seperti ini...

http://sites.google.com/site/ecaknyo/blog/bank-javascript-ecaknyo/recent-comment_ecaknyo_v2.js?attredirects=0&d=1

Ket :
> Copy hanya sampai batas .js saja ( yang saya warnai hitam diabaikan )...

4. langkah instalasi widget-nya.. Blogger > Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript ... lalu copas kode dibawah ini ke dalamnya..

<ul><script style="text/javascript" src="http://sites.google.com/site/ecaknyo/blog/bank-javascript-ecaknyo/recent-comment_ecaknyo_v2.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://ecaknyo.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul>

Ket :
> Biru = Gantilah dengan url file javascript ( .js ) milik kamu yang di-Upload tadi...
> Merah = Gantilah nilai angka-nya sesuai keinginanmu atau biarkan saja (default)..
- Numcomments = Menampilkan banyaknya jumlah komentar...
- Numchar = Menentukan seberapa panjang isi Recent Comment yang ingin ditampilkan...
> Hitam = Gantilah menjadi "true" jika ingin ditampilkan.. atau "false" jika ingin disembunyikan..
- showcommentdate = Menampilkan bulan & tahun...
- showposttitle = Menampilkan judul posting yang dikomentari...
> Hijau = Gantilah dengan feed comments blog kamu sendiri...

5. Jika sudah kamu atur sedemikian rupa..maka Simpan widget & Refresh blog kamu... (letakan dimana saja posisi widget-nya )...

... Selamat Mencoba ...

COLOR PICKER... ??!

2010-07-08T09:20:00.012+07:00

...Postingan ringan kali ini.... kebenaran ada yang tanya lewat email... anonymous.. "sob ..cara buat Color Picker untuk di letakan di blog gimana sih.. tapi yang simple... ??" ..heuumm... kalau mau buat Color Picker untuk blog, saya sarankan tidak usah sob.. karena akan menambah berat loding blog (jika memakai javascript)...

telah banyak juga tutorial yang mengajarkan cara membuat Widget Color Picker untuk Blogger.. kalau mau mencoba-coba silahkan ikuti salah satu contohnya pada link sobat dibawah ini...

> Cara Membuat jQuery Color Picker Di Blogger | Riky Rizkiyana

...ini contoh widget Color Picker-nya....

...Atau jika ingin menggunakan software Color Picker untuk digunakan di PC (ini juga saya dapatkan dari salah satu blog sobat blogger tapi saya lupa nama blognya)... Download Linknya ada dibawah ini...

> HTML-COLOR-PICKER (size : 566.25 KB)

Kalau saya sih lebih suka menggunakan Color Picker Online ini... saya kira beberapa sobat blogger yang lain juga menggunakan service site ini... karena lebih mudah.. tidak di instal di blog kita.. tinggal di bookmark saja di Firefox... selesai...

...seperti dibawah ini tampilan site-nya...

...easy Color Picker...

CARA MEMBUAT TOOLTIPS DI BLOG...

2010-07-05T11:37:00.016+07:00

...Banyak cara untuk memperkeren tampilan blog kita.. membuat perbedaan dengan blog lainnya... ini akan menjadikan blog kita mempunyai ciri khas tersendiri... salah satunya ialah dengan menambahkan efek tooltips di blog.. dimana pada saat di mouseover pada tautan URL (saya fokuskan di tautan saja) akan muncul pop-up Tooltips yang keren...

...Tooltips yang saya bahas ini merupakan hasil ekperimen saya dalam beberapa hari terakhir ini ...dari source code yang saya dapatkan via Mbah Google... Saya telah mencoba berbagai cara & kode untuk membuat Tooltips versi saya sendiri.. dan berhasil dengan ToolTips yang :
1. Gambar background yang bisa diganti-ganti...
2. Efek transparansi yang bisa diubah-ubah.. atau bisa juga tanpa transparansi...
3. Tidak memberatkan blog.. karena tidak memakai javascript (.js)...
4. Font-text nya bisa diganti-ganti...

...Ini Contoh Tooltips untuk di Postingan.. coba kalian MouseOver Link di bawah ini :

CaRa MemBuat ToolTips di bLog...

Dimana pada saat di MouseOver pada tautan URL (saya fokuskan di tautan saja) akan muncul Pop-Up Tooltips yang keren...

..tapi tooltips ini masih belum sempurna... jadi harap maklum ya.. silahkan sobat blogger sekalian memperbaruinya menjadi lebih baik lagi...

...Oke.. langsung saja kita mulai Sharing Knowledge- nya , pahami langkah-berikut ini ;

A. Kode tooltips untuk di ditempatkan di dalam Kode HTML Template Blog...
1. Login ke Blogger > Rancangan > Edit HTML ...lalu Copy kode ToolTips dibawah ini...

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px; >
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

2. Cari kode berikut ini.. ]]></b:skin> ..dan Paste -kan kode tadi diatasnya... Seperti contoh dibawah ini...

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px;
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

]]></b:skin>

Ket :

background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna biru...

border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

-moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan kalian...

..Dan Seterusnya... silahkan kalian Modifikasi sendiri ya... banyak jika harus dijelaskan satu-persatu.. capek ngetiknya.. :)) ..saya yakin kalian mengerti kode-kode sisanya... ;)

3. Jika telah selesai.. Simpan Template Blog...

B. Kode untuk memanggil tooltips pop-up (Muncul)...
1. Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya berfungsi..

<li><a href="http://.....URL yang berkaitan dengan ToolTips...." > Judul URL yang berkaitan dengan ToolTips </a><div class="tooltips"><p> Kata-kata untuk ditampilkan pada Pop-up ToolTips</p></div></li>

Ket :
> Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya makan tooltips-nya tidak akan berfungsi...

...Ini Contoh Pengunaannya... yang saya gunakan pada widget HTML/Javascripts.. (bisa juga kamu gunakan pada postingan loh..)...

<li><img src="http://i466.photobucket.com/albums/rr22/wong284/arrow_DOWNLOAD.gif" /><a href="http://www.ziddu.com/downloadlink/7138173/FarmFrenzy2.rar" > GaMe Farm Frenzy 2</a><div class="TOLtip"><p>Permainan uji ketangkasan dalam mengelola lahan Pertanian...</p></div></li>

...Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian Free DownLoad di sebelah kanan Blog ini.. seperti gambar dibawah ini... :)

Note :
> Sebaiknya Kemunculan Pop-Up Tooltip-nya kalian atur munculnya dibawah Link/gambar tautan.. agar Tooltips ini bisa digunakan di seluruh area dalam blog kamu (di widget sebelah kiri/kanan atau di postingan atau di header/footer)...
> Kode Tooltips ini saya atur sedemikian rupa agar tampilannya sesuai dengan keinginan saya dan tema blog saya... makanya belum tentu akan cocok dengan blog lainnya... jadi silahkan kalian utak-atik sendiri sekreatif mungkin agar sesuai dengan tema blog/ keinginan kalian...

... Tooltips yang Simple...

CARA MEMBUAT MENU MULTI TAB DI BLOG...

2010-06-29T08:46:00.007+07:00

...Menjawab pertanyaan dari Sobat Sigit Super... " oia gan caranya buat daftar isi kaya bung book online gimana?ajarin lagi dong.cz kemarin aku nyoba dengan tak contek di view page source malah eror " ..baiklah kalau begitu akan saya bahas melalui posting ini..

...Menu Multi Tab ini biasanya digunakan pada blog yang kontennya sudah padat.. jadi bisa menghemat ruang .. 3 in 1 widget jadinya...tinggal klik tabnya saja untuk berpindah-pindah ke isi menu tab berikutnya... didalam widget multi tab ini pada tiap-tiap tab-nya bisa kamu sematkan kode script Buku Tamu (Tab 1), Kode script Daftar isi (Tab 2), dan Kode Script Blogroll (Tab 3) atau terserahlah sesuai keinginan kamu...

Demo

...Pahami langkah-langkah cara membuatnya berikut ini ;

A. Menyisipkan Kode Script Menu Multi Tab di Kode HTML Template Blog

1. Seperti biasa.. Login ke Blogger > Rancangan > Edit HTML ( Biasakan centang expand template widget )..
2. Lalu Copy kode script dibawah ini...

/*----MULTItab----*/
div.TabView div.Tabs
{
height: 35px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color: #56FCFA;
-moz-border-radius:10px 0px 0px 0px;
width: 125px;
text-align: center;
height: 35px;
padding-top: 3px;
vertical-align: middle;
border: 0px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #56FCFA;
text-shadow: 4px 4px 4px #aaa;
font-size:12px;
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #999999;
-moz-border-radius:0px 0px 0px 10px;
text-shadow: 4px 4px 4px #aaa;
font-size:14px;
overflow: hidden;
background-color: #56FCFA;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/*----end----*/

3. Dan Paste kan sebelum kode ]]></b:skin> ...seperti contoh dibawah ini...

4. Kembali ke Wigdet Edit HTML... Copy lagi kode dibawah ini...

5. Paste kan lagi sebelum kode </head> ...seperti contoh dibawah ini...

6. Jika sudah selesai dan benar, sesuai dengan langkah-langkah diatas.. maka klik Simpan Template...

B. Menambahkan Widget Menu Multi Tab di Elemen Halaman Blog

1. Blogger > Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript... ( Silahkan letakan widget Menu Multi Tab ini di bagian halaman blog yang kamu inginkan )...
2. Lalu Copy kode script dibawah ini...

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 80;text-shadow: 4px 4px 4px #aaa;font-size: 12px;">
<a>GANTILAH NAMA MENU TAB 1 INI</a>
<a>GANTILAH NAMA MENU TAB 2 INI</a>
<a>GANTILAH NAMA MENU TAB 3 INI</a>
</div>
<div class="Pages" style="width: 465px; height: 250px;">

<div class="Page">
<div class="Pad">
ISI MENU TAB 1 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 2 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 3 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

3. Jika sudah.. Simpan & Refresh blog kamu untuk melihat hasilnya...

...Menghemat Ruang Blog...

CARA MEMBUAT KATA SAMBUTAN, KATA PENUTUP & KATA PERTANYAAN DI BLOG...

2010-06-28T10:49:00.020+07:00

...Menjawab lagi pertanyaan dari sobat Cerita Dewasa lagi... "Bagaimana caranya (cara pasang + scriptnya) kalo blog kita ada pengunjung, trus pengunjung tersebut mau keluar(close) dari blog kita, secara otomatis blog kita ngeluarin pertanyaan (kata-kata apalah...) pada saat blog kita di tutup ? "... maaf sob.. baru saya jawab pertanyaan kamu sekarang dikarenakan adanya kesibukan dalam 1 minggu terakhir ini diluar dunia maya..

...Disini juga akan saya bahas Cara membuat kata sambutan & Cara membuat kata penutup... trik ini menggunakan javascript.. kata-kata ini akan muncul dengan pop-up window pada saat ada yang berkunjung ke blog ataupun meninggalkan blog kita.. yang perlu kamu lakukan hanya Copy-Paste Javascript -nya dan ubah kata-katanya sesuai keinginanmu..

...Oke Langsung saja ya, simak caranya berikut ini ;

A. Cara membuat Kata Sambutan di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

<SCRIPT language='JavaScript'>alert("WELCOME TO ECAKNYO BLOG! FIND TUTORIAL THAT YOU WANT AND DO NOT FORGET GIVE COMMENTS!");</SCRIPT>

Ket : ...Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

<SCRIPT language='JavaScript'>alert("WELCOME TO BLOG ECAKNYO! FIND TUTORIAL THAT YOU WANT AND DO NOT FORGET GIVE COMMENTS!");</SCRIPT>
</head>

4. Simpan template & refresh blog kamu untuk melihat hasilnya...

B. Cara membuat Kata Penutup di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

Ket : ..Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

4. Simpan template & refresh blog kamu untuk melihat hasilnya...

ATAU....

C. Cara membuat Kata Sambutan Berupa Pertanyaan di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

Ket : ..Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

4. Simpan template & refresh blog kamu untuk melihat hasilnya...

D. Cara membuat Kata Penutup berupa Pertanyaan di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

Ket : ..Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

4. Simpan template & refresh blog kamu untuk melihat hasilnya...

ATAU YANG SEPERTI INI...

E. Cara membuat Kata Sambutan Secara Beruntun di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

<SCRIPT language='JavaScript'>alert("Halo Bro ! ");alert("WELCOME TO BLOG ECAKNYO!FIND TUTORIAL THAT YOU WANT AND DO NOT FORGET GIVE COMMENTS!");alert("Silahkan Mulai Membaca Sob...");</SCRIPT>

Ket :
> Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..
> Tambah / Kurangi kata-katanya sesuai keinginan kamu..
> Bisa juga kamu masukan kata Pertanyaan...
> Contoh Kata Sambutan Beruntun di atas juga bisa kamu terapkan di Kata Penutup...
> Tapi hati-hati kata beruntun ini bisa buat jengkel sobat blog kita karena mau confirm "ok" melulu.. :))

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

<SCRIPT language='JavaScript'>alert("WELCOME TO BLOG ECAKNYO! ");alert("FIND TUTORIAL THAT YOU WANT AND DO NOT FORGET GIVE COMMENTS!");alert("Silahkan Mulai Membaca Sob...");</SCRIPT>
</head>

4. Simpan template & refresh blog kamu untuk melihat hasilnya...

..Contohnya ada disini > eksperimen284

..Silahkan Mencoba..

CARA MEMBUAT EXPLORER D-TREE...

2010-06-15T08:06:00.018+07:00

.... Kali ini sobat blogger yang bertanya adalah Cerita-Dewasa "brooo,, kalo pengin daftar isi kayak yang paling atas gimana caranya??? itu tuu... yang open all ? " ... memang sudah ada beberapa yang tanya seperti ini karena melihat tampilan Menu D-Tree di blog ini.. Sebenarnya malas banget kalau membahas trik yang satu ini karena pembahasannya panjang..fiiuuh.. tetapi akan saya buat sesederhana mungkin sobat..biar kalian paham.. jika kalian telah paham maka akan lebih mudah untuk mengubah-ubahnya tampilannya seperti kemauan kalian sendiri :)

...Explorer D-Tree yaitu menu berantai yang mirip seperti window explorer.. tampilannya yang sepertinya sederhana dan ringkas tetapi sebenarnya bisa mencakup isi yang terdapat dalam blog kita... terus bisa juga kita atur lagi Menu D-tree secerdik kita..tetapi menu ini daftar isinya harus dilakukan secara manual.. :D hehe

...Langsung saja simak caranya berikut ini ;

Tahap A - Copy Paste Js Explorer D-Tree ke dalam kode HTML Template Blog
1. Login ke blogger > rancangan > Edit HTML ..klik Expand Template Widget (dibiasakan)
2. Cari kode html " </head> " lalu letakan kode JS dibawah ini diatasnya ( dibawahnya juga tidak apa-apa) ;

Contohnya seperti dibawah ini ;

3. jika sudah lalu klik Simpan Template...

Tahap B - Copy Paste kode Menu D-Tree ini di Gadget HTML/Java Scripts
4. Rancangan > Elemen Halaman > Tambah Gadget > HTML/Js.. terserah mau kamu letakan dimana Gadgetnya.. aturlah sesukamu.. :)
5. Copy-paste kode dibawah ini..

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://sites.google.com/site/ecaknyo/blog/plus.gif" /><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://sites.google.com/site/ecaknyo/blog/minus.gif" /><b>Close all</b></a></p>

<script type="text/javascript">

</script>

</div>

Panduan :
Merah = Gantilah dengan alamat url blog kamu..
Biru = Gantilah dengan nama Folder Arsip kamu..
Pink = Gantilah dengan nama Judul Posting kamu..
Orange = Gantilah dengan url posting blog kamu yang berhubungan dengan judul posting tersebut..

Keterangan :
d.add(0,-1, = Link Utama Url Utama Blog " Home "..dimulai dari " 0,-1 " ..dst
|
|
d.add(2,0, = Link Kedua berupa Folder " Arsip Lainnya ".. dimulai dari " 2,0 "..dst
|
+---- d.add(3,2, = Link Ketiga Folder " Antivirus " dimulai dari " 3,2 "..dst..
|
+------- d.add(10,3, = isi dari Folder Antivirus... dimulai dari " 10,3 "..dst...

6. Jika sudah selesai ..kLik Simpan Gadget.. lalu refresh blog kamu dan lihatlah hasilnya.. ;)

Note :

> Sengaja tidak saya buat penjelasan yang lebih rinci.. takutnya nanti kalian malah tambah bingung.. pahami saja langkah-langkah diatas.. saya yakin kalian bisa.. dengan begitu kalian akan mengerti sendiri..

> Pakailah dulu alamat url file .Js dan url icon Menu D-Tree saya.. jika Menu kalian sudah sempurna ..baru kalian bisa ganti dengan url file .Js dan url Icon D-Tree kalian sendiri.. Simpan Saja di Google site..

... Susah2 Mudah ya ...

CARA MEMBUAT BUKU TAMU MELAYANG...

2010-06-09T14:14:00.017+07:00

Repost... berhubung ada yang tanya lagi dan telah saya beri petunjuk kalau ada di dalam daftar tutorial blog..coba dicari lagi tapi katanya tidak ada ??..setelah saya lihat eh ternyata judulnya bukan buku tamu melayang melainkan CaRa BuaT WidGet MELAYANG di BLoG.. .. jadi wajar saja sobat blogger pada bingung?? cari di daftar tutorial blog saya ini tapi malah tidak ketemu..dan akhirnya malah tanya lagi.. tanya lagi ?... hehehe.. sory ya :))

...Buku Tamu Melayang yaitu widget/gadget buku tamu yang seolah-olah melayang diatas halaman blog kita..yang memakai tab dengan tulisan buku tamu kalau mau ditampilkan kita klik tab buku tamunya maka buku tamunya akan muncul.. Contohnya seperti disini > websiteecak2.blogspot.com

..Oke ..langsung saja simak caranya berikut ini :

1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

Keterangan :

Merah = Gantilah dengan kode Scripts Widget Buku Tamu yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..

border = Memberi warna pada border konten...aturlah/ubahlah warnanya jika mau.. misalnya FAFFFF (sebaiknya gunakan pencari kode warna Photoshop)
background = Memberi warna pada isi konten.. disini saya menggunakan warna kuning

4. Simpanlah Widget Melayang ini... Selesai.. namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh blog kamu.. Mudahkan.. ;-)

Note :
> Width (Lebar) di kode scripts buku tamunya diatur "190" yaa.. ( width = 190 ) ..agar tampilan tab buku tamunya pas... kecuali kalau kamu ingin tampilan buku tamunya agak kelihatan sedikit... ya bisa diatur > 190 lebarnya..
> Biasanya jika sudah ada widget melayang lainnya diblog kamu kemungkinan bisa menyebabkan error..

..Mari di isi Buku Tamunya yaa !!..

CARA MEMBUAT LINK YANG DI MOUSEOVER MENJADI BESAR....

2010-06-07T07:33:00.012+07:00

... Menjawab pertanyaan sobat Sigit Super .. dia tanya begini "oia btw cara buat link biar jadi besar gimana gan?maksudnya kalo mouse dideketin ke link, terus tulisan link jadi besar ? " ..Trik ini sebenarnya trik lawas alias trik dasar tetapi memang membuat tampilan link blog kita menjadi lebih hidup...

Mau Linknya menjadi BESAR !!!... Simak caranya dibawah ini ;

1. LOginlah di blogger > Tata letak > Edit HTML > di Edit Template kamu Centang Expand Widget Template.. akan tetapi Copas-lah terlebih dahulu Kode HTML Template kamu di Notepad jika nanti kamu ingin mengembalikan lagi tampilan blogmu seperti semula..

2. Cari kode HTML " a:hover " seperti gambar dibawah ini.. lihat pada bagian yang saya beri kotak merah...
3. Aturlah ;
color = aturlah warna yang kamu inginkan pada saat link disorot.. Panduan > CaRa MeLihat Kode WarNA UnTuk BLoG...
font-size = aturlah berapa besar huruf link yang kamu inginkan pada saat link disorot..
font-style = aturlah style huruf yang kamu inginkan.. mau arial / comic / forte dan sebagainya..

4. Jika sudah kLik Simpan TempLate.. Selesai... Refresh Blog kamu.. dan lihatlah hasilnya..

Dan..

Note : Bagi yang TempLate Blog nya yang pada bagian "a:hover" tidak dilengkapi dengan kode HTML color, font-size, font-style kamu tinggal Copy kodenya berikut ini...

color:#5D3EFD;
font-size:22px;
font-style:italic;

dan Paste-kan ditengah-tengah " a:hover{ "seperti contoh dibawah ini ;

a:hover{
color:#5D3EFD;
font-size:22px;
font-style:italic;}

..Paham yaa.. lalu klik Simpan Template..

...Mudah Bukan...

CARA MEMBUAT SPOILER..... SHOW & HIDE BUTTON...

2010-06-03T08:49:00.025+07:00

..Cara membuat spoiler ini ada yang tanya tapi saya lupa siapa yang tanya.. maaf ya jadinya nama blog kamu tidak bisa saya tampilkan di artikel ini.. mungkin sudah banyak sobat blogger yang sudah mengerti memposting trik ini.. tapi berhubung ada sobat yang tanya ke saya.... oke deh.. kita bahas lagi disini...

...Langsung ke intinya .. Spoiler ini digunakan untuk menghemat ruang pada artikel/tampilan blog kita karena kemampuannya yang bisa menyembunyikan dan menampilkan kembali widget/gambar/kalimat..

...Simak caranya berikut ini.. :

1. Copas Kode Script Spoiler dibawah ini ;
2. Terserah ini Spoiler mau diletakan di artikel atau di widget/gadget...

<div style="margin: 5px 20px 10px;" align="center">
<div class="smallfont" style="margin-bottom: 2px;"> <input value="Show" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

PASTE KODE SCRIPT YANG INGIN DI SEMBUNYIKAN DISINI YA

</div>
</div>
</div>

Ket :
align = untuk merubah posisi spoiler tengah/kiri/kanan
border = untuk memberi garis kotak pada spoiler
show/open = nama pada tombol spoiler bisa kamu ubah-ubah

3. Aturlah Sesuai dengan keinginan kamu.. lalu Simpan..

a. Contoh Spoiler Gambar dengan Border = 1px

...ini Spoiler dengan border biasa (border = 1px) .. untuk menghilangkan bordernya jadikan border = 0 px

b. Contoh Spoiler Gambar tanpa border alias 0px...

c. Contoh Spoiler Gambar dengan border alternatif...

Dan ini Contoh SpoiLer yang digunakan pada Widget > eksperimen284.blogspot.com

..Selamat Mencoba..

CARA MEMBUAT IKLAN MELAYANG... DENGAN TOMBOL CLOSE.. SIMPEL...

2010-05-25T07:21:00.012+07:00

...Yang paling banyak tanya lewat komentar di blog seperti sobat yang satu ini faktaduniaunik " Sob..klo iklan melayang tau gak??? mohon pencerahannya sob.. ? " .. Baiklah.. sekarang saya ada waktu untuk menjawabnya.. dan caranya cukup simpel..

Simpel gimana sob... jelasin dong aaah !!!..

...Oke.. Langsung saja ya.. pahami langkah-langkah berikut ini :

1. Loginlah ke Blogger > Tata Letak > Elemen Halaman > Tambah Gadget > HTML/Javascript.. dan gadgetnya biarkan saja tanpa nama/judul...
2. Lalu CoPas Kode IKLAN MELAYANG dibawah ini ke dalam Gadget HTML/Javascript tadi...

3. Lalu klik Simpan gadget.. dan lihat hasilnya dengan Refresh Blog kamu.. ini Contohnya > eksperimen284.blogspot.com

Note :
> Posisi Gadget Melayang ini bisa kamu letakan dimana saja.. di atas / Bawah atau Kanan/ kiri.. aturlah secerdiknya kamu biar tampilnya nanti bagus..
> Tapi.. Jangan Menaruh Gadget ini satu bagian/daerah dengan gadget melayang lainnya.. karena mungkin bisa menyebabkan error..

...wew!!!..Ternyata Mudah yaa...

NetCut v2.0... Software untuk Men-Shutdown Komputer Lain..

2010-04-23T07:40:00.006+07:00

...Salam Blogger.. lama saya tidak mengurusi blog ini dikarenakan ada kesibukan yang lain.. Saya mohon maaf bagi teman-teman blogger yang bertanya langsung ke Blog ini ataupun ke email tapi saya belum sempat menjawabnya..

Oke ..langsung saja ..Saya mau bagi-bagi program kecil yang bernama NetCut v2.0 untuk seorang admin komputer di warnet atau Administrator di sebuah perusahaan yang mempunyai jaringan Net yang kecil.. Program di instal di Server yang membawahi langsung User-user di jaringan...

..Jadi ini program berguna untuk Mematikan komputer user yang ingin kita ShutDown tetapi bisa kita hidupkan kembali.. tapi ingat program ini jangan disalah gunakan.. lagipula sudah ada juga program AntiNetcut untuk mencegah serangan program NetCut ini.. dan program ini mudah untuk digunakan.. Lihat gambar di bawah ini..

NetCut Versi 2.0

=> DownLoad NetCut v2.0 Now...

Note : Saya tidak bertanggung jawab atas penyalah gunaan program ini... disini dipostingkan hanya untuk Sharing Knowledge saja..

... Selamat Mencoba ...

CARA MENGANTI FAVICON DI BLOGGER...

2010-03-04T08:21:00.010+07:00

..Hmmm.. ada beberapa sobat Blogger yang bertanya lewat email.. tapi baru 1 email ini yang saya jawab terlebih dahulu saya liat tanggalnya udah lawas.. wkwkkwk.. lagi-lagi saya mohon maaf kepada sobat-sobat blogger yang pertanyaannya belum saya jawab dikarenakan email saya penuh sekali ..binggung saya lihatnya..padahal udah pakai filter email..

..Bingung.. Oke.. Langsung saja ! ..Cara menganti FAVICON atau LOGO Blog itu sebenarnya simple.. kamu buat dahulu gambar format Animasi (.GIF) jika ingin favicon-nya hidup seperti favicon saya di Blog ini atau jika ingin favicon biasa bisa kamu buat gambar favicon dengan format .Jpg atau .Png.. Jika tidak mau susah-susah kamu cari saja Favicon yang sudah jadi di internet.. banyak tuh ! tapi lebih bagus lagi jika favicon buatan kreatifitas sendiri seperti favicon saya di Blog ini.. Cara Membuatnya pakai Program Adobe Photoshop usahakan ukuran favicon-nya kecil misalnya 100x100 dengan size misalnya 20kb..

...kalau mau buat Favicon animasi GIF baca ini > Cara membuat Animasi Icon dengan GIF Movie Gear v4.01

Atau ...Referensi Favicon Gratis...
> favicon.ico Generator
> FavIcon from Pics -- free favicon.ico for your website (animated )
> Favicon.com - custom icons for your website!

..Lalu UpLoad Gambar Favicon Blog kamu ke Photobucket.. login ke photobucket dan copas Direct Linknya..

...Ikuti langkah-langkah berikut ini untuk menganti favicon blog ;

1. Login ke Blogger > Tata Letak > Edit HTML (biasakan centang expand widget HTML)...
2. Jika sudah silahkan Copy kode script dibawah ini...

Ket :
> Gantilah URL warna biru itu dengan direct Link URL gambar favicon blog kamu..

3. lalu Paste kan disesudah ]]></b:skin> ,Seperti contoh dibawah ini...

]]></b:skin>

<link href='http://i466.photobucket.com/albums/rr22/wong284/iconwong284j_80_10_NEW.gif' rel='SHORTCUT ICON'/>

4. Simpan Template & Refresh Blog kamu untuk melihat hasilnya..

..Blog mudah dikenali dengan Favicon unik..

ReFeRenSi jadi ManaGer BoLa di www.11x11.com...

2010-02-18T10:03:00.009+07:00

..Bagi BLogger yang ManiaC Sepak Bola, rugi banget kalo tidak Blogging tanpa main game Hebaat ini > www.11x11.com < .. yaa kan bisa juga pakai PaypaL lo untuk beli Booster di Game ini.. asiiik kan.. Kalo mau daftar pastikan yang benar membuat nama Login karena Nama itulah yang nanti menjadi Nama Klub-nya kamu...

..Oke langsung saja bagi yang Newbie di 11x11.com.. kamu bisa pilih Menu Bahasa Indonesia pada saat mau Login di 11.com .. setidaknya akan mempermudah pemahaman kamu disaat baru mau mulai memainkan game ini..

Kalo mau daftar sekalian cantumkan Referall saya ya > wong284 atau http://www.11x11.com/users/123985 ... itung2 amal Boosterlah.. wkwkkwkwk :D

ini penjelasan singkat mengenai side bar sebelah kiri di 11.com

Keterangan :
Wong284 = nama Klub kamu = nama user Login kamu juga.. * sudah saya terangkan diatas tadi..
Profil = jika mau melihat dengan lebih jelas lagi KLub kamu mulai dari Biodata, Statistik Klub, Jumlah Piala, dan List Kawan sesama 11.com..
Rumah = kembali ke Halaman Depan 11.com alias balik ke kantor kita untuk melihat info terbaru yang ada di 11.com
Membeli Pendukung = jika kamu mau membeli atau mengetahui tentang Booster
Uang = uang yang dikumpulkan dari hasil ikut Piala Turnamen, bisa kamu gunakan untuk membeli/Melatih Pemain & meng-UpGrade fasilitas KLub..
Exp = Pengalaman dari bertanding di Turnamen jika Menang = 3, Seri = 1, Kalah = 0. Jika kamu sering Menang maka Exp kamu akan cepat meningkat dan kamu bisa cepat-cepat naik Level..
Glory = Nilai keberhasilan Kemenangan kamu..
Points = ini akan kamu dapatkan jika kamu menang bertanding apalagi kalo sampai Juara Turnamen, juga berfungsi sebagai kepopuleran Klub kamu jika makin Tinggi Nilainya..
Fans = Jumlah pengemar klub kamu, semakin sering Menang maka semakin banyak fans kamu & semakin banyak yang akan datang menonton setiap pertandingan kamu..pundi2 uang klub pun otomatis bertambah..
Pendukung = Jumlah Booster kamu, biasanya dapat 3 booster Gratis kalo klub baru..
Mail = Surat yang masuk ke Klub kamu.. kamu juga bisa mengirim email ke kawan-kawan di 11.com

..Pertama kali mau mencoba main..kamu binggung pilih saja di tab Games > Friendly.. lalu klik tombol mengajukan untuk mendaftar.. nanti akan ada konfirmasi "Pengaturan/Setting" jika ada yang menantang KLubmu main.. :D

Pengaturan Strategi...

Keterangan :
Skema Helper = untuk memilih Formasi yang akan diterapkan..
Penempatan = untuk menentukan Line-Up pemain yang akan dimainkan.. bisa kamu Double KLik pemain yang akan dipilih untuk jadi Line-Up/tidak..atau juga bisa dipilih lalu di drop..
Taktik = untuk menentukan strategi serangan, passing yang diterapkan & Kekuatan serangan (Menyerang / Bertahan )..
Substitusion = untuk menganti pemain pada waktu / situasi tertentu..
Peran Pemain = untuk menentukan pemain mana yang akan menjadi Playmaker dsbnya...
Skema Baru = untuk menyimpan formasi yang telah Paten...
Menyerahkan = untuk memulai segera pertandingan..dengan mengirimkan formasi Paten yang telah diatur tadi..

Link lainnya ;
=> www.11x11.com..FootBaLL MaNaGeR OnLiNe..

CARA MEMBUAT WARNA LINK YANG DI MOUSEOVER SEPERTI PELANGI...

2010-02-05T07:26:00.012+07:00

...Ada sobat Blogger yang bertanya " Boss.. bagaimana cara membuat link aktif berpelangi seperti diBlogmu ini..?? ".. tapi maaf saya lupa nama dan Link Blogmu sobat semoga kamu mampir lagi ke Blog ini dan membaca ini tutorial.... karena baru sekarang saya bisa menjawab pertanyaannya disela-sela kesibukan saya.. hehe :D ... Sebenarnya sih sudah banyak yang posting tentang ini.. tapi tetap saya buatkan tutorialnya.. silahkan dibaca..

...Berikut langkah-langkahnya :
1. Loginlah terlebih dahulu di Blogger....
2. Pada Tab Tata Letak > Edit HTML .. terus dicentang Expand TempLate Widget
lalau cara kode --> </head>
3. Lalu Copas kode dibawah ini :

Note : kamu juga bisa mengambil/mendownload file rainbow.js ini lalu kamu simpan di Google Site kalo kamu punya Email Gmail atau bisa juga ke fileave.com

dan letakan persis dibawah kode </head>

4. Jika sudah..Klik Simpan Template.. dan Selesai.. Refreshlah Blogmu dan lihat hasilnyaa..

...Mudah Bukan...

CARA MENGANTI SMILEY EMOTION DI CBOX...

2010-02-02T10:32:00.017+07:00

...Ini beberapa eMo ITEM untuk shoutbox Cbox... karena emonya si cbox kurang menarik ..smiles icon-nya blue gelap bikin suntuk melihatnya... yaaa fitur Cbox sih mendukung file gambar animasi yaitu emotion yang bergerak (.gif).. jadinya tidak susah juga cari emo yang simple tapi bagus.. daripada kalian pusing cari emo untuk cBox... dibawah ini sudah saya List-kan Link-nya silahkan kalo mau dipakai di cBox Blog kalian.. ;-)

..Caranya pun mudah ;
1. Login di Cbox...
2. Klik bagian tab OPtion..lalu pilih Smiley

3. Lalu akan tampil halaman edit smiles Cbox seperti ini...

Maka gantilah Url emo-nya dengan url dibawah ini... woke.. simple kaan.. ;-)

Atau kesini :
=> BerBaGi EMO BiG SMiLeS..
=> www.matcuoi.com

.....SeMoGa BerGUna.....

Lucu-lucuan dulu deh yaa....

2010-02-02T09:58:00.006+07:00

...Beberapa gambar kartun yang lucu ...lumayanlah daripada tidak posting sama sekali... kan kasihan blog ku seperti tidak terurus... hehe.. :D

Hehe... gw aj binggung.. kiri atw kanan.. ?!@# :D wkwkkwk

INi jadinya kalo berlama2 di dunia maya ngejombLo.. weks !! XD

ini orang apes banget yaaa.... hihihi

Hati2 dg permintaanmu.. kdg2 beda dg yg kita maksud.. kayak ini ni.. kekekekek :D

...Lumayan Lucu yaa...

Yang Bikin NGaKak... wakakkakak :D

2010-02-01T15:03:00.009+07:00

Yang bikin kita ngakak... menghibur otak kita sebentar setelah jenuh oleh pekerjaan di kantor.. cekidot.. :D , dan maaf saya baru sempat up date postingannya sekarang karena saya dan beberapa teman-teman blogger lainnya lagi terkena penyakit akut GM yang hanya bisa di obati di www.11x11.com .. hiks.. hiks...

PoLisinya jdi salTing... wkwkwkwk

kagak mau gua lewat situu.. gaswaat anjingnya TIM SWAT sob !!!

Niiih anjing terorijeng ye..bukan teroris.. kekekkek :D
Sabaar pak ...sabaaar... skalian aj pake PaLu pak.. hehe :D

..ada2 aja neh kartuniss.....

MUSEUM AWARD... + BACKLINK GRATIS....

2009-12-28T14:42:00.021+07:00

...Sudah ada beberapa Award yang saya terima lalu saya save sekaligus Menjadi BackLink ke Sahabat Blogger yang memberi saya Award tsb... kemudian saya pajangkan awardnya di postingan ini.. ku anggap saja ini sebagai museum pribadi untuk kumpulan award blogku... "Saya sangat menghargai sekali pemberian award ini...Terima kasih banyak... ini berarti blog saya sudah dinilai baik dan telah dikenal serta diakui oleh sobat blogger..." dan inilah beberapa award yang saya dapatkan dari para Sahabat blogger.. :

... dapat Award...

www.11x11.com..FootBaLL MaNaGeR OnLiNe..

2009-12-07T09:53:00.013+07:00

Game yang sangat menyenangkan.. Football Manager OnLine yang Gratis tanpa perlu menginstal apapun..dan bisa bertanding secara OnLine dengan para pemain game ini diseluruh penjuru dunia.. bagi yang pernah memainkan games PC football manager pasti cepat memahami game ini namun bagi yang masih newbie tidak akan sulit memainkan game ini.. Saya merupakan salah satu pengemar www.11x11.com ini.. jadi blogging pun terasa lebih enak lagi sambil bermain Football Manager OnLine.. Mantaaabs.. ;-)

...Tapi di game ini saya masih terbilang newbie.. level saya masih rendah maklum namanya pemula.. hehe..

..Game ini menyediakan fasilitas seperti :

- Berbagai macam Turnamen sesuai Level..
- Pemberian kemampuan khusus..
- upgrade skill pemain..
- upgrade Base Club..
- Tranfer Pemain..
- Free Agen..
- dLL..

..Ini cuplikan tampilan game Hebaat ini.. silahkan di lihat-lihat dahulu.. jika tertarik dicoba saja.. nanti kita bisa bertanding.. wkwkwkwk :D ..sbb :

Tampilan Awal

Daftar Pemain & LoGo Klub

Kualifikasi Turnamen

Loading Tayangan Pertandingan

Tayangan Pertandingan

... Mari Bertanding ....

CARA MEMBUAT TABEL DI POSTINGAN BLOG..

2009-12-03T08:56:00.011+07:00

Ada yang tanya lagi.. kali ini sobat Ammar ..pertanyaannya begini "boz ni yang saya maksud text area nya 2 tapi dijadiin 1 baris. klo di blog saya yang cosa aranda emoticon tu text area nya cuma 1 terus kebawah g kaya di postingan ni 2 text area jd 1 kolom, thanks".. katanya seperti yang di Postingan Artikel Berbagi eMo BiG SMiLeS di tutorial blog ini.. Mungkin maksud sobat ammar adalah tabel bukan text area kalo text area yang kayak ini >> CaRa MemBuaT Text aReA / Kotak Text Untuk KOde HTML Link BanneR..

..Berikut ini langkah-langkahnya.. silahkan dipahami.... :
1. LoGinLah dulu di BLogger.. Dasbor > Entri Baru..
2. Di postingan artikelmu yang akan kamu tambahkan Tabel.. Copy-Paste lah kode TabeL di bawah ini..

Contoh TabeL 2 KoLom..

<table width="200" border="1">
<tr>
<td align="center">

Kolom ke 1

</td>
<td align="center">

Kolom ke 2

</td>
</tr>
</table>

Aturlah :
Biru = Width > Untuk lebar tabel dan Border > Untuk tebal garis tabel..semakin besar nilainya makin tebal garis tabelnya..
Hijau = Untuk menentukan posisi Textnya di tengah (center) atau Kiri (Left) ..
Merah = Gantilah dengan Text atau UrL Direct Link Gambar atau kode text area/terserah kamu... think creatif sob ;) ..
Pink = Untuk memberi perintah menyambung tabel berikutnya ke bawah jadi jika kamu menginginkan tabelnya terus menyamping ke kanan kode ini > </tr> jangan di add dulu.. paham yaa..

Jadinya akan seperti dibawah ini..

Kolom ke 1

Kolom ke 2

3. Jika sudah sesuai dengan yang kamu inginkan silahkan di lihat dengan mengkLik tomboL TuLis.. nanti akan ada Preview-nya.. jadi bisa kamu oprek-oprek dahulu TabeL-nya sebelum dipostingkan.. Selesai..

... Silahkan diCoba ...

CARA MEMBUAT TEXTAREA DI BLOG...

2009-12-02T08:22:00.015+07:00

Postingan ini atas permintaan sobat Aquareen ... dengan pertanyaan begini "mau tny, cara buat kotak untuk code html banner kek yg dbawh itu gmn y? makasiih.." Maaf ya sob baru sekarang saya jawab.. karena Net saya lagi lemot tetapi sekarang internet saya sudah mulai membaik kembali.. walaupun terkadang lemot juga.. :D kekekekek .. silahkan disimak tutorial yang sederhana ini..

Banner Link

..sebenarnya sudah ada yang membahas tentang ini.. emm..langsung saja kita bahas yaa :
1. Siapkanlah dulu LoGo BLoG kamu... Lalu simpan di Photobucket .. kemudian copas-lah Direct urL / HTML code Gambarnya di Notepad..
2. Loginlah di BLogger.. Tata Letak > Elemen laman > Tambah Gadget > HTML/Java Scripts..
3. Lalu Copy-Paste code HTML kotak dibawah ini untuk Link bannernya ...

<center><b>BANNER LINK<b>
<br />
<a href="http://ecaknyo.blogspot.com"><img width="70" alt="wong284" src="http://i466.photobucket.com/albums/rr22/wong284/iconwong284j_10_3pic.gif" height="70" /></a>
<br />
<p><textarea rows="3" cols="20">
<a href="http://ecaknyo.blogspot.com"><img width="70" alt="wong284" src="http://i466.photobucket.com/albums/rr22/wong284/iconwong284j_10_3pic.gif" height="70" /></a>
<br />
</textarea></p></b></b></center>

Aturlah :
Rows & Cols = Untuk menentukan ukuran Kotak..gantilah sesuai keinginan kamu
Merah = Gantilah dengan Direct URL Gambar LOGo BLoG kamu.. Direct Url Gambar LoGo dari Photobucket tadi..
Height = 70 -> ini untuk mengatur ukuran gambar LoGo kamu...

4. Jika sudah mengatur.. kLik simpan .. & Selesai.. Refreshlah halaman blogmu..

... SimpLe ya ...

CARA MELIHAT KODE WARNA HTML UNTUK BLOG MELALUI PHOTOSHOP...

2009-11-22T17:07:00.013+07:00

Ini Postingan Ringan... hehe :D ... lumayan menambah postingan lagi.. sekalian juga sebagai jawaban dari sobat blogger yang menanyakan "Sob.. cara mengetahui kode warna bagaimana sih... ?" ... akan tetapi saya yakin pasti sudah banyak sobat-sobat blogger yang mengetahui cara ini.. karena memang mudah sih.. kamu hanya perlu program editing gambar seperti Photoshop saja.. :-) ..walaupun ada juga yang masih menggunakan daftar kode warna (.doc)... tapi akan lebih bagus bila menggunakan Photoshop karena kamu bisa mencoba-coba kode warnanya dan langsung melihat hasilnya..

Di Photoshop kamu bisa melihat Kode Warna :
- RGB ( R , G , b )
- CMYK (C, M, Y, K)
- HSB (H, S, B)
- Lab

Dengan Photoshop akan mempermudah kita yang suka mengutak-atik warna background/border/dsb.. dan masih ragu akan kebenaran warnanya atau mau mencari warna yang lebih tajam/halus.. biasanya kode warna yang sering digunakan di blogger adalah kode warna seperti ini #F9EFF7 dan R.G.B ..

...Oke langsung saja ya.. sbb :
1. Run program Photoshop di PC/laptop kamu...
2. Pada Window Tools.. seperti gambar dibawah ini..

3. Pada Tools Color picker.. Kliklah 2x..

4. Akan muncul Window Color Picker seperti ini...

5. Gantilah/Copy kode warnanya dengan kode warna yang kamu ketahui lalu paste kode warna di dalam kotak yang saya tandai merah seperti gambar diatas.. nanti warna yang ada di Window Color Picker-nya akan berubah otomatis sesuai dengan kode warna yang kamu ketikan/paste-kan.. like this..

6. dan kode warna ini bisa kamu copy-paste kembali ke dalam kode scripts widget kamu.. atau ke dalam kode scripts template blogmu... Selesai..

... Mudah Bukan ...

CARA MEMBUAT WIDGET MELAYANG DI BLOG..

2009-11-17T12:47:00.017+07:00

Waa.. semangat sekali saya posting artikel hari ini.. sudah 3 artikel saya postingkan...
1. Cara Membuat Daftar isi Blog Manual...
2. Cara Setting Waktu di Widget SHOUTMIX agar sesuai dengan waktu negara kita....
..dan postingan ini yang ke-3...
..Mantab Semangat Bloggingku sob.. ..tapi pusing juga sih.... :-D ..hehehe..

Postingan yang ini karena sahabat Delta-Prayoga yang bertanya "eh buat menu di samping begitu gmn yah...? " ..Maksudnya Menu Widget Mp3 DownLoadku yang Melayang di Blogku itu sob itu.. :-) ...

Contoh widget melayang yang ada di blog ini

..Okay.. Langsung kita bahas ya.. simak langkah-langkahnya berikut ini :
1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

Pada Contoh di atas adalah Widget Melayang Shoutmix...

Lihat Contoh Jadi kLik urL ini => ecak2nyo

Keterangan :
Merah = Gantilah dengan kode Scripts Widget yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..
Biru = Gantilah dengan URL Gambar Tab kamu (atau pakai saja url gambar tab diatas tdi) .. Gambarnya bisa kamu buat dengan Program seperti Photoshop.. lalu kamu Upload/simpan gambar tsb di Photobucket ..baru kamu bisa mendapat kode url Direct Link gambar tdi..
Pink = Aturlah Tinggi & lebarnya sesuai ukuran Gambar Tab kamu..

.gbtab{ = Ini kode scripts untuk pengaturan tampilan gambar tab

Orange
gbcontent = Ini kode scripts untuk mengatur tampilan kontennya
float:left; = Ini utk mengatur posisi widgetnya melayang di kiri / kanan / atas / bawah
border:2px solid #FAFD02; = Memberi warna pada border konten...aturlah/ubahlah warnanya jika mau.. misalnya FAFFFF (sebaiknya gunakan pencari kode warna Photoshop)
background:#FAFD03; = Memberi warna pada isi konten.. disini saya menggunakan warna kuning

4. Simpanlah Widget Melayang ini... Selesai.. namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh blog kamu.. Mudahkan.. ;-)

.... Selamat Mencoba ...

CARA MENGATUR WAKTU DI SHOUTMIX....

2009-11-17T09:45:00.011+07:00

..Ini postingan artikel khusus permintaan dari Sahabat Taris... yang katanya begini "Mo nanya nih.. setting jam di shout mix agar sesuai dengan jam WIB bagaimana ya.. bikin postingannya dong :-) ..? " tadinya mau saya ajak chat-chet tapi ternyata dia ofl.. ya sudahlah saya buat saja postingan sesuai permintaannya.. hitung-hitung menambah jumlah postingan artikel saya sendiri..wkwkwwkwkwk :-D ...Biasanya saya buat postingan baru setiap 1 kali seminggu... tapi untuk minggu ini merupakan pengecualian karena ada Sahabat yang meminta.. :-)

Dan bagi sahabat lain yang masih binggung....Cara setting waktu di widget Shoutmix-nya silahkan di simak artikel ini...

...Langsung saja sobat.. ikuti langkah-langkah berikut ini :
1. Loginlah terlebih dahulu ke SHOUTMIX ... dengan username & passwordmu..

2. Pada halaman Menu utama Shoutmix ini.. Bagian Menu Display > Pilih Date & Time..

Menu Utama

3. Maka akan tampil seperti dibawah ini.. halaman Date & Time.. Aturlah seperti yang tampak pada gambar ini..

Setting Date & Tanggal

4. Jika sudah lalu tekan Save Setting.. Selesai.. Lihatlah hasilnya dengan meng-Refresh Shoutmix di Blog kamu... SimpLe kan..

... SimpLe Kaan ..

CARA MEMBUAT DAFTAR ISI SECARA MANUAL...

2009-11-17T07:02:00.010+07:00

Kalian pasti sudah melihat Daftar isi yang terpampang jelas di blog saya ini... yang ada icon bintang kerlap-kerlip itu... baiklah akan saya bahas di postingan kali ini... karena juga ada yang tanya lagi "Gimana Bang cara bikin daftar isi kayak di blognya ini..? " .. oke bagi blogger pemula silahkan simak artikel ini.. bagi blogger senior ya silahkan ditambahkan jika masih kurang jelas..

...Bagi Blogger pemula saya sangat sarankan belajar Tutorial Blogging di Blognya Kang Rohman .. di situ juga banyak Blogger-blogger Senior yang OnLine di Shoutmix-nya.. kamu bisa bertanya langsung disana (komunikasi 2 arah yang aktif menurut saya)..

Baiklah kembali ke topik semula... Sebenarnya daftar isi ini mudah membuatnya.. hanya tergantung dari kreatifitas kita saja memanfaatkan widget-widget yang sudah ada di blog kita..

..Asal mula Widget Daftar Isi Manual yaitu dari Widget BlogRoll Manual.. kenapa dikatakan Manual ? karena kita sendiri yang harus mengisi daftar isinya.. Paham ya .. Daftar isi yang saya buat ini terinspirasi dari Daftar isi yang ada di blognya Kang Rohman..

Daftar isi manual

..Tapi ada juga Widget Daftar isi Otomatis yang disertai dengan gambar & komentar yang ada pada postingan itu.. lalu kenapa dikatakan Otomatis ? karena widget itu sendiri yang akan scanning postingan artikel di blog kita dan akan ditampilkan menjadi daftar isi yang keren... tapi Daftar isi otomatis ini menggunakan java scripts (.js) jadi akan sedikit memperlambat loading blog kita.. Paham ya.. ini Contoh Daftar isi Otomatis -> www.bloggertricks.com .. ini pernah saya lihat di tempat sahabat Mas Doyok..

Daftar isi otomatis

..Jadi terserah kalian mau menggunakan Daftar isi yang mana..

Kali ini saya hanya akan membahas Daftar Isi Manual saja... oke kita langsung saja yaa.. ikuti langkah-langkahnya sebagai berikut :

1. Loginlah dulu di Blogger > > Tata letak > Elemen Halaman.. Klik tambah Gadget > HTML/Java Scripts.. Buatlah Namanya Gadget-nya misalnya Daftar isi Blog..

2. Copy-paste kode dibawah ini ke dalam gadget tadi..

<div style="border: 0px solid rgb(153, 153, 153);
overflow: auto;
width: 500px;
height: 150px;
text-align: left; ">

<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html"> LinkWithin...WidGet Mini yang Praktis MenampiLkan Cuplikan Postingan!!!</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/ganti-emo-box-shoutmix-di-blog-simple.html"> GanTi eMO box Shoutmix di BLoG.. SimPLe Bgt</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/cara-membuat-blogroll-scrolling_04.html"> Cara MemBuaT BLogRoLL ScroLLing Otomatis dan yang ManuaL...</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/bagi-sobat2-blogger-yang-blognya-ber.html"> Cara PaSanG JaM & KaLenDeR iSLaMi aL-HaBib di BLoG</a>
<br/>
</div>

3. Dari kode itu.. gantilah kode scripts berikut ini ;

- <img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html"> LinkWithin...WidGet Mini yang Praktis MenampiLkan Cuplikan Postingan!!!</a>

Merah = Gantilah dengan URL HTML Code Gambar Icon kamu..
Biru = Gantilah dengan Direct URL ke postingan Artikel kamu..
Hijau = Gantilah dengan Judul Artikel kamu..

Ulangilah langkah diatas ini sampai semua postingan artikelmu terdaftar semua..

Lainnya :
- <br/> = Seperti spasi yang memberikan jarak antar text....
- style="border: 0px = Gantilah angka border-nya dengan 1px atau 2px atau biarkan saja 0px..
- width: 500px; = Sesuaikan dengan lebar kolom di blog kamu.. atau aturlah sesukamu
- height: 150px; = Sesuaikan dengan tinggi kolom di blog kamu.. bisa 100px atau 200 / 250 px..
- text-align: left; "> = Mengatur posisi text widget ini / daftar isi ..ganti dengan Center jika mau di tengah-tengah..

4. Jika selesai semua kamu membuat daftarnya dan mengeditnya.. silahkan di simpan widget daftar isi-nya dan tempatkan di tempat yang strategis..

... Selamat MengOprek2 yaa ...

CARA MEMBUAT ANIMASI FAVICON DENGAN GIF MOVIE GEAR v4.01...

2009-11-10T07:48:00.015+07:00

Di postingan yang lalu saya telah membahas program untuk membuat Icon BLoG.. jika kamu sudah membuat icon blog-mu dengan program Ico FX ataupun dengan program seperti Photoshop.. dengan catatan gambar icon-nya tetap sama gambarnya tapi hanya satu atau beberapa dari bagian gambarnya saja yang kamu ubah-ubah agar nanti gambar iconnya akan terlihat seperti bergerak hasilnya.. setiap kamu mengubah gambar icon sebaiknya kamu saving juga dengan nama lain seperti : Icon_default trus icon_1 trus icon_2 dst...

...jika telah siap kumpulan gambar Icon-nya maka program GIF Movie Gear v4.01 inilah yang akan membuat gambar icon blog-mu itu menjadi bergerak/Animasi (. gif)..

...di DownLoad yaa.. !!!

=> Download GIF Movie Gear v4.01 Now (Size 1.11 MB)

Tampilan antar mukanya

Setting waktu kecepatan gerak animasinya

Contoh kumpulan gambar untuk membuat Animasi Teks

akan seperti ini jadinya >>

atau ini contoh lainnya >>

.. WaaAAh.. Gambaarnya kok bisa Hiduuup.. !!!

...Selamat Mencoba...

ICOFX.. SOFTWARE PORTABLE UNTUK MEMBUAT / MENGEDIT FAVICON...

2009-11-05T08:34:00.011+07:00

...Bagi yang ingin membuat atau mengedit Icon Bloggernya atau Icon jati dirinya di dunia maya.. Silahkan di coba Freeware Software Ico FX PortabLe ini... karena size software-nya yang kecil.. Portable lagi.. kamu tinggal Run instaLernya lalu Browse ke dalam folder (atau Make New Folder) di FLashDisk kamu... dan Eng Ing Eng Editor Ico FX yang keren ini bisa kamu bawa kemana-mana.. Nanti akan ada panduannya disaat kamu mulai menginstal .. ;-)

.. DownLoad yaa..
=> DOWNLOAD Ico FX PortabLe NOW ( size 1,56 Mb )
=> DOWNLOAD GIMP PortabLe NOW ( size 17,8 Mb ) >> Pengedit Foto mirip PhotoShop
=> DOWNLOAD NotepadPlus PortabLe NOW ( size 2,70 Mb ) >> Notepad Plus
=> DOWNLOAD Firefox PortabLe NOW ( size 6,06 Mb ) >> Browser Mozilla FireFox
=> DOWNLOAD WinGeT PortabLe NOW ( size 1,66 Mb ) >> Seperti Download Manager

SpLash Screen Ico FX

Tampilan antar muka

Adding Gambar Baru

Setting Advance

...SeLamaT MencoBa...

CARA LAIN MEMPERCEPAT LOADING BLOG..

2009-11-02T08:03:00.019+07:00

Ada-ada saja pertanyaannya yang seperti ini yaa " ..Bagaimana caranya mempercepat Loading BLog kita tapi tanpa menghilangkan Widget yang ada di Blog kita ??! ".. Naaah LooH... Bingung kagak sob.. Wwkwkwkwk ;-)

...Memang ada beberapa widget atau Elemen blog yang sangat mempengaruhi kecepatan Loading Blog saat pembaca atau blogger lain membuka blog kita.. ini membuat mereka menjadi kesal jengkel karena terlalu lama menunggu blog kita terbuka sempurna...

Cara Lain yang saya ketahui dilakukan oleh beberapa sobat blogger untuk mempercepat Loading Blognya adalah sbb ;

- Ada yang pakai cara KOmpreS CSS template blognya
- Ada yang dengan berat hati meng-uninstal widget/elemen blognya
- Ada yang dengan cara hanya menampilkan 1 postingan pada Halaman Depan Blognya
- Ada juga yang seirit mungkin menampilkan Gambar pada setiap Postingan Artikelnya
- Ada lagi yang dengan cara Template blognya dibuat sesimple mungkin
- Ada2 Aja.. dst-lah kekekek :-D

.. Dan sebenarnya yang punya Blog itu sudah mengetahui kalo blognya memang berat sewaktu di browsing.. pasti ada sobat blogger yang mengeluh soal blognya yang loadingnya berat... ( termasuk blog saya ini juga berat kalo sedang Loading.. jiakakakak ) ..

Tapi... !!! ..Beberapa Blogger ada yang tidak mau menghilangkan widget atau elemen blog yang memberatkan itu.. dengan alasan widget atau elemen blog tersebut memang sangat berguna untuk blognya.. seperti widget Live Traffic Feed feedjit atau widget Tautan Postingan LinkWithin..

... Jadi kita ambil jalan tengahnya saja yaa.... Mungkin inilah salah satu cara yang bisa kita lakukan untuk mempercepat sedikit loading blog kita pada Halaman Utama :

Kita pindahkan/Hilangkan saja beberapa (1 atau 2 atau lebih ) Widget/Elemen blog yang tidak begitu penting di tampilkan pada halaman depan Blog.. Kita tampilkan saja widget/Elemen itu pada Halaman sebelumnya (Halaman Postingan Artikel Lawas).. Paham ya !!!

Trik ini sudah saya praktekin sendiri di blog ecaknyo ini.. coba kamu kLik Postingan Artikel saya yg Lawas/Lama pasti berbeda tampilannya dengan Halaman Depan/Utama blog ini..

Langsung saja Sob.. simak caranya sbb ;

1. Loginlah ke Blogger.. lalu pada halaman Dasbor..

2. Pada bagian Tata Letak pilihlah Edit HTML (centang Expand template widget jika diperlukan) dengan New Tab / New Window.. tapi sebelumnya Backup-lah terlebih dahulu kode scripts template blog kamu di Notepad.. nanti tinggal kamu Copas saja untuk mengembalikan seperti kondisi awal apa yang sudah kamu ubah..

Pada bagian Edit HTML inilah kita akan sedikit mengoprek.. karena disinilah kita akan mengetahui widget id (elemen) yang kita instal di blog yang akan tampil widget id dengan nama seperti misalnya HTML1 atau HTML22.. "Tapi bagaimana kita tahu itu widget id yang tepat yang akan kita oprek karena hanya berupa nama HTML1 atau 22 bukannya bernama judul widget seperti widget Statistik atau widget FeedBurner.. ??? ".. Tenanglah dulu sobat.. ikuti saja dan pahami langkah-langkah yang saya terapkan ini..

3. Pilihlah Lihat Blog dengan New Tab / New Window...

4. Untuk mengetahui Nama HTML widget yang akan kita hilangkan Sorotlah (mouse over) simbol edit berupa tang & obeng seperti pada gambar di atas.. Sebagai contoh saya sorot widget Networked Blogs FaceBook..

maka akan muncul di taksbar browser kiri bawah alamat url widget Networked Blogs FaceBook tersebut beserta Nama Widget id-nya.. yaitu seperti ini widgetid=HTML10

5. Kembalilah ke Halaman Edit HTML karena kita sudah mengetahui Widget id dengan nama HTML-nya... dan Carilah nama widgetid=HTML10..

Lalu Copas kedua kode ini :
<b:if cond='data:blog.pageType == "item"'>
dan
</b:if>

Lakukan Persis Seperti contoh di bawah ini..

<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Jika sudah lalu kLik Simpan TempLate.. Lihatlah pada Halaman Depan dan Halaman Sebelumnya (Atau kLik Postingan Artikel Lawas/sebelumnya pada Blog kamu ) dan Bandingkan.. Hasilnya widget tersebut hanya akan tampil pada halaman sebelumnya bukan pada halaman depan blog kamu.. dan ini membuat loading browsing halaman depan blog kamu sedikit lebih cepat.. ULANGI langkah-langkah diatas untuk widget/elemen lainnya..

ATAU sebaliknya..

Jika kamu ingin menampilkan widget/elemen tersebut hanya pada Halaman Depan Blog saja.. jadi pada saat kamu melihat Halaman Lawas/Postingan Sebelumnya widget/elemen tersebut tidak akan tampil... Paham yaa.. !!!

Caranya sama seperti langkah-langkah di atas tapi pada langkah Edit HTML Widget id-nya...

Copas kedua kode ini :
<b:if cond='data:blog.homepageUrl == data:blog.url'>
dan
</b:if>

Lakukan Persis Seperti contoh di bawah ini..

<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Jika sudah lalu kLik Simpan TempLate.. Lihatlah pada Halaman Depan dan Halaman Sebelumnya (Atau kLik Postingan Artikel Lawas/sebelumnya pada Blog kamu ) dan Bandingkan.. Hasilnya widget tersebut hanya akan tampil pada halaman Depan saja bukan pada halaman sebelumnya/postingan lawas blog kamu.. ULANGI langkah ini untuk widget/elemen lainnya..

Note : Bisa kamu OPREK2 sesukamu.. mana yang menurutmu yang lebih baik bagi blog kamu.. okay sob..

...Selamat MengOprek...

CARA MENGEDIT SMILEY EMOTION DI ATAS KOTAK KOMENTAR...

2009-10-27T09:59:00.028+07:00

Postingan ini saya buat dikarenakan ada sobat blogger yang bertanya kepada saya.. "sob.. gimana cara menampilkan emotion sebelum atau di atas kotak komentar ???".. tapi baru sekarang saya jawab karena saya pikir sudah banyak sobat blogging lain yang sudah memposting membahas mengenai trik ini.. dan sudah saya kasih link sobat yang bertanya tersebut ke blog yang sudah pernah membahasnya.. Kemudian dia tanya lagi kayak gini "Boss..tapi postingan sobat yang lain kurang jelas langsung dikasih url sripts java (.js) saja.. karena saya mau menganti sendiri emotion smiles dengan emo yang lainnya..tolong dong ajarin !!!" .. WadoOh kayaknya malah jadi PR nih buat saya..

..Ok.. Langsung saja sob.. baca dan pahami langkah-langkah berikut ini ;

1. Carilah dan kumpulkan dahulu emotion yang akan kamu gunakan.. kemudian upload-lah ke PhotoBucket dan buatlah Account di Photobucket terlebih dahulu.. baru kamu bisa men-upload gambar EMO kamu tadi..

2. DownloadLah File Java Scripts ini >> DownLoad NoW Andi_Wong_OniOn_EMO.js .. file ini yang nanti akan kamu edit untuk menganti emotion yang kamu inginkan..

Seperti Gambar ini icon File format .js akan terlihat jika di PC-mu sudah terinstal Program Macromedia Dreamweaver 8

Jika malas mendownload dibawah ini saya kasih Scripts File .js -nya..

Silahkan di Copas di Notepad dan simpan dalam bentuk format .js..

File name di isi dengan Contoh_1.js (ketikan .js -nya) dan Save as type pilih All Files

3. Bukalah File yang kamu Download tadi "Andi_Wong_OniOn_EMO.js" dengan menggunakan Notepad .. bisa juga kamu ganti nama File .js-nya dengan Nama Kamu atau nama lainnya terserah kamu..tapi biarkan dalam format .js ...

4. Jika sudah.. editlah Java Scripts berikut ini... Lalu kamu Save namun tetap biarkan dalam format.js

d[i].innerHTML = d[i].innerHTML.replace (/\/senyum/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/senyum.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\kagum/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Kagum.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/sip/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/sip.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/trims/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/thxmale.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/bingung/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/bingung.gif'/>")
d[i].innerHTML = d[i].innerHTML.replace (/\/pusing/ig,"<img style='border: 0; padding:0' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Pusing.gif'/>")

Biru = Gantilah dengan URL gambar emo.gif kamu..copy-Lah direct Link Gambar animasi eMo yang kamu Upload tadi..
Merah = Gantilah dengan nama (misalnya: senyum) atau simbol (misalnya: :] )

5. UpLoad-lah File Java Scripst kamu tsb ke GoogLe Site atau ke Direct File Hosting seperti fileave.com ...

Buatlah account baru terlebih dahulu baru kamu bisa meng-Upload File .js kamu.. dan ingat kamu harus login minimal 1 bulan sekali agar Account Kamu tidak Terhapus di fileave.com.. Atau bisa juga kamu Upload ke tempat File Hosting lainnya.. kalo Google.pages sih sudah ditutup !

6. Buka Notepad baru tekan Windows+R lalu ketik notepad (agar notepad yg sebelumnya tidak tertutup)..

Copy Scripts dibawah ini.. dan Paste-kan di Notepad yang baru & SimpanLah dengan EMO scripts HTML blog atau dengan nama lain sesukamu..

<center>
<table border='0' width='300'><tr>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/senyum.gif' title='Senyum'/>senyum</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Kagum.gif' title='Kagum'/>kagum</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/sip.gif' title='Sip'/>sip</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/thxmale.gif' title='Terima Kasih'/>trims</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/bingung.gif' title='Bingung'/>bingung</td>
<td><img alt='' src='http://i466.photobucket.com/albums/rr22/wong284/onion%20emo/Pusing.gif' title='Pusing'/>pusing</td>
</tr></table>
</center>

Biru = bisa kamu ganti dengan Left jika ingin merubah posisi emo ke kiri
Merah = ini untuk merapatkan posisi antara eMo dan bisa kamu ubah menjadi 200 atau 500
Hijau = Gantilah dengan url image eMo (.gif) kamu..copy-Lah direct Link Gambar animasi eMo yang kamu Upload tadi..

7. LoginLah ke Blogger.. Tab Tata Letak.. Pilih Edit HTML (centang Expand Template Widget jika diperlukan)..

Cari kode ini </body> ..biasanya terletak di bagian bawah kode HTML TempLate BLog-mu..

lalu Copy Direct Link url Hotlinkfiles dari file Java Scripts kamu di atas kode ini </body>

Contoh : Direct Link Url Hotlinkfiles file .js saya seperti dibawah ini..
<script src='http://www.hotlinkfiles.com/files/2417420_xyqqd/Andi_Wong_OniOn_EMO.js'/>

Kemudian kamu cari kode ini ..
<p class='comment-footer'>
PASTE-kan isi EMO scripts HTML blog tadi di antara kedua kode ini
<b:if cond='data:post.embedCommentForm'>

lalu copy kode Scripts untuk HTML tadi sesudah kode ini <p class='comment-footer'>
8. Jika sudah semua..kLik Simpan TempLate.. Selesai sudah.. Lalu lihatlah perubahan yang tampil di bagian Komentar BloG-Mu..

Contoh Jadi kLik Link ini >> eksperimen284.blogspot.com dan lihatlah di bagian komentarnya..

Note : Bisa kamu kembangkan sendiri Scripts2 di atas.. oprek2lah sesukamu yang kreatif... tambahkan beberapa emo-emo yang bagus2..

...Akhirnya PR-nya gw Kerjakan jg...

	http://i466.photobucket.com/albums/rr22/wong284/amazing.png		http://i466.photobucket.com/albums/rr22/wong284/anger.png
	http://i466.photobucket.com/albums/rr22/wong284/bad_egg.png		http://i466.photobucket.com/albums/rr22/wong284/bad_smile.png
	http://i466.photobucket.com/albums/rr22/wong284/beaten.png		http://i466.photobucket.com/albums/rr22/wong284/big_smile.png
	http://i466.photobucket.com/albums/rr22/wong284/black_heart.png		http://i466.photobucket.com/albums/rr22/wong284/cry.png
	http://i466.photobucket.com/albums/rr22/wong284/electric_shock.png		http://i466.photobucket.com/albums/rr22/wong284/exciting.png
	http://i466.photobucket.com/albums/rr22/wong284/eyes_droped.png		http://i466.photobucket.com/albums/rr22/wong284/girl.png
	http://i466.photobucket.com/albums/rr22/wong284/greedy.png		http://i466.photobucket.com/albums/rr22/wong284/grimace.png
	http://i466.photobucket.com/albums/rr22/wong284/haha.png		http://i466.photobucket.com/albums/rr22/wong284/happy.png
	http://i466.photobucket.com/albums/rr22/wong284/horror.png		http://i466.photobucket.com/albums/rr22/wong284/money.png
	http://i466.photobucket.com/albums/rr22/wong284/nothing.png		http://i466.photobucket.com/albums/rr22/wong284/nothing_to_say.png
	http://i466.photobucket.com/albums/rr22/wong284/red_heart.png		http://i466.photobucket.com/albums/rr22/wong284/scorn.png
	http://i466.photobucket.com/albums/rr22/wong284/secret_smile.png		http://i466.photobucket.com/albums/rr22/wong284/shame.png
	http://i466.photobucket.com/albums/rr22/wong284/shocked.png		http://i466.photobucket.com/albums/rr22/wong284/victory.png
	http://i466.photobucket.com/albums/rr22/wong284/unhappy.png		http://i466.photobucket.com/albums/rr22/wong284/what.png
	http://i466.photobucket.com/albums/rr22/wong284/super_man.png		http://i466.photobucket.com/albums/rr22/wong284/the_iron_man.png