ShoutMix chat widget
Bhokalor
Tampilkan postingan dengan label Trik. Tampilkan semua postingan
Tampilkan postingan dengan label Trik. Tampilkan semua postingan

12 Mei 2011

Eksekusi link pada jendela baru

membuat Eksekusi link pada jendela baru untuk bertujuan untuk memudahkan pembaca, kalau biasanya suatu link yang akan kiat eksekusi(diklik) akan membuak pada jendela yang sama, sehingga jika anda ingin melihat post yang tadi sebelum di eksekusi anda harus menekan tomblo forward, agar link yang di klik terbuka pada jendela yang baru anda harus mengikuti cara berikut:
biasanya anda membuat suatu link script nya seperti berikut:
<a href="link_dituju">nama link</a>

ganti text yang berwarna merah dengan alamat blog anda, misalnya:http://dhedie-tips-triks.blogspot.com dan ganti text yang berwarna biru dengan nama link misalnya:tips dan triks
sehinggan scriptnya menjadi seperti ini:
<a href="http://bhokalor2010.co.cc">tips dan triks</a>

dengan script yang seperti di atas maka saat anda membukanya, akan terbuka pada tempat yang sama(link yang sedang kita buka)
cara pertama :
- anda harus menambahkan Script target="_new sehingga script nya menjadi seperti berikut:
<a href="http://bhokalor2010.co.cc" target="_new">tips dan triks</a>

hasilnya:
tips dan triks

cara kedua :
- dengan menambahkan target="_blank" sehinggan script nya menjadi seperti berikut :
<a href="http://bhokalor2010.co.cc" target="_blank">tips dan triks&lt;/a>

hasilnya:
tips dan triks

Menempatkan Text Area Di Blog

 Pernah melihat text atau kode-kode HTML yang di simpan dalam kotak, jika tulisannya panjang , sedangkan kotak itu kecil, maka kotak itu akan ada scrollnya Kotak itu disebut Text Area.Apa itu Text Area ?
Text Area adalah tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya digunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh pengunjung.
Untuk membuat text area, silahkan lihat contoh dibawah ini :





cols adalah panjang ke samping, anda tinggal merubah nilainya untuk merubah ukuran text area.
rows adalah panjang ke bawah, anda juga tinggal merubah nilainya untuk merubah ukuran text area.

Segitu dulu deh , sebenarnya ada beberapa variasi  text area, tapi nanti pada postingan berikutnya akan saya lanjutin . Soalnya lagi buru-buru nih perut lagi mules, phe.hee..

Cara Membuat Text Bergerak Dengan MARQUEE

Pernah melihat Text yang bergerak saat anda mengunjungi Blog atau Website orang lain ? , tentu pernah bukan.
Untuk membuat text bisa bergerak anda hanya tinggal menambah kode marquee diantara tulisan yang anda buat.
Kodenya seperti berikut : <marquee>....</marquee>


Untuk menambah variasi biasanya ditambahkan atribut-atribut sebagai berikut :
Behavior : "scroll / slide / alternate" --> Untuk mengatur perilaku gerakan
Bgcolor ="warna" --> Untuk mengatur warna latar belakang / background teks
Direction ="left / right / up / down" --> Mengatur arah gerakan teks

Scroll --> Membuat teks bergerak berputar
Slide -->  Mengatur teks bergerak sekali lalu berhenti
Alternate --> Memngatur text supaya bolak balik dari kiri ke kanan
Title ="pesan" --> Pesan akan muncul saat mouse berada di atas teks

Scrollamount ="angka" --> mengatur kecepatan gerakan, semakin besar angka semakin cepat gerakannya. 
Scrolldelay ="angka" --> Untuk mengatur gerakan tunda waktunya dihitung dalam mili detik 
Loop ="angka|-1|infinite" --> Mengatur jumlah loop 
Width ="lebar" --> Mengatur lebar blok teks dalam persen atau dalam pixel

Sebagai contoh  saya akan membuat marquee dengan gerakan :


<Marquee align="center" direction="right" height="20" scrollamount="2" width="50%">
marquee dari kiri ke kanan
</marquee>

Hasilnya akan seperti ini :
marquee dari kiri ke kanan


Untuk merubah gerakan silahkan anda ganti pada Direction dengan left, up, atau down.

Contoh marquee dengan perilaku :

<Marquee align="center" direction="left" height="20" scrollamount="3" width="70%" behavior="alternate">
marquee dengan perilaku
</Marquee>

Hasilnya akan seperti ini :

marquee dengan perilaku


Kemudian yang ini contoh marquee yang ditambahkan warna latar belakang :

<MARQUEE align="center" direction="left" height="20"  bgcolor="blue" scrollamount="3" width="70%" behavior="alternate">
marquee dg warna background
</MARQUEE&gt;


Contoh hasilnya seperti ini :

marquee dg warna background


Selamat berkreasi.

                                                **** Semoga Berhasil ****

14 Jan 2010 Membuat Efek Refresh Pada Blog

Diibaratkan kita sudah seharian bekerja, tentunya kita akan mengalami lelah , jenuh, penat, dan bikin mumet pikiran kita. Nah untuk mengembalikan supaya kita tubuh kita segar kembali biasanya , kita melakukan refreshing.. Caranya, ya bisa dengan apa saja. Lho, lalu apa hubungannya dengan judul diatas !!!


