Social Icons

Tampilkan postingan dengan label Seo. Tampilkan semua postingan
Tampilkan postingan dengan label Seo. Tampilkan semua postingan

Selasa, 19 Februari 2013

Membuat Gulungan di Sudut Blog

 Aksesoris blog di butuhkan bagi setiap blog yang masih aktif, aksesoris blog dapat memperindah dan mempercantik tampilan blog kita agar pengunjung betah mengunjungi blog kita berkali - kali.  Namun jika terlalu banyak aksesoris mengakibatkan blog menjadi lola' (loading lama) dan pengunjung enggan untuk mampir ke blog kita lagi, kebanyakan pengunjung blog menutup blog yang dikunjungi nya sebelum semua kode pada blog yang dikunjunginya karena terlalu lama loadingnya.  Maka dari itu, kita harus pintar memilih aksesoris yang cocok untuk blog kita, bukan semua aksesoris di masukan di blog kita.

        Pernah kalian melihat blog yang sudutnya mempunyai gulungan-gulungan aneh ?  Nah.. kali ini kita akan membahas gimana cara Membuat Gulungan di Sudut Blog, kalau belum pernah lihat cek ke situs Radar Banyuwangi.  Gimana ?  Tertarik dan cocok untuk di blog kalian ?  Ikuti langkah di bawah berikut


  1. Login ke Blogger
  2. Klik Design > Edit HTML > centang 'Expand Widget Template'
  3. Pasang kode berikut di atas kode ]]></b:skin>

    #pageflip {
    position: relative;
    }
    #pageflip img {
    border: none;
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
    }
    #pageflip .msg_block {
    width: 50px; height: 50px;
    position: absolute;
    right: 0; top: 0;
    background: url(http://kon.tl/deopra) no-repeat right top;
    text-indent: -9999px;
    }

    #Ganti kode yang berwarna hijau dengan link kode gambar (300px x 300 px) yang kalian inginkan
    #Bisa juga diganti dengan gambar dengan link berikut http://kon.tl/deopr

  4. Kemudian pasang lagi kode berikut di bawah kode <b:skin><![CDATA[ atau <b:skin><![CDATA[/*

    <script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.js
    ' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){
    $("#pageflip").hover(function() {
    $("#pageflip img , .msg_block").stop()
    .animate({width: '307px',height: '319px'}, 500);
    } , function() {
    $("#pageflip img").stop()
    .animate({width: '50px',height: '52px'}, 220);
    $(".msg_block").stop()
    .animate({width: '50px',height: '50px'}, 200);
    });
    });
    </script>

  5. Selanjutnya pasang kode berikut di bawah kode <body>

    <div id='pageflip'>
    <a href='http://dopind.blogspot.com/' target='_blank'>
    <img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
    <span class='msg_block'/>
    </a>
    </div>

    #Ganti kode yang berwarna Hijau dengan alamat blog atau link yang kalian ingin pasang

  6. Terakhir klik 'Save Template' dan tinggal lihat hasilnya seperti apa ^^

Kamis, 14 Februari 2013

Cara Mengganti Warna Background Blog Otomatis


Cara Mengganti Warna Background Blog Otomatis – Banyak cara untuk membuat variasi dan memperindah tampilan blog. Salah satunya adalah dengan menempatkan widget untuk mengganti warna background otomatis ini di sidebar blog anda, sehingga pengunjung dapat memilih warna background kesukaan mereka. Selain supaya kita juga ngga bosan dengan tampilan background yang itu-itu saja, dan pengunjung yang datang pun kita harapkan mendapatkan kenyamanan sehingga mereka betah berlama-lama membaca  di blog kita. Contoh penggunaan widget pengganti warna background blog otomatis ini dapat sobat lihat langsung di sidebar blog ini.


Cara Mengganti Background Blog :
1.       Login ke dashboard blogger anda.
2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3.       Copy script yang ada dibawah ini dan paste pada gadget.
<div class="widget-content">
<center><b>Pilih Warna Kesukaan Anda</b></center>
<br/>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" width="100%" height="20">
<tbody><tr>
<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">
</td>
<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">
</td>
<td onclick="bgChange('#008080')" bgcolor="#008080">
</td>
<td onclick="bgChange('#808080')" bgcolor="#808080">
</td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">
</td>
<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">
</td>
<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">
</td>
<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">
</td>
<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">
</td>
</tr></tbody></table>
</div>
4.      Silahkan sobat edit teks tulisan yang berwarna merah dan kode pilihan warna yang berwarna biru dengan warna-warna kesukaan anda. Untuk kode warna dapat dilihat disini.
5.       Save / Simpan.
Mudah dan gampang bukan ? Pada widget pengganti warna background ini hanya ada 9 pilihan warna background, jika sobat ingin menambahkannya copy saja kode yang terakhir sehingga kolom warna akan bertambah. Kalau masih bingung, baca lagi postingan sebelumnya tentang cara membuat tabel dan kolom. Semoga tips Cara Mengganti Warna Background Blog ini bermanfaat untuk anda.

Rabu, 06 Februari 2013

7 Plugin Firefox yang Wajib Dimiliki Para Web Developer

Berkutat berjam-jam di depan komputer untuk coding memang menyenangkan kalau Anda jadikan itu sebagai hobi, tapi kalau sedang diuber dengan deadline, pasti rasanya otak mau serasa pecah. Untuk membantu agar kerja Anda sebagai web developer, ada sejumlah tools yang wajib dimiliki. Apa saja itu? Yuk simak lebih lanjut.

Web Developer

image

Ini dia add-ons firefox yang bisa dibilang nyaris komplit. Saat tulisan ini diterbitkan, juga sudah tersedia dalam bentuk ekstensi di Google Chrome. Dengan add-ons ini banyak hal bisa dilakukan. Dari sekedar untuk memvalidasi CSS, HTML maupun Javascript yang Anda buat, Anda juga bisa 'mengintip' garis-garis pembatas yang dibuat oleh box div maupun kerangka tabel (melalui Display Div Order), menampilkan informasi warna, metatag, navigasi link, link image, ukuran dokumen HTML serta menampilkan informasi form secara detail. Ada juga fitur disable JS, disable CSS maupun Cookie dan Cache. Dari yang disebutkan tadi, masih banyak sekali fiturnya yang bisa dinikmati oleh para developer web, untuk mendownload add-ons, silahkan diunduh di sini untuk Firefox dan di sini untuk Google Chrome.

Firebug

image

Add-ons yang satu ini paling ciamik kalau dipakai untuk debug program. Anda bisa mengedit CSS, Javascript dan HTML secara langsung dan melihat hasilnya. Plugin ini banyak dipakai berbagai browser selain untuk debug juga bisa dipakai untuk memantau performa web buatan Anda. Anda juga bisa melihat visualisi CSS yang Anda buat, memonitor aktivitas jaringan, memodifikasi DOM dan secara cepat menemukan error pada Javascript yang telah Anda buat sebelumnya. Untuk menggunakannya, silahkan download di sini.

FireFTP

image

Akan sangat menyenangkan kalau Anda tak perlu menginstalasi FTP client. Ya itulah gunanya kalau Anda memiliki add-ons FireFTP pada browser Anda. Sudah bisa dipastikan plugin yang satu ini sangat berguna untuk upload dan download data ke server tujuan Anda. Selain itu Anda juga bisa melakukan perubahan permission chmod, menampilkan hidden files seperti .htaccess serta operasi file contohnya untuk rename file, membuat direktori dan lain sebagainya. Untuk memilikinya silahkan download di sini.

FireShot

image

Ada kalanya kita butuh meng-capture tampilan halaman web yang telah kita buat, FireShot hadir mengurangi beban di pundak kita agar tidak bolak balik buka Photoshop untuk sekedar bikin screenshot halaman web. Kita juga bisa menambahkan caption teks dari screenshot yang kita buat. Ingin mencobanya, silahkan download di sini.

Greasemonkey

image

Sering mengunjungi web tertentu dan mulai bosan dengan tampilannya? Kini Anda bisa mengubah tampilan web tersebut di browser Anda. Bagaimana caranya? Greasemonkey siap membantu Anda, Anda dapat mengedit script dari website tersebut dan menyimpannya di lokal, maka browser Firefox akan membaca Javascript yang Anda buat dan menampilkannya seolah-olah website tersebut 'ganti kulit'. Ada banyak javascript sederhana yang ditawarkan untuk digunakan bersama add-ons yang unik satu ini. Anda bisa mengunduhnya di sini.

ColorZilla

image

Mendevelop website kadang membuat mata kita 'jenuh' akibatnya warna yang kita pilih itu-itu saja, akan sangat baik bila Anda memasang ColorZilla di browser Firefox Anda agar ketika Anda berselancar dan menemukan website yang warnanya cantik dan menarik bisa Anda 'contek' kode RGB-nya. Nah, tunggu apalagi, pasang yuk add-ons yang satu ini dengan mendownload di sini.

Page Speed

image

Performa dan kecepatan akses suatu website merupakan poin penting dari kesuksesan sebuah website. Itu merupakan tolok ukur yang harus kita perhatikan ketika membuat website, untungnya sudah ada Page Speed yang mana akan membantu kita mengukur kecepatan dan memberikan solusi-solusi yang baik untuk meningkatkan performa website kita. Selain tersedia online, kini Anda bisa memilikinya di browser Anda langsung, silahkan download di sini