Cara Membuat Bingkai Atau Tombol Dengan Warna Gradasi (Gradient Colour) Pada Blog

Selain besar kecilnya bandwidth sambungan internet yang dipakai untuk mengakses internet, salah satu faktor yang menjadi penyebab utama lambatnya penayangan atau loading halaman sebuah situs web atau blog adalah penggunaan gambar untuk setiap elemen halaman dari situs web atau blog yang dimaksud (misal: background, header, tab menu, widget, dan lain sebagainya). Walaupun pada dasarnya penggunaan gambar untuk setiap elemen halaman (seperti pada contoh di atas) dapat menjadikan tampilan halaman menjadi lebih ‘cantik’ dan terkesan profesional, namun pada kenyataannya cara ini sangat berpengaruh terhadap kecepatan penayangan halaman sebuah situs web atau blog, terutama apabila sambungan internet yang digunakan memiliki kapasitas bandwidth yang kecil atau rendah. Hal ini disebabkan karena dengan menggunakan gambar untuk setiap elemen halaman akan mengakibatkan browser melakukan request terlebih dahulu atas konten gambar yang digunakan, ke beberapa server yang berbeda (sesuai dengan dimana gambar yang dimaksud disimpan) sebelum pada akhirnya menayangkan halaman secara keseluruhan. Padahal bisa jadi konektifitas antara satu server dengan server yang lainnya tidaklah sama. Sehingga apabila konektifitas dengan sebuah server tidak lancar, maka secara otomatis pula proses request untuk konten yang dimaksud akan menjadi semakin lama.

Nah, berdasarkan alasan di atas, maka sebenarnya hal tersebut dapat disiasati dengan cara menggunakan warna solid untuk setiap elemen halaman, sehingga browser tidak perlu lagi melakukan request ke beberapa server yang berbeda karena proses akan langsung ditangani oleh browser yang saat itu dipakai untuk mengakses internet. Namun sayangnya penggunaan warna solid sebagai pengganti gambar yang digunakan pada setiap elemen halaman malah akan mengakibatkan tampilan halaman tampak monoton dan terkesan kurang profesional, sehingga solusinya adalah dengan menggunakan atau menerapkan gradasi warna (gradient colour) pada elemen halaman yang diinginkan. Gradasi warna atau gradient colour dapat diartikan sebagai penggabungan atas satu warna dengan warna yang lainnya. Dimana hal ini tentunya akan sangat berbeda bila dibandingkan dengan penggunaan warna solid yang dapat diartikan sebagai penggunaan satu macam warna saja. Sehingga dengan cara tersebut (penggunaan warna gradasi atau gradient colour), selain proses penayangan halaman dapat dilakukan dengan lebih cepat, tampilan halaman pun tetap tampak ‘cantik’ dan terkesan lebih profesional.


Oke, sekarang kita kembali pada pokok pembahasan utama, yaitu tentang cara membuat bingkai atau tombol dengan warna gradasi (gradient colour) pada halaman sebuah situs web atau blog. Apabila kita ingin membuat suatu bingkai atau tombol dengan warna gradasi untuk diterapkan pada halaman sebuah blog, seperti yang tampak pada halaman blog ini (yaitu seperti yang tampak pada header, tab menu, judul widget dan artikel, daftar artikel terkait, serta footer), maka dapat dilakukan dengan 2 (dua) cara, dimana cara yang pertama adalah dengan menggunakan kode seperti contoh kode di bawah ini.
.bingkai_warna_gradasi {
height: 100px;
width: 463px;
padding: 5px;
border-radius: 2px;
border: 1px solid #c4c4c4;
background: #073763;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );
background: -moz-linear-gradient( center top, white 20%, #3d85c6 100% );
}
Apabila diterapkan, maka kode di atas akan menghasilkan bingkai seperti yang tampak di bawah ini.


Namun, satu hal yang perlu diingat adalah bahwasanya kode di atas hanya dapat diterapkan dengan menyisipkan atau memasukkannya ke dalam template yang digunakan. Sehingga dapat diartikan bahwa kode tersebut tidak dapat digunakan untuk membuat bingkai dengan cara menyisipkan atau memasukkannya langsung ke dalam konten artikel yang akan diposting atau diterbitkan. Sehingga apabila kita ingin membuat bingkai dengan cara menyisipkan atau memasukkannya langsung kode yang dimaksud ke dalam konten artikel yang akan diposting atau diterbitkan, maka dapat dilakukan dengan cara yang kedua, yaitu dengan menggabungkan kode tersebut ke dalam sebuah tag ‘div’, seperti yang tampak pada kode di bawah ini.
<div style="height: 100px; width: 463px; padding: 5px; border-radius: 2px; border: 1px solid #c4c4c4; background: #073763; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) ); background: -moz-linear-gradient( center top, white 20%, #3d85c6 100% );">

---------------- konten ---------------- 
</div>
Berbeda dengan kode yang digunakan pada cara pertama (yang hanya dapat diterapkan dengan menyisipkan atau memasukkannya ke dalam template), kode yang digunakan pada cara kedua ini dapat diterapkan secara langsung dengan menyisipkan atau memasukkannya secara langsung ke dalam konten artikel yang akan diterbitkan maupun dengan cara menyisipkan atau memasukkannya ke dalam template blog yang digunakan. Namun walaupun demikian, pada prinsipnya antara kode yang digunakan pada cara pertama dan kode yang digunakan pada cara kedua, fungsi dan kegunaannya adalah sama, yaitu untuk membuat bingkai atau tombol dengan warna gradasi atau gradient colour.

Dan selanjutnya, terkait dengan ukuran yang digunakan dalam pembuatan bingkai atau tombol dengan warna gradasi tersebut, kita dapat menyesuaikannya dengan mengubah satuan yang terdapat pada kode height: 100px; dan width: 463px;, sedangkan untuk kombinasi warna yang digunakan, kita dapat mengubah kode #c4c4c4; #073763; dan #3d85c6; serta white dengan kode dan atau warna lain sesuai dengan warna yang diinginkan. Sementara itu, untuk contoh penerapan secara langsung atas pembuatan bingkai atau tombol dengan warna gradasi untuk ‘mempercantik’ tampilan dan mempercepat loading atau penayangan halaman blog sebagai pengganti konten gambar, akan saya uraikan pada artikel yang berbeda sesuai dengan penerapannya terhadap masing-masing elemen halaman.

Semoga berguna dan bermanfaat
Salam.
 

Menghilangkan Garis Bawah Link

Pernah ada salah satu sobat yang mengirimkan email ke saya, beliau ini menanyakan cara menghilangkan garis bawah yang ada pada setiap link. Garis bawah ini menurut beliau sangat mengganggu keindahan tulisan-tulisannya. Memang seperti kata-kata saya terdahulu, lain orang lain keinginan, untuk urusan link pun ada yang suka memakai garis bawah dan ada juga yang tidak suka akan garis bawah tersebut.

Menurut kebiasan yang berlaku, sebuah tulisan yang berbentuk link biasanya memang mempunyai garis bawah, akan tetapi sebenarnya garis bawah tersebut bisa di hilangkan apabila kita mau. Bagaimana cara menghilangkan garis bawah pada link? untuk menghilangkannya sobat perlu merubah beberapa kode yang ada pada style sheet CSS, kode tersebut biasanya seperti ini :


a:link {
color:#58a;
text-decoration:underline;
}

a:hover {
color:#c60;
text-decoration:underline;
}

a:visited {
color:#969;
text-decoration:underline;
}


Agar menjadi faham, akan saya uraikan :


a:link {
color:#58a;
text-decoration:underline;
}

kode ini mempunyai arti --> sebuah link akan berwarna biru dan bergaris bawah.


a:hover {
color:#c60;
text-decoration:underline;
}

Sebuah link apabila di sorot oleh mouse akan berubah warna menjadi biru tua dan bergaris bawah.


a:visited {
color:#969;
text-decoration:underline;
}


Sebuah link apabila pernah di klik oleh komputer yang sama akan berwarna biru tua (banget) dan bergaris bawah.


Pertanyaan selanjutnya manakah kode diatas yang membuat link menjadi bergaris bawah? jawabnya adalah kode :

text-decoration:underline;

Tulisan underline lah yang membuat link menjadi bergaris bawah. Apabila kita tidak menginginkan adanya garis bawah pada sebuah link, maka kita hanya cukup merubahnya dengan kata none, nanti kodenya akan menjadi seperti ini :

text-decoration:none;

Dari pengertian tadi diatas tentu saja kita dapat mengatur ingin ada atau tidak ingin ada garis bawah, tergantung dari selera masing-masing, apakah sebuah link ingin bergaris bawah atau tidak? apakah apabila sebuah link di sorot oleh mouse ingin bergaris bawah atau tidak? apakah apabila sebuah link pernah di kunjungi atau di klik ingin bergaris bawah atau tidak? semua terserah sobat sebagai pemilik blog. Ingin bergaris bawah? ya pakai underline, kalau tidak ingin bergaris bawah ya tingal ganti dengan none, gampang bukan?

Backlink Gratis Blog PR 3

Backlink gratis dofollow, Backlink gratis berkualitas, backlink gratis otomatis, backlink gratis indonesia,backlink gratis pr tinggi, Free Backlink 2012, Nah, mungkin kata itu lebih sering dicari bagi pemburu backlink gratis, buat yang ingin backlink dofollow mungkin ini bisa dijadikan salah satu jalan mendapatkan backlink dari blog PR 3 Gratis dan saya sendiri yang menjaminya bahwa ini benar2 dofollow juga karena saya kontal adminya ternyata tidak hanya product saja yang boleh di submit,namun blogpun juga boleh disubmit dengan tujuan hanya dapat backlink gratis,dan yang lebih asik kamu boleh juga submit setiap artikelmu kesini juga loh.

Backlink Gratis,Backlink Gratis Blog PR 3,cara mendapatkan backlink gratis
backlink gratis
Dari tadi gak jelas2, eko hanya ingin memberi informasi bagi teman2 yang ingin dapat backlink gratis dari blog PR 3 Silahkan menuju http://pasangiklanbaris.om-onny.com/ dan Submit Blogmu disitu.

Cukup sekian yah informasi kali ini tentang Backlink Gratis Blog PR 3,

Cara Membuat Daftar Isi (Sitemap) di Blogger/Blogspot part 2

Salah satu daftar isi blog yang terbaik untuk blogger adalah yang dibuat oleh Abu Farhan. Code yang dia buat beradasarkan kepada accordion dan punya tampilan sangat cantik. Anda bisa ke sana untuk melihat bagaimana fitur daftar isi yang sudah dibuatnya.
Cara membuatnya adalah buat laman statis baru 
  • Klik Posting, entri baru lalu edit HTML
  • Pada Judul Ent masukkan Daftar Isi Masukkan kode berikut pada kotak untuk isinya:
    <link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
    <script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
    <script src="http://eko-tipsntrick.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    <script type="text/javascript">
    var accToc=true;
    </script>
    <script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
    Kira-kira seperti di bawah ini
     
    • Ganti http://eko-tipsntrick.blogspot.com/ dengan alamat blog sobat.
    • Terakhir, klik Terbitkan Entri.

    Membuat File .XML Dengan Notepad

    Akhirnya masalahku terpecahkan juga impianku untuk membuat template blogger akhirnya saya sudah bisa membuat file .xml sebenarnya tutorial ini sangat mudah bila sudah mengetahui membuat file .xml bila sobat sudah tidak sabar ingin membuat template blogger baiklah langsung saja mulai membuat template blogger :
    1. pilih menu start => all progams => accessories => notepad
    2. Bila sudah lalu kita buka notepad
    3. Jika sudah selesai membuat template lalu klik file => save as
    4. Perhatikan scrennshot berikut
    Ikuti saja seperti gambar diatas mudahkan cara membuat template blogger tinggal mendesain templatenya semoga artikel ini bermanfaat

    Disable Klik Kanan Pada Dekstop Dan Context Menu

    Mouse merupakan salah satu perangkat keras atau hardware yang digunakan untuk memberi perintah tertentu  pada komputer. Pada mouse sendiri terdapat tiga fungsi yang sering digunakan oleh user, yaitu klik kiri, scroll, dan klik kanan. Klik kiri berfungsi untuk memilih dan membuka suatu program tertentu, scroll berguna untuk melakukan scroll data / program keatas dan kebawah atau bisa juga untuk zoom out dan zoom in sedangkan klik kanan untuk melakukan perintah-perintah khusus, seperti context menu, refresh, dan lain-lain.
    Selain tersebut diatas, klik kanan juga berfungsi sebagai jalan masuk pada pengaturan-pengaturan windows, seperti pengaturan control panel, pengaturan icon desktop, pengaturan screen saver, pengaturan wallpapaer, pengaturan theme, resolusi monitor, pengaturan properties dan lain sebagainya. Mengingat begitu banyaknya fungsi klik kanan, maka bisa juga digunakan sebagai salah satu cara pengamanan setting pada windows anda agar tidak dapat dirubah oleh user lain dengan cara menonaktifkan / disable klik kanan pada desktop, windows explorer, sehingga context menu tidak muncul. Dengan tidak bisa digunakan klik kanan, maka pengaturan windows anda akan aman dari perubahan oleh user lain.
    Untuk mendisable klik kanan dapat anda lakukan dengan melakukan perubahan pada registry editor. Sebelum melakukan trik ini sebaiknya, backup registry terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan. dan berikut langkah-langkah menonaktifkan klik kanan pada desktop :
    1. Buka registry editor.

      membuka regedit
    2. Masuk ke HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer.
    3. Pada panel sebelah kanan, buat DWORD baru dengan nama NoViewContextMenu.

      disable context menu
    4. Ubah value datanya menjadi 1 (satu)

      nonaktifkan context menu
    5. Restart windows explorer atau restart komputer
    Mulai dari sekarang anda tidak bisa melakukan klik kanan pada desktop, atau klik kanan pada windows explorer. Dengan demikian jika My Computer atau drive yang ada pada jendela windows explorer, jika diklik kanan tidak akan muncul context menu-nya alias tidak bisa di klik kanan. Untuk mengembalikan pada kondisi semula, hapus DWORD NoViewContextMenu tadi atau ubah value datanya menjadi 0 (nol).
    Sekian Tips Dan Trik untuk kali ini semoga bermanfaat..

    Kontak Saya


    Contact Form B


    Name *



    Email *



    Subject *



    Message *




    Cara pasang iklan header kliksaya di blog

    Anda benar-benar niat ingin memasang iklan kliksaya di blog anda?, silahkan anda simak dan terapkan diblog anda. Langsung saja pada tipsnya, bagaimana cara memasang iklan kliksaya di blog :

    Login ke kliksaya.com jika belum terdaftar silahkan daftar dulu di http://www.kliksaya.com/

    kemudian klik pada join kliksaya,
    selanjutnya silahkan anda isi kotak kolom sesuai dengan permintaan,
    setelah semua terisi dengan benar,
    lalu klik daftar paling bawah,
    jika pendaftaran berhasil, maka anda akan ditujukan ke email anda sendiri.



    Setelah anda mendapat ID dan Password sendiri,

    silahkan login,
    kemudian
    Klik Zona Iklan
    Pada sub Menu tampilan utama Ada 3 Pilihan yang tersedia yaitu:
    Zona Iklan Teks, Zona Iklan Header dan Zona Iklan gambar.
    sesua dengan judul diataa, maka anda,
    Klik zona Iklan Header
    Klik Tambahkan Zona Iklan Header
    Silahkan anda Pilih Ukuran iklan headernya dan pilih warna judul iklan Background sesuai dengan selera anda.
    Pada nama situs masukan nama iklan anda sendri,
    url situs silahkan masukan url/alamat blog anda,
    Pada kolom deskripsi: masukan deskripsi tentang blog anda,
    Kemudian klik Tambahkan Zona Iklan Header,
    Silahkan isi kata kolom kunci yang mengambarkan tentang situs anda sendiri,
    lalu klik Ubah Tag,
    kemudian Copy Kode tersebut dan simpan di Notepad anda.

    Selanjutnya adalah dengan memasukan kode tadi ke dalam Blog anda,

    Pertama, seperti biasa,
    Login Ke Blogger anda,
    Masukan email dan password anda,
    Klik rancangan,
    lalu keedit laman,
    kemudian,
    Klik HTML/JavaScript,
    lalu paste Kode yang anda copy tadi kemudian simpan,
    Atur posisi iklan Header anda tergantung keinginan anda
    dan lihat hasilnya.
    semoga bermanfaat dan anda berusaha untuk meningkatkan traffic pengunjung untuk blog anda sendiri. terimakasih.

    Cara Membuat Iklan Melayang Lengkap Dengan Tombol Close

    Pada postingan kali ini kita akan membahasa tentang membuat box iklan melayang. Tentunya apabila iklan yang melayang di blog akan mudah untuk di lihat oleh pengunjung dan apabila ternyata pengunjung tidak berkenan melihatnya pengunjung pun bisa mengklik tombol CLOSE yang telah ada. Trik ini sebenarnya sudah umum sekali dan banyak digunakan dan saya juga mendapatkannya dari blog Mas O-OM.
    Ok, simak caranya:
    1.Login Ke Blogger.
    2.Klik Tata Letak.
    3.Klik Element Halaman.
    4.Klik Tambah Gadget dan pilih HTML / JAVASCRIPT .

    5.Copy dan Paste Kode Berikut Di Dalamnya.
    <a onblur="try {parent.
    deselectBloggerImageGracefully();} catch(e) {}" "" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a> <style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:right; border:2px solid #A5BD51; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){
    var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()">
    .:[Close][Klik 2x]:. </a> </div> <center>
    <script src="http://kumpulblogger.com/scahor.php?b=190266&onlytitle=1" type="text/javascript"></script>
    </center> <script type="text/javascript"> var gb = document.getElementById("gb");
    gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>
    6.Ganti teks yang berwarna merah dengan script iklan sobat
    7.Jangan lupa simpan

    Membuat Efek Petir Background

    1. masuk ke blogger.com
    2. masuk dengan akun anda
    3. pilih rancangan
    4. pilih edit HTML
    5. cari kode </head> 
    6. letakkan kode di bawah diatas kode diatas
    7. <script src='http://ekoyulianto.googlecode.com/files/efek%20petir.txt' type='text/javascript'/>
    8. kalo sudah simpan apa yang terjadi

    Membuat Efek Tulisan Berkedip ( Blink )

    Untuk menambah koleksi Efek blog saya, kali ini aku akan posting bagaimana cara membuat efek tulisan berkedip ... Untuk membuatnya sangatlah mudah kok, kita tinggal meletakkan kode <blink> sebelum isi postingan / linkmu yang kamu inginkan untuk berkedip dan menutupnya dengan kode </blink>... Untuk lebih mudahnya seperti berikut :

    1. Pastekan kode berikut ini untuk membuat postingan berkedip ... pastekan dimanapun kamu mau :

    <blink>ISI POSTINGANMU atau ISI LINK MU</blink> ...Bisa waktu Posting (dalam mode Edit Html)
    Contoh :



    <blink>kali ini aku akan posting bagaimana cara membuat efek tulisan berkedip ...</blink>
     setelah di tambahi kode <blink>ISI POSTINGANMU</blink>

    HASILNYA akan terlihat seperti ini :


    kali ini aku akan posting bagaimana cara membuat efek tulisan berkedip ...
     2. Untuk membuat link berkedip, Klik pada "Page Element" trus pilih"Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu):

    <blink><a href="http://linkmu.blogspot.com/" target="_blank">DESKRIPSI LINK MU</a></blink>
     setelah di tambahi kode <blink>DESKRIPSI LINK MU</blink>

    HASILNYA akan terlihat seperti ini :

    DESKRIPSI LINK MU
    Mudah bukan? Happy Blogging ...

    Sumber : http://www.seby-antoe.com/

    Membuat Tombol Menarik dengan CSS3

    CSS, sangat berguna sekali pada materi web design, apalagi pada perkembangan baru-baru ini, nah untuk menambah skill kita di CSS, rieztoshare posting tentang cara membuat tombol dengan CSS3, ya walaupun artikel bukan punya saya asli, apa salahnya sih kita share, hehehe....
    Ouke, yuk kita ikuti artikelnya.





    Apa yang menarik dengan Tombol ini?
    1. 100% CSS, tanpa Image ataupun Javascript.
    2. Fasilitas Gradient didukung oleh berbagai browser (IE, Firefox 3.6, Chrome, and Safari).
    3. Fleksibel dan scalable. ukuran dan lengkungan tombol dapat disesuaikan dengan mengubah ukuran font dan nilai padding.
    4. Memiliki 3 state, yaitu Normal, Hover dan Active.
    5. Dapat diimplementasikan pada berbagai element HTML, diantaranya: a, input, button, span, div, p, h3, dsb.
    6. Jika browser tidak mendukung CSS3 tombol akan tetap akan tampil, tapi hanya akan tampil dengan style standard tanpa gradient dan lengkungan.
    Tampilan pada berbagai BrowserPada gambar di bawah ini, dapat dilihat perbedaan tampilan pada beberapa browser yang mendukung CSS3, yang mendukung sebagian, dan yang tidak mendukung sama-sekali.


    Status Tombol
    Tombol CSS3 ini mendukung 3 state/status. yaitu:
    1. Normal state = Ketika tombol ini normal.
    2. Hover = Ketika tombol ini di dekati oleh mouse.
    3. Active = Ketika tombol ini mendapatkan focus atau di klik.
    Berikut adalah contoh tampilan dari tombol CSS3 berdasarkan status/state tombol tersebut:

    Styles Umum Untuk Tombol Ini
    Kode berikut adalah style umum untuk class button yang nantinya dapat dipergunakan pada element HTML dan dikombinasikan dengan class-class lainnya.
    .button {      display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .button:hover {
        text-decoration: none;
    }
    .button:active {
        position: relative;
        top: 1px;
    }
    Style untuk Gradiasi
    Kode di bawah ini adalah CSS styling untuk tombol berwarna oranye yang akan diberi nama dengan class orange. Baris pertama adalah latar belakang untuk browser non-CSS3, baris kedua adalah untuk browser WebKit, baris ketiga adalah untuk Firefox, dan baris terakhir adalah filter gradient yang hanya dibaca oleh Internet Explorer.
    orange {
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    }
    .orange:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    }
    .orange:active {
        color: #fcd3a5;
        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    }
    Bagaimana menggunakannya dalam HTML?
    Mari kita umpamakan Anda ingin menggunakan Tombol yang berwarna Biru. Maka langkah-langkah yang perlu Anda lakukan adalah dengan Mendownload Script CSS di Bawah Ini Terlebih Dahulu:

     Dalam file zip tersebut terdapat tombol.css yang dapat dimasukkan ke dalam HTML atau dapat juga di link dengan cara seperti berikut:
    <!-- Tambahkan Link ke CSS untuk Tombol CSS3 -->
    <link href="tombol.css" rel="stylesheet" type="text/css" />
    Setelah menambahkan tag di Atas, Kita dapat menyisipkan class untuk Element-element HTML yang ingin dijadikan tombol. Misalnya Tag # yang ingin dijadikan menjadi tombol berwarna biru, maka kode yang harus digunakan adalah sebagai berikut :
    <a href="#" class="button blue">Ini Tombol Biru</a>
    Nah Mudah kan?. Pada file di Atas pun terdapat contoh.html yang dapat dijadikan referensi penggunaan tombol.css. Berikut adalah tampilan contoh.html yang akan Anda dapatkan bila Anda menggunakan Firefox versi terbaru:



    Bagaimana sob? tertarik untuk mencoba? silakan saja sob, selain praktis tips ini juga lumayan mudah untuk dicoba.
    Sekian dulu web design kali ini ya sobat, semoga bermanfaat dan termakasih...

    Sumber : http://www.rieztoshare.com/

    Cara Membuat Random Posts Di Blogger

     Login ke Dashboard blogger kemudian klik Design / Rancangan / Tata Letak.
    Klik Add a Gatget, kemudian pilih Gadget HTML/JavaScript.
    Masukkan script random post berikut di dalam Gadget HTML/JavaScript tersebut
    <script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=10;function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
    callback=randomposts" type="text/javascript"></script>
    Setelah script random post di atas sudah di masukkan jangan lupa untuk menyimpan nya.
    Cara ini memang benar-benar bisa menampilkan random post di blogger.

    Membuat Tombol Like Button Diatas Postingan

    1. Log In dulu ke blogger.
    2. Klik Rancangan lalu pilih Edit HTML.
    3. Centang Expand Template Widget dan back up dulu template anda.
    4. Cari kode seperti ini
    <data:post.body/>
    5. Setelah ketemu tambahkan kode berikut ini di atas kode tadi. Biasanya ada 2 kode seperti tersebut pasang yang kode ke 2 tadi, dan pasang sesuai selera di bawah atau di atas posting. Kalo di atas sebelum kode tersebut dan kalo di bawah posting setelah kode tersebut.
    Warna merah, bisa diganti dengan kode warna yang lain. Light untuk template putih. Dark untuk template warna hitam.

    6. Save template.


    Membuat Blue Matrix Background

    1. masuk ke blogger.com
    2. masuk dengan akun anda
    3. pilih rancangan
    4. pilih edit HTML
    5. cari kode </head> 
    6. letakkan kode di bawah diatas kode diatas
    7. <script src='http://eko-yulianto.googlecode.com/files/Blue%20Matrix.txt' type='text/javascript'/>
    8. kalo sudah simpan apa yang terjadi


      Cara Membuat Random Post Plus Gambar Bawaan Blogspot

      Cara Membuat Random Post Plus Gambar Bawaan Blogspot - Akhirnya dapat juga trik untuk membuat random post dengan gambar. Udah nyari kesana-kesini yang ada cuman random post biasa sekalinya ada juga menggunakan widget dari linkwithin.com bisa aja sih tapi agak bosen aja make link within buat random post bergambar. Saya pengen sedikit perbedaan, jadi saya cari yang asli dari blogspot dan ternyata berhasil ketemu.

      Yuk langsung kita bahas bagaimana caranya membuat random post dengan gambar dengan widget blogspot. Untuk mendapatkan widget tersebut silahkan klik disini atau logo add to blogger di bawah ini


      Setelah itu nanti anda akan dibawa kedalam pilihan seperti gambar widget di bawah ini:


      Saya akan jelaskan fungsi dari masing-masing kolom pada settingan widget tersebut:

      Maximum Length of Post Title - judul postingan Anda bisa terlalu panjang. Dalam hal ini Anda dapat membatasi judul untuk x jumlah karakter menggunakan parameter ini.

      Snippet Style - Anda dapat menampilkan potongan dengan Post Ringkasan, Pos Miniatur, atau keduanya atau tidak ada.

      Feed - Opsi default "Ringkasan Feed" akan memindai ringkasan feed posting Anda. Ini adalah pilihan lebih cepat dan efisien dan saya akan menyarankan Anda untuk memilih satu ini. Jika Anda memilih "Full Feed", gadget akan lambat tetapi anda akan mendapatkan Thumbnail YouTube juga.
      Catatan: - Jika Anda ingin mengambil gambar atau thumbnail YouTube, maka anda harus memiliki "Site Feed" set ke Penuh. Jika Anda memilih untuk Miniatur Media saja, maka umpan pendek akan digunakan secara default.

      Thumbnail Dimensions - Ukuran Thumbnail dalam piksel. Gadget tidak menghasilkan apapun Thumbnail. Itu hanya menggunakan media thumbnail, thumbnail YouTube, atau gambar apapun dalam pos dan skala ke dimensi tertentu

      Summary Length - Jika Anda telah memilih untuk menampilkan posting Ringkasan, maka Anda dapat mengontrol panjang ringkasan (dalam karakter)

      Post Meta Style - Anda dapat menampilkan Post Date, Komentar Count dan Read More Link.You dapat memilih kombinasi dari ketiganya.

      Font dan Ukuran Font - By Default, font wadah dan Ukuran Font yang diwariskan ke dalam Gadget. Tetapi jika Anda menggunakan template 3 pihak, maka ini mungkin tidak benar diwarisi. Dalam hal ini Anda dapat menggunakan opsi ini untuk lebih naik parameter ini.

      Extra Styling - Memungkinkan Anda untuk menentukan posisi Miniatur, dan apakah untuk menggarisbawahi link atau tidak.

      Border Color - Anda dapat memilih No Border, atau pilih salah satu dari 140 warna yang tersedia. Jika Anda tidak yakin tentang bagaimana warna-warna ini terlihat seperti, kemudian mengambil lihat ini bagan warna pada W3Schools - http://www.w3schools.com/html/html_colornames.asp

      Link Color and Text Color - Secara default, warna akan diwariskan dari Blog Anda. Jika Anda ingin menimpa ini, Anda dapat memilih salah satu dari 140 warna yang berbeda.
      (Warna yang disediakan dalam Dropdown (dan bukan sebagai bidang teks) untuk mengatasi masalah dengan API)

      Read more text - bidang ini sengaja ditambahkan untuk membantu blog yang tidak ditulis dalam bahasa Inggris. Awalnya saya dulu "Lainnya» "sebagai teks Baca lebih tanpa mengambil input pengguna. Melihat ini pada Blog non-Inggris adalah sedikit canggung

      Buat Kolom Diatas Kolom Posting Pada Magazine template 2

      Tutorial kali ini khusus Kang Eko tujukan bagi anda para pengguna template magazine 2 yang ingin menambahkan kolom baru di atas kolom posting. Ini di sebabkan setelah melakukan inspeksi ke beberapa pengguna template magazine 2, ternyata banyak diantaranya yang sering memasang iklan atau apa saja di atas kolom posting, namun tampilannya menjadi kurang enak untuk di lihat. Coba perhatikan gambar di bawah ini :

      ads-magazine-2

      Coba bandingkan dengan gambar berikut :

      ads-magazine-2(2)

      Di lihat dari segi fungsi, kedua duanya memiliki fungsi yang sama yaitu memasang iklan di atas kolom posting, tidak ada yang salah dengannya. Namun, secara estetika gambar yang kedua jauh lebih baik. Disamping memiliki fungsi memasang iklan, nilai keindahan dari template tersebut tidak menjadi rusak ( itu menurut kang Rohman lho ).
      Untuk menciptakan seperti gambar yang kedua seperti contoh di atas, anda perlu membuat kolom baru di atas kolom posting. Bagi yang berminat, silahkan ikuti langkah-langkah berikut ini :

      1. Silahkan login ke Blogger dengan ID anda.
      2. Klik Tata Letak
      3. Klik tab Edit HTML.
      4. Klik tulisan Download Template Selengkapnya.
      5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
      6. Cari kode ]]></b:skin>.
      7. Copy paste kode berikut persis di atas kode  ]]></b:skin>.
      .topcolumn{
      width: 578px;
      padding:10px 0px 10px 10px;
      background:#fff;
      margin:0px 0px 10px 0px;
      text-align:left;
      border:1px solid #C0C0C0;
      }
      .topcolumn .widget{
      }
      1. Lihat ke bagian bawah, lalu cari kode berikut :

        <div id='main-wrapper'>

      2. Copy paste kode berikut persis di bawah kode <div id='main-wrapper'> :

        <b:section class='topcolumn' id='topcolumn' preferred='yes'/>

      3. Klik tombol SIMPAN TEMPLATE.
      4. Selesai.

      Langkah selanjutnya, silahkan klik tab Elemen Halaman, maka anda akan melihat tata letak template menjadi seperti contoh gambar berikut :

      elemen-halaman


      Sekarang anda sudah bisa memasukan apa saja di atas kolom posting anda tanpa harus mengganggu keindahan dari template anda.

      Selamat mencoba!

      Buat Kolom Dibawah Header Pada Magazine Template 2

      Jika sebelumnya kang Eko telah membuat tutorial tentang , maka pada kesempatan kali ini mencoba alternatif lain yaitu membuat kolom dibawah kolom header. Ini tentunya berguna bagi anda yang suka menyimpan iklan langsung di bawah header.
      Jika menilik pada desain asli magazine template 2, maka anda tentu saja tidak dapat menyimpan iklan atau apa saja langsung di bawah header. Berikut desain asli dari magazine template 2 :
      kolom-bawah-header_03

      Dan kita akan membuatkan kolom baru yang langsung berada di bawah kolom header, berikut contoh ilustrasi dari penempatan iklan langsung di bawah kolom header :
      kolom-dibawah-header_03

      Tertarik ingin membuat kolom langsung di bawah header? berikut adalah cara lengkapnya :
      1. Silahkan login ke Blogger dengan ID anda.
      2. Klik Tata Letak
      3. Klik tab Edit HTML.
      4. Klik tulisan Download Template Selengkapnya.
      5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
      6. Cari kode ]]></b:skin>.
      7. Copy paste kode berikut persis di atas kode  ]]></b:skin>.
      .adscolumn{
      width:933px;
      padding:10px 3px;
      background:#fff;
      margin:5px 10px 0px 10px;
      text-align:center;
      border:1px solid #C0C0C0;
      }
      .adscolumn .widget{
      }
      1. Lihat ke bagian bawah, lalu cari kode berikut :
        <div id='main-wrapper'>
      2. Copy paste kode berikut persis di atas kode <div id='main-wrapper'> :

        <b:section class='adscolumn' id='adscolumn' preferred='yes'/>

      3. Klik tombol SIMPAN TEMPLATE.
      4. Selesai.

      Langkah selanjutnya, silahkan klik tab Elemen Halaman, maka anda akan melihat tata letak template menjadi seperti contoh gambar berikut :
      layout

      Sekarang anda sudah bisa memasukan apa saja langsung di bawah kolom header.  Selamat mencoba!

      Membuat Refresh

      Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh yang ada pada tool bar.

      Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :


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


      Simpan kode di atas antara <head> .... </head>

      sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.

      Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

      Fungsi Redirect ini bisa di buat dengan kode :


      <meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini"/>


      Selamat mencoba.

      Membuat Recent Post Berjalan

      Hello sobat blogger yang berbahagia, sekitar beberapa waktu yang lalu eko pernah berbagi tentang cara membuat scroll pada recent post, namun sekarang  scroll pada recent post tidak lagi menarik dibandingkan dengan postingan pada kali ini, yaitu membuat recent post berjalan, yaps contohnya bisa sobat lihat disebelah kanan blog ini.
      Yuks langsung saja kita buat.
      1. Pertama login blog sobat, ingat lho blog sobat bukan blog orang lain, gkgkgkgk......
      2. Pilih Tata letak, kemudian Tambah gadget, lalu pilih HTML/JavaScript.
      3. Kemudian masukan kode berikut ke gadget yang akan sobat buat sebagai popular post.
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
      <style type="text/css" media="screen">

      <!--



      #spylist {

      overflow:hidden;

      margin-top:5px;

      padding:0px 0px;

      height:350px;

      }

      #spylist ul{

      width:220px;

      overflow:hidden;

      list-style-type: none;

      padding: 0px 0px;

      margin:0px 0px;

      }

      #spylist li {

      width:208px;

      padding: 5px 5px;

      margin:0px 0px 5px 0px;

      list-style-type:none;

      float:none;

      height:70px;

      overflow: hidden;

      background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;

      border:1px solid #ddd;

      }



      #spylist li a {

      text-decoration:none;

      color:#4B545B;

      font-size:11px;

      height:18px;

      overflow:hidden;

      margin:0px 0px;

      padding:0px 0px 2px 0px;

      }

      #spylist li img {

      float:left;

      margin-right:5px;

      background:#EFEFEF;

      border:0;

      }

      .spydate{

      overflow:hidden;

      font-size:10px;

      color:#0284C2;

      padding:2px 0px;

      margin:1px 0px 0px 0px;

      height:15px;

      font-family:Tahoma,Arial,verdana, sans-serif;

      }



      .spycomment{

      overflow:hidden;

      font-family:Tahoma,Arial,verdana, sans-serif;

      font-size:10px;

      color:#262B2F;

      padding:0px 0px;

      margin:0px 0px;

      }



      -->

      </style>



      <script language='javascript'>



      imgr = new Array();



      imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";



      imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";



      imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";



      imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";



      imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

      showRandomImg = true;



      boxwidth = 255;



      cellspacing = 6;



      borderColor = "#232c35";



      bgTD = "#000000";



      thumbwidth = 70;



      thumbheight = 70;



      fntsize = 12;



      acolor = "#666";



      aBold = true;



      icon = " ";



      text = "comments";



      showPostDate = true;



      summaryPost = 40;



      summaryFontsize = 10;



      summaryColor = "#666";



      icon2 = " ";



      numposts = 10;



      home_page = "http://BLOGSOBAT.BLOGSPOT.COM/";



      limitspy=4

      intervalspy=4000



      </script>



      <div id="spylist">

      <script src='http://eko-yulianto.googlecode.com/files/recentpostsbergerak.js' type='text/javascript'></script>

      </div>
      Note: Ganti tulisan yang berwarna merah dengan URL blog sobat.
      4. Yang terakhir, simpan gadget. dan lihat hasilnya...

      Ouke cukup sekian tips pada kesempatan kali ini semoga bermanfaat dan terimakasih. Oiya sob saya dapet scriptnya dari http://www.ideini.com

      Sumber : http://www.rieztoshare.com/

      Pasang Iklan Baris Gratis Tanpa Daftar / Registrasi

      Pasang Iklan Baris Gratis Tanpa Daftar atau Registrasi. Anda mencari web iklan baris gratis tanpa daftar atau registrasi? Tapi sebelumnya saya akan menjelaskan keuntungan beriklan gratis ini.

      Banyak penyedia iklan baris gratis tanpa daftar atau registrasi, diantara keuntungannya anda tidak perlu mengeluarkan biaya untuk iklan ini. Dan apabila situs iklan sudah mempunyai rating tinggi, maka iklan anda akan cepat terindex oleh berbagai mesin pencari, dan otomatis iklan anda akan mendapat banyak kunjungan.

      Untuk menaikan penjualan bisnis anda, atau mendapatkan refferal yang banyak, silahkan pasang iklan gratis tanpa daftar, kunjungi


      www.iklan-baris-gratis.com

      Iklan-baris-gratis.com merupakan web iklan baris gratis tanpa daftar / registrasi. Anda cukup mengisi iklan anda, dan saat itu pula iklan langsung tampil.

      Apabila ingin iklan anda selalu di atas, iklan-baris-gratis.com juga menyediakan iklan banner, iklan premium dan iklan link dengan harga yang sangat murah.

      Anda bisa memasarkan berbagai produk, dan anda juga bisa menemukan beberapa kategori, diantaranya : iklan rumah dijual, iklan motor murah dijual, iklan mobil dijual, iklan mobil bekas bandung, iklan mobil bekas jakarta, iklan mobil bekas semarang, iklan mobil bekas kota-kota lainnya, iklan laptop termurah, iklan poskota, iklan republika, iklan kompas, iklan lowongan kerja terbaru, iklan blackberry, iklan ponsel terbaru, iklan ponsel bekas, iklan laptop murah, iklan komputer murah, dan berbagai iklan lainnya.

      Pasang Iklan Baris Gratis Tanpa Daftar atau Registrasi kunjungi www.iklan-baris-gratis.com

      Cara Membuat Menu Navigasi Horisontal CSS3

      Cara Membuat Menu Navigasi Horisontal Animasi CSS3 - Tutorial kali ini saya pastikan akan membuat tampilan blog sobat lebih bergairah,  kali ini kembali saya akan memposting artikel serupa namun berbeda. Bedanya dimana?? nanti sobat blogger yang nilai sendiri. Silahkn ikuti tutorial singkat berikut untuk membuat menu animasi mendatar dengan CSS3.

      DEMO

      1. Login ke akun blogger sobat
      2. Klik Rancangan --> Edit HTML
      3. Letakkan kode berikut di atas kode ]]></b:skin>
      .Hansuperanima{
              position:relative;
              margin:15px 0 0 10px;
              overflow:hidden;
              margin:0;
              float:left;
              padding:0;
              background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
      }
      ul#superAnima{
              width:599px;
              margin:10px 0 20px;
              padding:0;
              margin:3px 4px 3px 4px;
              clear:both;
              float:left;
      }
      ul#superAnima li{
              margin:0;
              padding:0;
              overflow:hidden;
              float:left;
              height:40px;
      }
      ul#superAnima li a.anima{
              padding:10px 10px;
              font:10px Arial;
              float:left;
              color:white;
              text-decoration:none;
              text-transform:uppercase;
              text-shadow:1px 1px 1px #000;
              clear:both;
              height:18px;
              line-height:20px;
              background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x;
              text-align:center;
              transition:all 1.2s ease-in-out;
              -o-transition:all 1.2s ease-in-out;
              -moz-transition:all 1.2s ease-in-out;
              -webkit-transition:all 1.2s ease-in-out;
              -ms-transition:all 1.2s ease-in-out;
              font-weight:bold;
              border:1px solid #999;
      }
      ul#superAnima li a.anima:hover{
              transform:scale(1.0) rotate(0deg) translate(0, -40px);
              -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
              -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
              -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
              -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
      }
      ul#superAnima li a.anima span{
              padding:10px 9px;
              color:transparent;
              opacity:0.2;
              filter:alpha(opacity=20);
              border:2px solid transparent;
              transition:all 1.6s ease-out;
              -o-transition:all 1.6s ease-out;
              -moz-transition:all 1.6s ease-out;
              -webkit-transition:all 1.6s ease-out;
              -ms-transition:all 1.6s ease-out;
              transform:scale(8.0) rotate(0deg) translate(0,-10px);
              -o-transform:scale(8.0) rotate(0deg) translate(0,-10px);
              -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
              -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
              -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
      }
      ul#superAnima li a.anima span:hover{
              opacity:1.0;
              filter:alpha(opacity=100);
              padding:4px 9px;
              height:18px;
              transform:scale(1.0) rotate(0deg) translate(0,0);
              -o-transform:scale(1.0) rotate(0deg) translate(0,0);
              -moz-transform:scale(1.0) rotate(0deg) translate(0,0);
              -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
              -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
              color:#FF0;
              border:2px solid #000;
              background:#555;
              text-shadow:1px 1px 1px #000;
              box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
              border-radius:4px;
      }
      ul#superAnima li{
              border:1px solid transparent;
              background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
      }
      ul#superAnima li:hover{
              background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
              border:1px solid #777;
      }
      Catatan:
      Sesuaikan kode angka yang berwarna biru dengan ukuran template.

      4. Klik save dan lanjut ke tahap ke 2.
      5. Klik Rancangan --> Elemen laman
      6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript..
      7. Masukkan kode berikut kedalam kotak HTML/Javascript.
      <div class="Hansuperanima">
      <ul id="superAnima">
      <li><a class="anima" href="http://eko-tipsntrick.blogspot.com/">Home<br /><br /><span>Home</span></a></li>
      <li><a class="anima" href="http://eko-tipsntrick.blogspot.com/feeds/comments/default">Comment<br /><br /><span>Comment</span></a></li>
      <li><a class="anima" href="http://eko-tipsntrick.blogspot.com/">Eko Yulianto<br /><br /><span>Eko Yulianto</span></a></li>
      <li><a class="anima" href="http://facebook.com/ggkjy">My Facebook<br /><br /><span>My Facebook</span></a></li>
      <li><a class="anima" href="http://twitter.com/eko_boement25">My Twitter<br /><br /><span>My Twitter</span></a></li>
      <li><a class="anima" href="http://eko-tipsntrick.blogspot.com/feeds/posts/default">Feed Blog<br /><br /><span>Feed Blog</span></a></li>
      </ul>
      </div>
      Silahkan ubahsuaikan semua kode yang bercetak tebal ( bold ) sesuai keinginan. Sekian tutorialnya dan semoga membantu..