Begini , kadangkala saat meloading halaman web, ada sebagian dari isi halaman web yang belum kebuka atau kadangkala tampilannya kurang sempurna alias tidak seutuhnya tampil. nah dengan menggunakan efek refresh biasanya halaman-halaman yang tadinya kurang utuh tampilnya bisa seutuhnya tampil. Atau sebagai contoh jika kita sudah membuka banyak aplikasi di komputer, kita suka me refresh tampilan didekstop supaya kelihatan lebih segar lagi. ya intinya untuk menyegarkan halaman web kita. Pusiing ya membaca keterangan di atas, jika pusing mending langsung saja deh membuat kode untuk efek refresh.

Nah ini dia kodenya, silahkan di copy:



<meta http-equiv="refresh" content="15"/>

Paste diantara tag <head> ...dan... </head>

Sedikit keterangan, angka 15 merupakan waktu untuk merefresh secara otomatis. Dihitung dalam detik. Silahkan ganti sesuai keinginan anda, yang perlu di catat adalah asal jangan terlalu cepat memasukan waktu refresh nya, supaya pengunjung yang sedang membaca tidak kesal dengan adanya efek refresh.


Jika anda punya dua Blog ,Misal blog A dan Blog B, dengan efek refresh ini, anda bisa mengalihkan pengunjung yang datang ke blog A untuk datang ke blog B. Atau istilahnya ReDirect.

Caranya adalah masukan kode ini di Blog A :


<meta http-equiv="refresh" content="0;URL=Isikan URL Blog B anda"/>

Penempatannya sama dengan yang di atas.

Usahakan waktunya di set pada 0 detik, supaya langsung menuju Blog B anda.




**** Semoga Bermanfaat ****

Membuat Alamat judul Blog berjalan

Pasti nya teman-teman ingin melihat Blognya terlihat indah, harus teman-teman ketahui blog adalah seperti rumah kita sendiri jadi harus kita buat seindah dan menarik,, ya udah lah gak usah panjang lebar lagi,, Sebagai contoh lihat lah di blog saya? Apa anda tertarik,,!!!
Jika teman-teman ingin mencoba, seperti biasanya tinggal masuk ke halaman Dashbord - Tata letak - Edit HTML
Cari kode di bawah ini




Hapus kode tersebut, lalu ganti dengan kode di bawah ini….


Membuat Label Blogger Dengan Tampilan Cloud

Pasca ulang tahun yang ke-10, Blogger gencar menambahkan fitur baru dan berbenah diri untuk memenuhi permintaan para penggunanya. Mulai dari fitur Readmore Otomatis, Post Editor Baru, Template Designer pada Blogger Draft dan salah satu diantara fitur-fitur baru tersebut yaitu Label Cloud.

Seperti apa Label Cloud? Coba Anda lihat ke bagian bawah halaman blog ini, ada kategori kan? Nah itu namanya label cloud.


Bagaimana cara mengubah tampilan label lama menjadi Label Cloud? Mari kita simak langkah-langkah di bawah ini

Langkah 1
Login ke akun Blogger milik anda > Tata Letak > Elemen Halaman. Klik Edit pada widget Label blog Anda.

Langkah 2
Setelah jendela konfigurasi label terbuka, atur konfigurasi label sesuai pada gambar di bawah ini.




Setelah itu, klik tombol Simpan

Langkah 3
Sebelum mempercantik tampilan label cloud, perlu diperhatikan bahwa label cloud memiliki 5 tingkatan mulai dari warna hingga ukuran hurufnya.

Masuk ke bagian Edit HTML lalu copy kode di bawah ini tepat di atas kode ]]></b:skin>
.label-size-1 a {
color: #000000;
font-size: 8px;
text-decoration: none;
}
.label-size-1 a:hover {
text-decoration: underline;
}

.label-size-5 a {
color: #000000;
font-size: 12px;
text-decoration: none;
}
.label-size-5 a:hover {
text-decoration: underline;
}

Ganti font-size sesuai keinginan Anda.

Langkah 4
Klik Simpan. Label Cloud telah terlihat lebih bagus.

Menu Dropdown dengan JavaScript

Melanjutkan Postingan kemarin lusa yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :







Maka kali ini saya akan memberi contoh banner seperti ini :









Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :





Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

  • Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.



  • Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini. Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif



  • Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :



    1. Sign in di blogger.com dengan id sobat
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template
    5. Tambahkan kode berikut di bawah kode <head> dan sebelum kode </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title> :
    6. <script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
    7. Masukan kode berikut diatas kode ]]></b:skin>
    8. .raden{background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');text-align:center;width:175px;font-family: georgia, Helvetica, sans-serif;padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom: 5px;display:block;text-decoration: none;color: #F6E151;}.ogah{background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');text-align:center;width:175px;font-family: georgia, Helvetica, sans-serif;padding-left:5px;padding-right:5px;padding-top:8px;padding-bottom: 5px;display:block;text-decoration: none;color: ##FAF705;height: 18px;}.ogahniye{background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');text-align:center;width:175px;font-family: georgia, Helvetica, sans-serif;padding-left:5px;padding-right:5px;padding-top:8px;padding-bottom: 5px;display:block;text-decoration: none;color: #0572FA;height: 18px;}.hide{display: none;}.show{display: block;}a{cursor: hand}
    9. Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :
    10. <a class="raden"><font size="5"><b>Navigasi</b></font></a><a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a><div id="ogahku1" class="hide"><a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a></div><a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a><div id="ogahku2" class="hide"><a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a><a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a><a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a></div><a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a><div id="ogahku3" class="hide"><a href="http://rubrik-elektronik.blogspot.com/" class="ogahniye">Rubrik Elektronik</a><a href="http://rohman-freeblogtemplate.blogspot.com/" class="ogahniye">Free Blog Template</a><a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a><a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a></div><a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a><div id="ogahku4" class="hide"><a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a><a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a><a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a><a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a></div>
    11. Klik tombol Preview untuk melihat perubahan yang baru di buat
    12. Jika sudah OK, klik tombol Save Changes Template
    13. Selesai.


    Keterangan kode-kode diatas :

    • kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :
    • <script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
    • Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :



    • .raden
      --> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.

      background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
      --> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.

      text-align:center;
      --> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.

      width:90%;
      --> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.

      font-family: georgia, Helvetica, sans-serif;
      --> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.

      padding-left:5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-right:5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-top:5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-bottom: 5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      display:block;
      --> block berarti ditampilkan,jadi jangan dirubah.

      text-decoration: none;
      --> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.

      color: #F6E151;
      --> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.



      .ogah
      --> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



      .ogahniye
      --> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



      .hide
      display: none;
      --> Pendifinisian untuk .hide disembunyikan (tidak tampil).



      .show
      display: block;
      --> Pendifinisian untuk .show ditampilkan.



      a{cursor: hand}
      Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.


    • Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.



    Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !

    Cara Membuat Teks Melingkari Kursor/Mouse

    Untuk contohnya click di sini. Seperti Teman saya . tertarik.?
    langsung aja scriptnya sebagai berikut:


    <style type='text/css'>

    #outerCircleText {
    font-style: italic;
    font-weight: bold;
    font-family: &#39;comic sans ms&#39;, verdana, arial;
    color: #0000FF;

    position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
    #outerCircleText div {position: relative;}
    #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

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

    ;(function(){

    // Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING)
    var msg = "
    Bhokalor-2010.";


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

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

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

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

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

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

    // BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //

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

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

    document.body,

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

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

    'px';
    d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
    };
    },

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

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

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

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

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

    })();
    //]]>
    </script>


    Ganti
    teks yang berwarna kuning sesuai dengan selera kamu. Ehmm.. warna teks juga bisa kamu ganti. Atau apa sajalah sesukamu. Scriptnya juga boleh, hehehe... OK?

    Selamat mencoba... Read more: http://www.maspeypah.co.cc/2010/03/cara-membuat-read-more-otomatis-dengan.html#ixzz1CHr9LPXz

    Menambah Lebar Dan Tambah Kolom Template Blogger

    Coba anda perhatikan gambar template ini, itu adalah template asli blogger. Hampir semua Template bawaan Blogger semuanya terdiri dari dua kolom, yaitu kolom untuk posting dan kolom sidebar untuk menempatkan Widget.
       Sekarang pertanyaannya apa bisa template itu lebarnya ditambah sekaligus menambah kolom ?, jawabnya tentu saja bisa. Saya akan tunjukan bagaimana caranya menambah lebar kolom template sekaligus menambah kolom baru.

    Silahkan anda Log In di Draft Blogger
    Dalam Dasbor  masuk Tata Letak -> Edit HTML
    Jangan centang Expand Widget Template
    Kemudian anda cari kode seperti ini (sebagai catatan penamaan kode untuk tiap template mungkin saja berbeda, Tapi pada dasarnya sama).Sebagai contoh kode ini diambil dari template Minima :

    #header-wrapper {
      width:660px;
      margin:0 auto 10px;
      border:1px solid $bordercolor;
      }


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

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

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

    /* Footer
    ----------------------------------------------- */
    #footer {
      width:660px;
      clear:both;
      margin:0 auto;
      padding-top:15px;
      line-height: 1.6em;
      text-transform:uppercase;
      letter-spacing:.1em;
      text-align: center;
    }

    Untuk merubah lebar template, anda cuma tinggal merubah angka yang di tandai warna merah. Terserah anda ukurannya mau berapa. Sebagai contoh saja, saya akan merubah ukuran dari angka-angka yang ditandai warna merah, menjadi seperti ini :

    #header-wrapper {
      width:940px;
      margin:0 auto 10px;
      border:1px solid $bordercolor;
      }


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

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

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

    /* Footer
    ----------------------------------------------- */
    #footer {
      width:940px;
      clear:both;
      margin:0 auto;
      padding-top:15px;
      line-height: 1.6em;
      text-transform:uppercase;
      letter-spacing:.1em;
      text-align: center;
    }

    Setelah anda merubah ukuran seperti di atas, otomatis sekarang template anda lebarnya telah bertambah. Tetapi , karena main dan sidebar wrapper belum diubah ukurannya, otomatis template anda mempunyai space yang kosong. Untuk menambah kekosongan itu, kita akan buatkan kolom sidebar yang baru sebagai tempat untuk menempatkan berbagai widget nantinya.
    Silahkan anda copy kode untuk penambahan kolom sidebar dibawah ini :

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

    Tempatkan dibawah sidebar-wrapper sehingga nanti urutannya seperti ini :

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

    #main-wrapper {
      width: 410px;   /* ubah juga nilai ini ganti dengan 470 */
      float: left;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
      }

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

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

    Beres yang diatas, sekarang anda copy kode berikut :

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

    Kemudian anda simpan dibawah kode ini :

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

    Jadi urutannya seperti ini :

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

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

    Simpan Template, sekarang coba lihat hasilnya.

    Menu Dropdown Unik




    Menu diatas merupakan contoh Menu Drop-Down Unik...
    Menu tersebut sangat cocok untuk tampilan blog anda karena ukuran dan tampilan yang unik yang cocok untuk tampilan di menu blog anda..
    Tertarik untuk memasangnya?
    Oke Langsung saja Copy Paste kode nya dibawah ini :



    <!--Menu Drop-Down Unik-->
    <center><div id="menu">
    <ul>
    <li><a class="current" href="http://www.kikiyo.co.cc">Home</a></li>
    <li><a href="http://facebook.com">Facebook</a></li>
    <li><a href="http://id.yahoo.com">Yahoo!</a></li>
    <li><a href="http://twitter.com">Twitter</a></li>
    <li><a href="http://www.youtube.com">Youtube</a></li>
    </ul>
    </div></center>
    <style>
    *{
    margin:0;
    padding:0;
    }
    #menu{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dzZe2Y9sEe_9M34dAmGp8FiI3wg374KdGtwAxmxfANM9Uoe4YEfGp_W7IzJFSgOXDXO396bMcw1jNxWE7VTttWUjXMy7lonP9GMMLRuI84O1p834Mht-mNGqWZ7f9qmUM02Efo0hyZI/s1600/menu_026_bg.jpg) no-repeat;
    width:172px;
    height:193px;
    padding:15px;
    }
    #menu ul{
    list-style:none;
    padding:0 0 0 8px;
    }
    #menu li{
    list-style:none;
    display:block;
    padding:10px 0;
    }
    #menu li a{
    list-style:none;
    display:block;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhElQiezXWgywRDJgSEQRH9xQzZPOUTBNXQL_1lt_KBH5s-Eh1HHqt4966K9kfp9hEtExrMR5hZr8HXoNy1eVcKDJ9sCtNDliz5NcwpwEsLChb4TWinFT2HjAu-JGVgPgImHDycOyjA79vr/) no-repeat left center;
    color:#ffe991;
    font-weight:bold;
    text-transform:uppercase;
    font-size:11px;
    line-height:1.5em;
    text-decoration:none;
    padding:0 5px 0 25px;
    }
    #menu li a:hover{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWKOpl3xXl2TOAsSXhmvgvhZT8bEjgUT3uX6iSMLEIbkgjwN60kHwP8ef8RRGMk69kYUsppj0XVMBHFtt-bztCmZLzMYHcRHjLnYJadW9NzQxXIFUCZoiBaeVGoIJUZBpH3bSgNr5F8qEt/) no-repeat left center;
    color:#fff;
    text-decoration:none;
    }
    #menu li .current{
    list-style:none;
    display:block;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWKOpl3xXl2TOAsSXhmvgvhZT8bEjgUT3uX6iSMLEIbkgjwN60kHwP8ef8RRGMk69kYUsppj0XVMBHFtt-bztCmZLzMYHcRHjLnYJadW9NzQxXIFUCZoiBaeVGoIJUZBpH3bSgNr5F8qEt/) no-repeat left center;
    color:#fff;
    font-weight:bold;
    text-transform:uppercase;
    font-size:11px;
    text-decoration:none;
    padding:0 5px 0 25px;
    }
    #menu li a.current, #menu li a:hover.current{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWKOpl3xXl2TOAsSXhmvgvhZT8bEjgUT3uX6iSMLEIbkgjwN60kHwP8ef8RRGMk69kYUsppj0XVMBHFtt-bztCmZLzMYHcRHjLnYJadW9NzQxXIFUCZoiBaeVGoIJUZBpH3bSgNr5F8qEt/) no-repeat left center;
    color:#fff;
    text-decoration:none;
    }
    </style>
    <!--By Www.kikiyo.co.cc-->

    Cara Mengganti Link Read More Dengan Gambar

    Link Read More yang berupa teks jika kita lihat semakin lama semakin membosankan. Untuk menghilangkan kebosanan tersebut, kita bisa mengganti link read more dengan gambar.

    Cara mengganti link read more dengan gambar tergolong cukup mudah. Blog Kumpulan Tutorial Ngeblog juga sudah saya ganti link read more-nya. Lumayan untuk menambah hiasan blog...hehehehehehehe...




    Berikut ini langkah-langkah Cara mengganti link read more dengan gambar

    Langkah 1
    Login ke akun Blogger milik anda > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

    Beri tanda centang pada “Expand widget template” kemudian cari kode berikut ini


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

    Ganti kode yang berwarna merah dengan kode ini
    <a expr:href='data:post.url'><img src=' URL gambar Read More blog Anda '/></a>

    Langkah 2
    Klik Pratinjau. Bagaimana hasilnya? Jika berhasil, klik tombol Simpan.

    7 Des 2009 Membuat Daftar Isi Blog Secara Otomatis


    Bagi anda yang ingin membuat Daftar Isi dari blog anda, tapi tidak ingin mengetikannya satu-satu yang bisa membuat jari-jari anda keriting bila daftar isinya banyak bangeeet, silahkan ikuti langkah berikut supaya jari-jari anda tidak terlalu kribo..he..hee..
    langkah-langkahnya :

    1. masuk ke Edit HTML
    2. Lalu beri tanda centang di "Expand Widget Template"
    3. Kemudian Copy Paste script berwarna merah di bawah ini dan letakkan di atas kode ]]></b:skin>,


    #daftar-isi-otomatis{ border:2px outset blue; padding:5px 0 5px; background:#EAE9E9 }

    4. Langkah selanjutnya cari kode di bawah ini :

    <b:include data='post' name='post'/>

    Untuk di template minima kode diatas ada dua, carilah kode yang pertama , bila sudah ketemu, ganti kode di atas dengan kode di bawah ini :

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <div id='daftar-isi-otomatis'>
    <data:post.title/></div></a>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

    5. lalu simpan, kemudian Masuk ke Page Element, dan klik Add Gadget, posisinya terserah mau di bagian menu atau di sidebar, contohnya bisa dilihat pada menu daftar isi blog .


    <a href="http://Alamatbloganda.blogspot.com/search?max-results=100">Daftar isi</a>

    6. pilih HTML/Script, dan masukkan kode diatas kedalamnya, tetapi sebelumnya ganti dulu alamat link-nya yang berwarna merah tebal sesuai dengan alamat blog anda.

    Simpan... dan lihat hasilnya.

    Main Layang-Layang di Blog

    Duuuh... Apalagi sih ni....
    Sabar dulu teman. Tarik napas dalam-dalam...HHHHHhhhhh.... hembuskan dengan perlahan.....BROOOT.... ups, jangan lewat belakang dong!!!kwokwokwo
    Begini kawanku, kamu bisa menghiasi blogmu dengan gambar yang melayang-layang di blogmu (mantul-mantul gitu pokoknya). Gambarnya terserah kamu mau gambar apa, yang penting kamu tahu alamat gambarnya.

    Namun sayangnya, seperti halnya efek laron, efek gambar melayang-layang ini cuma bisa dilihat lewat browser Internet Explorer. Kalau kamu membukanya lewat Mozilla Firefox, maka gambar tersebut cuma nangkring di pojok kiri atas. Tapi coba aja dulu, keren ko!
    Caranya masih tetap sama, yaitu mengcopy kode di bawah ini dan mempastenya sebagai widget tanpa judul:



    Nah, ganti alamat gambar http://www.situsgambar.com/gambar/yangkamumau.jpg tersebut dengan alamat gambar punya kamu. Mudah sekali kan?

    Menghiasi Blog Dengan Jam dan Tanggal

    Biasanya jika kita sedang browsing atau menjelajah internet suka lupa waktu saking asyiknya. Atau jika kita lagi utak-atik blog kita, baik sedang mengetik artikel, menghias blog ataupun mengutak atik kode html( bagi yang sedang Belajar) di blog kita, biasanya suka lupa waktu (seperti saya ini..he.hee..).

     Biar tidak terlalu terlena saking asyiknya, tidak ada salahnya jika di blog, kita pasangi dengan jam dan tanggal. Selain kita ingat waktu juga biar blog kita tambah cantik ( apa iya.ya..).
    Supaya tidak lama, langsung saja ke  pokok bahasan yaitu " Menghiasi Blog Dengan Jam Dan Tanggal ".

    Untuk membuat jam dan tanggal kita memerlukan kode yang berupa Javascript .Kode ini saya ambil dari www.dynamicdrive.com, silahkan klik disini untuk mendapatkan script nya. Kemudian anda simpan dalam format Javascript. Nantinya file ini harus anda simpan di hosting file supaya nantinya bisa di panggil.

    Bila belum punya tempat penyimpanan/ hosting file di internet, silahkan nanti anda copy saja semua kode dibawah dan ikuti cara menempatkannya.

    Sigin di Draft Blogger
    Dalam dasbor masuk Tata Letak --> Edit HTML
    Cari kode ini <body>
    Ganti dengan kode ini :



    Simpan Perubahan. Kemudian anda pindah ke Elemen Laman --> Tambah Widget --> HTML/Javascript.

    Anda copy dan paste kan script berikut :



    Simpan. Sekarang coba lihat hasilnya.
    Catatan : Kita bisa menempatkan kode yang kedua, dimana saja didalam widget template . Tapi sebagai acuan lebih baik ditempatkan di atas, baik diatas sidebar, diatas header, dibawah header, atau diatas posting . Tapi itu terserah anda.





    **** Semoga Bermanfaat ****

    Kode Warna

    Cyan #00ffff
    Blue #0000ff
    Skyblue #abcdef
    Darkcyan #008686
    Cadetblue #5f9ea0
    Midnightblue #191970
    Mediumslateblue #7b68ee
    Cornflowerblue #6495ed
    Lightsteelblue #b0c4de
    Lightskyblue #87cefa
    Powderblue #bde0e6
    Aquamarine #7fffda
    Dodgerblue #1e90ff
    Royalblue #4169e1
    Blueviolet #8a2be2
    Indigo #460082
    Lavender #e6e6fa
    Lightblue #add8e6
    Deepskyblue #00bfff
    Darkslateblue #483080
    Mediumvioletred #071585
    Mediumturquoise #4801cc
    Mediumorchid #ba55d3
    Darkturquoise #00ccd1
    Paleturquoise #afeeee
    Darkorchid #9932cc
    Slateblue #6454cd
    Aqua #00ffff
    Red #ff0000
    Darkred #860000
    Indianred #cd5c5c
    Firebrick #622222
    Lightsalmon #ffa07a
    Lightcoral #f08080
    Maroon #800000
    Crimson #dc143c
    Tomato #ff6347
    Salmon #fa8072
    Coral #ff7f50
    Pink #ffc0cb
    Hotpink #ff69ba
    Deeppink #ff1493
    Lightpink #ffb6c1
    Mistyrose #ffe4e1
    Moccasin #ffe4b5
    Peachpuff #ffdab9
    Mintcream #f5fffa
    Floralwhite #fffaf0
    Oldlace #fdf5e6
    Thistle #d8bfd8
    White #ffffff
    Linen #faf0e6
    Navy #000080
    Snow #fffafa
    Orange #ffd000
    Orangered #ff4500
    Burlywood #deb887
    Darkorange #ff8c00
    Palevioletred #db7093
    Sandybrown #f4a460
    Rosybrown #bc8f8e
    Brown #a52a2a
    Peru #cd853f
    next >>>

    Ada Laron di Blogmu!

    Kamu tahukan apa itu laron? Itu, binatang yang sering mengerumuni lampu itu lho! Sudah tahu kan? Lalu, apa hubungannya dengan blog? Eits, begini kawan, asal kau tahu, dikau bisa memelihara binatang laron tersebut di blogmu. Tapi, berhubung di blog tidak ada lampu yang bisa dikerumuni, maka cursorlah yang menjadi incaran si laron-laron tersebut.

    Ah, daripada saya repot-repot menjelaskan, coba sendiri aja deh, biar tahu gimana jadinya. O ya, sayangnya efek laron ini cuma bisa dilihat bila kamu menggunakan browser Internet Explorer. Tapi tak apalah, sekarang kan masih banyak yang internetan menggunakan IE.
    Caranya sama saja dengan cara memasang efek salju yang telah saya jelaskan sebelumnya, kodenya saja yang agak beda dikit. Ni kodenya:

    -Laron Hijau Cerah


    -Laron Putih



    NB: Mohon maaf, karena waktu saya sedikit, jadi yang sempat saya buatkan cuma dua warna ini. Kalau kamu ingin warna lain, silakan hubungi saya, kemudian bersabarlah sampai saya punya waktu untuk membuatkannya (huhuhu....)

    Efek Hujan Jarum di Blog, Ih... Ngeri....

    Yang ini sama dengan efek salju yang sudah saya jelaskan sebelumnya. Bedanya, kali ini hujannya bukan salju lagi, tapi jarum! Hi... Ngeri... Tapi keren lho. Coba deh!
    Caranya sama saja seperti memasang efek salju. Yang berbeda hanyalah kodenya:


    Jarum Biru Muda





    Jarum Hitam





    Jarum Biru





    Jarum Ungu Cerah





    Jarum Abu-Abu





    Jarum Hijau





    Jarum Hijau Cerah





    Jarum Merah Hati





    Jarum Biru Gelap





    Jarum Emas





    Jarum Ungu





    Jarum Merah





    Jarum Perak





    Jarum Biru Pucat





    Jarum Putih





    Jarum Kuning



    7 Mei 2011

    Navigasi menu fadein and fadeout





      Cara membuatnya :
    1. Login blogger
    2. Rancangan, Edit Html, Cari kode ]]></b:skin>
    3. Dan Simpan kode berikut diatasnya :
    /* ---------------
    Navigasi menu fadein and fadeout with jquery
    ---------------------------------- */
    #navMenufad li {
    float:left;  
    background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLVRB0T7szhrdAtYSPosyiKJn72xoensDGGQQCQH85_boAnVla8LAGQ2jdSsX2qs71aAc0gxSRnph762CO6ouBzanTuGwRyExcA01TPAH5KObufvmxo6RkYoaJmhJRmocjLUeLpCJbRo8/s1600/default.jpg) no-repeat center center;    /* default background image*/
    width:90px;    /* width and height of the menu item */
    height:53px;
    border-left:1px solid #111;    /* simulate pixel perfect using border */
    border-right:1px solid #333;
    border-top:1px solid #555;
    border-bottom:1px solid #333;
    position:relative;/* must set it as relative, because .hover class top and left with absolute position will be positioned according to li.    */
        }

    #navMenufad li a {
    z-index:20;/* z-index must be higher than .hover class */
    display:block;/* display as block and set the height according to the height of the menu to make the whole LI clickable    */
    height:53px;
    position:relative;
    color:#777;
        }

    #navMenufad li .hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgSVetXQxgltOcP3sZy8PzM_GP-vDHbT-ch-npzjlQhEo2vwbTmWWX7zHGSzAmz9OzxZU3PVFjJSkHcZb83vRmAiKVDe4UkIzVRamgp-6GAnsadybgw05VrkNWh8554nCsB2u6a8Yyb8/s1600/over.jpg)no-repeat center center;/* mouseover image    */
    position:absolute;/* must be postion absolute     */
    width:90px;    /*width, height, left and top to fill the whole LI item    */
    height:53px;
    left:0;
    top:0;  
    z-index:0;/* display under the Anchor tag*/
    display:none;/* hide it by default*/
    }  

    #navMenufad li.selected {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_E-HF_-ucqTBCxZf7qJkcWRIVxW2K622BjlVBGN0_1cp4RKUG0m1eIQx6LhkKqSE1FeZ_WbFZLnY-6LKrQLCP3we4BitiGdhUy3aGCfG1iBsCHdYhlGZZ2gP2NwS-2fb-dXrzr8fH45s/s1600/selected.jpg) no-repeat center center;/* selected image    */
    }


    Untuk gambar in dan out nya kawan bisa ganti sesuai kreasi, yang saya pakai image nya berukuran Width 90px dan height nya 53px,  silahkan ssuaikan dengan CSS nya jika ukurannya dan gambarnya diganti maka Lebar dan tinggi dalam CSS nya juga disamakan dengan ukuran gambar yang baru.....


    simpan script berikut diatas kode </head> :
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">

    //<![CDATA[


    $(document).ready(function () {

        //Append a div with hover class to all the LI
        $('#navMenufad li').append('<div class="hover"><\/div>');


        $('#navMenufad li').hover(
          
            //Mouseover, fadeIn the hidden hover class  
            function() {
              
                $(this).children('div').fadeIn('1000');  
          
            },
      
            //Mouseout, fadeOut the hover class
            function() {
          
                $(this).children('div').fadeOut('1000');  
          
        }).click (function () {
      
            //Add selected class if user clicked on it
            $(this).addClass('selected');
          
        });

    });

    //]]>

    </script>

    Simpan kode berikut pada bagian html yang diinginkan sesuai template kawan-kawan :
    <ul id="navMenufad">
        <li><a href="#">Test 1</a></li>
        <li><a href="#">Test 2</a></li>
        <li><a href="#">Test 3</a></li>
        <li><a href="#">Test 4</a></li>
        <li><a href="#">Test 5</a></li>
        <li><a href="#">Test 6</a></li>
    </ul>

    simpan template....
    Selesai....

    selamat Berkreasi, dan Sukses....

    Magic line navigation menu









      Cara membuatnya :
    1. Login blogger
    2. Rancangan, Edit Html, Cari kode ]]></b:skin>
    3. Dan Simpan kode berikut diatasnya :

    /*----------------
    Magic line navigation
    --------------------------*/
    .nav-wrapline{
        background:-moz-linear-gradient(top, #051547, #888, #051547);
    -moz-box-shadow:0px 2px 2px #111;
        width: 500px;
        border: solid 1px #FFF;
        height: 30px;
        -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    }

    .group:after {
         visibility: hidden;
         display: block;
         font-size: 0;
         content: " ";
         clear: both; height: 0;
          margin: 50px auto;
         background-color: rgba(0,0,0,0.6);
         border-top: 2px solid #FFF;
         border-bottom: 2px solid #FFF;
         width: 500px;
         }
    *:first-child+html .group {
         zoom: 1;
         } /* IE7 */
    #magic-line {
         position: absolute; bottom: -2px; left: 0;
         width: 100px; height: 2px;
         background: #fe4902;
         }

    #magic {
         margin: 0 auto;
         list-style: none;
         position: relative;
         width: 500px;
         }
    #magic li {
         display: inline;

         }
    #magic li a {
         position: relative; z-index: 200;
         color: #bbb; font-size: 14px;
         display: block; float: left;
         padding: 6px 10px 4px 10px;
         text-decoration: none;
         text-transform: uppercase;
         }
    #magic li a:hover {
         color: white;
         }
    #magic #magic-line-two {
         position: absolute; top: 0;
         left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100;
         -moz-border-radius: 5px;
         -webkit-border-radius: 5px;
        border-left: solid 1px #fff;
        border-right: solid 1px #fff; }

    .current_page_item a, .current_page_item_two a {
         color: white !important;
         }

    dan simpan kode ini diatas </head> :
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="http://kangdadang.googlecode.com/files/jcolor.js"></script>

     <script type="text/javascript">
        $(function(){

        var $el, leftPos, newWidth,
            $mainNav2 = $("#magic");

        $mainNav2.append("<li id='magic-line-two'></li>");
      
        var $magicLineTwo = $("#magic-line-two");
      
        $magicLineTwo
            .width($(".current_page_item_two").width())
            .height($mainNav2.height())
            .css("left", $(".current_page_item_two a").position().left)
            .data("origLeft", $(".current_page_item_two a").position().left)
            .data("origWidth", $magicLineTwo.width())
            .data("origColor", $(".current_page_item_two a").attr("rel"));
                  
        $("#magic li").find("a").hover(function() {
            $el = $(this);
            leftPos = $el.position().left;
            newWidth = $el.parent().width();
            $magicLineTwo.stop().animate({
                left: leftPos,
                width: newWidth,
                backgroundColor: $el.attr("rel")
            })
        }, function() {
            $magicLineTwo.stop().animate({
                left: $magicLineTwo.data("origLeft"),
                width: $magicLineTwo.data("origWidth"),
                backgroundColor: $magicLineTwo.data("origColor")
            });  
        });
    });

    </script>

    terakhir cara pemanggilannya pada HTML (tempatkan ssuai keinginan dan template kawan-kawan):
    <div class="nav-wrapline">
          
            <ul class="group" id="magic">
                <li style=""><a rel="#fe4902" href="#">Home</a></li>
                <li style=""><a rel="rgba(50,69,12,0.9)" href="#">Mobile Download</a></li>
                <li style=""><a rel="rgba(113,116,0,0.9)" href="#">About</a></li>

                <li style="" class="current_page_item_two"><a rel="rgba(220,133,5,0.9)" href="#">Facebook</a></li>
                <li style=""><a rel="rgba(236,85,25,0.9)" href="#">Twitter</a></li>

    </ul>
          </div>

    selesai.....

    Pure CSS Fish Eye Menu












      Cara membuatnya :
    1. Login blogger
    2. Rancangan, Edit Html, Cari kode ]]></b:skin>
    3. Dan Simpan kode berikut diatasnya :

    /*----------------
    Pure CSS Fish Eye Menu Expand Down
    -------------------------------*/
    .expand-down {
      font-family:Arial, Helvetica, sans-serif;
      line-height:normal;
      margin-top:20px;
      height:150px;
      width:500px;
      margin-bottom:30px;
    }
    .expand-down * {
      margin: 0;
      padding: 0;
    }
    .expand-down ul {
      padding-top:10px;
      margin-left:10px;
    }
    .expand-down ul li {
      float:left;
      list-style-type:none;
    }
    .expand-down ul li a {
        text-decoration:none;
    }
    .expand-down ul li a img {
      width:50px;
      height:50px;
      border:none;
    }
    .expand-down ul li a span {
      display:none;
    }
    .expand-down ul li:hover a span {
      display:block;
      font-size:14px;
      text-align:center;
      color:#fff;
    }
    .expand-down ul li:hover a img {
      width:100px;
      height:100px;
    }
    .expand-down ul li:hover + li a img {
      width:60px;
      height:60px;
    }
    .expand-down ul li:hover + li + li a img {
      width:55px;
      height:55px;
    }

    4. Pemanggilannya pada html silahkan disimpan di tempat yang diinginkan pada edit html posting ataupun Gadget Html/java script:
    <div class="expand-down">
    <ul class="expand-down">
      <li>
        <a href="#" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqz9MDRP3TQhVDz0zWWDFURQsDFlaD_DRb9JdWXgfygtmBJIaF4AGZMV4Ig9nDE24Gw3rWWM5VtCpJNYBSyXU82-wk_XrHZCBswQSQScfdYBGzXldEct2Kb3aphq6capaAeW4RS5u5Jqw/s1600/firefox-trans.png"/>
        </a>
      </li>
      <li>
        <a href="#" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigpWORr0YT1qbtKlPgpUsS6xWdQKqVzrFJv7gb21REgQm-zIOT4joVALaU53PFUBpAryzdy8W_IKKg0lZkPqSxYGjyycDy49YzVJvmS2AxxRpZtuPSt-mz6wpkStgzWKYUA3BxG_zBA5I/s1600/safari-trans.png"/>
        </a>
      </li>
      <li>
        <a href="#"  target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqz9MDRP3TQhVDz0zWWDFURQsDFlaD_DRb9JdWXgfygtmBJIaF4AGZMV4Ig9nDE24Gw3rWWM5VtCpJNYBSyXU82-wk_XrHZCBswQSQScfdYBGzXldEct2Kb3aphq6capaAeW4RS5u5Jqw/s1600/firefox-trans.png"/>
        </a>
      </li>
      <li>
        <a href="#"target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSvfOnOOQY5A-dOJMjt_pmcmS9E7FABUF4n256S2Z1QTfVLgML-VXSZLg7Is5XgnagAdmJfx-MVPcROCFa9uvHR6fIE7IiPO8BGzUcBM0Eyst9lbztKHJQNEsMKC-bLMY3gZlGkTcWNc/s1600/google-chrome-trans.png" />
        </a>
      </li>
      <li>
        <a href="#"  target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsd9pliryoezh0x5oSwfRDvZvxgyAj-SzPIwl5fHUysKCwX6W6daxNjm-_ndG4IaT-07Qayof1AIy9otjtG-WxcSZFzF_JIifcNoeX6Y4Ntq8xSbV3xZ0Q-pq_KqEhE9Veg5TvvJmE5fo/s1600/ie-trans.png"/>
        </a>
      </li>
      <li>
        <a href="#" title="Konqueror" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaFIlynlEt75wDIcP8pNRJCryCOUvwCDBonQMtjbRGwGVoyBDKs23rFSEl_8NNosWCt6iCj13K6HcItZA8eBN1Fu1aL47WfYEBcPJi7uoJkbNOnsbqV8H3oFYItUlX2WEVTnfyjCRpkcY/s1600/konqueror-trans.png" />
        </a>
      </li>
    </ul>
    </div>


    selesai....
    IP
    English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified